作分析為設(shè)計(jì)者來說，我們?cè)诤芏喾矫娑急籄pple影響著，無論是其優(yōu)秀的操作系統(tǒng)、時(shí)尚前衛(wèi)的消費(fèi)產(chǎn)品，還是他們?cè)赪eb/應(yīng)用設(shè)計(jì)上的引導(dǎo)趨勢(shì)。從 Apple的產(chǎn)品和線上網(wǎng)站可以看出，Apple始終關(guān)注用戶體驗(yàn)和可用性多一些。對(duì)于Apple.com來說，設(shè)計(jì)上注重可用性是非常重要的，它必須給用戶留下一個(gè)好的印象，基于此，用戶會(huì)更加喜歡購買Apple的產(chǎn)品，網(wǎng)站的可用性很大程度上反應(yīng)了其產(chǎn)品的人性化操作。

從Apple.com可以學(xué)到很多知識(shí)，所以我用這個(gè)網(wǎng)站作為一個(gè)個(gè)案，研究一下Web設(shè)計(jì)過程中需要注意的一些可用性方面的知識(shí)。

1. 流暢實(shí)用的內(nèi)容導(dǎo)航和菜單

主菜單（Main Menu）- Apple的菜單應(yīng)該是最值得學(xué)習(xí)和效仿的設(shè)計(jì)了。你可能會(huì)問，這樣如此簡(jiǎn)單平常的導(dǎo)航為什么會(huì)強(qiáng)大？首先，就是其設(shè)計(jì)的一致性，這個(gè)主菜單的整個(gè)頁面中的定位清晰統(tǒng)一，是避免困擾用戶操作的最直觀的表現(xiàn)方式。

此外，這個(gè)菜單也使用了非常簡(jiǎn)單的鼠標(biāo)hover事件，但這些表現(xiàn)已經(jīng)足夠了。

JavaScript Mac 菜單：這個(gè)名聲在外的 Mac menu 是設(shè)計(jì)最簡(jiǎn)潔、組織最緊湊的導(dǎo)航之一，是在有效的特定空間內(nèi)最好的內(nèi)容組織方式。相比合理的內(nèi)容組織更重要的就是操作的便利了，尤其響應(yīng)鼠標(biāo)的labels更是游刃有余。

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

Gallery 導(dǎo)航： 除了基于導(dǎo)航設(shè)計(jì)的內(nèi)容組織外，圖片的組織也同樣是極其重要的。Apple.com實(shí)現(xiàn)了一個(gè)非常簡(jiǎn)單的圖片展示功能，除了使用了縮略圖菜單外，還使用了 lightbox 的表現(xiàn)效果，簡(jiǎn)單簡(jiǎn)潔的設(shè)計(jì)，卻讓用戶的操作表現(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)航告訴用戶他當(dāng)前的操作位于整個(gè)網(wǎng)站的具體位置。Apple在每一頁面的底部都提供了這樣一個(gè)位置導(dǎo)航功能，對(duì)于希望無障礙地快速網(wǎng)站的用戶來說非常有用。

Site Map - 就Web的可用性來說，網(wǎng)站地圖是一個(gè)更不起眼的功能，但它在應(yīng)用中卻必不可少。 Apple.com  有一個(gè)位于頁腳的網(wǎng)站地圖，幫助用戶更方便地找到需要的頁面。

2. 整齊流暢的網(wǎng)格布局

任何網(wǎng)站設(shè)計(jì)（或者說任何一個(gè)層設(shè)計(jì)）都是從最簡(jiǎn)單的網(wǎng)格開始的，網(wǎng)格是任何層和內(nèi)容的基礎(chǔ)。Apple 在每一個(gè)頁面，統(tǒng)一使用整齊的網(wǎng)格布局設(shè)計(jì)，給用戶一個(gè)愉快的體驗(yàn)。

雖然Apple在每個(gè)頁面都使用了網(wǎng)格布局，但是頁面間的布局卻又各不相同，這就需要設(shè)計(jì)的靈活性和創(chuàng)新意識(shí)。與此同時(shí)，保持框架統(tǒng)一的網(wǎng)格區(qū)域，也能給用戶視覺上的愉悅。

3. 統(tǒng)一穩(wěn)重的色調(diào)，高質(zhì)量的圖片

除流暢的布局設(shè)計(jì)外，頁面的色調(diào)也在很大程度上反映了網(wǎng)站的可用性設(shè)計(jì)。色調(diào)方案是一個(gè)網(wǎng)站表達(dá)感覺和視覺最直觀的因素，起決定性作用。

對(duì)比度/色彩設(shè)計(jì)：Apple使用一個(gè)完美的色彩設(shè)計(jì)，表達(dá)出一種和諧專業(yè)的感覺。平滑的對(duì)比度增強(qiáng)了內(nèi)容的可辨識(shí)度。非常合理的網(wǎng)站飽和度提高了易讀性。此外，相比基本文字，鏈接文字的不同色彩也是為內(nèi)容的可讀性增色不少。

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

空隙：合理的空隙應(yīng)用是完美頁面布局設(shè)計(jì)必不可少的成分。適當(dāng)?shù)膽?yīng)用可以避免混亂的布局，使布局看起來更加清晰。Margins、行間距, 字間距的科學(xué)人性化設(shè)計(jì)都會(huì)增強(qiáng)內(nèi)容的可讀性，減少視覺上的閱讀疲勞。

4. 流暢可掃描的內(nèi)容組織

內(nèi)容為王，是網(wǎng)站存在的根本。內(nèi)容的組織形式會(huì)直接影響到用戶對(duì)內(nèi)容的反映。尤其是一個(gè)像Apple.com這樣的網(wǎng)站，充滿大量的內(nèi)容，是否可以掃描就成了非常重要的指標(biāo)。

間隔：間隔和文字大小在可讀性方面是同樣重要的指標(biāo)。首選，行間距對(duì)文本的可讀性尤其重要，如果太小，讀者閱讀會(huì)非常的吃力；如果太大，就會(huì)顯得太多獨(dú)立，喪失相關(guān)性。Apple.com使用一個(gè)行高的數(shù)值解決了這個(gè)問題。

規(guī)則的圖片布局：不像很多文章型網(wǎng)站，Apple使用透明背景的圖片，在圖片和環(huán)繞文字之間合理地設(shè)置間隙。

可掃描的Headers/Text：標(biāo)題和文本的組織除了方便閱讀之外，還能更容易地實(shí)現(xiàn)內(nèi)容的掃描。

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

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

加載時(shí)間的長(zhǎng)短決定著用戶是否會(huì)離開網(wǎng)站，如果網(wǎng)站的加載過慢，那么用戶將會(huì)失去等待的耐心，不再繼續(xù)瀏覽網(wǎng)站。

簡(jiǎn)潔和良好的代碼風(fēng)格可以提供加載效率。最小化加載時(shí)間的方法很多，包括壓縮圖片 、刪除不必要的內(nèi)容、使用加載時(shí)間測(cè)試工具等等。這是一個(gè)非常大的話題， 類似的文章 也是非常多。

6. 搜索功能

網(wǎng)站的搜索功能不可低估，一個(gè)具備可用性的強(qiáng)大搜索引擎是任何網(wǎng)站必須的元素。絕大多少的網(wǎng)站只使用一個(gè)簡(jiǎn)單的搜索條敷衍了事。而對(duì)于 Apple.com，卻在布局和功能上都增強(qiáng)了搜索功能，網(wǎng)站使用JavaScript技術(shù)實(shí)現(xiàn)了搜索框自動(dòng)顯示下拉相關(guān)關(guān)鍵字的方法，引導(dǎo)用戶顯示搜索 結(jié)果，可見其人性化設(shè)計(jì)已是滲透到了每一個(gè)細(xì)節(jié)。

Apple.com把搜索條放置在了頂部導(dǎo)航菜單的右側(cè)，而且整站頁面一致顯示。

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

對(duì)于設(shè)計(jì)來說，考驗(yàn)的就是細(xì)節(jié)的處理，細(xì)節(jié)做到了，那么這個(gè)產(chǎn)品就會(huì)得到用戶的肯定，當(dāng)然，Apple.com也是這樣做的，這也是為什么會(huì)表現(xiàn)的如此專業(yè)的原因。

鏈接：在內(nèi)容中插入鏈接文字時(shí)，把這些鏈接作高亮處理是非常必要的，而且，對(duì)于內(nèi)容和列表中的鏈接，還是作了細(xì)微的區(qū)別處理。

隔離：在列表中，相似的元素、對(duì)象間作必要的分離是非常必要的，有時(shí)，一個(gè)簡(jiǎn)單的1px線條會(huì)起到畫龍點(diǎn)睛的作用。

回到頂部：回到頂部鏈接是一個(gè)常見的應(yīng)用，不容忽視。在頁面過長(zhǎng)時(shí)，方便用戶返回頁面頂部進(jìn)行操作。

語言選擇：如果你的產(chǎn)品客戶是不同國(guó)家不同地區(qū)的人，那么如果沒有準(zhǔn)確的語種供用戶選擇的話就太糟糕了。Apple做到了，提供各種語言版本供用戶選擇使用，從而擴(kuò)大了產(chǎn)品的市場(chǎng)范圍。

好了，以上就是基于Apple.com對(duì)Web設(shè)計(jì)過程中需要注意的可用性方面的一些簡(jiǎn)介。如果你也有你的觀點(diǎn)，那么為何不分享出來呢？

英文原文：spoonfeddesign