按鈕設計超詳細解讀 | 交互組件

1 評論 3212 瀏覽 35 收藏 5 分鐘

按鈕設計該遵循什么樣的設計規范或者設計策略?不妨來看看本篇文章里作者的總結。

一、按鈕尺寸設計規范

1. 移動端

2. web端

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

在實際界面設計中,該選什么尺寸的按鈕捏?

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

二、「鏈接」和「按鈕」的區別

1. 鏈接 link

鏈接起到了導航的作用,一般點擊后都是打開一個新網頁,鏈接的樣式一般都是純文字形式。

2. 按鈕 button

按鈕用于發起動作,點擊后觸發相應的業務。

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

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

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

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

Jacob Nielsen根據眼動追蹤研究結果提出了這種F模式。

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

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

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

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

四、B端頁面中按鈕位置

根據上面兩個原理,可以得出在B端表單界面中按鈕擺放的通用原則規律。

PS:通用規律僅做參考,不是規則和束縛,實際在界面中如何擺放,還是要根據具體的使用場景思考放置哦~

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

六、按鈕的排列順序——按照對話習慣排列

七、兩種下拉按鈕的區別

本文由@陳婉寧 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 寫得挺好的

    來自福建 回復