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

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

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

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

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

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

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

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

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

在每一個(gè) lightbox gallery中，所有的圖片都是安排在 lightbox下，咱們不用再把時(shí)刻花費(fèi)在“上一幅、下一幅”的點(diǎn)擊操作上了。

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

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

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

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

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

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

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

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

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

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

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

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

內(nèi)容為王，是網(wǎng)站存在的底子。內(nèi)容的安排形式會(huì)直接影響到用戶(hù)對(duì)內(nèi)容的反映。尤其是一個(gè)像Apple.com這樣的網(wǎng)站，充溢許多的內(nèi)容，是否可以?huà)呙杈统闪耸�分重要的目�?biāo)。

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

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

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

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

5. 快速的加載時(shí)刻加載時(shí)刻的

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

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

6. 查找功用

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

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

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

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

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

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

回到頂部：回到頂部鏈接是一個(gè)常見(jiàn)的使用，不容忽視。在頁(yè)面過(guò)長(zhǎng)時(shí)，方便用戶(hù)回來(lái)頁(yè)面頂部進(jìn)行操作。

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

好了，以上便是基于A(yíng)pple.com對(duì)Web規(guī)劃過(guò)程中需求留意的可用性方面的一些簡(jiǎn)介。假如你也有你的觀(guān)點(diǎn)，那么為何不分享出來(lái)呢？