按鈕設計超詳細解讀 | 交互組件
按鈕設計該遵循什么樣的設計規范或者設計策略?不妨來看看本篇文章里作者的總結。
一、按鈕尺寸設計規范
1. 移動端
2. web端
??以上基本是目前最常用的幾個按鈕尺寸啦~
在實際界面設計中,該選什么尺寸的按鈕捏?
【大尺寸】登錄按鈕;結尾的主提交按鈕,比如結算、完成;企業官網CTA按鈕【中尺寸】最常用的尺寸,不知道選哪個尺寸就選它準沒錯【小尺寸】常用語一些小組件、小卡片中,比如氣泡窗。
二、「鏈接」和「按鈕」的區別
1. 鏈接 link
鏈接起到了導航的作用,一般點擊后都是打開一個新網頁,鏈接的樣式一般都是純文字形式。
2. 按鈕 button
按鈕用于發起動作,點擊后觸發相應的業務。
現在很多按鈕采用純文字的樣式,和鏈接幾乎一樣。所以為了做出區分,當hover或者點擊純文字按鈕后,背后會出現淺色背景色塊。
三、如何排布按鈕的位置?
按鈕在頁面中位置的擺放,主要遵循兩個原則:雅各布尼爾森的F模式布局。
1. F模式布局 —— 雅各布尼爾森
Jacob Nielsen根據眼動追蹤研究結果提出了這種F模式。
眼睛瀏覽順序一般是從左往右,然后從上往下
2. Z模式布局 —— 古騰堡
Gutenberg diagramm認為人的閱讀方式應該是遵循某種習慣進行的,從左到右,從上往下。從左上角開始,經過一系列的來回移動,最終掃描至右下角的終點區。
這也就解釋了,為什么很多界面把最終的【結算】、【確認】、【提交】按鈕放在最右邊。
四、B端頁面中按鈕位置
根據上面兩個原理,可以得出在B端表單界面中按鈕擺放的通用原則規律。
PS:通用規律僅做參考,不是規則和束縛,實際在界面中如何擺放,還是要根據具體的使用場景思考放置哦~
五、按鈕的類型和使用場景
六、按鈕的排列順序——按照對話習慣排列
七、兩種下拉按鈕的區別
本文由@陳婉寧 原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
評論
寫得挺好的