起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識提升按鈕設計體驗的三大設計原則
今天跟大家分享一下關(guān)于提升按鈕設計的體驗的三大設計原則：按鈕的可點性、按鈕的可交互性、按鈕的良好引導性，一起來看看~
按鈕屬性解剖
按鈕對于UI新手就是一個簡單的長方形矩形，設計時會忽略按鈕設計要注意的細節(jié)，甚至標注時候遺漏一些需要標注的參數(shù)，導致開發(fā)產(chǎn)生偏差，視覺還原度不好。
按鈕在表面看的屬性從遠到近是顏色、形狀、字體，但是真正的按鈕屬性并不止這么簡單的這三個屬性。
這里我以標注一個簡單按鈕為例，分析下按鈕應考慮的屬性。
由此可以推斷出按鈕的有六大屬性：顏色／形狀／字體／大?。队埃舭?。
無論是幾個互聯(lián)網(wǎng)巨頭的設計規(guī)范，以及最近新出的谷歌規(guī)范，能看到關(guān)于組件部分，第一個組件設計的就是按鈕。
在做標注時，我們經(jīng)常就會忽略一個最重要的使用規(guī)則，按鈕中的內(nèi)間距，還有按鈕外間距，這決定了按鈕跟其他元素的合理距離。
在原子理論里UI組件最基礎的元素從原子開始的。
按鈕就是最簡單的原子，通過按鈕的可繼承屬性（按鈕高度，按鈕圓角，按鈕文字字號等屬性）。為了排版布局的整齊和一致，其他原子（輸入框、單選多選框、搜索條等）也會繼承這些屬性，因此按鈕在設計語言的組件設計中占有舉足輕重的地位。
因此當我們在設計語言中定義按鈕時，一定要思考這六大屬性，它不單純影響自己的呈現(xiàn)，還影響了其他原子的屬性。
按鈕的設計原則
了解按鈕設計的這六大屬性，我們就能設計好按鈕了么？
當然沒這么簡單，我歸納了三大設計原則，遵循設計原則，才能保證按鈕真正實現(xiàn)它的商業(yè)價值和用戶價值。
1. 按鈕的可點性
UI界面中如果需要用戶理解設計越長可用性就越差。設計必須在考慮把界面做得酷炫前，讓用戶知道按鈕是“可點擊的”。
因此按鈕至少要考慮從形、色、字上創(chuàng)建識別為可點擊的按鈕。
多種形狀按鈕 圖片來源Dribble
形，按鈕遵循多數(shù)用戶習慣需要有個形狀，判別為可點擊區(qū)域。歸納上面的例子，按鈕一般有以下幾種常見形狀。
以上各種形狀都可以運用到按鈕上，當然其他不一樣的形狀。
變形按鈕 圖片來源Dribble
例如圓角矩形基礎上做適當?shù)淖兓?，按鈕屬性還是可識別的。
色，常見的App按鈕根據(jù)品牌主題色有著不同色彩。
漸變按鈕 圖片來源Dribble
我們能發(fā)現(xiàn)除了單色填充按鈕顏色之外，還有漸變色填充按鈕的做法，這種方式也是能突出按鈕和引導用戶去點擊。
字，作為按鈕的信息引導，必須存在文字或圖形符號引導用戶交互，否則就不是按鈕。
文案會提示用戶如果點擊他們獲得什么收益，文案必須迅速吸引用戶的注意力并引導他們正確行動。
無論是什么顏色什么形狀的按鈕，必須有關(guān)鍵文字描述或者圖標解釋，就無法構(gòu)成按鈕元素。
按鈕目的就是觸發(fā)點擊，缺少點擊語句引導，用戶根本理解不了這形狀是做什么。
2. 按鈕的可交互性
點擊按鈕，一般會進行下一步、確定、以及完成等等恰當?shù)姆答?，按鈕必須有反饋，不然用戶不知道互動成不成功，用戶總是期待得到反饋的。
在網(wǎng)上公開的各種設計語言中都能清晰，按鈕除了默認按鈕，還會有懸停狀態(tài)／點擊狀態(tài)／不可點狀態(tài)的多種交互形式。
我們設計按鈕時不能只設計一種狀態(tài)，在交付給研發(fā)前要把常見的幾種交互都設計好。
多種功能按鈕 圖片來源Dribble
分析現(xiàn)在常見的APP設計，目前按鈕的點擊后交互的反饋場景最常見的有以下幾種：
如果點擊按鈕后無任何反饋，這就不是按鈕應該是信息框，可交互是按鈕的設計原則之一。
3. 按鈕的良好引導性
按鈕的重要性體現(xiàn)在按鈕文字引導／按鈕大?。粹o周圍留白以及按鈕所處的位置，按鈕數(shù)量的控制。
按鈕要設計合理，才能有良好的引導性，用戶才能正確明白按鈕的操作功能。
如果按鈕文字表達不清晰，用戶會誤解。
一個引人注目的引導性按鈕通常足夠大，可快速找到，但又不能太大，以免影響干擾內(nèi)容閱讀。
根據(jù)格塔式原理，親密性高低不同的組件，根據(jù)留白不同產(chǎn)生不同的關(guān)聯(lián)性。文案跟按鈕之間的間距適當縮小，能讓用戶明白他們之間關(guān)聯(lián)，讓按鈕區(qū)別與其他組件。
不論是網(wǎng)頁還是APP，按鈕一般處在信息正下方，或信息右下方便于用戶的右手操作原則。
（1）如果按鈕過多，不分主次，用戶就會疑惑不知道如何操作
注意避免同飽和不同顏色的按鈕出現(xiàn)，一個用填充顏色（重），一個描邊顏色跟隨主要按鈕顏色（輕）。
（2）如果按鈕場景有特殊情況，就需要設計合適場景的按鈕
按鈕的操作是不可逆的操作應該賦予更多的視覺重量，用戶可能并不明白危害性而下意識操作，或者誤點了操作。
按鈕在不同背景下呈現(xiàn)情況不同，因此要考慮淺色按鈕樣式。
按鈕用色也要經(jīng)過多場景的考驗，不是單純定一個主色解決所有場景。
同樣存在不同使用場景中，按鈕要設計多種尺寸以適應不同的場景需求，小、中、大、特大等等。
最后總結(jié)
設計趨勢隨時在變，按鈕的風格也時刻在變化，唯一不變的就是按鈕的六大屬性以及作者為大家總結(jié)的三大設計原則。
按鈕的設計是UI設計規(guī)范中最簡單的一環(huán)，但是同時也是最重要的一環(huán)。
希望各位大家在工作中學會鞏固自己的知識，以小見大，在追求不同的設計風格趨勢的同時，別忘了UI設計最基礎的基本功之一：保持風格的統(tǒng)一性，從一個簡單的按鈕設計開始。
作者：凌凌，公眾號：我們的設計日記，前阿里資深視覺設計師，關(guān)注設計成長規(guī)劃和toB／C的產(chǎn)品設計
本文由 @凌凌 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
