服務(wù)項(xiàng)目:網(wǎng)站建設(shè)、仿站、程序開發(fā)、APP開發(fā)設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)設(shè)計(jì)、企業(yè)網(wǎng)站設(shè)計(jì)、電子商務(wù)網(wǎng)站開發(fā)、網(wǎng)站維護(hù)、網(wǎng)站推廣、UX/UI 、HTML5、CSS3、JS / Jquery ...
四川???萍加邢薰?></a></div>
                    <div   id=四川???萍加邢薰? title=
四川???萍加邢薰?(開發(fā)設(shè)計(jì)官網(wǎng))TEL : 15308000360 / QQ : 38585404

您的位置:首頁 > 技術(shù)經(jīng)驗(yàn) > 設(shè)計(jì)經(jīng)驗(yàn) > 正文

網(wǎng)站導(dǎo)航設(shè)計(jì)模式的重要意義
技術(shù)支持服務(wù)電話:15308000360 【7x24提供運(yùn)維服務(wù),解決各類系統(tǒng)/軟硬件疑難技術(shù)問題】

在本文中,我們將以幾個(gè)熱門網(wǎng)站和web應(yīng)用為例討論導(dǎo)航設(shè)計(jì)模式的重要意義。

用戶在使用你的網(wǎng)站或web應(yīng)用時(shí),需要清楚自己應(yīng)當(dāng)何去何從。如果你的應(yīng)用無法提供方便的導(dǎo)航,用戶將快速流失。所以說,為web應(yīng)用設(shè)計(jì)出有效的導(dǎo)航功能具有至關(guān)重要的意義。

1.跳轉(zhuǎn)

示例:Pinterest.

問題:用戶希望能夠快速跳過web應(yīng)用的某個(gè)部分。

解決方案:創(chuàng)建快捷方式或熱點(diǎn),讓用戶能夠直接跳轉(zhuǎn)至web應(yīng)用的特定部分。這一方式通常應(yīng)用在app的開頭或結(jié)尾處,但在其他時(shí)點(diǎn)也很常見。

例如,用戶可以在頁面任意位置點(diǎn)擊某個(gè)標(biāo)簽或按鈕或者滾動(dòng)前往頁面頂部。如果你的應(yīng)用另外還采用了“無限滾動(dòng)”(見下方)模式造成頁面隨著下方加載新內(nèi)容的不斷增多而越來越長,那么這一模式將尤其有用。

當(dāng)用戶需要使用只有在頁面頂部才能看見的功能或信息時(shí),讓他們向前滾動(dòng)個(gè)十幾頁回到頂部簡直就是煎熬。在這方面,Pinterest采用了一個(gè)不太顯眼的“返回頂部”按鈕方便用戶立刻滾動(dòng)回頂部,從而有效解決了這一問題。

 

2.單頁Web應(yīng)用

示例:Gmail

問題:用戶希望有一個(gè)集中的位置查看或?qū)Υ蟛糠只蛉績?nèi)容執(zhí)行操作,這樣就不用浪費(fèi)時(shí)間在不同頁面之間來回導(dǎo)航了。

解決方案:使用現(xiàn)代web開發(fā)技術(shù)構(gòu)建一個(gè)不需要在用戶瀏覽過程中進(jìn)行重新加載的單頁應(yīng)用。這一模式還不僅僅是在應(yīng)用開發(fā)完成后的小修改,它更大程度上是對(duì)web的工作模式進(jìn)行全面的重構(gòu)。在一定程度上,單頁應(yīng)用中的“頁”并不是傳統(tǒng)意義上的頁面,它更像是一個(gè)特殊的數(shù)據(jù)頁面。單頁web應(yīng)用會(huì)異步加載(使用AJAX),也就是說它們能夠瞬時(shí)完成加載,用戶在執(zhí)行不同操作之間時(shí)不需要等待各個(gè)頁面分別加載。

Gmai就是單頁應(yīng)用的一個(gè)很好的例子,其將多項(xiàng)操作融入了一個(gè)單獨(dú)的“頁面”中。單頁設(shè)計(jì)的趨勢是這一UI模式中相對(duì)不太高端的一種實(shí)現(xiàn)方式,在這一設(shè)計(jì)模式下,所有內(nèi)容均可通過同一頁面訪問。這一模式可以讓瀏覽變得更快、響應(yīng)更迅速,從而讓桌面與web應(yīng)用之間的界限不再如此分明。

對(duì)于Spotify等web應(yīng)用,考慮到用戶有時(shí)會(huì)在背景播放音樂的同時(shí)瀏覽其他音樂,這時(shí)單頁應(yīng)用模式的重要性就愈發(fā)凸顯,通過使用單頁應(yīng)用,用戶就無需對(duì)頁面進(jìn)行重新加載,也不會(huì)造成音樂停止播放。

在使用單頁應(yīng)用時(shí)需要考慮的一個(gè)問題就是URL結(jié)構(gòu)。由于內(nèi)容使用JavaScript動(dòng)態(tài)加載,URL會(huì)失去作用,如果設(shè)計(jì)不當(dāng),還會(huì)造成無法訪問特定視圖。Gmail和Twitter等應(yīng)用通過為每個(gè)視圖生成專門的URL來克服這一問題,這一方法還能夠解決瀏覽器后退按鈕失效的問題。

 

3.推薦

示例:Spotify

問題:用戶希望了解下面應(yīng)當(dāng)瀏覽哪些內(nèi)容。

解決方案:在不同時(shí)點(diǎn)顯示內(nèi)容建議和推薦,幫助用戶瀏覽內(nèi)容。Facebook、Eventbrite、Spotify和Yelp等很多應(yīng)用會(huì)根據(jù)用戶個(gè)人資料里的偏好信息或者其在應(yīng)用中的過往交互記錄生成針對(duì)性的內(nèi)容推薦,從而幫助用戶發(fā)現(xiàn)最新的相關(guān)內(nèi)容。

這些內(nèi)容推薦可以以“流行主題”或“最新發(fā)布”等形式出現(xiàn)。Facebook的做法是根據(jù)用戶與時(shí)間軸上的帖子的交互記錄提供“相關(guān)”頁面,另外還會(huì)提供一個(gè)更具專有性的推薦欄以便用戶發(fā)現(xiàn)新頁面和新關(guān)注對(duì)象。對(duì)于用戶來說,這樣的內(nèi)容流可以無窮無盡,特別是在充滿用戶生成內(nèi)容的社交網(wǎng)絡(luò)應(yīng)用上。正如Web UI設(shè)計(jì)模式2014中所討論,在UI中提供一個(gè)完善的推薦引擎是幫助用戶發(fā)現(xiàn)新內(nèi)容的絕佳方式。

 

4.相關(guān)內(nèi)容

示例:紐約時(shí)報(bào)

問題:在發(fā)現(xiàn)當(dāng)前內(nèi)容不是自己所需或者需要更多內(nèi)容時(shí),用戶希望瀏覽類似的其他內(nèi)容。

解決方案:顯示類似或相關(guān)內(nèi)容幫助用戶找到更多與自己當(dāng)前所瀏覽內(nèi)容相似的其他內(nèi)容。和上述的推薦功能一樣,相關(guān)內(nèi)容也正在成為用戶生成內(nèi)容類web應(yīng)用的一大重要UI設(shè)計(jì)模式,但不同的是,相關(guān)內(nèi)容模式并不會(huì)根據(jù)用戶的偏好或過往活動(dòng)定制推薦,而是根據(jù)用戶所屬分類展示相關(guān)內(nèi)容。

Amazon、TIME和紐約時(shí)報(bào)等網(wǎng)站在展示與當(dāng)前瀏覽內(nèi)容相類似的其他內(nèi)容方面是很好的榜樣。在這一方面,各大媒體則更進(jìn)一步,它們一般會(huì)允許讀者自行在文章的延伸閱讀部分添加鏈接推薦相關(guān)內(nèi)容。

 

5.后續(xù)步驟

示例:Quora

問題:用戶希望了解在完成某些操作后應(yīng)當(dāng)執(zhí)行哪些后續(xù)步驟。

解決方案:為用戶提供一份明確的后續(xù)步驟清單以便他們相應(yīng)執(zhí)行,進(jìn)而獲得更深入的體驗(yàn)。舉例來說,在填寫個(gè)人資料時(shí),Quora會(huì)為用戶創(chuàng)建一份“操作步驟表”以便他們對(duì)照操作。LinkedIn則會(huì)將所有可以讓用戶添加到個(gè)人資料里的部分以列表形式展現(xiàn)出來,同時(shí)還提供一個(gè)完整度標(biāo)尺來激勵(lì)用戶繼續(xù)填寫。

大部分復(fù)雜的web應(yīng)用都會(huì)有多樣的用戶流,所以為用戶顯示操作清單是提供指導(dǎo)的好辦法。這一設(shè)計(jì)模式還可以跟相關(guān)內(nèi)容模式相互配合使用;媒體應(yīng)用在這方面走的很靠前,它們會(huì)在用戶到達(dá)當(dāng)前文章末尾時(shí)顯示其他文章的預(yù)覽。這樣就會(huì)讓用戶對(duì)你的UI更加投入。

 

6.歷史/近期瀏覽

示例:Amazon.

問題:用戶希望回看自己之前交互過的內(nèi)容。

解決方案:允許用戶繼續(xù)先前中斷的活動(dòng)。舉例來說,Amazon會(huì)記錄用戶的瀏覽記錄并顯示近期瀏覽內(nèi)容,以便用戶在有需要的時(shí)候回看。很多web應(yīng)用都會(huì)記錄用戶的過往活動(dòng),F(xiàn)acebook的時(shí)間軸就是這方面的最佳示例。不僅是用戶上傳的時(shí)間軸記錄帖子和照片,其還能記錄用戶和其他頁面和Spotify等應(yīng)用的互動(dòng)歷史,以便用戶在有需要時(shí)回看。

Google Play Music和Spotify會(huì)記錄近期播放的歌曲。這一模式可以幫助用戶記錄過往交互過的內(nèi)容,也可以用作待處理事項(xiàng)的書簽。

 

7.特色內(nèi)容

示例:Airbnb

問題:用戶希望了解使用應(yīng)用能創(chuàng)建哪些內(nèi)容?

解決方案:將特色內(nèi)容布局到顯眼位置,不要和有時(shí)效性的內(nèi)容混在一起。這一類內(nèi)容包括付費(fèi)信息、新信息或其他各種重要信息。

特色內(nèi)容的作用是告知用戶各種可能操作方向并幫助他們了解平臺(tái)能實(shí)現(xiàn)哪些操作等等。Airbnb、Etsy和Flickr等網(wǎng)站會(huì)在首頁顯示隨機(jī)內(nèi)容以幫助用戶無所顧慮地探索網(wǎng)站,同時(shí)幫助現(xiàn)有用戶擴(kuò)大影響力來鼓勵(lì)他們繼續(xù)使用網(wǎng)站。

另一方面,這一方法還可以提高特定的內(nèi)容重要性,從而使其獲得更大關(guān)注度。你可以對(duì)付費(fèi)或“特色”內(nèi)容進(jìn)行特殊標(biāo)記,讓用戶對(duì)其有所期待。

 

8.無限制滾動(dòng)

 

示例:Pinterest.

問題:用戶希望能夠?yàn)g覽全部內(nèi)容。

解決方案:在用戶達(dá)到當(dāng)前頁面底部時(shí)自動(dòng)加載下一組內(nèi)容頁面,形成無限滾動(dòng)頁面的效果。通過這種方法,新內(nèi)容就能夠自動(dòng)加載,用戶也就無需在點(diǎn)擊“下一頁”鏈接后進(jìn)行等待。如果要顯示的內(nèi)容很多(例如Facebook、Twitter、Pinterest和Tumblr等很多大型社交媒體),無限制滾動(dòng)將帶來極大的幫助。

但是,盡管這個(gè)方法很適合于瀏覽內(nèi)容,特別是多媒體內(nèi)容,其還是存在著用戶容易迷失方向、找不到自己當(dāng)前所處位置這兩個(gè)基本問題。如果用戶想要暫時(shí)跳過特定點(diǎn)位或書簽等以后有時(shí)間再回過頭來看,無限制滾動(dòng)就會(huì)造成問題。針對(duì)這一問題,F(xiàn)acebook所采取的辦法是在用戶瀏覽時(shí)間軸時(shí)創(chuàng)建一個(gè)頁碼/無限制滾動(dòng)組合體,讓用戶能夠跳過某個(gè)月或年。Pinterest則采用了滾動(dòng)至頂部模式,同時(shí)配有一個(gè)小按鈕讓用戶能夠跳轉(zhuǎn)到頁面開頭。

 

9.教程&指導(dǎo)標(biāo)記

示例:Slack

問題:用戶希望了解如何使用應(yīng)用的不同功能。

解決方案:設(shè)計(jì)一套教程為用戶演示各個(gè)功能如何使用。很多web應(yīng)用都已經(jīng)開始使用這項(xiàng)技術(shù)在用戶首次使用時(shí)提供指導(dǎo),具體操作上,其可分為兩種基本方法。

Slack等web應(yīng)用采用了重疊式指南的方法,使用“指導(dǎo)標(biāo)記”凸顯UI中的重要部分進(jìn)而說明其功能。另外,Slack還使用了聊天機(jī)器人的方法幫助用戶創(chuàng)建個(gè)人檔案??紤]到Slack是一款聊天應(yīng)用,這一方法合情合理,另外,“Slackbot”還會(huì)帶領(lǐng)用戶填寫手機(jī)號(hào)碼等個(gè)人資料信息并以對(duì)話的形式顯示用戶名。

除此之外,Tumblr則通過教程的方式讓用戶熟悉應(yīng)用。這一教程同時(shí)也是在簡單注冊之外進(jìn)一步收集重要信息的絕佳時(shí)機(jī),很類似于設(shè)置指南的作用。這一模式對(duì)于所有無法讓人一眼看懂的應(yīng)用來說都至關(guān)重要,因?yàn)橛脩魧?duì)你的產(chǎn)品越了解就越可能繼續(xù)使用。

 

10.溢出菜單

 

示例:Spotify

問題:用戶希望快速使用常規(guī)之外的選項(xiàng)或操作。

解決方案:使用可擴(kuò)展的菜單隱藏額外選項(xiàng)和按鈕以免它們占滿主界面。Facebook和Google都在其web應(yīng)用使用了“溢出菜單”這一方法來保持用戶界面的整潔,具體方法是使用可擴(kuò)展菜單隱藏比較重要的二級(jí)選項(xiàng)。

這一方法也可以用來顯示“互動(dòng)參與”方面的一些關(guān)鍵操作選項(xiàng)。舉例說明,Pinterest會(huì)在應(yīng)用上顯示一個(gè)“分享到Facebook”按鈕,以便用戶在各個(gè)“大頭針”下快速執(zhí)行這一常用的操作。另外,也可以使用溢出菜單放置一些額外于主UI的菜單項(xiàng)或操作選項(xiàng)。

 

11.變形控件

示例:Pinterest

問題:用戶希望執(zhí)行不同類型的操作,但屏幕空間有限,無法顯示所有控件。

解決方案:使用其他功能替代按鈕和屏幕上顯示的控件。根據(jù)用戶當(dāng)前所執(zhí)行操作的不同,可以在UI上使用另外的元素替代原先的元素,例如使用“執(zhí)行”替換“撤銷”,或“添加”替換“刪除”。如果先后所執(zhí)行的操作在一定程度上具有聯(lián)系,那么這個(gè)方法將有很大幫助。Pinterest和Facebook對(duì)“贊”和“踩”都使用了相同的按鈕以節(jié)省空間,同時(shí)為用戶指示當(dāng)前的狀態(tài)。這一UI設(shè)計(jì)模式能夠節(jié)約空間、讓撤銷操作更加快捷,同時(shí)整體來看也是一項(xiàng)很有趣的解決方案。

 

12.“跟隨式”固定導(dǎo)航欄

示例:Houzz

問題:用戶希望能夠在網(wǎng)頁上隨時(shí)訪問菜單。

解決方案:讓頂部、側(cè)面或底部導(dǎo)航欄在頁面滾動(dòng)時(shí)保持不動(dòng)。在某些情況下,一些子節(jié)的標(biāo)題也可以在滾動(dòng)時(shí)保持不動(dòng),或者替換掉或附著到當(dāng)前的固定導(dǎo)航欄上。

Google+和Pinterest的主導(dǎo)航欄會(huì)固定在頁面頂部,這樣用戶就能在有需要時(shí)快速使用菜單項(xiàng)和篩選器。如果再配合上無限制滾動(dòng)模式,跟隨式導(dǎo)航菜單可以在用戶滾動(dòng)幅度超過一個(gè)頁面時(shí)帶來極大的方便。

 

13.垂直導(dǎo)航

 

示例:Spotify

問題:用戶需要能夠在應(yīng)用的不同部分之間導(dǎo)航,但屏幕上顯示信息的空間卻太有限。

解決方案:可以將UI中的重要部分放到一個(gè)列表中顯示,以便用戶上下滾動(dòng)尋找自己要找的內(nèi)容。這一方法還可以讓UI的標(biāo)題和注腳能夠更加自由的進(jìn)行“全局”導(dǎo)航,例如操作欄等。傳統(tǒng)上說,大部分導(dǎo)航模式都采用標(biāo)簽或按鈕等水平模式。垂直導(dǎo)航模式是為了應(yīng)對(duì)用戶生成內(nèi)容(例如用戶時(shí)間軸和無限制滾動(dòng)內(nèi)容等)而對(duì)傳統(tǒng)導(dǎo)航設(shè)計(jì)的重大演變。

 

14.彈框

示例:Facebook

問題:用戶希望在瀏覽相關(guān)內(nèi)容的同時(shí)保持自己在當(dāng)前UI頁面中的位置。

解決方案:以彈框的形式顯示重要的通知及其他信息。這一UI模式的好處在于其能夠讓用戶方便、直接地瀏覽額外信息或執(zhí)行特定操作,同時(shí)不會(huì)離開當(dāng)前活動(dòng)。

Pinterest和Fitocracy都采用了模態(tài)化彈框讓用戶只需快速操作。Facebook則使用彈框快速顯示來自活動(dòng)欄內(nèi)容的片段。彈框UI模式對(duì)于這一類操作具有很重要的意義,因?yàn)檫@類操作的執(zhí)行對(duì)象是數(shù)據(jù),彈框模式可以讓用戶知道自己操作執(zhí)行的應(yīng)用對(duì)象是什么。

由于之前瀏覽的內(nèi)容仍然在背景中顯示,用戶不用在各個(gè)視圖之間進(jìn)行切換就可以對(duì)篩選選項(xiàng)進(jìn)行調(diào)整,或者更改字體大小等,一切都近在眼前。因?yàn)橐P(guān)閉彈框或模態(tài)化窗口需要用戶點(diǎn)擊或滑動(dòng),因此它們還可用于顯示重要通知或者需要用戶特別注意的內(nèi)容。

 

15.滑出窗口、側(cè)邊欄和抽屜

示例:紐約時(shí)報(bào)

問題:用戶需要在應(yīng)用不同部分之間進(jìn)行導(dǎo)航時(shí)不會(huì)受到干擾。

解決方案:將應(yīng)用的二級(jí)部分(例如導(dǎo)航、聊天、設(shè)置、用戶資料等)放入一個(gè)可折疊的面板,并在不需要使用時(shí)將其隱藏到主要部分后方。在需要使用時(shí),其可以將主要部分移走到一旁或者直接滑動(dòng)覆蓋主界面。由于滑出窗口是獨(dú)立于應(yīng)用主要內(nèi)容的內(nèi)容層,因此可以采用多種不同的方法將其內(nèi)容布局到抽屜中——圖標(biāo)、文字甚至簡單的控件都可以用作使用渠道。

通常情況下,抽屜可以隱藏到一個(gè)“漢堡式菜單”后方,或者使用簡單的箭頭指示此處有更多內(nèi)容。將所有不太重要的內(nèi)容藏到“側(cè)邊抽屜”里是個(gè)很不錯(cuò)的方法,這樣可以讓用戶將注意力集中到各個(gè)視圖的重要信息上。這樣的例子到處都是。Asana、Spotify(搜索框)和Facebook(聊天框)。另外還有些突出性不太強(qiáng)的例子,比如Houzz,其使用了一個(gè)次導(dǎo)航抽屜,當(dāng)用戶向下滾動(dòng)時(shí)會(huì)消失,滾動(dòng)回頂部時(shí)重新出現(xiàn);另外還有紐約時(shí)報(bào),其側(cè)邊抽屜在用戶點(diǎn)擊頁面左側(cè)頂部“小節(jié)”按鈕時(shí)會(huì)在左側(cè)出現(xiàn)。在Pinterest中,用戶向下滾動(dòng)時(shí),會(huì)顯示一個(gè)向上箭頭指向頂部,在其“如何使用”頁面中也有同樣的箭頭。

 

16.無所不往的鏈接

示例:Asana

問題:用戶需要有前后一致的內(nèi)容導(dǎo)航方式,導(dǎo)航時(shí)不受到額外內(nèi)容的分心。

解決方案:應(yīng)用中大部分乃至全部用戶內(nèi)容都有鏈接,以便用戶自由探索應(yīng)用并尋找自己所需的信息而不必?fù)?dān)心走到死路或者被亂七八糟的超鏈接文本、不需要的按鈕、行動(dòng)呼吁或者其他網(wǎng)站上常見的內(nèi)容等所分心。如果用戶想要和某個(gè)部分的內(nèi)容進(jìn)行交互,他們有可能會(huì)直接點(diǎn)擊這一部分內(nèi)容并打開新視圖已獲得更加細(xì)節(jié)化的體驗(yàn)。

內(nèi)容密集的應(yīng)用(例如Asana和Spotify)允許用戶通過單擊探索各種各樣的內(nèi)容,例如,可以單擊某個(gè)藝術(shù)家或用戶以查看其個(gè)人資料、各項(xiàng)內(nèi)容都可以點(diǎn)擊、表格抬頭可以點(diǎn)擊進(jìn)行排序等等各種操作。

 

讓用戶放手導(dǎo)航

關(guān)注用戶預(yù)期的導(dǎo)航目標(biāo)、他們是否會(huì)觀察導(dǎo)航元素、他們導(dǎo)航到應(yīng)用某一區(qū)域的頻率、用戶的來源和使用應(yīng)用的目的(也就是用戶流)等等。反復(fù)對(duì)導(dǎo)航元素進(jìn)行整理、排序、改變大小和微調(diào),直到獲得超越預(yù)期的結(jié)果。當(dāng)然還需要深思用戶在嘗試進(jìn)入應(yīng)用的某個(gè)部分時(shí)實(shí)際會(huì)采取哪種方式,切勿遺漏關(guān)鍵要素。

翻譯:蔣燦



上一篇:Web配色:色彩設(shè)計(jì)方法經(jīng)驗(yàn)
下一篇:從注意力維度談動(dòng)效設(shè)計(jì)