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