2022-2-9 ui設(shè)計分享達(dá)人
前言
說起按鈕，很多做設(shè)計的小伙伴是熟悉的不能再熟悉了，它是我們在設(shè)計界面時最常用、最重要的組件之一，也是易被忽略的元素之一，所以在設(shè)計之前，做好對按鈕組件的認(rèn)識、了解非常有必要。
從我們有記憶認(rèn)知開始，按鈕就時刻在和我們打交道，墻上的電燈開關(guān)、電視機(jī)的調(diào)節(jié)按鈕、遙控器的按鈕等等，這些物理按鈕不僅僅是當(dāng)下UI按鈕組件的前身，且不會消失，依然會有很多非數(shù)字化的產(chǎn)品及機(jī)器設(shè)備在持續(xù)延用，不管如何演變，基本不會脫離實物參考。按鈕最吸引我們的莫過于通過簡單觸摸就能輕松滿足自己的行為需求，按鈕設(shè)計的直觀性及易用性會影響著人們完成一件事情的意愿及效率。
在UI設(shè)計中，如何完美的避開問題、把按鈕設(shè)計的更好，是每個設(shè)計師需要深思的問題。按鈕設(shè)計的好壞，將直接關(guān)系著用戶引流、觸發(fā)行動、產(chǎn)品轉(zhuǎn)化率等至關(guān)重要的問題。另外，精致的按鈕也會讓整個頁面的視覺提升檔次。本篇文章將對按鈕作出解析，介紹在設(shè)計按鈕時需要著重考慮的因素及設(shè)計標(biāo)準(zhǔn)，并將理論付諸于實踐。
分享目錄
一、按鈕的作用
二、按鈕的類型
三、按鈕的狀態(tài)
四、按鈕的大小及風(fēng)格
五、常見誤區(qū)及避坑指南
六、總結(jié)
一、按鈕的作用
1. 什么是按鈕
在UI設(shè)計中，按鈕是一個明確指示交互行為動作的組件，主要用于觸發(fā)某一個即時操作，很多時候，我們需要采取下一步行動或返回到上一步，都要通過按鈕（部分場景可用手勢交互）來完成。
在視覺層面，按鈕的組成看起來很簡單，由一個底色塊/線框加上一組文案即可組成，但真正要將按鈕設(shè)計好，僅停留在視覺層面并不嚴(yán)謹(jǐn)，其大小、位置、色值、文案...等每一個細(xì)節(jié)的處理都關(guān)系著用戶的操作體驗，下面的這幾種情況大家肯定有碰到過：
2 按鈕有什么用
通常，我們在設(shè)計按鈕之前，需要詳細(xì)理解按鈕所存在的意義，哪里該加、哪里不該加、為什么要加，主要從以下幾點來體現(xiàn)按鈕的作用：
2.1 功能性操作
這種按鈕很常見，比如展開、收起、下拉、加減等，按鈕視覺較弱，重點強(qiáng)調(diào)該頁面的功能，突出主體信息，在操作之后會發(fā)生一些交互變化，這類按鈕主要起到功能形態(tài)的作用。
2.2 明確引導(dǎo)下一步操作
當(dāng)用戶完成一個頁面的內(nèi)容填充或信息確認(rèn)，就會失去視覺焦點，而下一步按鈕就會聚焦視覺重心，通過文案告知用戶下一步該怎么做，常見的有保存、下一步、支付、確定...等。
另外，用戶需要完成某個任務(wù)，但同一個任務(wù)流程的信息、種類較多，這時就會通過分步驟、分頁的方式，并在每個步驟的末尾增加一個能起到上下銜接作用的按鈕，明確引導(dǎo)用戶進(jìn)入下一步操作，以此來提升用戶完成整個任務(wù)的成功率。
2.3 培養(yǎng)行為習(xí)慣
如果在操作某個按鈕之后得到了一定的利益，且能持續(xù)為用戶帶來價值，那么不妨將這個按鈕設(shè)計的更醒目，并在同等級但不同的地方保持視覺的統(tǒng)一，持續(xù)培養(yǎng)用戶點擊習(xí)慣，當(dāng)用戶下次再看到類似這種按鈕時，慣性思維就會引導(dǎo)點擊。
3 按鈕的組成
在大部分的認(rèn)知中，最常見的按鈕就是一個底色塊加上一句文案就完成了，殊不知一個好的按鈕需要經(jīng)過很多細(xì)節(jié)的把控，才能發(fā)揮出按鈕的最大作用。例如文案的長短/邊距、容器的大小/圓角、填充色的主/次之分...等，下面我們來看看一個按鈕到底是由哪些屬性、元素組成。
◇ 圓角：傳達(dá)出按鈕的氣質(zhì)，決定用戶的視覺感受，最常見的為小圓角，也有較為嚴(yán)謹(jǐn)、力量型的全直角、卡通可愛、年輕化風(fēng)格的全圓角。
◇ 圖標(biāo)：用于按鈕含義的圖形化抽象表達(dá)，例如加載中、編輯；
◇ 容器：整個按鈕的載體，容納文案、圖標(biāo)等元素；
◇ 邊框：確定按鈕的邊界，常用于次級按鈕描邊；
◇ 文案：用文字表達(dá)按鈕的含義，精簡文案；
◇ 背景：表達(dá)按鈕的當(dāng)前狀態(tài)，對按鈕合理的使用主體色能有效傳播品牌氣質(zhì)；
◇ 投影：讓按鈕具有層次感，配合漸變背景能體現(xiàn)出微質(zhì)感的效果。
二、按鈕的類型
1 功能類型
按照功能屬性分類，可將按鈕類型分為流程控制和功能選項操作。
流程控制：常見的傳統(tǒng)按鈕，如支付、下一步、確定、保存等，容器承載著圖標(biāo)、圖標(biāo)+文案、文案。
功能選項：開關(guān)/加減控件、標(biāo)簽欄/分類、狀態(tài)切換等，操作之后只針對當(dāng)前頁面做出屬性的調(diào)整，不涉及流程的變化。
2 視覺樣式（橫向）
視覺樣式有所區(qū)別，在不同的頁面可能存在同等級的權(quán)重。
常規(guī)按鈕：最常見的按鈕，當(dāng)同一個頁面出現(xiàn)多個常規(guī)按鈕時，會有主次之分；
虛線按鈕：常用于添加、上傳等操作；
文本按鈕：僅用文字作為觸發(fā)點，部分會用主色、右側(cè)箭頭、下劃線等方式突出。
3 層級分類（縱向）
高權(quán)重：帶有填充色的主操作按鈕，當(dāng)同一個頁面存在多個按鈕，只允許存在一個高權(quán)重（主操作）按鈕；
中權(quán)重：帶邊框輪廓的概述按鈕，同一頁面可存在多個中權(quán)重的按鈕；
低權(quán)重：純文本按鈕，以及淺色填充+淺色文字的按鈕，同一頁面可存在多個低權(quán)重按鈕。
三、按鈕的狀態(tài)
在設(shè)計按鈕時，為了體現(xiàn)按鈕不同的具體含義，以及后續(xù)設(shè)計、開發(fā)的統(tǒng)一性，明確按鈕交互樣式是設(shè)計過程中不可缺少的重要組成部分。設(shè)計師需要在不干擾界面視覺的前提下，對每個按鈕的樣式、狀態(tài)有清晰的定義，與其他元素、布局區(qū)分開來，以確保按鈕的可供性。常見的狀態(tài)主要有以下幾種：
◇ 待激活狀態(tài)：需要完成一定的操作、或有一個以上必要的前置條件后才允許交互；
◇ 正常狀態(tài)：按鈕的正常顯示狀態(tài)，可進(jìn)行交互操作；
◇ 點擊狀態(tài)：觸碰效果，表示按鈕正在進(jìn)行交互且未結(jié)束，會在正常狀態(tài)的基礎(chǔ)上增加一個純黑色不且透明度為10%的蒙層，交互完成后，即會引發(fā)此按鈕的真實作用；
◇ 加載狀態(tài)：產(chǎn)生交互后沒有立即執(zhí)行、或系統(tǒng)需要一定的時間才能執(zhí)行完成；
◇ 禁用狀態(tài)：系統(tǒng)默認(rèn)暫不允許操作、或需要用戶離開此頁面去完成一定的前置條件才能使用。
四、按鈕的大小及風(fēng)格
1 按鈕的尺寸
在PC端設(shè)計按鈕時，因為鼠標(biāo)的精準(zhǔn)點擊，我們通常會將按鈕設(shè)計的小一些，同時也能讓整個界面看起來更加細(xì)膩，只要不影響操作，36px~48px范圍內(nèi)的按鈕是比較常見的。但移動端的按鈕設(shè)計，我們要更多的考慮到物理尺寸，即手指（指尖）在操作時需占用的實際范圍。
iOS的設(shè)計規(guī)范中，將按鈕的最小點擊區(qū)域規(guī)定為44pt，一旦小于這個數(shù)值，操作時就會出現(xiàn)精準(zhǔn)度較低的情況，導(dǎo)致操作失誤或無效。
在實際的iOS界面中，很多應(yīng)用在設(shè)計按鈕時并未嚴(yán)格遵循最小44pt的這個標(biāo)準(zhǔn)，例如很多一、二級界面的次級功能入口，有些連30pt都不到，也并未對用戶造成多大的影響，可能是對應(yīng)的功能權(quán)重、用戶點擊頻率都非常低的原因，還有一部分文字按鈕，其本身永遠(yuǎn)都不可能達(dá)到最小的觸控標(biāo)準(zhǔn)（觸控?zé)釁^(qū)加大即可），所以關(guān)于按鈕的尺寸大小并非規(guī)定的很死板。
費茨定律告訴我們「目標(biāo)尺寸越大，移動至目標(biāo)所花費的時間就越短」，所以，在滿足手指觸控范圍的同時，還要根據(jù)所對應(yīng)功能的權(quán)重占比來適當(dāng)調(diào)節(jié)按鈕的大小。不難理解，當(dāng)某個元素的尺寸越大就越吸引眼球，就更容易被視覺捕捉到，也更容易被「點擊」，精準(zhǔn)度被降低的同時，也減少了用戶的操作成本。
我們以8像素柵格系統(tǒng)、iOS的2倍圖為例，較為常見的有：小型-64px、中型-80~88px、大型-98px、超大型-隨機(jī)這四種按鈕。
2 按鈕的風(fēng)格
在UI設(shè)計中，幾乎每個頁面都存在按鈕，樣式、種類也有很多，但設(shè)計風(fēng)格常見的也就幾種，例如扁平化、微質(zhì)感、擬物化、新擬態(tài)（概念）...
2.1 扁平化按鈕
通常在容器中填充一個純色即可，沒有多余的視覺干擾，操作簡便，這種類型的按鈕一般在應(yīng)用中用的最多。例如：工具型應(yīng)用、B端應(yīng)用等。
2.2 微質(zhì)感按鈕
相比扁平化，填充漸變色再加上淺淺的投影，不僅能保持信息內(nèi)容的簡潔、讓用戶產(chǎn)生更強(qiáng)的操作欲望，還能讓頁面具有品質(zhì)感，更加耐看。例如：年輕化應(yīng)用、娛樂類應(yīng)用、兒童應(yīng)用等。
2.3 擬物化按鈕
大多設(shè)計的很立體，3D質(zhì)感、屬性樣式豐富多彩，參考現(xiàn)實世界中的事務(wù)或攝取應(yīng)用場景中的某些元素，使其更加逼真，有較強(qiáng)的代入感。例如：游戲類應(yīng)用、H5專題、運營banner等。
2.4 新擬態(tài)按鈕
2021年風(fēng)靡一時，幾乎無人不知，但要想落地卻不太現(xiàn)實，實用性不強(qiáng)，也只能在飛機(jī)稿中出出風(fēng)頭，隨著時間的流逝，逐漸銷聲匿跡，不知哪天會不會經(jīng)改良后再次面世（當(dāng)初扁平化問世，也是幾經(jīng)波折，經(jīng)多年改良才逐漸被大眾所接受）。目前只有少數(shù)工具類應(yīng)用使用了新擬態(tài)，例如：計算器、AI設(shè)備控制、有道云筆記等。
五、常見誤區(qū)及避坑指南
1 主/次操作層級分明
當(dāng)同一個頁面出現(xiàn)多個按鈕時，只允許存在一個主操作按鈕，其他不做特別設(shè)定。當(dāng)然，如果次要操作較多，也不益過多的出現(xiàn)次級按鈕，可根據(jù)權(quán)重降級處理，以小圖標(biāo)或文字按鈕的方式呈現(xiàn)。
2. 統(tǒng)一樣式
主/次操作按鈕要統(tǒng)一樣式，用戶需操作時，盡可能的減少其思考及選擇時間，按鈕應(yīng)該迎合用戶固有認(rèn)知及慣性思維，節(jié)省時間成本，提高操作效率。
3. 圓角值
在大多數(shù)界面設(shè)計中，我們通常所見到按鈕還是小圓角和全圓角居多，也有部分按鈕完全直角，需要根據(jù)產(chǎn)品的行業(yè)屬性與氣質(zhì)來選擇最合適的圓角類型。不管如何，盡量避免大圓角（卡片除外）按鈕，不方不圓、不倫不類的，顯的不夠成熟也不好看。
3.1 小圓角
小圓角按鈕的圓角值通?？刂圃诟叨鹊?/5、1/6，兒童類型的應(yīng)用也有1/4（較大）的，并非絕對值。如果習(xí)慣使用8像素網(wǎng)格，根據(jù)按鈕的尺寸大小，直接將圓角值固定在8px、16px、24px（較大）這幾個數(shù)值，能減少設(shè)計組件的數(shù)量，也利于開發(fā)做組件封裝后續(xù)調(diào)用。
3.2 全圓角
全圓角按鈕的圓角值固定為高度的1/2，或者在軟件的圓角設(shè)置中直接將數(shù)值拉到極限。
3.3 直角
不設(shè)圓角值，在PC端較為常見，也有部分較為嚴(yán)謹(jǐn)?shù)囊苿佣藨?yīng)用使用直角按鈕。
4. 按鈕中的文字
按鈕中的文字要便于用戶理解，不能過于陌生或繞口，用戶碰到不易理解的信息會產(chǎn)生困惑，甚至誤導(dǎo)用戶導(dǎo)致操作失誤從而造成損失。除此之外，文字還需要精簡，不能過多或折行且能合理的引導(dǎo)用戶完成操作。
上圖的文案歧義就很明顯，自以為聰明的設(shè)計師想要挽留用戶，刻意將主次按鈕樣式對換，希望用戶操作不成功，那么用戶在需要取消訂單時就疑惑了，到底是點擊「確定」還是主操作按鈕「取消」才能取消成功呢？或許稍加思考，用戶也能反應(yīng)過來，但無疑增加了選擇難度、思考時間及操作成本。
5. 文字與按鈕比例
按鈕中的文字太大或太小都會影響用戶對信息接收的效率，大小比例需要適中。文字太大會感覺很擁擠（跟大家衣服買小了感覺一樣），沒有呼吸感，要給文字四周留下足夠的空間，同時文字太小會顯得小氣，看起來也會比較吃力，不利于信息接收。
6. 按鈕與其他組件的區(qū)分
設(shè)計好按鈕組件之后，頁面中的其他組件或元素要與按鈕有很明顯的區(qū)別，避免讓用戶產(chǎn)生不必要的誤解。
7. 彈窗主/次按鈕的位置
在彈窗中，主按鈕是在左？還是在右？這是一個爭論不休的問題，那么不爭了，在移動端的彈窗設(shè)計中，主按鈕靠右就行了，不一定絕對正確，但絕對不是錯的。根據(jù)調(diào)查數(shù)據(jù)顯示，單手使用右手操作手機(jī)的用戶比左手操作手機(jī)的用戶量高，且用戶也有一定的意識，左側(cè)為上一步、右側(cè)為下一步，頂部左側(cè)為返回，右側(cè)為保存或確定。
8. 無障礙設(shè)計
可訪問性是按鈕設(shè)計最重要目標(biāo)之一，不僅要樣式統(tǒng)一，還應(yīng)符合用戶的認(rèn)知，讓用戶能快速知曉這個元素能否點擊？點擊之后會發(fā)生什么？甚至有種似曾相識的感覺。如果將按鈕樣式設(shè)計的與用戶認(rèn)知有較大的偏差，不易于用戶理解。
9. 減少使用禁用按鈕
在表單設(shè)計中，大部分都需要用戶完成一定任務(wù)之后才能正常操作下一步按鈕，在完成之前，需少用禁用按鈕，在前面有講到「待激活狀態(tài)」，即在按鈕中填充淺淺的主體色等待用戶完成任務(wù)激活。
通常系統(tǒng)默認(rèn)不允許操作或存在時間限制會用到填充為灰色的禁用按鈕，即便如此，也要盡量讓系統(tǒng)將其隱藏，萬不得已的情況下需要在按鈕附近說明情況，以免使用不當(dāng)引起用戶的負(fù)面情緒。
10. 投影的使用
在給按鈕添加投影時，選擇灰色或純黑色加調(diào)整不同明度即可滿足基本效果，但如果想要更好的視覺體驗，可以基于按鈕本身的色值來調(diào)整，讓投影效果看起來更舒適，跟頁面更搭。另外，切勿過度使用投影，寧缺毋濫，若按鈕的投影太深，看起來粗糙臟亂，還不如不用，顏色較淺的按鈕盡量不使用投影，否則可能會影響按鈕的識別度，讓這個頁面看起來不夠清爽。
六、總結(jié)
對于設(shè)計師來說，按鈕作為設(shè)計組件之一，有很多細(xì)節(jié)容易被忽略，我們需要對每一個細(xì)小的元素進(jìn)行深入思考，如論任何大小組件，都需要做到精益求精，才能給用戶帶來更好的使用體驗。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.yvirxh.cn