起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識B端按鈕交互規(guī)范設計
編輯導語：B端產品的按鈕應該如何設計？本文作者從按鈕的位置、對齊方式、順序、視覺強度還有大小這幾個方面，通過實際操作為我們進行了分析，希望這篇文章能對你的按鈕設計有所啟發(fā)。
一、定義
1. 內容塊
可以將整個頁面視為一個內容塊，也將一張卡片視為一個內容塊，或者僅僅是界面中的一個小小的內容單元也可以視為一個內容塊。
界面中，一個內容塊的基本構成有三部分：Header、Body、Footer。
常規(guī)來說，一個內容塊通常闡述一個主題：Header 申明主題，Body 放置該主題的具體內容，F(xiàn)ooter 主題的延伸信息和操作。
二、按鈕的位置
按鈕的位置有三種：Header、Body、Footer
1. Header
放置影響全局變更的操作，比如復選后的操作，新建、編輯……
2. Body
放置跟隨內容生效的操作，比如表單中的上傳圖片，添加條目……
3. Footer
放置完結類含義的操作，比如確定和取消。
三、按鈕對齊方式
按鈕的對齊方式取決于用戶的瀏覽方式，對于用戶瀏覽方式的研究常見的方法為眼動測試，基本結論有：
- 對于大量同質信息平衡分布的情況（表單即屬于這種情況），視覺都趨向于從上到下，從左到右的眼動規(guī)律；
- 左上角是視覺的第一落點區(qū)，而右下角是視覺最終落點區(qū)；
- 設計的元素的會影響視線的變動，比如顏色、圖片。
Header區(qū)域：左上角作為第一視覺落點，一般用來放置標題，其次是按鈕。
Body區(qū)域：做主任務流程，整體布局需要指明一條清晰的路徑。將輸入和操作強制垂直對齊，可以清楚地傳達如何完成表單填寫。
Footer區(qū)域：右下角作為視覺最終落點，主按鈕采用右對齊。
1. 左對齊
左對齊意味著越重要的按鈕越靠左，順序為：一級按鈕——二級按鈕——三級按鈕。
Header區(qū)域，如果沒有標題，就采用按鈕做對齊；body區(qū)域與表單對齊，也就意味著左對齊。
對于控住單行輸入的表單的按鈕，一般將按鈕放在輸入組件旁邊，有時候會為了布局的美觀放在輸入組件的下方。
2. 右對齊
左對齊意味著越重要的按鈕越靠左，順序為：三級按鈕——二級按鈕——一級按鈕。
一般情況下，彈窗內的按鈕區(qū)域默認右對齊。
對于整個網頁場景，Header區(qū)域，如果有標題，標題左對齊，按鈕右對齊；Footer區(qū)域，右下角作為視覺最終落點，主按鈕采用右對齊。
四、按鈕順序
主按鈕放左邊還是右邊？
各頭部的互聯(lián)網公司的處理都不盡相同，可見放左邊還是右邊都是可以被接受的，只要在系統(tǒng)中保持交互的一致。
一般上認為大部分人作為右撇子，主按鈕放在右邊更容易被點擊，但在不同場景中還是有差異的，見按鈕的對齊方式。
1. 風險操作
可能造成損失的操作，特別是破壞性操作，如果不是用戶期望點擊的按鈕，應該盡量遠離常用按鈕。
如果此時主按鈕放在左對齊，風險按鈕就放右邊，反之亦然。
2. 方向性含義
一般認為，具有返回意義的按鈕，應該放在左側，暗示其方向是回到之前。
3. 對話習慣
按照對話習慣排列按鈕。
界面中的按鈕閱讀順序類似于一個用戶和電腦的對話過程，按照日常對話的順序設計按鈕閱讀順序更自然。
當用戶修改了一項設置，用戶最有可能的行為是保存這項變更，我們會有優(yōu)先問是否保存，然后才是是否要離開——這個思路常用于確認按鈕的主次（正面性的問題優(yōu)先）。
4. 易操作性
對于一組按鈕來說（常見于工具欄），一般最左邊和最右邊放主按鈕/高頻操作，較低頻操作放中間。原因在于用戶的瀏覽模式從左到右，會更容易注意到視覺的起點和終點，其次對于操作鼠標來說對邊角的按鈕更容易被定位到。
拿導航欄右側的菜單來說：有四個工具，其中發(fā)布作為主，按鈕放在最左側，并使用實心icon+主題色高亮；個人信息屬于信息層級最高，靠近邊緣能夠幫助用戶進行快速選擇。
五、按鈕的視覺強度
視覺層面
1. 一級按鈕
一級按鈕通常是主按鈕，突出“完成”、“推薦”的操作，一個按鈕區(qū)最多一個主按鈕，也可以沒有主按鈕。
2. 二級按鈕
也稱之為次要按鈕，可用于所有次要的按鈕行動，如果我們有許多具有相似重要性的行動在一個屏幕上，或不確定要選擇哪種按鈕，次要按鈕永遠是最安全的選擇。
3. 三級按鈕
沒有外邊框，用鏈接色突出，例如文字按鈕。
4. 其他
并不是非常規(guī)范的按鈕，用于滿足復雜的個性化需求。這類圖標需要保證用戶易于識別，比如純圖標有必須要hover顯示提醒。
六、按鈕大小
1. 高度
視覺層面，根據(jù)按鈕區(qū)域大小限制按鈕高度。
2. 寬度
視覺層面，限制最小寬度和最大寬度，當文字長度超出按鈕最大長度，超出部分使用省略號表示，其次也可以通過縮小字號的方式。
本文由 @阿偉ND 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Pexels，基于 CC0 協(xié)議
謝謝整理，正在做B端系統(tǒng)，這篇很適用
錯別字我也是醉了