工作中會接觸到很多的B端管理界面的設計。一般的情況都是直接用組件，不光是設計時復用快捷，前端實現起來也很方便。但是最近做一個新的系統，領導不希望跟之前的管理系統長的差不多。于是我就去搜集一些大廠的線上案例，看看管理界面都有什么樣的布局形式。拋開數據可視化類，雖然也真的都差不多，但是也各有千秋。本文我將從框架布局和內容區布局兩個點切入分析～

框架布局

B端產品的核心需求是提升用戶的效率，要高效清晰的展示數據，降低認知成本。在做B端產品時就要重心偏向功能，必要時可以犧牲美觀，讓功能更直觀。因此他的框架布局也多根據功能來決定。管理界面的框架大致可以分為導航區域與內容區域，框架布局形式主要可以分為側邊導航形式、和頂部導航形式兩種。

1、側邊導航形式

側邊欄導航就是將導航固定在左側，多用于工具型或管理型數據量比較大的管理界面中。它的優勢是導航展示更加清晰，方便頁面之間切換。

這種展開形式更加直觀，但是會降低頁面利用率。在頁面數據內容較多的時候，可以考慮將其收起來，鼠標懸浮或者點擊時展開。但是這樣做時盡量不要設置過多的層級，要降低用戶的認知成本。比如所有層級的菜單可以一鍵展開，用戶可以直接預覽所有菜單，避免為了尋找某一功能入口反復操作。

2、頂部導航形式

頂部導航是將導航置于頂部，一般在菜單數量較少的時候采用這種形式，通常不超過7個。鼠標點擊或者懸浮可展示二級菜單。或者是功能比較簡單的導航，點擊直接跳轉相關界面。

這種形式適用于數據量較少，邏輯簡單的管理頁面。當然也有個別復雜的管理界面，會將菜單收于頂部導航中，需要時全部展開。

內容區布局

框架確定之后，就要考慮內容區域的布局，怎樣才能規律、整潔地將數據展示出來。通常內容區域的布局分為卡片布局和平鋪布局兩種。

1、卡片布局

卡片布局能夠很好地組織內容，可以幫助用戶快速掃描頁面，易于擴展且非常靈活。卡片將內容整合模塊化，使頁面清晰，且有層次感。因此不管是從視覺上、還是個性化體驗上都是一種很好的表現方式，也是目前設計師普遍熱衷的一種設計方式。

在做卡片布局時，要注意所有的卡片要統一，大小可以根據內容變化，但是圓角、間距、邊距等都要嚴格統一。

第二是要考慮到卡片投影，如果有需要加投影的情況，要提前和開發那邊溝通，涉及到投影重疊的部分會不會增加開發的成本以及實現的效果。

第三要控制卡片的數量。盡量不要分較多的卡片，因為管理界面通常數據較多，卡片過多會大大降低頁面利用率，也容易使界面看起來凌亂。

2、平鋪布局

平鋪布局是所有的內容在同一層上平鋪展示。這樣做的好處是能夠更大程度提高頁面利用率，在有限的界面展示更多的數據。當頁面中沒有多個模塊，或者是內容過于瑣碎時通常使用這種形式。

例如案例中這個界面，就把內容區域作為一整個模塊平鋪于頁面中。這樣布局要注意的是，要做好界面中內容之間的分割，避免混亂。且要注意層級關系，雖然是平鋪但也要使界面具有層次感。

劃重點

B端管理頁面的功能目的就是清晰展示數據，保證工作效率。因此功能體驗大于視覺美觀。以上主要寬泛地分析了框架布局，以及內容區域展現形式。

作者：山竹屁

文章題目：網站B端管理界面設計導航布局形式
文章地址：http://m.2m8n56k.cn/news/91243.html

成都網站建設公司_創新互聯，為您提供外貿建站、品牌網站設計、App設計、手機網站建設、網站設計、營銷型網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯