優(yōu)點：

1. 能夠承載的菜單項數(shù)量和層級更多，擴展性強；
2. 不占用屏幕高度且可以收起，為內(nèi)容提供更多空間；
3. 在菜單間切換時鼠標移動距離短；
4. 能夠更好地適應(yīng)屏幕寬度較小的設(shè)備。

缺點：

1. 菜單數(shù)量多層級復(fù)雜時，不容易記憶；
2. 菜單選項文字不宜過長，可能會截斷；
3. 各菜單選項之間的視覺權(quán)重差別不明顯。

三、狀態(tài)欄

狀態(tài)欄，它的定位是全局功能，或者是系統(tǒng)操作。比方說有一些全局搜索、設(shè)置、通知等功能，將會放在這里。設(shè)計上來說，難度不大。

四、標題欄

標題欄是用來放置頁面的名稱的，目的是告訴用戶現(xiàn)在所在的頁面是哪，與整個網(wǎng)絡(luò)是什么關(guān)系。一般會有4種展現(xiàn)形式，如下圖。

最常用的是第1、2種，第4種如遇特殊情況，對頁面高度空間要求高，以及頁面層級為單一層級時，可以去掉不用，因為在左側(cè)的導(dǎo)航也有相應(yīng)的title進行提示。

五、頭部區(qū)域

頭部區(qū)域一般是篩選功能。因為B端主要承載的是查看功能，所以篩選項會特別多。

值得注意的是，默認情況下查詢按鈕會放在篩選項之后，如果排滿了，會放在篩選項右下角，如上圖。有查看更多的話，“展開”按鈕也會放在右下角。

頭部區(qū)域有時候也會放置一些內(nèi)容或者搜索項，如下圖。

六、內(nèi)容區(qū)域

內(nèi)容區(qū)域主要以報表、表格、表單三種形式呈現(xiàn)。

1. 報表

報表的布局一般是塊狀如下圖。

報表的展現(xiàn)形式主要分為柱狀圖、條形圖、折線圖、餅圖。

（1）柱狀圖

適用于多個個體對一個變量數(shù)據(jù)維度的比較，由高到低進行排列，但有個特別的情況在于，如果可變量是時間，則按照時間順序進行排列。

優(yōu)點：?一目了然地進行比較數(shù)據(jù)維度的增減。

缺點：數(shù)目太多時（超過12個），分辨起來會比較困難，則適合折線圖進行顯示。

（2）條形圖

適用于多個主體對一個變量數(shù)據(jù)維度的比較，由高到低或者由低到高進行排列。

優(yōu)點：

1. 一目了然，容易比較數(shù)據(jù)的增減；
2. 對比較個體數(shù)量容納比較高，可以是幾個，也可以是幾十個。

缺點：需要更多垂直空間在屏幕上，有時需要用戶上下滾動屏幕才能看到所有的個體。

（3）折線圖

適用于對趨勢的展現(xiàn)，Y軸的起點需要從0開始，不建議展示每個節(jié)點，對比主體數(shù)量不建議超過4個，過多也會讓用戶辨識度降低。

優(yōu)點：

1. 特備適合于對趨勢的研究；
2. 對多個主體的對比效果很明顯。

缺點：對比主體不能太多；

（4）餅圖

適用于研究單個主體與整體之間的關(guān)系，找到影響整體的主要因素。主體個數(shù)不超過5個，如果超過可以使用一個“其它”選項進行囊括；占比從大到小，從12點開始按照順時針方向進行排列。

優(yōu)點：很容易地研究出，影響整體的頭部因素有哪些。

缺點：

1. 各因素之間對比效果差，特別是兩個因素占比很相近的時候；
2. 如果影響效果太小，容易被忽略。

2. 表格

表格適用于展示一些條例的細節(jié)，比較說充值/消費的流水、創(chuàng)建多條廣告推廣計劃后的效果數(shù)據(jù)陳列等等。

在表格的設(shè)計事項中需要注意的是，每個屬性對齊方式要注意。數(shù)字類的一般是左對齊，價格是右對齊。價格右對齊是方便比較金額數(shù)的多少，從左邊突出的位數(shù)就能一眼看到哪個是最多與最少。如果價格一般固定在幾位數(shù)的話，也可以考慮左對齊。

優(yōu)點：方便check每一項的細節(jié)。

缺點：

1. 不太直觀；
2. 對整體的情況缺乏大局信息的展示。

在設(shè)計的過程中需要注意，盡量精簡字段，避免橫向滾動。如果字段實在太長，一般會采取頭幾列，滾動時表頭進行浮起，方便滾動過程中找到字段的主體。如果帶有操作類的功能，則表尾也可以進行浮起。

3. 表單（如果看過之前表單文章的本節(jié)可跳過）

百度百科的解釋是表單在網(wǎng)頁中主要負責數(shù)據(jù)采集功能。用通俗易懂的話來說，就是我們看到的頁面需要填寫較多相關(guān)信息的頁面，都叫做表單，如下圖：

（1）表單的內(nèi)容

從設(shè)計的范圍上來看，包含了兩個方面：

1. 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。
2. 表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；

（2）表單的對齊方式

今天來說說表單的對齊方式，一般情況下表單有如下幾種對齊方式：

類型1

優(yōu)點：

1. Label和Content關(guān)系緊密，容易識別和理解；
2. 適合需要多語言切換的情況，能夠兼容不同長度的文字（因為同一個詞語不同語言翻譯起來長短不一樣，以日語和西班牙語最長），使得界面布局穩(wěn)定。

缺點：

1. 占用縱向空間比較多；
2. 當采用多欄排版時，去過其中某一項內(nèi)容比較長存在換行時會在一定程度上影響布局穩(wěn)定性。

類型2

優(yōu)點：

1. Label和Content關(guān)系緊密，容易識別和理解；
2. 適合單欄排版。

缺點：

1. 占用橫向空間比較多，特別是當存在比較長的Label時；
2. 在需要多語言切換時，有可能破壞布局視覺效果。

類型3

優(yōu)點：

1. Label的掃描和閱讀比較快；
2. 適合單欄排版。

缺點：

1. 占用橫向空間比較多；
2. 在某些語言下，一部分的Label和Content之間的距離會比較遠。

類型4

優(yōu)點：節(jié)省空間。

缺點：Label和Content不易區(qū)分，影響閱讀。

（3）選哪種比較合適

類型4的基本使用不到，國內(nèi)如果不考慮多語言的話，類型2對齊方式使用的頻率最高，如果考慮海外場景的話，類型1最有普適性。

七、界面設(shè)計原則

除了以上介紹的設(shè)計內(nèi)容之外，當遇到其它的設(shè)計問題時，可以采取如下的準則幫忙在設(shè)計的過程中進行決策。

（1）一致性原則

整體操作的一致性，是做主要的原則。一致性可以減少用戶思考的次數(shù)和時間，讓用戶的注意力更集中于當前的任務(wù)，進行自己業(yè)務(wù)上的判斷，產(chǎn)生心流體驗。

（2）簡潔

簡潔的閱讀和操作使注意力更集中。那么怎樣使頁面更加簡潔？以下有4種方法可以采用：

刪除：刪除不必要的因素，進行頁面元素的簡化處理。

隱藏：根據(jù)用戶使用的場景，讓元素進行隱藏，需要使用的時候再進行呈現(xiàn)。

比方如下圖：

重組：也可以叫分類，可以將相近功能進行組織成新的分類，也可以將不常用的功能進行分類在“更多”這一欄中。

比方如下圖：

轉(zhuǎn)移：如果界面信息太多，可以將頁面轉(zhuǎn)移到新的窗口或者頁面進行呈現(xiàn)。

如下圖：

（3）奧卡姆剃刀原理：即簡單有效

奧卡姆剃刀原理稱為“如無必要，勿增實體”，即“簡單有效原理”。盡量在不影響用戶主流操作的前提下，去增加不必要的功能。

（4）數(shù)量上采取7加減2

一般人的短時記憶容量約為7個加減2個，即5–9之間?？梢岳斫鉃?加減2個組塊。比方說如下圖，Apple官網(wǎng)的導(dǎo)航則設(shè)為7個種類。

（5）明確目的性的點擊

讓用戶明確知道自己要做什么，點擊哪里，比單純的減少點擊次數(shù)更重要。

（6）席克定律

席克定律是指，當選項增加時，下決定的時間也增加。

用戶的在某一場景下對選項的反應(yīng)時間取決于三個因素：

1. 前期的認知和觀察時間；
2. 根據(jù)認知后，處理的時間；
3. 選項的數(shù)量。

在人機交互界面中選項越多意味著決策時間越長，用戶越不知道選擇什么。

比方說如下圖：

你知道選什么色號嗎？(#^.^#)

八、設(shè)計資源匯總

行業(yè)內(nèi)比較有名的B端設(shè)計規(guī)范

螞蟻Ant Designhttps://ant-design.gitee.io/docs/spec/introduce

餓了么Elementhttps://element.eleme.cn/#/zh-CN

飛冰 https://ice.alibaba-inc.com/

九、總結(jié)

從內(nèi)容上來看，入門，這些已經(jīng)夠用了，如果想要再進一步就需要進行項目實踐了。現(xiàn)在可以去接項目試試了！

有什么疑問可以在留言區(qū)留言，閣主會一一回答。

專欄作家

Sophiallg，微信公眾號：Sophia的玲瓏閣，人人都是產(chǎn)品經(jīng)理專欄作家。一枚愛折騰，愛健身的交互設(shè)計妹紙。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議