設計師從蘋果官網(www.apple.com)能學到哪些網頁設計的重要原則和啟發?


Hi-iD 說的很好。再說幾個具體的點:

1. 體量感
當你進入 Apple 的網站,看著空靈的頁面上碩大的產品/廣告畫面,在周圍留白的襯托之下,感覺如何?
屏幕上圖片的尺寸、背景以及周圍的留白,都能夠體現出元素的所謂「體量感」,使其視覺衝擊力更強,更容易被用戶的眼睛和大腦所接受。在現實世界中的海報設計也常常能看到這樣的手法。非專業的設計中常常犯的錯誤就是試圖充分利用每一點空間(最有代表性的是國內的 WAP 網站設計...),讓用戶感覺進了北京的動物園服裝批發市場一樣。與之對比的是那些奢侈品商店,大家可以體驗一下異同。
當你試圖「衝擊」用戶,就必須排除干擾,將最重要的元素放大到極致,一下子抓住用戶。

2. 層次
那麼多產品內容,如何展示出來? Apple 網站常用的手法(也是設計的通用原則)是將最重點的信息放到用戶最初看到的頁面里,而將更詳細的信息放到下一級頁面,或者在詳情頁面里,頂部是摘要信息,頁面下面才是就每個特性的具體說明。
商業寫作中常用的「金字塔原理」,是根據讀者的閱讀習慣,將最概括的內容放到最前面呈現給用戶,然而逐層展開,每一層都會是下一層內容的概括。在信息產品(包括網站等)的界面中也需要這樣,別指望用戶會從上到下聽你娓娓道來... 我們必須讓「錨點」發揮作用。
無論你有多少個點想要呈現給用戶,別忘了,用戶的認知能力有限、耐心有限,有層次就意味著你必須取捨,將真正重要的凸顯出來,將次要的淡化到下一個層次去。

3. 減少任務噪音和視覺噪音
Apple 眾多產品(例如 iPhone)成功的關鍵之一就是對於任務噪音和視覺噪音的控制(這兩者經常聯繫在一起)。
沒有多餘的裝飾、不同灰度字體顏色的使用、間距、留白、結構化的布局 ...... 好吧,我們的眼睛都不喜歡「噪音」。
Google 不也在做類似的事么 ......


搬用、抄襲、模仿 http://Apple.com 的網站隨時都可以碰到,那麼比如這些網站與 http://Apple.com 的差別就可以看出 http://Apple.com 牛逼的地方,最簡單的就是直接疊加比較。

可別說是細節,因為細節是設計內容的一切,如果你也認同「噱頭」(中性詞)不是細節的話。

我到現在始終堅持一個看法,無論對於設計師還是普通消費者,從設計的角度去看,人們面對 Apple 設計的品質最先接觸的那一層氣流,它也是烘托起 Apple 設計的主要力量,使其在平庸中鶴立,無論是 Apple 的硬體,軟體還是網站設計,都是一個東西。

它就是尺度

尺度說起來是一個基本原則,也是設計課程中最先接觸的美學原則,也是人們開始設計最早使用的,比如同樣排列一組東西,排的好就是一種設計。

Apple 的設計上的尺度為什麼值得一說,一個原因是雞群們對這一點太不講究了,他們沒有像設計師應該做的那樣去追求尺度,看看周圍有多少人是「差不多就行了」。

現在很多人都會說「像素級」,這聽起來有點奇怪,為什麼一個設計介質的基本單位的遵守都可以拿出來作為一種「崇高」的追求呢?那是因為周圍的人太隨便了,「隨便」這一點就可以否定一個設計的根基,因為設計是追求不是完成任務。

那麼「像素級」的追求是尺度嗎,不是,「像素級」是單位,尺度是關係,所以可以看到很多達到了「像素級」依然不出色的設計,尺度是一個可不斷追求的目標,所以即使在「像素級」上做了一些對齊工作,仍然不能稱這是出色的設計。

尺度包括比例尺寸、明暗和色彩梯度、動畫變換速度等等,但最重要的是關係。比較一下 http://Apple.com 或 Mac OS 上與其他網站及 Windows 上一個元素周圍所留的空白,這可不僅關係到視覺上的愉悅,也關係到觸覺上的愉悅。

這一切都關於尺度,所以從 http://Apple.com 上可以學到什麼,如果只是用網格系統去分析會陷入機械,需要觀看和比較,不僅要感性的去分析,同時也要進入「像素級」地用眼睛去分析。

最近流傳一張 Apple 標誌的分析圖,http://www.iainclaridge.co.uk/studio/wp-content/uploads/2011/07/apple_logo1.jpg 這種分析是一個扯淡,實際設計中比這更深刻。尺度的追求不是記住幾個常用比例就行,雖然不必要都想柯布那樣去發展自己的一套系統(模度理論,紅尺藍尺繞死人),在尺寸關係一層層相上壓,但是必須要用眼睛去追求,在這一個元素的設計中,8 px 到 15 px 之間有一個唯一的尺寸需要你去尋找,在一個局部一個整體的設計中,都有那麼一個個「唯一」等著你去找到,而不是「大概差不多」。

好像什麼也沒說。:-)


除了學它的優點,也要避免和蘋果中國官網一樣犯跨國公司中文網站都容易犯的字型大小錯誤:
為什麼蘋果中文官網的字體有的消除鋸齒有的沒有? http://www.zhihu.com/question/20222415


觀摩細節,各種色彩,距離,線條,陰影,留白,字體等等,總會有啟發,嘿嘿


我看小米的官網設計師學得最多了。


我自己的一些感受是:
1, 簡潔的柵欄結構, 同一頁面不放過多的信息。 保證一個頁面關注一個核心信息,減少了噪音。
2, 導航欄清晰 易於尋找,並清晰的標識用戶當前所在位置。

3, 字體的採用,一種字體,通過不同的大小,樣式區別信息的重量。
4, 適當的色彩比例搭配,可以讓用戶在快速瀏覽的時候,迅速定位。比如到某信息後,會有一個相對高調的色彩做區分。


細節
層次
留白


有一個其他網站都不太注意,http://Apple.com特別在意的點:光影效果處理!
http://Apple.com的所有光都是從頂上打下來,陰影在正下方。
這個原則在iOS的設計中也應用到極致了。


感謝邀請。
個人覺得有幾點:
1.少即是多
2.留白
3.細節設計
4.節奏感


沒有強迫我閱讀和記憶更多的信息的一個頁面,就是好頁面。


簡單一句話。less is more。不再贅訴


簡單,邏輯明確,圖像漂亮


http://apple.com的交互設計做的很棒。尤其是響應式設計(responsive design)和動畫式轉換(animated transition,即操作時展示的動態效果)這兩塊。


用最簡單的文字和最具表現力的圖片描述了產品的賣點!


我的手機怎麼註冊不了app


精緻,耐看


視覺規範


蘋果的設計 是對產品做強調,符合蘋果一貫的設計模式,但是設計只是展示,不可能有粘性,而且沒有對後面內容的繼續查看的感覺,現在中國浮躁的情況下,應該很少有人點到後面去。


為什麼手機會出現403Forbidden,手機無線網不能用,什麼辦


我覺得不能為了設計而設計,一切為了網站目的服務。在功能、美觀、交互、創意中平衡。


推薦閱讀:

國內外有哪些好的前端實戰網站?
國外這種輪播圖風格去哪裡找?
Photoshop 里的色階、曲線、亮度對比度和色相飽和度一般怎麼做調整?有什麼可遵循的規律嗎?
非設計專業的大學生,如何自學成為一名設計師呢?

TAG:網頁設計 | 蘋果公司AppleInc | 用戶界面設計 | Web視覺設計 | 設計原則 |