|
好產品,，或許你已見得不少。但好產品背后的探索和思考,，恐怕沒有太多人知道,。
在靈感早讀，你會知道「產品人」如何創(chuàng)作,，提供更好的用戶體驗,，并影響成千上萬人的生活。
我們精選優(yōu)質內容,，為你提供特別的產品視角,。 如果你有好文推薦，或者希望投稿,，歡迎聯(lián)系 [email protected],。 導語：現在網絡世界繽紛多彩，大家的注意力也更加短暫,，如何讓用戶更久地留在你的網頁里,？「面包屑導航欄」就是其中一個關鍵。 AppSo（微信號 appsolution）這篇文章,，分享網頁設計「面包屑導航欄」的 3 個 W,，讓你給用戶提供更好的網頁體驗。 面包屑導航（或面包屑痕跡）作為輔助的導航系統(tǒng),，它能告訴用戶其在網站或網頁 app 中的位置,。這個詞語來自漢賽爾與格萊特（又譯糖果屋）童話故事中，主人公沿路丟下面包屑,，形成一條小徑,，從而指引其回到自己的家中,。和童話故事主人公一樣，網站用戶也需要知道其在網站層次結構中的位置,，以使其在需要的情況下能直接瀏覽上一級頁面,。本文，我們將會來討論面包屑導航應用及其最佳實踐：什么是面包屑導航（What）,、什么時候使用面包屑導航（When）和如何設計面包屑導航（How）,。面包屑導航作為有效的視覺輔助,，能告訴用戶其在網站層次結構中的位置。這種特性對用戶來說是上下文信息的重要來源,，可以幫助用戶找到以下問題的答案： 我在哪里,？告訴用戶其在整個網站層次結構中的位置。 我能去哪里,？用戶更能找到相關網站欄目和頁面,。相比菜單欄，用戶通過清晰直觀的面包屑導航,，更容易熟悉和了解網站結構,。 我該去那里嗎？面包屑導航體現了網站的內容價值,，能鼓勵用戶繼續(xù)瀏覽網站,。比如，用戶打開電商網站某產品頁面時,，該產品可能不是他想要的產品,，但用戶也許想瀏覽其他同類產品。通過面包屑導航,，就能相應地減少網站的總體跳出率,。
就適用性而言，面包屑導航減少了用戶訪問上一級頁面本應產生的行為次數,。除了使用瀏覽器「后退」按鈕或網站主導航回到上一級頁面,，用戶也可以使用面包屑導航。緊湊的結構,，不占用過多頁面空間,，面包屑導航是一條橫向文字連接。好處在于,，如有內容過載的情況,，其帶來的負面影響微乎其微。人們可能沒有在意這個小小的設計元素,，但沒人不明白面包屑導航,，也沒人不會使用面包屑導航,。測試網站是否會得益于面包屑導航,，有種好方法是構建網站導航結構的網站地圖或圖表，再分析面包屑導航是否能幫助用戶,，提高其在同類或不同目錄下的導航能力,。 你應該使用面包屑導航的前提是，有大量內容存在于有線性或層次結構的網站分類目錄中,。所謂分類目錄,，是指網站內容可以分類呈現，這些類別還可以繼續(xù)分為更多細分類別,。典型例子正如將大量產品合理地進行分類的電商網站。 對于層次單一,、沒有合理架構或分類的網站,，則不推薦使用面包屑導航。
三,、面包屑導航的分類 位置面包屑導航體現的是網站結構,。其能輔助用戶了解網站層次結構,，并在有多層級（通常大于兩級）網站中導航。若用戶從別處鏈接（比如搜索引擎結果）進入網站深層次頁面,，這對用戶來說非常有用,。 位置面包屑導航。圖片來源：marketingland下圖百思買（BestBuy）的案例中,，每個文本鏈接都可以指向一個頁面,，從右到左依次是網站當前頁面到上一級頁面。 百思買（BestBuy）位置面包屑導航路徑面包屑（也稱「歷史痕跡」）顯示用戶瀏覽至某特定頁面的所有頁面路徑,。這類面包屑導航鏈接通常是動態(tài)產生的,。有時，路徑面包屑很有用,，但大多時候會令人困惑——因為用戶瀏覽網站可能會從一個頁面突然跳到另一個頁面,，非常隨意。這類無規(guī)律的瀏覽路徑并不能為用戶提供太大幫助,，但倒可以用瀏覽器「后退」按鈕來輕松取代,。此外，若用戶直接進入某網站深層次頁面,，那路徑面包屑也毫無用處,。下圖是路徑面包屑示例,，其展示了兩條到達目標頁面的路徑。 路徑面包屑導航,。圖片來源：Oracle屬性面包屑對電商網站非常有用,，其通過特定頁面或更常見的按產品類別將大量頁面進行分類。這類面包屑導航可以幫助用戶了解各類產品之間的關系,，也提供了另外一種導航方式,。 屬性面包屑導航。圖片來源：marketingland |
