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