Apple網站Web可用性規劃剖析

作剖析為規劃者來說，咱們在許多方面都被Apple影響著，無論是其優秀的操作系統、時尚前衛的消費產品，還是他們在Web/使用規劃上的引導趨勢。從 Apple的產品和線上網站可以看出，Apple始終關注用戶體會和可用性多一些。規劃上重視可用性是十分重要的，它必須給用戶留下一個好的印象，基于此，用戶會愈加喜歡購買Apple的產品，網站的可用性很大程度上反響了其產品的人性化操作。

可以學到許多常識，所以我用這個網站作為一個個案，研究一下Web規劃過程中需求留意的一些可用性方面的常識。

1. 流通有用的內容導航和菜單

主菜單（Main Menu）- Apple的菜單應該是最值得學習和仿效的規劃了。你可能會問，這樣如此簡略平常的導航為什么會強壯？首先，便是其規劃的一致性，這個主菜單的整個頁面中的定位明晰一致，是防止困擾用戶操作的最直觀的體現辦法。

此外，這個菜單也運用了十分簡略的鼠標hover事件，但這些體現現已足夠了。

JavaScript Mac 菜單：這個名聲在外的 Mac menu 是規劃最簡練、安排最緊湊的導航之一，是在有用的特定空間內最好的內容安排辦法。比較合理的內容安排更重要的便是操作的便當了，尤其響應鼠標的labels更是揮灑自如。

側邊欄菜單：側邊欄導航能給人深入的印象，可用性強。這個細巧的折疊層可以滿足有限區域內容容納更多鏈接內容的需求，即使有新的增加進來也不會對布局產生影響。

Gallery 導航： 除了基于導航規劃的內容安排外，圖片的安排也相同是極其重要的。Apple.com完成了一個十分簡略的圖片展示功用，除了運用了縮略圖菜單外，還運用了 lightbox 的體現效果，簡略簡練的規劃，卻讓用戶的操作體現的流通完美。

在每一個 lightbox gallery中，所有的圖片都是安排在 lightbox下，咱們不用再把時刻花費在“上一幅、下一幅”的點擊操作上了。

iPhone 特征菜單：又一個簡練但功用強壯的菜單， iPhone 的內容是一個基于多個列表的樣式化導航。

Bread Crumbs導航：面包屑導航告知用戶他當前的操作坐落整個網站的具體位置。Apple在每一頁面的底部都供給了這樣一個位置導航功用，關于希望無障礙地快速網站的用戶來說十分有用。

Site Map - 就Web的可用性來說，網站地圖是一個更不起眼的功用，但它在使用中卻必不可少。 Apple.com 有一個坐落頁腳的網站地圖，協助用戶更方便地找到需求的頁面

2. 規整流通的網格布局

任何網站規劃（或者說任何一個層規劃）都是從最簡略的網格開始的，網格是任何層和內容的基礎。Apple 在每一個頁面，一致運用規整的網格布局規劃，給用戶一個愉快的體會。

雖然Apple在每個頁面都運用了網格布局，但是頁面間的布局卻又各不相同，這就需求規劃的靈活性和創新意識。與此同時，堅持框架一致的網格區域，也能給用戶視覺上的愉悅。

3. 一致慎重的顏色，高質量的圖片

除流通的布局規劃外，頁面的顏色也在很大程度上反映了網站的可用性規劃。顏色計劃是一個網站表達感覺和視覺最直觀的要素，起決定性效果。

對比度/顏色規劃：Apple運用一個完美的顏色規劃，表達出一種和諧專業的感覺。平滑的對比度增強了內容的可辨識度。十分合理的網站飽和度提高了易讀性。此外，比較底子文字，鏈接文字的不同顏色也是為內容的可讀性增色不少。

圖片：和顏色緊密相關的是，圖畫的質量也是一個十分重要的方面。Apple.com在內容中混合了許多的圖畫，這些圖畫都是高質量的，在網站的專業性方面充當了一個相當重要的人物，好的圖畫需求在細節處下足功夫。

空地：合理的空地使用是完美頁面布局規劃必不可少的成分。恰當的使用可以防止混亂的布局，使布局看起來愈加明晰。Margins、行距離, 字距離的科學人性化規劃都會增強內容的可讀性，減少視覺上的閱覽疲憊。

4. 流通可掃描的內容安排

內容為王，是網站存在的底子。內容的安排形式會直接影響到用戶對內容的反映。尤其是一個像Apple.com這樣的網站，充溢許多的內容，是否可以掃描就成了十分重要的目標。

距離：距離和文字大小在可讀性方面是相同重要的目標。首選，行距離對文本的可讀性尤其重要，假如太小，讀者閱覽會十分的費勁；假如太大，就會顯得太多獨立，損失相關性。Apple.com運用一個行高的數值解決了這個問題。

規則的圖片布局：不像許多文章型網站，Apple運用通明布景的圖片，在圖片和盤繞文字之間合理地設置空隙。

可掃描的Headers/Text：標題和文本的安排除了方便閱覽之外，還能更容易地完成內容的掃描。

高亮的關鍵字和不同字體的運用都是使得文本更容易掃描的最好辦法，當然，行高也是相同重要。

5. 快速的加載時刻加載時刻的

長短決定著用戶是否會離開網站，假如網站的加載過慢，那么用戶將會失掉等候的耐性，不再繼續瀏覽網站。

簡練和良好的代碼風格可以供給加載功率。最小化加載時刻的辦法許多，包括緊縮圖片 、刪去不用要的內容、運用加載時刻測驗東西等等。這是一個十分大的話題， 類似的文章 也是十分多。

6. 查找功用

網站的查找功用不可低估，一個具備可用性的強壯查找引擎是任何網站必須的元素。絕大多少的網站只運用一個簡略的查找條敷衍了事。而關于 Apple.com，卻在布局和功用上都增強了查找功用，網站運用JavaScript技術完成了查找框自動顯現下拉相關關鍵字的辦法，引導用戶顯現查找 結果，可見其人性化規劃已是滲透到了每一個細節。

Apple.com把查找條放置在了頂部導航菜單的右側，并且整站頁面一致顯現。

7. 細節

關于規劃來說，檢測的便是細節的處理，細節做到了，那么這個產品就會得到用戶的肯定，當然，Apple.com也是這樣做的，這也是為什么會體現的如此專業的原因。

鏈接：在內容中刺進鏈接文字時，把這些鏈接作高亮處理是十分必要的，并且，關于內容和列表中的鏈接，還是作了細微的區別處理。

隔離：在列表中，相似的元素、目標間作必要的分離是十分必要的，有時，一個簡略的1px線條會起到畫龍點睛的效果。

回到頂部：回到頂部鏈接是一個常見的使用，不容忽視。在頁面過長時，方便用戶回來頁面頂部進行操作。

言語選擇：假如你的產品客戶是不同國家不同區域的人，那么假如沒有準確的語種供用戶選擇的話就太糟糕了。Apple做到了，供給各種言語版本供用戶選擇運用，從而擴大了產品的市場規模。

好了，以上便是基于Apple.com對Web規劃過程中需求留意的可用性方面的一些簡介。假如你也有你的觀點，那么為何不分享出來呢？