編輯導語：B端產(chǎn)品的按鈕應該如何設計？本文作者從按鈕的位置、對齊方式、順序、視覺強度還有大小這幾個方面，通過實際操作為我們進行了分析，希望這篇文章能對你的按鈕設計有所啟發(fā)。

一、定義

1. 內(nèi)容塊

可以將整個頁面視為一個內(nèi)容塊，也將一張卡片視為一個內(nèi)容塊，或者僅僅是界面中的一個小小的內(nèi)容單元也可以視為一個內(nèi)容塊。

界面中，一個內(nèi)容塊的基本構(gòu)成有三部分：Header、Body、Footer。

常規(guī)來說，一個內(nèi)容塊通常闡述一個主題：Header 申明主題，Body 放置該主題的具體內(nèi)容，F(xiàn)ooter 主題的延伸信息和操作。

二、按鈕的位置

按鈕的位置有三種：Header、Body、Footer

1. Header

放置影響全局變更的操作，比如復選后的操作，新建、編輯……

2. Body

放置跟隨內(nèi)容生效的操作，比如表單中的上傳圖片，添加條目……

3. Footer

放置完結(jié)類含義的操作，比如確定和取消。

三、按鈕對齊方式

按鈕的對齊方式取決于用戶的瀏覽方式，對于用戶瀏覽方式的研究常見的方法為眼動測試，基本結(jié)論有：

• 對于大量同質(zhì)信息平衡分布的情況（表單即屬于這種情況），視覺都趨向于從上到下，從左到右的眼動規(guī)律；
• 左上角是視覺的第一落點區(qū)，而右下角是視覺最終落點區(qū)；
• 設計的元素的會影響視線的變動，比如顏色、圖片。

Header區(qū)域：左上角作為第一視覺落點，一般用來放置標題，其次是按鈕。

Body區(qū)域：做主任務流程，整體布局需要指明一條清晰的路徑。將輸入和操作強制垂直對齊，可以清楚地傳達如何完成表單填寫。

Footer區(qū)域：右下角作為視覺最終落點，主按鈕采用右對齊。

1. 左對齊

左對齊意味著越重要的按鈕越靠左，順序為：一級按鈕——二級按鈕——三級按鈕。

Header區(qū)域，如果沒有標題，就采用按鈕做對齊；body區(qū)域與表單對齊，也就意味著左對齊。

對于控住單行輸入的表單的按鈕，一般將按鈕放在輸入組件旁邊，有時候會為了布局的美觀放在輸入組件的下方。

2. 右對齊

左對齊意味著越重要的按鈕越靠左，順序為：三級按鈕——二級按鈕——一級按鈕。

一般情況下，彈窗內(nèi)的按鈕區(qū)域默認右對齊。

對于整個網(wǎng)頁場景，Header區(qū)域，如果有標題，標題左對齊，按鈕右對齊；Footer區(qū)域，右下角作為視覺最終落點，主按鈕采用右對齊。

四、按鈕順序

主按鈕放左邊還是右邊？

各頭部的互聯(lián)網(wǎng)公司的處理都不盡相同，可見放左邊還是右邊都是可以被接受的，只要在系統(tǒng)中保持交互的一致。

一般上認為大部分人作為右撇子，主按鈕放在右邊更容易被點擊，但在不同場景中還是有差異的，見按鈕的對齊方式。

1. 風險操作

可能造成損失的操作，特別是破壞性操作，如果不是用戶期望點擊的按鈕，應該盡量遠離常用按鈕。

如果此時主按鈕放在左對齊，風險按鈕就放右邊，反之亦然。

2. 方向性含義

一般認為，具有返回意義的按鈕，應該放在左側(cè)，暗示其方向是回到之前。

3. 對話習慣

按照對話習慣排列按鈕。

界面中的按鈕閱讀順序類似于一個用戶和電腦的對話過程，按照日常對話的順序設計按鈕閱讀順序更自然。

當用戶修改了一項設置，用戶最有可能的行為是保存這項變更，我們會有優(yōu)先問是否保存，然后才是是否要離開——這個思路常用于確認按鈕的主次（正面性的問題優(yōu)先）。

4. 易操作性

對于一組按鈕來說（常見于工具欄），一般最左邊和最右邊放主按鈕/高頻操作，較低頻操作放中間。原因在于用戶的瀏覽模式從左到右，會更容易注意到視覺的起點和終點，其次對于操作鼠標來說對邊角的按鈕更容易被定位到。

拿導航欄右側(cè)的菜單來說：有四個工具，其中發(fā)布作為主，按鈕放在最左側(cè)，并使用實心icon+主題色高亮；個人信息屬于信息層級最高，靠近邊緣能夠幫助用戶進行快速選擇。

五、按鈕的視覺強度

視覺層面

1. 一級按鈕

一級按鈕通常是主按鈕，突出“完成”、“推薦”的操作，一個按鈕區(qū)最多一個主按鈕，也可以沒有主按鈕。

2. 二級按鈕

也稱之為次要按鈕，可用于所有次要的按鈕行動，如果我們有許多具有相似重要性的行動在一個屏幕上，或不確定要選擇哪種按鈕，次要按鈕永遠是最安全的選擇。

3. 三級按鈕

沒有外邊框，用鏈接色突出，例如文字按鈕。

4. 其他

并不是非常規(guī)范的按鈕，用于滿足復雜的個性化需求。這類圖標需要保證用戶易于識別，比如純圖標有必須要hover顯示提醒。

六、按鈕大小

1. 高度

視覺層面，根據(jù)按鈕區(qū)域大小限制按鈕高度。

2. 寬度

視覺層面，限制最小寬度和最大寬度，當文字長度超出按鈕最大長度，超出部分使用省略號表示，其次也可以通過縮小字號的方式。

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

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