編輯導語：按鈕在我們的日常生活中十分常見，結合按鈕，用戶可以知道下一步動作該如何進行，然而按鈕若設計不當，則可能導緻用戶的錯誤操作，降低用戶的産品使用體驗。本篇文章裡，作者對按鈕設計進行了總結梳理，一起來看一下吧。

說起按鈕，很多做設計的小夥伴是熟悉的不能再熟悉了，它是我們在設計界面時最常用、最重要的組件之一，也是易被忽略的元素之一，所以在設計之前，做好對按鈕組件的認識、了解非常有必要。

從我們有記憶認知開始，按鈕就時刻在和我們打交道，牆上的電燈開關、電視機的調節按鈕、遙控器的按鈕等等，這些物理按鈕不僅僅是當下UI按鈕組件的前身，且不會消失，依然會有很多非數字化的産品及機器設備在持續延用，不管如何演變，基本不會脫離實物參考。

按鈕最吸引我們的莫過于通過簡單觸摸就能輕松滿足自己的行為需求，按鈕設計的直觀性及易用性會影響着人們完成一件事情的意願及效率。

在UI設計中，如何完美地避開問題、把按鈕設計得更好，是每個設計師需要深思的問題。按鈕設計的好壞，将直接關系着用戶引流、觸發行動、産品轉化率等至關重要的問題。

另外，精緻的按鈕也會讓整個頁面的視覺提升檔次。本篇文章将對按鈕作出解析，介紹在設計按鈕時需要着重考慮的因素及設計标準，并将理論付諸于實踐。

在UI設計中，按鈕是一個明确指示交互行為動作的組件，主要用于觸發某一個即時操作，很多時候，我們需要采取下一步行動或返回到上一步，都要通過按鈕（部分場景可用手勢交互）來完成。

在視覺層面，按鈕的組成看起來很簡單，由一個底色塊/線框加上一組文案即可組成，但真正要将按鈕設計好，僅停留在視覺層面并不嚴謹，其大小、位置、色值、文案……等每一個細節的處理都關系着用戶的操作體驗，下面的這幾種情況大家肯定有碰到過：

通常，我們在設計按鈕之前，需要詳細理解按鈕所存在的意義，哪裡該加、哪裡不該加、為什麼要加，主要從以下幾點來體現按鈕的作用：

1）功能性操作

這種按鈕很常見，比如展開、收起、下拉、加減等，按鈕視覺較弱，重點強調該頁面的功能，突出主體信息，在操作之後會發生一些交互變化，這類按鈕主要起到功能形态的作用。

2）明确引導下一步操作

當用戶完成一個頁面的内容填充或信息确認，就會失去視覺焦點，而下一步按鈕就會聚焦視覺重心，通過文案告知用戶下一步該怎麼做，常見的有保存、下一步、支付、确定……等。

另外，用戶需要完成某個任務，但同一個任務流程的信息、種類較多，這時就會通過分步驟、分頁的方式，并在每個步驟的末尾增加一個能起到上下銜接作用的按鈕，明确引導用戶進入下一步操作，以此來提升用戶完成整個任務的成功率。

3）培養行為習慣

如果在操作某個按鈕之後得到了一定的利益，且能持續為用戶帶來價值，那麼不妨将這個按鈕設計的更醒目，并在同等級但不同的地方保持視覺的統一，持續培養用戶點擊習慣，當用戶下次再看到類似這種按鈕時，慣性思維就會引導點擊。

在大部分的認知中，最常見的按鈕就是一個底色塊加上一句文案就完成了，殊不知一個好的按鈕需要經過很多細節的把控，才能發揮出按鈕的最大作用。

例如文案的長短/邊距、容器的大小/圓角、填充色的主/次之分……等，下面我們來看看一個按鈕到底是由哪些屬性、元素組成。

• 圓角：傳達出按鈕的氣質，決定用戶的視覺感受，最常見的為小圓角，也有較為嚴謹、力量型的全直角、卡通可愛、年輕化風格的全圓角；
• 圖标：用于按鈕含義的圖形化抽象表達，例如加載中、編輯；
• 容器：整個按鈕的載體，容納文案、圖标等元素；
• 邊框：确定按鈕的邊界，常用于次級按鈕描邊；
• 文案：用文字表達按鈕的含義，精簡文案；
• 背景：表達按鈕的當前狀态，對按鈕合理的使用主體色能有效傳播品牌氣質；
• 投影：讓按鈕具有層次感，配合漸變背景能體現出微質感的效果。

按照功能屬性分類，可将按鈕類型分為流程控制和功能選項操作。

• 流程控制：常見的傳統按鈕，如支付、下一步、确定、保存等，容器承載着圖标、圖标 文案、文案。
• 功能選項：開關/加減控件、标簽欄/分類、狀态切換等，操作之後隻針對當前頁面做出屬性的調整，不涉及流程的變化。

視覺樣式有所區别，在不同的頁面可能存在同等級的權重。

• 常規按鈕：最常見的按鈕，當同一個頁面出現多個常規按鈕時，會有主次之分；
• 虛線按鈕：常用于添加、上傳等操作；
• 文本按鈕：僅用文字作為觸發點，部分會用主色、右側箭頭、下劃線等方式突出。

• 高權重：帶有填充色的主操作按鈕，當同一個頁面存在多個按鈕，隻允許存在一個高權重（主操作）按鈕；
• 中權重：帶邊框輪廓的概述按鈕，同一頁面可存在多個中權重的按鈕；
• 低權重：純文本按鈕，以及淺色填充 淺色文字的按鈕，同一頁面可存在多個低權重按鈕。

在設計按鈕時，為了體現按鈕不同的具體含義，以及後續設計、開發的統一性，明确按鈕交互樣式是設計過程中不可缺少的重要組成部分。設計師需要在不幹擾界面視覺的前提下，對每個按鈕的樣式、狀态有清晰的定義，與其他元素、布局區分開來，以确保按鈕的可供性。

常見的狀态主要有以下幾種：

• 待激活狀态：需要完成一定的操作、或有一個以上必要的前置條件後才允許交互；
• 正常狀态：按鈕的正常顯示狀态，可進行交互操作；
• 點擊狀态：觸碰效果，表示按鈕正在進行交互且未結束，會在正常狀态的基礎上增加一個純黑色不且透明度為10%的蒙層，交互完成後，即會引發此按鈕的真實作用；
• 加載狀态：産生交互後沒有立即執行、或系統需要一定的時間才能執行完成；
• 禁用狀态：系統默認暫不允許操作、或需要用戶離開此頁面去完成一定的前置條件才能使用。

在PC端設計按鈕時，因為鼠标的精準點擊，我們通常會将按鈕設計得小一些，同時也能讓整個界面看起來更加細膩，隻要不影響操作，36px~48px範圍内的按鈕是比較常見的。

但移動端的按鈕設計，我們要更多的考慮到物理尺寸，即手指（指尖）在操作時需占用的實際範圍。

iOS的設計規範中，将按鈕的最小點擊區域規定為44pt，一旦小于這個數值，操作時就會出現精準度較低的情況，導緻操作失誤或無效。

在實際的iOS界面中，很多應用在設計按鈕時并未嚴格遵循最小44pt的這個标準，例如很多一、二級界面的次級功能入口，有些連30pt都不到，也并未對用戶造成多大的影響，可能是對應的功能權重、用戶點擊頻率都非常低的原因。

還有一部分文字按鈕，其本身永遠都不可能達到最小的觸控标準（觸控熱區加大即可），所以關于按鈕的尺寸大小并非規定得很死闆。

費茨定律告訴我們「目标尺寸越大，移動至目标所花費的時間就越短」，所以，在滿足手指觸控範圍的同時，還要根據所對應功能的權重占比來适當調節按鈕的大小。

不難理解，當某個元素的尺寸越大就越吸引眼球，就更容易被視覺捕捉到，也更容易被「點擊」，精準度被降低的同時，也減少了用戶的操作成本。

我們以8像素栅格系統、iOS的2倍圖為例，較為常見的有：小型-64px、中型-80~88px、大型-98px、超大型-随機這四種按鈕。

在UI設計中，幾乎每個頁面都存在按鈕，樣式、種類也有很多，但設計風格常見的也就幾種，例如扁平化、微質感、拟物化、新拟态（概念）……

1）扁平化按鈕

通常在容器中填充一個純色即可，沒有多餘的視覺幹擾，操作簡便，這種類型的按鈕一般在應用中用的最多。例如：工具型應用、B端應用等。

2）微質感按鈕

相比扁平化，填充漸變色再加上淺淺的投影，不僅能保持信息内容的簡潔、讓用戶産生更強的操作欲望，還能讓頁面具有品質感，更加耐看。例如：年輕化應用、娛樂類應用、兒童應用等。

3）拟物化按鈕

大多設計得很立體，3D質感、屬性樣式豐富多彩，參考現實世界中的事務或攝取應用場景中的某些元素，使其更加逼真，有較強的代入感。例如：遊戲類應用、H5專題、運營banner等。

4）新拟态按鈕

2021年風靡一時，幾乎無人不知，但要想落地卻不太現實，實用性不強，也隻能在飛機稿中出出風頭，随着時間的流逝，逐漸銷聲匿迹，不知哪天會不會經改良後再次面世（當初扁平化問世，也是幾經波折，經多年改良才逐漸被大衆所接受）。目前隻有少數工具類應用使用了新拟态，例如：計算器、AI設備控制、有道雲筆記等。

當同一個頁面出現多個按鈕時，隻允許存在一個主操作按鈕，其他不做特别設定。當然，如果次要操作較多，也不益過多的出現次級按鈕，可根據權重降級處理，以小圖标或文字按鈕的方式呈現。

主/次操作按鈕要統一樣式，用戶需操作時，盡可能地減少其思考及選擇時間，按鈕應該迎合用戶固有認知及慣性思維，節省時間成本，提高操作效率。

在大多數界面設計中，我們通常所見到按鈕還是小圓角和全圓角居多，也有部分按鈕完全直角，需要根據産品的行業屬性與氣質來選擇最合适的圓角類型。不管如何，盡量避免大圓角（卡片除外）按鈕，不方不圓、不倫不類的，顯得不夠成熟也不好看。

1）小圓角

小圓角按鈕的圓角值通常控制在高度的1/5、1/6，兒童類型的應用也有1/4（較大）的，并非絕對值。如果習慣使用8像素網格，根據按鈕的尺寸大小，直接将圓角值固定在8px、16px、24px（較大）這幾個數值，能減少設計組件的數量，也利于開發做組件封裝後續調用。

2）全圓角

全圓角按鈕的圓角值固定為高度的1/2，或者在軟件的圓角設置中直接将數值拉到極限。

3）直角

不設圓角值，在PC端較為常見，也有部分較為嚴謹的移動端應用使用直角按鈕。

按鈕中的文字要便于用戶理解，不能過于陌生或繞口，用戶碰到不易理解的信息會産生困惑，甚至誤導用戶導緻操作失誤從而造成損失。除此之外，文字還需要精簡，不能過多或折行且能合理地引導用戶完成操作。

上圖的文案歧義就很明顯，自以為聰明的設計師想要挽留用戶，刻意将主次按鈕樣式對換，希望用戶操作不成功，那麼用戶在需要取消訂單時就疑惑了，到底是點擊「确定」還是主操作按鈕「取消」才能取消成功呢？或許稍加思考，用戶也能反應過來，但無疑增加了選擇難度、思考時間及操作成本。

按鈕中的文字太大或太小都會影響用戶對信息接收的效率，大小比例需要适中。文字太大會感覺很擁擠（跟大家衣服買小了感覺一樣），沒有呼吸感，要給文字四周留下足夠的空間，同時文字太小會顯得小氣，看起來也會比較吃力，不利于信息接收。

設計好按鈕組件之後，頁面中的其他組件或元素要與按鈕有很明顯的區别，避免讓用戶産生不必要的誤解。

在彈窗中，主按鈕是在左？還是在右？

這是一個争論不休的問題，那麼不争了，在移動端的彈窗設計中，主按鈕靠右就行了，不一定絕對正确，但絕對不是錯的。根據調查數據顯示，單手使用右手操作手機的用戶比左手操作手機的用戶量高，且用戶也有一定的意識，左側為上一步、右側為下一步，頂部左側為返回，右側為保存或确定。

可訪問性是按鈕設計最重要目标之一，不僅要樣式統一，還應符合用戶的認知，讓用戶能快速知曉這個元素能否點擊？點擊之後會發生什麼？甚至有種似曾相識的感覺。如果将按鈕樣式設計的與用戶認知有較大的偏差，不易于用戶理解。

在表單設計中，大部分都需要用戶完成一定任務之後才能正常操作下一步按鈕，在完成之前，需少用禁用按鈕，在前面有講到「待激活狀态」，即在按鈕中填充淺淺的主體色等待用戶完成任務激活。

通常系統默認不允許操作或存在時間限制會用到填充為灰色的禁用按鈕，即便如此，也要盡量讓系統将其隐藏，萬不得已的情況下需要在按鈕附近說明情況，以免使用不當引起用戶的負面情緒。

在給按鈕添加投影時，選擇灰色或純黑色加調整不同明度即可滿足基本效果，但如果想要更好的視覺體驗，可以基于按鈕本身的色值來調整，讓投影效果看起來更舒适，跟頁面更搭。

另外，切勿過度使用投影，甯缺毋濫，若按鈕的投影太深，看起來粗糙髒亂，還不如不用，顔色較淺的按鈕盡量不使用投影，否則可能會影響按鈕的識别度，讓這個頁面看起來不夠清爽。

對于設計師來說，按鈕作為設計組件之一，有很多細節容易被忽略，我們需要對每一個細小的元素進行深入思考，如論任何大小組件，都需要做到精益求精，才能給用戶帶來更好的使用體驗。

一篇文章不足以道出按鈕設計的精髓，還需要我們一起進行更多的挖掘，希望本篇文章能帶給小夥伴們一些啟發，下篇「圖标」文章再見。

大漠飛鷹；公衆号：能量眼球，人人都是産品經理專欄作家。緻力于産品需求的驅動、産品體驗的挖掘，利用設計的手段為受衆用戶帶來更好的體驗，即好看、好用。

本文原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協議

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!