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

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

1. 移動(dòng)端

2. web端

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

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

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

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

1. 鏈接 link

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

2. 按鈕 button

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

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

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

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

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

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

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

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

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

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

四、B端頁面中按鈕位置

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

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

五、按鈕的類型和使用場(chǎng)景

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

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