Sunny. 2016-08-10
網(wǎng)站建設(shè)
導(dǎo)航設(shè)計(jì)模式的重要性
在本文中,我們討論的重要性,導(dǎo)航設(shè)計(jì)模式使用的例子從一些最熱門的網(wǎng)站和web應(yīng)用程序。
一旦人們開(kāi)始使用你的網(wǎng)站或web應(yīng)用程序,他們需要知道去哪里以及如何在任何時(shí)候到達(dá)那里。如果他們不能瀏覽您的應(yīng)用程序是很容易的,你很快就會(huì)失去他們。因此,在您的web應(yīng)用程序設(shè)計(jì)有效的導(dǎo)航是至關(guān)重要的。
概述的模式
這是我們?cè)敿?xì)的設(shè)計(jì)模式的概述在這篇文章:
1.跳轉(zhuǎn)到節(jié)
2.單頁(yè)面的Web應(yīng)用程序
3.建議
4.相關(guān)內(nèi)容
5.下一個(gè)步驟
6.歷史/最近查看的
7.特色內(nèi)容
8.無(wú)限卷動(dòng)
9.走查和教練標(biāo)志
10.溢出菜單
11.變形控制
12.“粘性”固定導(dǎo)航
13.垂直導(dǎo)航
14.彈窗
15.滑蓋式、側(cè)欄和抽屜
16.所有的鏈接
1。跳轉(zhuǎn)到節(jié)
例子:Pinterest。
問(wèn)題:用戶想要跳過(guò)整個(gè)部分的web應(yīng)用程序或內(nèi)容。
解決方案:創(chuàng)建一個(gè)快捷方式按鈕或熱點(diǎn),需要用戶直接向某個(gè)web應(yīng)用程序的一部分,通常在開(kāi)始或者結(jié)束,但更常見(jiàn)的其他特定點(diǎn)。
例如,用戶可以點(diǎn)擊一個(gè)標(biāo)簽或按鈕滾動(dòng)到頁(yè)面的頂部無(wú)論他們?cè)谀睦?。這也方便特別是如果你實(shí)現(xiàn)無(wú)限滾動(dòng)模式(見(jiàn)下文),頁(yè)面可以真的只要新內(nèi)容加載一個(gè)接一個(gè)。
如果用戶想要訪問(wèn)控制或信息僅在頁(yè)面的頂部可見(jiàn),返回后幾頁(yè)的滾動(dòng)可以是一場(chǎng)噩夢(mèng)。Pinterest解決這個(gè)用戶頭痛通過(guò)展示一種低調(diào)的“jump-to-top”按鈕,立即卷軸用戶。
2。單頁(yè)面的Web應(yīng)用程序
例如:Gmail。
問(wèn)題:用戶想要一個(gè)中心位置視圖或采取行動(dòng)在大多數(shù)或所有內(nèi)容,所以他們不需要浪費(fèi)時(shí)間頁(yè)面之間導(dǎo)航。
解決方案:使用現(xiàn)代web開(kāi)發(fā)技術(shù)來(lái)構(gòu)建一個(gè)單頁(yè)面應(yīng)用程序,不需要重新加載本身作為用戶瀏覽。這種模式更多的是一個(gè)完整的重組網(wǎng)絡(luò)如何工作,而不是你可以侵入你的應(yīng)用。在某種程度上,“頁(yè)面在一個(gè)單頁(yè)面應(yīng)用程序并不是一個(gè)真正的傳統(tǒng)web意義上,而是更多的一個(gè)特定的數(shù)據(jù)視圖。單頁(yè)面的web應(yīng)用程序(使用AJAX),異步加載,他們立即執(zhí)行用戶無(wú)需等待之間的單獨(dú)頁(yè)面加載操作。
Gmail是一個(gè)很好的例子,一個(gè)單頁(yè)面應(yīng)用程序集成了多個(gè)操作到一個(gè)“頁(yè)面”。單頁(yè)設(shè)計(jì)的趨勢(shì)是這個(gè)UI的less-hardcore實(shí)現(xiàn)模式,所有內(nèi)容可以在同一頁(yè)面訪問(wèn)。這使得瀏覽更快,反應(yīng)敏捷,桌面和web應(yīng)用程序之間的界限變得模糊。
為web應(yīng)用程序像Spotify,單頁(yè)面應(yīng)用程序模式就變得非常重要了,當(dāng)你考慮到用戶可能在后臺(tái)播放音樂(lè),還同時(shí)瀏覽更多的音樂(lè),有一個(gè)單頁(yè)面應(yīng)用程序不需要重新加載頁(yè)面,所以音樂(lè)可以繼續(xù)玩。
一個(gè)考慮你需要在實(shí)現(xiàn)一個(gè)單頁(yè)面應(yīng)用程序的URL結(jié)構(gòu)。因?yàn)閮?nèi)容是使用Javascript動(dòng)態(tài)加載,url可以成為無(wú)用的和訪問(wèn)一個(gè)特定的視圖可以成為不可能如果沒(méi)有做對(duì)。Gmail和Twitter等網(wǎng)絡(luò)應(yīng)用克服了顯式地為每個(gè)視圖生成惟一的url,也解決了瀏覽器的后退按鈕的問(wèn)題變得不可用。
3。建議
例子:Spotify。
問(wèn)題:用戶想知道哪些內(nèi)容視圖。
建議解決方案:展示內(nèi)容和建議在不同的點(diǎn)來(lái)幫助用戶瀏覽內(nèi)容。使用信息從用戶的概要文件的偏好或過(guò)去的交互應(yīng)用,Facebook、Eventbrite,Spotify和Yelp和其他很多為他們的用戶生成定制的建議來(lái)幫助他們發(fā)現(xiàn)新的和相關(guān)內(nèi)容或連接。
這些建議的形式可以是“受歡迎的”和“最近發(fā)布”項(xiàng)目。Facebook提供了“相關(guān)”頁(yè)面中的基于用戶交互的文章時(shí)間以及更專門的建議部分,用戶可以發(fā)現(xiàn)新的頁(yè)面和人。的內(nèi)容提供給用戶可以無(wú)休止的特別是在社交網(wǎng)絡(luò)應(yīng)用程序功能用戶生成內(nèi)容。正如2014年Web UI設(shè)計(jì)模式所討論的,提供一個(gè)健壯的推薦引擎在UI中可以是一個(gè)偉大的方式來(lái)幫助他們發(fā)現(xiàn)新的內(nèi)容。
4。相關(guān)內(nèi)容
例如:紐約時(shí)報(bào)。
問(wèn)題:用戶想要瀏覽類似內(nèi)容如果當(dāng)前內(nèi)容不正是他們尋找或他們只是想要更多的。
解決方案:顯示類似或相關(guān)的內(nèi)容,以幫助用戶找到更多類似的項(xiàng)目他們正在觀看。建議(上圖),這是為一個(gè)基本的web應(yīng)用程序的UI模式,功能用戶生成內(nèi)容,除了而不是裁剪建議基于用戶的偏好或以前的活動(dòng),相關(guān)內(nèi)容更多的是展示相關(guān)項(xiàng)目基于分類和標(biāo)記。
亞馬遜,時(shí)間和紐約時(shí)報(bào)網(wǎng)站的好例子顯示項(xiàng)目和當(dāng)前正在查看類似的故事。媒介需要這一步,讓讀者通過(guò)添加鏈接顯示相關(guān)內(nèi)容的進(jìn)一步閱讀的文章部分。
5。下一個(gè)步驟
例子:Quora。
問(wèn)題:用戶想知道下一步要完成一個(gè)任務(wù)后。
解決方案:給用戶一個(gè)明確的步驟列表,他們可以豐富他們的經(jīng)驗(yàn)。Quora例如創(chuàng)建一個(gè)待辦事項(xiàng)列表為用戶來(lái)完成他們的配置文件。linkedIn相同的列表展示了部分用戶可以添加到他們的個(gè)人資料,配對(duì)的完整性計(jì)模式為用戶提供一個(gè)激勵(lì)。
最復(fù)雜的web應(yīng)用程序有多個(gè)用戶流,所以為用戶提供一個(gè)待辦事項(xiàng)清單可以成為一個(gè)偉大的方式引導(dǎo)他們前進(jìn)。另一個(gè)模式可以配對(duì)與相關(guān)內(nèi)容;媒介這是否好,通過(guò)展示的另一篇文章的摘要,當(dāng)用戶的。這讓用戶參與并沉浸在你的UI。
6。歷史/最近查看的
例如:亞馬遜。
問(wèn)題:用戶想要回憶起他們與持久。
解決方案:讓用戶接在他們最后離開(kāi)的活動(dòng)。例如,亞馬遜跟蹤用戶的瀏覽記錄和顯示最近查看的內(nèi)容,這樣他們就可以回到他們?nèi)菀兹绻枰?。許多web應(yīng)用程序也跟蹤用戶一直在做什么,Facebook的時(shí)間表是最終的例子。不僅用戶的時(shí)間表記錄帖子和照片上傳,它也記錄與其他第三方頁(yè)面和web應(yīng)用程序之間的互動(dòng)交互式歷史上像Spotify用戶可在需要時(shí)參考。
谷歌搜索放音樂(lè)和Spotify跟蹤最近播放的歌曲。這種模式幫助用戶跟蹤的內(nèi)容他們共事過(guò),也能作為一個(gè)書(shū)簽的方法以后的事情要做。
7。特色內(nèi)容
例子:Airbnb。
問(wèn)題:用戶想知道什么樣的內(nèi)容可以創(chuàng)建應(yīng)用程序。
解決方案:功能具體內(nèi)容放在前臺(tái)的用戶沒(méi)有它迷失在通常的混合與時(shí)間相關(guān)的內(nèi)容。這些內(nèi)容可以支付,流行,新的,或其他一些重要的變量。
特色內(nèi)容提供給用戶的可能性,幫助他們了解這個(gè)平臺(tái)可以完成的事情以及其他用戶正在使用它。等網(wǎng)站Airbnb,Etsy和Flickr在首頁(yè)顯示隨機(jī)內(nèi)容,幫助用戶探索網(wǎng)站,而無(wú)需事先作出的承諾,以及鼓勵(lì)現(xiàn)有用戶,幫助他們實(shí)現(xiàn)更大的觀眾。
另一方面,它也可以幫助特定的內(nèi)容獲得牽引力,使它特別重要。支付或“特色”等內(nèi)容可以標(biāo)記為澄清的期望。
8。無(wú)限卷動(dòng)
例子:Pinterest。
問(wèn)題:用戶想要瀏覽所有內(nèi)容。
解決方案:自動(dòng)加載下一組或頁(yè)面的內(nèi)容,當(dāng)用戶到達(dá)當(dāng)前頁(yè)面的底部,創(chuàng)造無(wú)限滾動(dòng)頁(yè)面的效果。這種方式自動(dòng)加載新內(nèi)容后,用戶不需要等待點(diǎn)擊“下一頁(yè)”的鏈接。無(wú)限滾動(dòng)效果最好,當(dāng)有很多內(nèi)容顯示,與大多數(shù)像Facebook這樣的社交媒體巨頭一樣,Twitter,Pinterest和Tumblr等等。
然而在其偉大的瀏覽內(nèi)容,尤其是多媒體畫廊,兩個(gè)基本的問(wèn)題是,用戶可能會(huì)迷失方向,失去的地方。如果他們想跳到一個(gè)特定的點(diǎn)或書(shū)簽回來(lái)后,無(wú)限卷動(dòng)會(huì)導(dǎo)致一些問(wèn)題。Facebook在這個(gè)工作在瀏覽一個(gè)時(shí)間表通過(guò)創(chuàng)建一個(gè)分頁(yè)/無(wú)限卷動(dòng)混合,可以跳轉(zhuǎn)到一個(gè)特定的月或一年。Pinterest滾動(dòng)到高級(jí)模式,集成與一個(gè)小按鈕,允許用戶返回頁(yè)面的開(kāi)始。
9。走查和教練標(biāo)志
例子:松弛。
問(wèn)題:用戶想要知道如何使用不同的應(yīng)用程序的功能。
解決方案:設(shè)計(jì)一個(gè)預(yù)排或教程演示了每個(gè)函數(shù)是如何工作的。很多web應(yīng)用程序已經(jīng)開(kāi)始使用這種技術(shù)來(lái)顯示用戶在剛推出時(shí),有兩種基本方法。
一些web應(yīng)用程序,比如松去覆蓋的路線指示,強(qiáng)調(diào)用戶界面的重要部分,“教練標(biāo)志”來(lái)解釋他們所做的事情。松弛的需要被集成到下一個(gè)層次的事情聊天機(jī)器人,幫助用戶建立個(gè)人資料。這很有道理,因?yàn)樗沙谑且粋€(gè)聊天應(yīng)用程序,和“Slackbot”走的用戶通過(guò)填寫個(gè)人資料信息,如電話號(hào)碼和顯示名稱的談話。
另外,Tumblr提出了一種預(yù)排,幫助用戶了解。這個(gè)介紹也是一個(gè)偉大的時(shí)間來(lái)收集重要信息超越簡(jiǎn)單的注冊(cè),很像一個(gè)安裝向?qū)?。這種模式的重要性再?gòu)?qiáng)調(diào)也不為過(guò),任何應(yīng)用程序并不是立即直覺(jué),因?yàn)楦嗟挠脩袅私饽愕漠a(chǎn)品,他們將會(huì)有更多的理由來(lái)回來(lái)。
10。溢出菜單
例子:Spotify。
問(wèn)題:用戶想要快速訪問(wèn)附加選項(xiàng)或他們可以執(zhí)行的行動(dòng)。
解決方案:隱藏額外的選項(xiàng)和按鈕在一個(gè)可擴(kuò)展的菜單,這樣他們不雜亂的主要接口。Facebook和谷歌都使用“溢出菜單”保持非常干凈的用戶界面在他們的web應(yīng)用程序最重要的輔助選項(xiàng)通過(guò)隱藏在一個(gè)可擴(kuò)展的菜單。
這也可以用來(lái)顯示最重要的行動(dòng)的參與。例如Pinterest保持在Facebook上分享按鈕可見(jiàn)幫助加快一個(gè)共同的和可取的用戶操作在每個(gè)“銷”?；蛘?一個(gè)溢出菜單可以包含額外的菜單項(xiàng)或行動(dòng),逐步添加到用戶界面中。
11。變形控制
例子:Pinterest。
問(wèn)題:用戶想要執(zhí)行不同類型的操作,但有限的屏幕顯示所有這些控件。
解決方案:更換按鈕,屏幕上的控件替代功能。根據(jù)用戶目前正在做什么,UI可以完全替代一個(gè)元素與另一個(gè),例如“做”和“撤銷”或“添加”和“刪除”。“這是有意義的,當(dāng)交流行為以某種方式相關(guān)。Pinterest和Facebook使用相同的按 鈕“喜歡”/“不像”來(lái)節(jié)省空間并向用戶顯示當(dāng)前狀態(tài)。這個(gè)UI設(shè)計(jì)模式節(jié)省了房地產(chǎn)、毀滅任何行動(dòng)快速、清潔,是一個(gè)整體的解決方案。
12。“粘性”固定導(dǎo)航
例子:Houzz。
問(wèn)題:用戶想要訪問(wèn)菜單隨時(shí)在web頁(yè)面。
解決方案:頂部,一面,或底部導(dǎo)航保持滾動(dòng)頁(yè)面時(shí)。在某些情況下,從小節(jié)標(biāo)題也會(huì)固定在滾動(dòng)和替換或添加到現(xiàn)有的固定導(dǎo)航.
主要的導(dǎo)航欄為Google +和Pinterest堅(jiān)持頁(yè)面的頂部,允許用戶快速訪問(wèn)這些菜單項(xiàng)和過(guò)濾器時(shí)需要。搭配無(wú)限滾動(dòng)模式時(shí),粘性的導(dǎo)航菜單可以極大的方便用戶滾動(dòng)過(guò)去超過(guò)第一頁(yè)的內(nèi)容。
13。垂直導(dǎo)航
例子:Spotify。
問(wèn)題:用戶需要一種方法在應(yīng)用程序的不同部分之間進(jìn)行導(dǎo)航,但有限的空間來(lái)顯示這些信息。
解決方案:用戶界面的重要部分可以給出一個(gè)列表,用戶可以滾動(dòng)得到他們想要的東西。這也讓UI的頁(yè)眉和頁(yè)腳自由更多的“通用”導(dǎo)航、酒吧等行動(dòng)。傳統(tǒng)上,大多數(shù)導(dǎo)航模式水平制表符的形式或按鈕。垂直導(dǎo)航模式已經(jīng)成為一個(gè)重要的進(jìn)化導(dǎo)航設(shè)計(jì)來(lái)處理用戶生成內(nèi)容用戶時(shí)間表和無(wú)限滾動(dòng)內(nèi)容。
14。彈窗
例如:Facebook。
問(wèn)題:用戶想要查看相關(guān)信息不丟失他們當(dāng)前的UI。
解決方案:在彈窗顯示重要通知和附加信息。這個(gè)UI模式的優(yōu)勢(shì)提供一個(gè)輕量級(jí)的和直接的方法查看附加信息或采取特定的行動(dòng),但他們沒(méi)有把用戶的當(dāng)前活動(dòng)。
Pinterest Fitocracy使用模態(tài)彈窗快速行動(dòng),迅速和Facebook使用彈窗顯示活動(dòng)欄的內(nèi)容片段。彈出窗口的UI模式對(duì)于這樣的行為是很重要的,因?yàn)樗麄冋谶M(jìn)行這樣的數(shù)據(jù)和用戶總是知道這些控件的應(yīng)用。
內(nèi)容在后臺(tái)仍然可見(jiàn),用戶可以調(diào)整排序選項(xiàng)或更改字體大小,而不必去之間來(lái)回的觀點(diǎn)——這一切都發(fā)生在這里。彈窗和模態(tài)窗口還可以用來(lái)顯示重要通知或通知,要得到用戶的關(guān)注,因?yàn)檎J(rèn)為他們需要一個(gè)水龍頭或刷卡。
15?；w式、側(cè)欄和抽屜
例如:紐約時(shí)報(bào)。
問(wèn)題:用戶需要一種方法來(lái)導(dǎo)航應(yīng)用程序不同部分之間的每個(gè)部分中而不被打擾。
解決方案:第二個(gè)應(yīng)用程序的部分,如導(dǎo)航、聊天、設(shè)置、用戶資料等。藏在一個(gè)可折疊的面板是隱藏在主要部分不需要。當(dāng)訪問(wèn)時(shí),通常將主要部分放在一邊或幻燈片。由于滑蓋式是在一個(gè)單獨(dú)的層從應(yīng)用程序中的主要內(nèi)容,有很多的靈活性的內(nèi)容可以放在抽屜里——圖標(biāo)、文本,甚至簡(jiǎn)單的控制是可行的選擇提供快速訪問(wèn)重要的行動(dòng)。
通常,抽屜可以隱藏在“漢堡菜單”或一個(gè)簡(jiǎn)單的箭頭,表示有更多的內(nèi)容。這是一個(gè)簡(jiǎn)單的方法來(lái)隱藏所有不重要的事情在一個(gè)“抽屜”,這樣你只需要關(guān)注如何提取最重要的信息在每個(gè)視圖。例子比比皆是。Asana,Spotify(搜索框)和Facebook(聊天框)。一些更具體的例子包括Houzz,導(dǎo)航抽屜,消失當(dāng)你向下滾動(dòng)并重新出現(xiàn)在頂部,和《紐約時(shí)報(bào)》,它隱藏了一邊的抽屜里出現(xiàn)左邊當(dāng)用戶點(diǎn)擊頂部的“部分”按鈕頁(yè)面的左側(cè)。Pinterest當(dāng)你向下滾動(dòng),簡(jiǎn)單的向上箭頭按鈕出 現(xiàn)導(dǎo)航回到頂部,和它是如何工作的頁(yè)面。
16。所有的鏈接
例子:體式。
問(wèn)題:用戶需要一個(gè)一致的方式瀏覽內(nèi)容而不受其他內(nèi)容。
解決方案:大多數(shù)或所有用戶在應(yīng)用程序與內(nèi)容,讓用戶自由地探索并找到他們正在尋找的信息沒(méi)有達(dá)到死角或被一連串的超鏈接文本,額外的按鈕,調(diào)用行動(dòng)等等,你通常會(huì)看到網(wǎng)站上。如果他們想與內(nèi)容交互的應(yīng)用,奇怪的是,他們可以點(diǎn)擊它,去一個(gè)新的視圖更詳細(xì)的經(jīng)驗(yàn)。
與體式和Spotify內(nèi)容很多web應(yīng)用程序允許用戶探索各種各樣的內(nèi)容通過(guò)點(diǎn)擊它,例如點(diǎn)擊一個(gè)藝術(shù)家或用戶帶你去他們的配置文件,可以點(diǎn)擊物品,可以點(diǎn)擊表正面和許多其他的行為。
讓用戶瀏覽
跟蹤你的用戶所在的地方應(yīng)該導(dǎo)航,是否查看導(dǎo)航元素,他們通常如何導(dǎo)航到應(yīng)用程序的某些地區(qū),他們從哪里來(lái),要在應(yīng)用程序(比如用戶流)等等。重新安排,重排序、大小、和調(diào)整的導(dǎo)航元素,直到你得到更多所需的行動(dòng)。當(dāng)然,深入思考用戶如何使用你的移動(dòng)應(yīng)用程序,當(dāng)他們?cè)噲D讓應(yīng)用程序的某些部分,確保你沒(méi)有遺漏一些顯而易見(jiàn)的。
文章標(biāo)簽：
文章評(píng)論：