中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

小編導讀：怎么才能做出一個既簡潔而又具有預見性的導航？在Part 1里面說，前兩步分別是：組織內容，簡化導航選項；解釋這些選擇，降低用戶的認知障礙。

然而，我們還需要多做兩步——選擇正確的導航菜單形式，并設計出來。本系列 Part 2 將展示第三步和討論哪種導航菜單適應哪些內容。

界面上的導航菜單都為了給用戶提供瀏覽內容的導航選項。這不包括，文章或商品頁面里面的超鏈接，因為它們的主要作用是流量，而不是導航。

主（傳統(tǒng)的）導航和次級（備用的）導航之間是有區(qū)別的，但很難精確界定。有人說主導航主要是通過點擊、懸停來選擇或瀏覽元素據類型，而次級導航在其中某方面有缺失。

傳統(tǒng)的導航菜單

傳統(tǒng)的導航菜單有以下5種類型，從簡單到復雜排序

1. 菜單欄

2. 常規(guī)下拉菜單

3. 多欄下拉菜單 (Mega-menu)

4. 分頁

5. 動態(tài)過濾器

當然還存在更復雜的混合型方案，但是所有混合型導航都能拆解成以上5個類型?，F在問題是什么時候該選擇哪種類型。

就像 Part 1說的，設計師用3種方式來解釋導航選項：標簽；標簽+圖；標簽+圖+描述。為了降低用戶的認知障礙，設計師應為目標用戶提供提供足夠的信息來讓他們理解這些選項。

下面這條經驗法則 (rule of thumb) 可以幫你決定什么時候選用哪條規(guī)則：越少的選項，需要解釋的就越少，所以導航應該盡可能簡潔。

為什么有些 widget 更易用，什么時候應該選擇這個而不是那個…… 首先仔細看下這5種導航菜單。

菜單欄

幾乎每個網站一個橫向或豎直的欄來容納頂級類別。

最基本的導航——一個橫向或豎直的欄

建議

最重要或最頻繁被訪問的欄目或類別應該放到這個導航欄里面。

解釋

一個導航欄是最簡單的導航形式。這個導航欄里面的欄目或類別都是全局性的，可以直接被看見及訪問。相比之下，用回會懸停在一個下拉菜單或等待分頁加載要訪問的選項。

問題

導航欄（橫向或豎直）只能放下一小撮欄目，而且還受限于屏幕寬度和方向，它會占據本應該顯示主要內容的空間。

下面的截圖中，會看到橫向的導航也是很好用，它只占據一行空間。為了把它放到更小尺寸的屏幕里面，設計師把導航堆砌在行里面，然而這樣就會把主要內容壓下去，用戶就需要多滾動幾次。

多列的導航就會變得很難用。

在寬屏中，豎直的導航適用于更多的菜單欄目，但它有另一個缺點。它占據的豎直空間本可以更高效地展示主要內容，文章、視頻、商品信息……下面我展示并對比它們的效果。

豎直導航會束縛內容在寬屏中的展示效果。

這就是為什么下拉、浮動菜單更適合多欄目。它們可以根據需要來顯示額外的欄目，把舞臺讓給內容。

常規(guī)下拉菜單

下拉、浮動菜單，被觸發(fā)的時候，就會出現在內容上面。它的條目都是豎直堆砌在一列里面，由文字或文字+圖標組成。

下拉菜單把所有條目豎直堆砌在一列里面。

建議

如果欄目可以很好地用文字表達，并且不會太長，一個常規(guī)下拉菜單是最簡單而又有效的方案。

解釋

與多欄下拉菜單相比，常規(guī)下拉菜單有如下優(yōu)點：

快速加載

多欄下拉菜單需要更多的空間，而常規(guī)下拉菜單只需要少量文字。多欄下拉菜單還會干擾用戶，至少也會降低他們的瀏覽速度，因為他們需要花費時間來搞清楚這個布局。相比之下，一個簡短的豎直列表就很適合快速閱讀和理解。

問題

如果菜單太長，整件事就會變得很奇葩。一個長的豎直下拉列表會被瀏覽器窗口切掉一部分，這就需要用戶不斷滾動。有兩個方法可以處理這個問題。

把表弄成子類別。但這個方法，如果交互設計得不恰當的話，從一個子菜單到另一個子菜單的導航會讓人沮喪。這個問題會在本系列的 Part 3 中說到。

第二個方法就是使用適合屏幕方向的多列下拉菜單。

如果屏幕空間是決定性因素，讓菜單適應屏幕方向不錯的變通方案。

多欄下拉菜單 (MEGA-MENUS)

有一種很特別的下拉菜單叫做多欄下拉菜單。多欄下拉菜單就是下拉或浮動菜單，但它并不是用一列條目堆砌起來，而是用圖片、印刷上的層級、不同的圖層來顯示選項。

多欄下拉菜單就是一個更大、更復雜的下拉菜單。

建議

如果選項需要文字+圖片，那多欄下拉菜單就是個好選擇。

解釋

常規(guī)下拉菜單不能提供這樣的空間或形象化的選項。不管是常規(guī)還是多列，與分頁相比都會有以下的優(yōu)點

快速加載

降低認識障礙。分頁的話，用戶就會思考“哪個是廣告？”，“哪個才是真正的內容？”，“導航在哪？”……下拉菜單只會出現在導航，并且出現在鼠標光標附近。

問題

即使是多列下拉菜單，空間也是有限的。如果有很多很多欄目，那分頁就不可避免。

分頁

第四種顯示欄目、類別的方法就是用一個獨立頁面。

分頁就可以容納很多子類別。

建議

如果需要文字+圖片+描述，分頁就是最好的。

解釋

用多列下拉菜單來容納這些內容也是可行的，但也只有描述很短的時候。

問題

把用戶帶到一個分頁來瀏覽導航選項，而不是內容，這并不是一個優(yōu)雅的方案。同時用戶也會被帶離當前頁面的語境。但如果多列下拉菜單不足以容納這么多的選項，分頁就是最好的方案。

動態(tài)過濾器

動態(tài)過濾器是最復雜，最強大的方案，依靠用戶的組合他們想要看的內容流。

復雜而強大，動態(tài)過濾器讓用戶可一組織他們需要的內容。

很多網站只有前3種導航菜單，動態(tài)過濾器就沒有單獨出現。而是作為一個選項附加在主導航上。

Kmart （下圖）以下拉菜單開始導航步驟，常規(guī)和多列都有。在下一個層級，使用分頁來展示產品類別。當用戶導航至某個系里面，他們就會看見一個動態(tài)過濾器。用以精準搜索。

動態(tài)過濾器經常會附加在主導航上。

建議

符合在Part 1里面討論的元數據類別?？梢赃@樣說，前3種導航適合重要和互斥類別，動態(tài)過濾器適合把類別整合在一起。

解釋

動態(tài)過濾器的有點就是可以讓用戶選擇，并及時改變值。而不是在不同導航層級里面前進、后退，用戶可以停在一個層級，動態(tài)地整合值，直到結果符合他們的要求。

動態(tài)過濾器通常是豎直的并不是一個缺點，因為過濾結果并不是前面所說的“內容”。他們仍然是導航的一部分，左邊選擇的值和右邊及時反饋的結果是有動態(tài)聯系的。

問題

動態(tài)過濾器很強大，也很復雜。它們占據更多的空間，需要更多的時間來加載。用戶需要去分析這些不同的元素，包括過濾器、結果、結果排序、展示模式，這些使動態(tài)過濾器在電腦上造成挑戰(zhàn)，就更別說手機上。如果更簡單的導航就可以完成工作，就不要使用它。

備用的導航

幾乎所有的網站都會選用其中一種傳統(tǒng)導航作為它們的主導航。然而，很多還會以備用導航系統(tǒng)作為補充。這么流行的方式也是很重要的。

這里有四種基本的形式：

搜索

A-Z的索引

標簽

搜索

搜索讓用戶從在各個導航層級中抽離出來，把他們直接帶到目的地。其中的不同點在于，頁面的標題已經由用戶手動設定好了。

搜索是在不同層級中瀏覽想要的內容的快捷方式

設計師會在所有的頁面上應用標簽、關鍵字系統(tǒng)，來解釋用戶和搜索引擎之間的誤差，例如錯別字、同義詞、內容不同的概念模型。換言而知，搜索引擎會嘗試猜測用戶究竟想要什么。

建議

提供搜索作為主導航的補充，并不等于作為主導航。

解釋

用戶是否以搜索為主導，關于這點不同的研究有不同的結論。當然，這也會受搜索引擎是如何設計、展現等因素影響，甚至導航的設計太差也會增加搜索的占有率?？傊阉鞑⒉皇鞘滓桨?。

盡管開發(fā)者作出各種努力來避免錯誤，搜索成功率還是很低。原因是每個網站都會有自己的標簽、分類方案、命名習慣。用戶不知道這些細節(jié)，所以它們經常猜測性地填寫搜索請求，這是一個累贅而又不確定的過程，導致很多人只有一、兩次搜索功能。在移動設備上尤其明顯，因為填寫搜索請求的體驗更不舒服。

另外一個問題就是，即使搜索結果都是相關，用戶也不確定它的完整性?！皶粫驗樗阉饕媲饬宋业乃阉髡埱蠖鴮е律倭诵┦裁?？”……傳統(tǒng)的導航，確立并展現所有類別，同時展示所有相關條目，提供用戶所瀏覽的確定信息。

另外，還會經常討論搜索的轉化率比導航菜單高。其實這可以被解釋——瀏覽和搜索的區(qū)別。瀏覽型的用戶會用菜單，而很少決定買些舍呢么，那些知道自己想買什么的用戶，就會直接輸入并搜索。

然而，搜索能夠更有效地找到特定商品，它并不那么流行。

用戶會傾向于使用傳統(tǒng)導航，即使是在找特定商品的時候。

用搜索的問題是，不同的詳細配置、不同的地區(qū)命名或型號，很難說出產品的確切名稱?！癎S-50 or G-150?”，“這個有額外的電池？”通過動態(tài)過濾器，用戶可以指定他們想要的功能，而不需要想起具體型號、編碼。

另外一個問題就是，搜索會妨礙用戶尋找相關條目，如果用戶找到他想要的確切條目，他就不會去看其他。而使用動態(tài)過濾器，用戶就會看到相關的條目，包括一些功能更多或價格更低的物品。

給搜索引擎添加動態(tài)過濾器也是可的，這可以結合兩種的有點。

總的來說，搜索引擎，特別是有復雜的功能和算法，可以提供很好的結果，但是它本身存在的問題使得它還不如一個經過精心設計的傳統(tǒng)菜單。這就是為什么把搜索是作為一個備選方案，它并不是導航的核心。

搜索在用戶生成內容 (user-generated content) 的本地應用能更好地工作，因為用戶知道他們命名過、標記過的內容。

A – Z的索引 (A – Z index)

一個 A – Z 的索引包括網站上面的所有條目，并按字母順序排列。

A – Z 的索引按字母順序排列網站的所有內容。

建議

不要優(yōu)先考慮 A – Z的索引。只列出所有的類別頁面，比列出上千個獨立頁面要有用。

解釋

A – Z的索引的好處在于大家都知道怎么按字母順序來導航。但也存在3個問題。

第一，A – Z的索引很適合文字，不適用于圖片和描述，有很多時候圖片和描述是不可或缺。

第二，選取符合用戶期望的詞匯也不簡單。由于地域、年代、術語的關系，可能會造成用戶在錯誤的地方尋找想要的條目。唯一的變通方案就是，包含同義詞。在傳統(tǒng)導航中，同義詞并不是一個大問題，因為用戶不會同時面對大量選項。

第三，A-Z的索引，就像搜索那樣，也會妨礙用戶發(fā)現相關條目。例如，找“eggs and beans”(…蛋和豆)，他們就只能得到蛋和豆。在傳統(tǒng)導航里面，用戶還會見到其他早餐，因為他們的導航線路是“早餐”->“蛋和豆”。

網站地圖 (site maps)

網站地圖通過主標題、副標題來展示網站的結構。

網站地圖展示網站結構。

建議

sitemap.xml文檔可以幫助搜索引擎索引索引網站。但是不應該把它視作導航手段。

解釋

網站地圖通常只包括文字，但是用戶需要的是圖標、圖片、藐似來理解選項。網站地圖可以包含這些元素，不過這會加劇另一個問題。網站地圖通常會一次性顯示所有內容，并不提供篩選。這就會影響用戶瀏覽這些內容、獲取信息。

標簽 (tags)

標簽，可以是關鍵字，并不需要有父集、子集類別。通常出現在文章末尾。

通常會帶上“More about”的標簽

建議

基于標簽的系統(tǒng)在調用額外信息方便做得很好，即便如此，仍沒傳統(tǒng)的基于類別系統(tǒng)做得好。

解釋

在所有的備用導航中，標簽最接近傳統(tǒng)導航。畢竟，標簽本質上就是創(chuàng)造元數據，信息架構的第一步，傳統(tǒng)導航的基礎。然而每篇文章都有一串標簽，你很快就會得到成千上萬個標簽。

這就是為什么為標簽分類這么重要。把這些標簽整理成父類別、子類別，設計師就能把一大堆標簽結構化成一組組相關的信息。包含這些類別的傳統(tǒng)導航可以讓用戶跳過不想要的組別，直接瀏覽想要的信息。

很多以內容為基礎的網站，會用混合導航 (hybrid navigation) 來代替?zhèn)鹘y(tǒng)的菜單。這些分類標簽一般很粗略，依靠其他的導航模型，如外部和內部的搜索引擎、feeds、社交媒體鏈接。這類系統(tǒng)可以把用戶帶到想看的文章，但這很難讓用戶找到想要的一類文章。為了解決這個問題，一些設計師簡單地把他們歸結為一系列關鍵字——“Barack Obama,” “Democrats,” “Republicans,” “health care,” “shutdown.” 用戶訪問這些標簽來瀏覽他們感興趣的相關文章。

在傳統(tǒng)的導航，用戶會按相關的關鍵字來做導航——News → Politics → US → Domestic policy → Health care。在這個案例中，用戶會對這篇文章很感興趣，因為它論述了美國醫(yī)保系統(tǒng)，而不是因為它提到“Barack Obama,” “Democrats,” “Republicans,” “shutdown.” 訪問父類別就能查看相關文章。

傳統(tǒng)基于層級的菜單，是最精準的導航類型。

基于標簽的系統(tǒng)，如果在社交媒體和搜索引擎的補充下，會變得十分有效。但是它作為一種導航方法，像釣魚，而不是目的性強的搜索。同時，用戶不一定依賴搜索引擎、外部鏈接來瀏覽網站。他們更傾向在首頁尋找信息，所以經過設計的傳統(tǒng)菜單還是最高效的方法。

結論

當你要選擇恰當的導航方式，底線是很明確的：盡可能少選項，盡可能用簡短的信息來解釋它們，盡可能簡潔的導航。

最大的問題在于是否或怎么使用備用的導航，作為傳統(tǒng)導航的補充。

備用的方案不應該是高成本的。而它們本身又有缺點，以至于它們不能成為主導航系統(tǒng)。此外，用戶一般不會使用這些備用方案，除非主導航不起作用。

所以，與其投入大量努力去改進、提升備用導航，還不如去設計一個好的主導航。這樣就不需要次級導航的出現。

這篇文章的建議都在下面總結了一遍。

選用傳統(tǒng)導航

一個豎直的導航欄并不會比橫向的差，但他會分散對主內容的注意力，因為它和內容出現在同一塊位置。一個橫向導航欄更適合頂級類別，只要條目可以放在一行里面。如果一行不夠的話，就使用下拉菜單或分頁，而不是簡單地把它弄成豎直導航。

如果文字就足以解釋選項，常規(guī)下拉菜單就足夠。把長的列表分割成次級類別，或者選用適應屏幕方向的多欄下拉菜單。

如果需要文字+圖片，選用多欄下拉菜單。

如果需要文字+圖片+描述，那就使用分頁。

上面這些對主要、互斥可選類別都很有效。如果可選類別可以合并，那就使用附加在傳統(tǒng)菜單上的動態(tài)過濾器。

選用備用導航

如果用戶知道他們想找的具體條目，搜索或 A – Z 索引就很好用。然后它們都有礙于發(fā)現相關條目，不要把它們看得比傳統(tǒng)導航更重要。

如果分類內容的成本不會太高的話，基于標簽的系統(tǒng)是一個很好的方案。不過它需要社交媒體和搜索引擎的支援。

相關閱讀：有效地簡化導航-Part 1：信息架構

本文作者：@Anastasios Karafillis ? 翻譯：@lyzhie ? 來自：smashingmagazine