按鈕設(shè)計該遵循什么樣的設(shè)計規(guī)范或者設(shè)計策略？不妨來看看本篇文章里作者的總結(jié)。

一、按鈕尺寸設(shè)計規(guī)范

1. 移動端

2. web端

??以上基本是目前最常用的幾個按鈕尺寸啦～

在實際界面設(shè)計中，該選什么尺寸的按鈕捏？

B端究竟需要什么样的产品经理？

B端产品经理都是以提升供应侧的工作效率为目的，所以B端需求主要是以业务问题为导向。 这个是B端产品比较重要的一点，B端产品是服务于一个主体 ...

查看详情 >

【大尺寸】登錄按鈕；結(jié)尾的主提交按鈕，比如結(jié)算、完成；企業(yè)官網(wǎng)CTA按鈕【中尺寸】最常用的尺寸，不知道選哪個尺寸就選它準沒錯【小尺寸】常用語一些小組件、小卡片中，比如氣泡窗。

二、「鏈接」和「按鈕」的區(qū)別

1. 鏈接 link

鏈接起到了導(dǎo)航的作用，一般點擊后都是打開一個新網(wǎng)頁，鏈接的樣式一般都是純文字形式。

2. 按鈕 button

按鈕用于發(fā)起動作，點擊后觸發(fā)相應(yīng)的業(yè)務(wù)。

現(xiàn)在很多按鈕采用純文字的樣式，和鏈接幾乎一樣。所以為了做出區(qū)分，當hover或者點擊純文字按鈕后，背后會出現(xiàn)淺色背景色塊。

三、如何排布按鈕的位置？

按鈕在頁面中位置的擺放，主要遵循兩個原則：雅各布尼爾森的F模式布局。

1. F模式布局 —— 雅各布尼爾森

Jacob Nielsen根據(jù)眼動追蹤研究結(jié)果提出了這種F模式。

眼睛瀏覽順序一般是從左往右，然后從上往下

2. Z模式布局 —— 古騰堡

Gutenberg diagramm認為人的閱讀方式應(yīng)該是遵循某種習(xí)慣進行的，從左到右，從上往下。從左上角開始，經(jīng)過一系列的來回移動，最終掃描至右下角的終點區(qū)。

這也就解釋了，為什么很多界面把最終的【結(jié)算】、【確認】、【提交】按鈕放在最右邊。

四、B端頁面中按鈕位置

根據(jù)上面兩個原理，可以得出在B端表單界面中按鈕擺放的通用原則規(guī)律。

PS：通用規(guī)律僅做參考，不是規(guī)則和束縛，實際在界面中如何擺放，還是要根據(jù)具體的使用場景思考放置哦~

五、按鈕的類型和使用場景

六、按鈕的排列順序——按照對話習(xí)慣排列

七、兩種下拉按鈕的區(qū)別