導(dǎo)航設(shè)計模式的重要性

2015-09-29    分類： 網(wǎng)站建設(shè)

在本文中,我們討論的重要性,導(dǎo)航設(shè)計模式使用的例子從一些最熱門的網(wǎng)站和web應(yīng)用程序。
一旦人們開始使用你的網(wǎng)站或web應(yīng)用程序,他們需要知道去哪里以及如何在任何時候到達那里。如果他們不能瀏覽您的應(yīng)用程序是很容易的,你很快就會失去他們。因此,在您的web應(yīng)用程序設(shè)計有效的導(dǎo)航是至關(guān)重要的。
概述的模式
這是我們詳細(xì)的設(shè)計模式的概述在這篇文章:
1.跳轉(zhuǎn)到節(jié)
2.單頁面的Web應(yīng)用程序
3.建議
4.相關(guān)內(nèi)容
5.下一個步驟
6.歷史/最近查看的
7.特色內(nèi)容
8.無限卷動
9.走查和教練標(biāo)志
10.溢出菜單
11.變形控制
12.“粘性”固定導(dǎo)航
13.垂直導(dǎo)航
14.彈窗
15.滑蓋式、側(cè)欄和抽屜
16.所有的鏈接

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

網(wǎng)頁名稱：導(dǎo)航設(shè)計模式的重要性
地址分享：http://www.muchs.cn/news45/32945.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、Google、關(guān)鍵詞優(yōu)化、移動網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)