你真的瞭解按鈕嗎?一篇文章帶你全面瞭解按鈕
編輯導語:如今隨着互聯網的不斷髮展,用户平常使用APP的時間也變長,也會注意到產品中的一些按鈕體驗,所以對於設計師來説,設計一款有趣、用户體驗較好的按鈕是非常重要的;本文作者分享了關於按鈕的完整介紹,我們一起來看一下。
按鈕是最常用的組件之一,有很多小夥伴並沒有很全面的認識這個組件,今天我把關於按鈕的一些知識和我的一些觀點分享給大家。
一、按鈕的作用在使用按鈕之前,你要了解什麼是按鈕,按鈕的作用是什麼,什麼時候該用按鈕。
1. 什麼是按鈕按鈕用於觸發一個及時操作。
1)功能操作
比較常見的是:展開收起、加減、下拉等。這種情況下以功能性為主,按鈕的形式適當弱化,重點強調功能,突出主體信息。
2)指引用户下一步操作
這個是最常見的使用場景,每個可交互頁面上都有這類按鈕的出現,用來指引用户下一步該怎麼做。比如:創建、保存…
3)培養用户習慣
當用户知悉某個按鈕能指向某個操作,或者獲取某類信息後,長此以往用户就會形成使用習慣。如果某操作能夠為用户持續帶來價值,那就可以在按鈕的位置讓它更醒目,持續培養用户點擊習慣。
- 主按鈕:用於主動行動點,一個操作區域內只有且只能有一個主按鈕;
- 默認按鈕:用户內有主次之分的一組行動點;
- 虛線按鈕:常用於【添加】操作;
- 文本按鈕:用於次級的行動點;
- 鏈接按鈕:用於作為外鏈的行動點。
1)Normal 正常狀態
此狀態為按鈕的正常顯示狀態,就是按鈕在也頁面中的常規狀態。
此狀態為按鈕的懸浮狀態,當鼠標滑過時候的狀態會給用户一個交互反饋,因為它只是一個視覺上的反饋並無實際作用,所以在移動端就把此狀態去掉了。
此狀態的效果並沒有具體的規則,具體按產品風格來定。這裏我給一個參考效果,但並不是唯一效果,如果不合適,可以酌情更改。
3)Click 點擊狀態
此狀態為按鈕的鼠標 / 手指按鈕狀態,操作完此狀態後,就會引發此按鈕的真實作用。
同時,此狀態的效果也沒有具體的規則,具體按產品風格來定。這裏我給一個參考效果,但並不是唯一效果,如果不合適,可以酌情更改。
4)Disable 禁用狀態
此狀態為按鈕的不可操作狀態。
當頁面中有未完成的任務或頁面中有錯誤導致不可提交頁面時,按鈕會處於 Disable 狀態。這個狀態在產品中也是很常用的,而且這種情況下應該引導用户去做其他操作,所以此按鈕在視覺上一定要弱於其他。所以要制定一個通用的展示方案。
一般方案有兩種:
- 無論按鈕本身顏色是什麼,它的背景色均為純灰色,常用的色值有:#CCC、#999等,此種方案為常用方案;
- Disable 狀態為 Normal 狀態的 30% 透明度,如果你想讓按鈕都有顏色傾向的話,可以用這種方案。
- 常規:常規樣式的按鈕,主操作按鈕;
- 危險按鈕:刪除/移動/修改權限等危險操作,一般需要二次確認;
- 幽靈按鈕:用於背景色比較複雜的地方,常用在首頁/產品頁等展示場景;
- 加載:用於異步操作等待反饋的時候,可以避免多次提交。
一個操作區有且只有一個主按鈕去引導用户操作,如有有多個或沒有則會影響用户的判斷。儘可能少的讓用户去做選擇,產品的終極目標應該是“傻瓜式”產品,不要讓用户有學習成本。
根據產品風格,三種圓角值的設定:
1)圓角值為 0
這種適合用在比較嚴謹 / 企業級產品中,比如:阿里雲;
2)小圓角值
這種是最常用的形式,在不失嚴謹的同時還有一些細節,如果可以的話,儘量選這種的;
3)超大圓角值
這種一般需要有獨特的產品風格才可使用。樣式不好把控全局效果,所以使用頻率較低,慎重使用。
較大圓角值,此類千萬不要用,不要問,問就是太醜。
按鈕裏面的文字一定是精簡的,不要展示過多文字,更不要折行。
文字與按鈕的比例要適中,文字不要太大或太小,都會影響視覺展示。
如果你想要用彌散陰影,陰影的顏色儘量用帶按鈕本身顏色傾向的,這樣會讓按鈕更有呼吸感。需要注意的是:只有主按鈕才能用陰影,其他級別的不要用,不然識別度會變差,並且會讓按鈕的體驗變得很差。
主次操作按鈕樣式要統一,不要濫用樣式。
實際使用中,按鈕樣式不要與其他組件樣式混用,避免讓用户產生誤解,做一些不必要的操作和思考。
現在暗黑模式也是常用的場景了,所以黑/白場景下都要考慮到識別度的問題。
主次按鈕左右的問題,也常常出現在設計討論會中,這次我直接放個結論吧,以後不要再為這件事吵架了。
在提交頁面、彈窗中,主按鈕在右;在其他常規頁面上,酌情考慮。
按鈕尺寸具體用多大的,這裏我總結了一個規範(僅代表個人意見)。
- 高 = 文字行高 + Xn,X=自然數,n=4
- 寬 = 文字寬度 + Xn,X=自然數,n=4
在其他地方也可以用類似的公式去做規範,比如卡片的間距,你可以設置 n 為基礎值,在此基礎上用 Xn 去選取合適的值。
注意:常用的字號為 12px、14px,儘量不要用太大的字號在按鈕上。
六、總結按鈕只是眾多組件中的其中一個,也是最常用的組件之一。
對於設計師來説,無論大小組件,我們都要精益求精的去思考,只有把每一個細節做好了,才能做好產品。
日積月累的把每一個知識點掌握了,我們也就成長了。
作者:友設青年,公眾號:友設青年
本文由 @友設青年 原創發佈於人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基於CC0協議