Apple網(wǎng)站W(wǎng)eb可用性規(guī)劃剖析

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

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

1. 流通有用的內(nèi)容導(dǎo)航和菜單

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

此外，這個菜單也運用了十分簡略的鼠標(biāo)hover事件，但這些體現(xiàn)現(xiàn)已足夠了。

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

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

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

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

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

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

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

2. 規(guī)整流通的網(wǎng)格布局

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

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

3. 一致慎重的顏色，高質(zhì)量的圖片

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

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

圖片：和顏色緊密相關(guān)的是，圖畫的質(zhì)量也是一個十分重要的方面。Apple.com在內(nèi)容中混合了許多的圖畫，這些圖畫都是高質(zhì)量的，在網(wǎng)站的專業(yè)性方面充當(dāng)了一個相當(dāng)重要的人物，好的圖畫需求在細(xì)節(jié)處下足功夫。

空地：合理的空地使用是完美頁面布局規(guī)劃必不可少的成分。恰當(dāng)?shù)氖褂每梢苑乐够靵y的布局，使布局看起來愈加明晰。Margins、行距離, 字距離的科學(xué)人性化規(guī)劃都會增強內(nèi)容的可讀性，減少視覺上的閱覽疲憊。

4. 流通可掃描的內(nèi)容安排

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

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

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

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

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

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

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

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

6. 查找功用

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

Apple.com把查找條放置在了頂部導(dǎo)航菜單的右側(cè)，并且整站頁面一致顯現(xiàn)。

7. 細(xì)節(jié)

關(guān)于規(guī)劃來說，檢測的便是細(xì)節(jié)的處理，細(xì)節(jié)做到了，那么這個產(chǎn)品就會得到用戶的肯定，當(dāng)然，Apple.com也是這樣做的，這也是為什么會體現(xiàn)的如此專業(yè)的原因。

鏈接：在內(nèi)容中刺進(jìn)鏈接文字時，把這些鏈接作高亮處理是十分必要的，并且，關(guān)于內(nèi)容和列表中的鏈接，還是作了細(xì)微的區(qū)別處理。

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

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

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

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