天天看點

互動思考:“重要的小角色”——面包屑導航一、什麼是面包屑?二、面包屑的類型有哪些?三、什麼情況下适合使用面包屑?四、使用面包屑時有哪些要注意的?五、總結

作者:人人都是産品經理

簡介:在設計網站的過程中,我們從一開始就會遇到導航設計,比如面包屑導航,但對于許多設計師來說,面包屑導航往往是直接複制的,很少關注甚至忽視它的存在。在當今多樣化的産品設計中,什麼樣的網站适合面包屑導航?本文将對此進行探讨,希望對您有所幫助哦。

互動思考:“重要的小角色”——面包屑導航一、什麼是面包屑?二、面包屑的類型有哪些?三、什麼情況下适合使用面包屑?四、使用面包屑時有哪些要注意的?五、總結

說到面包屑導航,我就跟大家分享一個童話故事:兩個孩子,為了不迷失在森林裡,是以一路上撒上面包屑作為标記,幫助自己複出。

面包屑導航的概念(下面一直被描述為"面包屑")來自這個童話故事;痕迹導航的工作方式類似于痕迹導航,可幫助使用者檢視他們在網站中的位置,并快速找到其他網站和相同類型的功能。

<h1 toutiao-origin""h2">,什麼是面包屑?</h1>

通俗地說,面包屑是一種輔助和互補的導航方式,允許使用者知道他們在網站或應用程式上的位置,并輕松傳回其原始網站。

它們中的大多數看起來像這樣:1級頁面&gt;次要頁面&gt;3級頁面或1級頁面/次要頁面/第三頁。

<面包屑>h1頭條起源""和"h2"是什麼類型?</h1>

通常,痕迹導航分為三種類型:基于位置的痕迹導航、基于屬性的痕迹導航和基于路徑的痕迹導航。

< h2 toutiao-origin""h3" > 1. 基于位置的面包屑</h2>

這種類型的痕迹導航是最常見的痕迹導航類型,可以很好地訓示目前頁面與整個網站的層次結構,并且可以主要用于具有多級導航(通常具有輔助或更高導航)的網站,在這些網站中,使用者知道他們的位置以及他們想要更快的位置。

互動思考:“重要的小角色”——面包屑導航一、什麼是面包屑?二、面包屑的類型有哪些?三、什麼情況下适合使用面包屑?四、使用面包屑時有哪些要注意的?五、總結

<h2 toutiao-origin""h3"> 2. 基于财産的面包屑</h2>

基于屬性的痕迹導航列出特定頁面的類别。

此痕迹導航可以很好地訓示目前頁面中産品的其他屬性或類别,可幫助使用者了解産品之間的聯系,并通過各種不同的屬性過濾搜尋結果;

互動思考:“重要的小角色”——面包屑導航一、什麼是面包屑?二、面包屑的類型有哪些?三、什麼情況下适合使用面包屑?四、使用面包屑時有哪些要注意的?五、總結

對于一個産品,通常有多個屬性,具有大屬性,具有小屬性;

< h2 toutiao-origin""h3" > 3. 基于路徑的面包屑</h2>

這種類型的痕迹導航是最不常見的,這種面包屑導航和上面描述的童話類型很可能顯示通路者在到達頁面之前通路過的頁面的連結。

痕迹導航之間沒有明顯的層次結構關系,它們的功能與前進和後退按鈕的功能有些相似。

互動思考:“重要的小角色”——面包屑導航一、什麼是面包屑?二、面包屑的類型有哪些?三、什麼情況下适合使用面包屑?四、使用面包屑時有哪些要注意的?五、總結

<h1 toutiao-origin""h2">,在什麼情況下适合使用面包屑?</h1>

讓我們從面包屑在以下方面的影響開始:

目前頁面在表面上的位置,易于定位和導航,輔助使用者查找路徑;

輕松跳轉到上一頁,告訴使用者"你在哪裡",減少操作次數;

整體來看,主導航要補充,占用螢幕空間小,幹擾少,具有臨時性。

那麼,在什麼情況下使用面包屑進行導航是合适的呢?

讓我們看一下痕迹導航的典型作用:資訊定位和使用者路徑呈現。

基于這兩個典型特征,痕迹導航非常适合在兩種情況下使用:

< h2頭條原點"h3"> 1.嚴格的線性結構</h2>

由于面包屑導航路徑是線性的,是以必須非常清楚地劃分網站的内容,以確定它不會獨立交叉。

否則,痕迹導航的路徑不是唯一的,同一類别可能會出現在不同的路徑中,使使用者感到困惑并降低使用者體驗。

互動思考:“重要的小角色”——面包屑導航一、什麼是面包屑?二、面包屑的類型有哪些?三、什麼情況下适合使用面包屑?四、使用面包屑時有哪些要注意的?五、總結

<h2 toutiao-origin"h3" > 2. 更深層次的層次結構</h2>

痕迹導航适用于更深層次的網站,如果隻有一個級别的分類,通過主導航可以起到快速定位的作用;

互動思考:“重要的小角色”——面包屑導航一、什麼是面包屑?二、面包屑的類型有哪些?三、什麼情況下适合使用面包屑?四、使用面包屑時有哪些要注意的?五、總結

在設計網站時,确定網站是否适合使用痕迹導航的最佳方法是繪制網站的結構或将其顯示為圖表,然後分析使用痕迹導航是否會使使用者更容易切換到不同類别的網頁。你學了嗎?

<h1 toutiao-origin""h2">,使用面包屑時應該注意什麼?</h1>

在我們讨論了面包屑的定義、類型和适合面包屑的内容之後,讓我們來看看使用面包屑時要注意什麼:

<h2 toutiao-origin""h3" >1. 不要使用痕迹導航而不是頂級導航</h2>

痕迹導航通常補充主導航,不應主導頁面。痕迹導航比主導航視覺對象更小或更不突出,并且頁面占用的空間很小;

通常水準顯示在頁面頂部,通常位于标題/标題下方或内容區域上方。

互動思考:“重要的小角色”——面包屑導航一、什麼是面包屑?二、面包屑的類型有哪些?三、什麼情況下适合使用面包屑?四、使用面包屑時有哪些要注意的?五、總結

<h2 toutiao-origin""h3" >2. 不要添加指向目前頁面導航文本的連結</h2>

痕迹導航的最後一級,可以表示目前頁面或目前頁面的下一級别。

但是如果它代表目前頁面,切記不要添加連結,因為使用者已經在這個頁面上,然後添加一個連結到目前頁面,就相當于兩個帶有魚的盤子-多餘的哈。

<h2頭條原産地""h3">3.使用分離器</h2>

分隔符:痕迹導航中最簡單的分隔符大于符号"&gt;"。通常大于符号用于基于位置的痕迹導航,以父類&gt;子類的形式表示導航項之間的層次結構關系。

除了較大的數字外,您還可以使用右箭頭"→"和大于"&gt;&gt;"的雙精度和斜杠"/",具體取決于導航類型和視覺效果。

<h1頭條起源"h2">星期五,摘要</h1>

痕迹導航的目的是使使用者更容易通路您的網站。

從使用者體驗上看,一個"重要的小角色",既能讓使用者看得清楚,又不搶眼;

作者:WOWdesign,研究設計價值的最大化,涉及使用者體驗,品牌體驗,空間體驗。

本文最初由@WOWdesign每個人都是産品經理釋出。未經許可,禁止複制。

該圖來自Unsplash,基于CC0協定

繼續閱讀