杭州嵌入式培訓
達內杭州嵌入式培訓中心

13732203138

熱門課程

B端產品全局導航樣式與分析

  • 時間:2020-06-08 14:44
  • 發布:杭州嵌入式培訓
  • 來源:網絡

本篇主要整理與總結B端產品全局導航的樣式與使用,如有不足望指正!

目錄:

1、用戶如何查找信息

2、B端導航目前的主流設計樣式

3、這些樣式的使用場景及優缺點

一、用戶如何查找信息?

查找信息是導航最重要的功能,用戶如何查找信息總結為下面四個場景:

場景1:用戶知道想要什么,且知道如何查找;

此場景出現在用戶操作熟練的系統當中。

場景2:用戶知道想要什么,但不知道如何查找;

例如,用戶想查看自己的消費記錄,但不確定在哪個頁面找。

場景3:用戶不知道自己想要什么

此場景較少出現于B端,使用B端產品的用戶都有明確的目的性。

但多出于C端,出于無聊逛淘寶,而不是真的想買什么。對于這類用戶,C端產品推出了“關聯導航”,在瀏覽某一頁面時,會給你推薦相關的產品或算法算出用戶可能感興趣的商品,也叫“關聯推薦”。

場景4:再次搜索

用戶想返回尋找之前發現的內容,此時瀏覽記錄和合理的結構導航非常重要。

以上根據用戶查找信息的方式,我們可以把導航分為:

1、結構導航

包含全局導航局部導航兩種。

全局導航通常是一級導航,方便用戶跳轉以及及時查看網站內容。

局部導航與全局導航有層級關系,局部導航幫助用戶進入更加特定的頁面。


2、關聯導航

是一種跨越信息架構的層級,會快速跳轉到相關頁面的一種導航形式,在B端不多見,常見于C端,最終的目的是留住用戶。


3、可用性導航

指一些幫助提升網站可用性的功能,并不是主要功能,但卻不能缺少。

如:用戶信息、幫助、操作手冊等,通常擺放位置在界面右上角。


因B端用戶在進入一個系統時,通常抱有明確的目的性,所以此處聚焦分析“結構導航中的全局導航”。

二、全局導航樣式與分析

常用的B端全局導航樣式有三種,分別為:

1、頂部水平導航

2、側邊垂直導航

3、混合導航

樣式一:頂部水平導航

1、頂部水平導航:

頁面上下布局,提供全局性的類目和功能,二級菜單一般聚合在下拉菜單里,鼠標Hover出現二級或者更多層級菜單。


2、使用場景:

適用于一級導航數量較少,內容較為簡單,或追求沉浸式閱讀操作的系統,多見于官網首頁。

高度范圍計算公式:48px+8n

頂部導航(大部分系統):一級導航高度64px,二級導航48px。

頂部導航(展示類頁面):一級導航高度80px,二級導航56px。

3、優點:

1、對菜單獲取速度更快,符合用戶橫向閱讀習慣;

2、對閱讀的視覺干擾小,符合從上至下的頁面瀏覽習慣,相比垂直導航不會打斷用戶對內容區的沉浸感;

3、在導航深度上可擴展性較強,在下拉菜單中可根據業務需求靈活地增加層級和版塊。

4、相較于垂直導航占用左側屏幕寬度,頂部導航為下方內容區騰出更多空間。

5、內容通常放在固定版心尺寸以內, 頁面排版穩定,不受用戶終端顯示器影響。

4、缺點:

1、隨著業務的擴展,對頂部一級菜單的標題數量和標題的文案字數有較高的限制要求;

2、更深層級的菜單在點開后會隱藏收起,影響用戶記憶與查找。

樣式二:側邊垂直導航


1、側邊垂直導航:

頁面左右布局,提供多級結構來收納和排列網站架構。

通常默認為展開狀態,為減少垂直導航對內容區的干擾,側邊欄會設置收縮功能。

當網頁架構復雜,層級較深時,側邊欄會采用逐層漸進的導航樣式來支撐龐大的業務內容。


2、使用場景:

多用于專注功能,快速切換操作,有一定復雜度的后臺系統。

寬度計算公式:200px+8n

3、優點:

1、側邊欄的寬度可收縮。既可用鼠標拉寬查看超長導航文案,又可收起側邊減少垂直導航對右側內容區的干擾。

2、操作效果高,用戶在操作和瀏覽中可以快速定位和切換當前位置。

3、層級擴展性強,一二三級導航可以更為順暢且具關聯性的被展示。

4、缺點:

1、導航展開收起二三級菜單需要手動多次點擊。

2、視覺層次上不如水平導航一二級導航視覺區分明顯。

3、受終端設備影響,頁面排版不穩定。遇到分辨率較低,屏幕較小終端顯示器,內容區的排版需要考慮適配問題。

4、用戶使用時瀏覽視線左右折回,相比頂部導航垂直瀏覽更容易疲勞。

樣式三:混合式導航


1、混合式導航:

同時擁有頂部與側邊欄導航。


如下圖,當業務版塊越來越多,橫向與縱向都較為復雜時,導航的樣式可以采用漸進式,讓一二級菜單的業務分類界面清晰明確。減小用戶的認知負荷,讓體驗更為友好。


如下圖,當面臨更加龐大的業務內容時,可采用漸進式與平鋪式結合的方式。把業務進行整合分類,同時對于細分業務領域用平鋪的方式進行展示,更方便用戶迅速查找目標。


2、使用場景:

用于功能較多,結構較復雜的網站。

3、優點:

層級擴展性強,最深可達四~五級菜單。

4、缺點:

1、一級菜單與更深層級的距離較遠,視覺關聯性較弱。

2、導航菜單占用屏幕面積較大,內容區的展示受影響。

總結

1、導航的位置擺放:

① 頂部

② 側邊

③ 頂部+側邊

2、注意點:

1、導航的外觀樣式取決于網頁架構的復雜程度,越簡單的結構越傾向于頂部水平導航;越復雜的結構越傾向于混合式導航。

2、導航的層級深度通常不超過三級,當業務內容復雜程度超過三級時,使用逐層漸進+平鋪的方式來展示可以降低用戶的認知負荷。

3、思考題:

早期的辦公類軟件,如Word或Excel的導航和工具欄都在頂部,如果改放到側邊會給用戶體驗帶來什么樣的影響?導航的位置與屏幕比例,尺寸大小,軟件的功能之間都有什么樣的關系?


預約申請免費試聽課

怕錢不夠?就業掙錢后再付學費!    怕學不會?從入學起,達內定制課程!     擔心就業?達內多家實踐企業供你挑選!

上一篇:設計師,不要只守著屏幕上的一畝三分地!(三)
下一篇:B端信息錄入:輸入框基礎設計細節解析(一)

B端信息錄入:輸入框基礎設計細節解析(一)

B端產品全局導航樣式與分析

設計師,不要只守著屏幕上的一畝三分地!(三)

設計師,不要只守著屏幕上的一畝三分地!(二)

選擇城市和中心
江西省

貴州省

廣西省

海南省

中文字幕人成乱码在线观看