在本文中, 我們討論的重要性, 導航設計模式使用的例子從一些最熱門的網站和 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 應用程序允許多用户探索各種各樣的內容通過點選它, 例如點選一個藝術家或多用户帶您去他們的配置檔案, 可以點選物品, 可以點選表正面和許多其他的行為。
讓多用户瀏覽
跟蹤您的多用户所在的地方應該導航, 是否檢視導航元素, 他們通常如何導航到應用程序的某些地區, 他們從哪裏來, 要在應用程序 (比如多用户流) 等等。重新安排, 重排序、大小、和調整的導航元素, 直到您得到更多所需的行動。當然, 深入思考多用户如何使用您的移動應用程序, 當他們試圖讓應用程序的某些部分, 確保您沒有遺漏一些顯而易見的。