歡迎來到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
  咨詢服務(wù)熱線:400-099-8848

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

發(fā)布時間:2019-06-10 文章來源:本站  瀏覽次數(shù):2872

作剖析為規(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ī)劃過程中需求留意的可用性方面的一些簡介。假如你也有你的觀點,那么為何不分享出來呢?

上一條:交互規(guī)劃師應(yīng)該具有哪些本...

下一條:從宜家的家具規(guī)劃講模塊化...