<th id="ik4gr"><pre id="ik4gr"></pre></th>
<rp id="ik4gr"></rp>
    <dd id="ik4gr"></dd>

  1. <rp id="ik4gr"><object id="ik4gr"><blockquote id="ik4gr"></blockquote></object></rp>
      <rp id="ik4gr"></rp>
        <button id="ik4gr"><acronym id="ik4gr"></acronym></button>
      1. <rp id="ik4gr"><object id="ik4gr"><input id="ik4gr"></input></object></rp>
        1. 杭州嵌入式培訓
          達內杭州嵌入式培訓中心

          13175137725

          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端信息錄入:輸入框基礎設計細節解析(一)

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

          • 掃碼領取資料

            回復關鍵字:視頻資料

            免費領取 達內課程視頻學習資料

          • 視頻學習QQ群

            添加QQ群:1143617948

            免費領取達內課程視頻學習資料

          Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

          選擇城市和中心
          江西省

          貴州省

          廣西省

          海南省

          香蕉视频在线一级a做爰片免费观看视频 欧美成年性色生活片 百度 好搜 搜狗
          <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>