前言

剛看到這個(gè)標(biāo)題，你可能會(huì)說(shuō)：“按鈕？那不就是點(diǎn)一點(diǎn)的事兒嘛，何須大費(fèi)周章？”先別急著下結(jié)論！在這個(gè)處處藏玄機(jī)的數(shù)字世界里，按鈕可不僅僅是“有手就行”那么簡(jiǎn)單。

想象一下，如果你是一位時(shí)間旅行者，穿越到?jīng)]有“立即購(gòu)買(mǎi)”按鈕的網(wǎng)購(gòu)時(shí)代，恐怕得練就一身“意念支付”的絕技才能安心剁手。又或者，假如社交 APP 上的“發(fā)送”按鈕是個(gè)害羞的小家伙，非得你深情對(duì)視三秒才肯露面，那我們的朋友圈得錯(cuò)過(guò)多少即時(shí)笑料和深夜雞湯！所以，別小看這些按鈕，它們的設(shè)計(jì)，可是一門(mén)融合了心理學(xué)、美學(xué)的大學(xué)問(wèn)！

在這個(gè)數(shù)字世界的廣闊舞臺(tái)上，按鈕，這位默默無(wú)聞卻又舉足輕重的幕后英雄，正以一種“你不點(diǎn)我，我不老”的傲嬌姿態(tài)，默默守候在每一個(gè)界面的角落。它們不僅僅是屏幕上的小方塊或圓圈，今天，就讓我們脫下它們那看似平凡無(wú)奇的外衣，一探按鈕設(shè)計(jì)的奇妙世界，揭秘那些讓人忍不住點(diǎn)擊的藝術(shù)……多圖預(yù)警?。。?/p>

一、按鈕的作用

1. 什么是按鈕

按鈕（Button）是一種用戶(hù)界面元素，通常用于在圖形用戶(hù)界面（GUI）中觸發(fā)特定的事件或操作。按鈕允許用戶(hù)通過(guò)點(diǎn)擊或觸摸來(lái)與應(yīng)用程序或網(wǎng)頁(yè)進(jìn)行交互，執(zhí)行如打開(kāi)新窗口、提交表單、播放視頻、執(zhí)行搜索、加載新頁(yè)面、關(guān)閉程序等操作。

按鈕的設(shè)計(jì)和功能可以非常多樣化，根據(jù)應(yīng)用場(chǎng)景的不同，它們可以具有不同的形狀、大小、顏色、圖標(biāo)和文本標(biāo)簽。例如，在網(wǎng)頁(yè)上，按鈕可能以簡(jiǎn)單的矩形形狀出現(xiàn)，上面印有“提交”、“搜索”、“登錄”等文字；在移動(dòng)應(yīng)用中，按鈕可能會(huì)更加圖形化，包含圖標(biāo)和少量文字，以更好地適應(yīng)觸摸屏設(shè)備的操作習(xí)慣。

按鈕，在日常生活中隨處可見(jiàn)，從家用電器到公共場(chǎng)所的電梯，從辦公設(shè)備到各種遙控裝置，幾乎無(wú)處不在。按鈕的基本功能是通過(guò)人的簡(jiǎn)單操作，實(shí)現(xiàn)對(duì)電子設(shè)備的控制，無(wú)需復(fù)雜的操作過(guò)程，簡(jiǎn)單直觀(guān)。

總的來(lái)說(shuō)，按鈕作為一種基礎(chǔ)且普遍的控制元件，在人們的生活和工作中扮演著重要角色。無(wú)論是物理形式的按鈕還是界面設(shè)計(jì)中的虛擬按鈕，良好的設(shè)計(jì)都能顯著提升操作的效率和體驗(yàn)。

2. 按鈕的作用

按鈕是用戶(hù)界面中不可或缺的組件，它們通過(guò)提供直觀(guān)、可點(diǎn)擊的界面元素，幫助用戶(hù)與系統(tǒng)進(jìn)行交互，并引導(dǎo)用戶(hù)完成各種任務(wù)和操作。

1. 引導(dǎo)用戶(hù)行為：UI 設(shè)計(jì)師通過(guò)按鈕的設(shè)計(jì)（包括位置、大小、顏色、文本標(biāo)簽等）來(lái)引導(dǎo)用戶(hù)進(jìn)行特定的操作。例如，將“注冊(cè)”和“登錄”按鈕放置在頁(yè)面顯眼的位置，鼓勵(lì)用戶(hù)進(jìn)行賬戶(hù)創(chuàng)建或登錄。
2. 提高可用性：按鈕的設(shè)計(jì)需要考慮到用戶(hù)的操作習(xí)慣和心理預(yù)期。合理的按鈕布局、清晰的標(biāo)簽文字、以及直觀(guān)的交互反饋，都能提高界面的可用性，減少用戶(hù)的認(rèn)知負(fù)擔(dān)和操作錯(cuò)誤。
3. 強(qiáng)化視覺(jué)層次：按鈕在界面設(shè)計(jì)中往往具有獨(dú)特的視覺(jué)風(fēng)格，如鮮明的顏色、清晰的邊界、或特定的形狀。這種設(shè)計(jì)不僅使按鈕在界面中脫穎而出，還能幫助建立視覺(jué)層次，引導(dǎo)用戶(hù)的視線(xiàn)流動(dòng)，從而提升整體的設(shè)計(jì)美感。
4. 提供即時(shí)反饋：當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)，系統(tǒng)應(yīng)給予即時(shí)的反饋，如按鈕顏色的變化、加載動(dòng)畫(huà)的顯示等。這種反饋機(jī)制能夠增強(qiáng)用戶(hù)的控制感，并讓用戶(hù)知道他們的操作已被系統(tǒng)接收和處理。UI 設(shè)計(jì)師需要確保這些反饋元素與整體設(shè)計(jì)風(fēng)格相協(xié)調(diào)，同時(shí)保持足夠的可見(jiàn)性和清晰度。
5. 塑造品牌形象：按鈕的設(shè)計(jì)也是品牌傳達(dá)的一部分。通過(guò)統(tǒng)一的色彩、字體和圖標(biāo)風(fēng)格，按鈕能夠強(qiáng)化品牌的識(shí)別度，并在用戶(hù)心中建立一致的品牌形象。UI 設(shè)計(jì)師需要深入理解品牌的核心價(jià)值和視覺(jué)語(yǔ)言，將其融入到按鈕的設(shè)計(jì)中。
6. 適應(yīng)不同場(chǎng)景：在不同的使用場(chǎng)景和設(shè)備上，按鈕的設(shè)計(jì)也需要做出相應(yīng)的調(diào)整。例如，在移動(dòng)設(shè)備上，由于屏幕尺寸較小，按鈕需要設(shè)計(jì)得更加緊湊且易于點(diǎn)擊；而在桌面應(yīng)用中，則可以有更大的空間來(lái)展示按鈕的詳細(xì)信息。UI 設(shè)計(jì)師需要根據(jù)具體場(chǎng)景來(lái)制定合適的設(shè)計(jì)策略。

按鈕的核心作用是以驅(qū)動(dòng)用戶(hù)產(chǎn)生點(diǎn)擊行為為目的，而不是僅僅追求視覺(jué)上的美觀(guān)。

為了實(shí)現(xiàn)這一目標(biāo)，我們需要深入理解用戶(hù)點(diǎn)擊行為的底層邏輯。這就需要我們運(yùn)用福格行為模型（Fogg Behavior Model，F(xiàn)BM）來(lái)進(jìn)行深入分析。

① 福格行為模型（Fogg Behavior Model，F(xiàn)BM）

福格行為模型認(rèn)為，一個(gè)行為的發(fā)生是由三個(gè)要素共同作用的結(jié)果，即表示為 B=MAT，行為（Behavior）、動(dòng)機(jī)（Motivation）、能力（Ability）和觸發(fā)因素（Triggers）。具體來(lái)說(shuō)：

動(dòng)機(jī)（Motivation)：用戶(hù)需要有足夠的動(dòng)機(jī)去執(zhí)行某個(gè)操作。在 UI 設(shè)計(jì)中，這可能意味著通過(guò)顏色、文案、位置等元素吸引用戶(hù)的注意力，并激發(fā)他們的興趣或欲望。例如，使用鮮明的顏色或限時(shí)優(yōu)惠的信息可以增加用戶(hù)的購(gòu)買(mǎi)動(dòng)機(jī)。

能力（Ability)：用戶(hù)需要有能力輕松完成這個(gè)操作。設(shè)計(jì)的簡(jiǎn)便性、直觀(guān)性在這里扮演著關(guān)鍵角色。確保按鈕的尺寸適中、標(biāo)簽清晰，減少用戶(hù)操作的復(fù)雜性，如簡(jiǎn)化流程、提供清晰的指引等。

觸發(fā)因素（Triggers)：設(shè)計(jì)中需要有明確的觸發(fā)因素促使用戶(hù)行動(dòng)。這可能包括明顯的按鈕設(shè)計(jì)、及時(shí)的提示信息、或者特定情境下的交互反饋。

通過(guò)對(duì)這三個(gè)要素的優(yōu)化，我們可以更有效地引導(dǎo)用戶(hù)進(jìn)行點(diǎn)擊操作。例如，通過(guò)提高按鈕的視覺(jué)吸引力（增加動(dòng)機(jī)），優(yōu)化界面的導(dǎo)航效率（提升能力），以及適時(shí)出現(xiàn)的行為召喚（觸發(fā)因素），都有助于增加用戶(hù)的點(diǎn)擊率。

在實(shí)際的按鈕設(shè)計(jì)中，可以將動(dòng)機(jī)、能力和觸發(fā)三個(gè)要素綜合應(yīng)用，以達(dá)到最佳的設(shè)計(jì)效果。

例如設(shè)計(jì)一個(gè)“立即搶購(gòu)”按鈕：

1. 動(dòng)機(jī)：使用醒目的紅色背景和“搶購(gòu)”二字作為文案，激發(fā)用戶(hù)的購(gòu)買(mǎi)欲望。
2. 能力：將按鈕放置在頁(yè)面顯眼位置，并使用大字體和明顯的圖標(biāo)，確保用戶(hù)易于點(diǎn)擊。
3. 觸發(fā)：在商品庫(kù)存緊張時(shí)顯示該按鈕，并使用倒計(jì)時(shí)等元素增強(qiáng)緊迫感，引導(dǎo)用戶(hù)立即行動(dòng)。

3. 按鈕的構(gòu)成

深入探討按鈕設(shè)計(jì)的精妙之處時(shí)，我們往往發(fā)現(xiàn)，一個(gè)看似簡(jiǎn)單的按鈕背后，實(shí)則蘊(yùn)含了諸多精心雕琢的細(xì)節(jié)，這些元素共同協(xié)作，以最大化按鈕的功能性和吸引力。一個(gè)好的按鈕設(shè)計(jì)，遠(yuǎn)不止于底色塊與單一文案的簡(jiǎn)單結(jié)合，而是對(duì)文案的精煉度、布局的邊距考量、容器形態(tài)的精細(xì)調(diào)整、圓角處理的圓潤(rùn)度，以及色彩搭配的層次感等多方面的綜合考量。

移動(dòng)端按鈕的組成元素主要包括以下幾個(gè)方面：

1. 文本：核心指令，直觀(guān)傳達(dá)按鈕功能。如“提交”、“取消”，簡(jiǎn)潔明了，引導(dǎo)用戶(hù)行動(dòng)。
2. 圖標(biāo)：視覺(jué)輔助，強(qiáng)化功能認(rèn)知。與文本相輔相成，提升界面整潔度，直觀(guān)示意操作意圖。
3. 容器：承載主體，塑造按鈕形態(tài)。形狀、大小、顏色精心設(shè)計(jì)，影響整體視覺(jué)效果與用戶(hù)體驗(yàn)。
4. 邊框：界定邊界，強(qiáng)化區(qū)域感。實(shí)線(xiàn)、虛線(xiàn)或創(chuàng)意形狀，區(qū)分元素，特定場(chǎng)景下強(qiáng)調(diào)按鈕重要性。
5. 背景：色彩與圖案，展現(xiàn)狀態(tài)與風(fēng)格。根據(jù)按鈕狀態(tài)調(diào)整顏色，與整體設(shè)計(jì)和諧統(tǒng)一，傳遞品牌特色。
6. 陰影：增強(qiáng)層次，營(yíng)造立體感。通過(guò)精細(xì)調(diào)整，提升按鈕視覺(jué)深度，吸引用戶(hù)注意。
7. 圓角：圓角的設(shè)計(jì)不僅僅是形狀的變化，更是情感與風(fēng)格的傳遞者。

二、按鈕的尺寸

1. 基本尺寸規(guī)范

① 最小尺寸

iOS：在 Apple 的設(shè)計(jì)規(guī)范中，最小的點(diǎn)擊目標(biāo)尺寸是44x44 像素，這主要是基于用戶(hù)手指的平均尺寸和觸摸精度來(lái)設(shè)定的。

AndROId：Android 平臺(tái)也定義了其最小點(diǎn)擊區(qū)域，通常以 dp 為單位。Android 的最小點(diǎn)擊區(qū)域尺寸建議為 48x48dp，但在某些高分辨率設(shè)備上，這可能會(huì)轉(zhuǎn)換為更大的物理像素尺寸。

② 推薦尺寸范圍

在實(shí)際設(shè)計(jì)中，按鈕的尺寸可能會(huì)根據(jù)具體的應(yīng)用場(chǎng)景和用戶(hù)界面布局進(jìn)行調(diào)整。但一般來(lái)說(shuō)，移動(dòng)端按鈕的高度建議在35px-50px之間（web 端或其他終端則需根據(jù)實(shí)際使用場(chǎng)景調(diào)整），字號(hào)在13pt-17pt之間，圓角在4-8之間。這些數(shù)值可以作為設(shè)計(jì)時(shí)的參考。

2. 設(shè)計(jì)考慮因素

① 用戶(hù)體驗(yàn)

按鈕的尺寸應(yīng)足夠大，以確保用戶(hù)能夠輕松點(diǎn)擊并減少誤觸。過(guò)小的按鈕會(huì)增加用戶(hù)的操作難度和誤操作率。

同時(shí)，按鈕的布局和間距也需要合理設(shè)計(jì)，以避免用戶(hù)在點(diǎn)擊時(shí)誤觸其他功能。

② 設(shè)備特性：

不同設(shè)備的屏幕尺寸和分辨率不同，因此在設(shè)計(jì)按鈕時(shí)需要考慮設(shè)備的特性。例如，在高分辨率設(shè)備上，可能需要使用更大的物理像素尺寸來(lái)保持按鈕的視覺(jué)清晰度和可點(diǎn)擊性。

③ 設(shè)計(jì)規(guī)范：

遵循所在平臺(tái)的設(shè)計(jì)規(guī)范是確保應(yīng)用一致性和用戶(hù)體驗(yàn)的重要手段。iOS 和 Android 等平臺(tái)都有自己的設(shè)計(jì)指南和最佳實(shí)踐，設(shè)計(jì)時(shí)應(yīng)盡量遵循這些規(guī)范。

在實(shí)際設(shè)計(jì)中，可以根據(jù)具體的應(yīng)用場(chǎng)景和用戶(hù)界面布局對(duì)按鈕尺寸進(jìn)行調(diào)整。例如，在導(dǎo)航欄或工具欄中的按鈕可能需要更小的尺寸以節(jié)省空間；而在表單或列表頁(yè)面中的按鈕則可能需要更大的尺寸以提高點(diǎn)擊的準(zhǔn)確性和便利性，如下圖盯潮底部“導(dǎo)航欄”、iTranslate Lingo 的語(yǔ)言“選擇列表”。

三、按鈕的形狀樣式

1. 按鈕的形狀

移動(dòng)端按鈕的樣式豐富多樣，旨在提升用戶(hù)體驗(yàn)和界面的美觀(guān)性。以下是一些常見(jiàn)的移動(dòng)端按鈕樣式：

① 矩形按鈕

直角矩形：具有嚴(yán)謹(jǐn)、力量、高端的特點(diǎn)，適用于金融類(lèi)、奢侈品類(lèi)產(chǎn)品中，能給人嚴(yán)謹(jǐn)安全、高端的感覺(jué)，符合產(chǎn)品調(diào)性，如下圖京東金融。

圓角矩形：圓角矩形按鈕的圓角度數(shù)可以根據(jù)設(shè)計(jì)需求調(diào)整，從輕微圓角到全圓角不等。小圓角矩形按鈕具有穩(wěn)定、中性的感覺(jué)，適用于用戶(hù)跨度較大的常規(guī)類(lèi)產(chǎn)品中，如下圖微信“零錢(qián)”。全圓角適用于兒童類(lèi)、年輕化、娛樂(lè)類(lèi)、購(gòu)物類(lèi)的產(chǎn)品中，具有親和力，拉近與用戶(hù)之間的距離，例如下圖斑馬 AI 學(xué)“課程”。

② 圓形按鈕

圓形按鈕具有活潑、年輕的特點(diǎn)，常用于需要吸引用戶(hù)注意或執(zhí)行重要操作的場(chǎng)景，如下圖 Gofun 出行“路線(xiàn)”、ofo 共享單車(chē)“掃碼用車(chē)”。

③ 自定義形狀按鈕

隨著設(shè)計(jì)技術(shù)的發(fā)展和用戶(hù)需求的多樣化，越來(lái)越多的應(yīng)用開(kāi)始采用自定義形狀的按鈕。這些按鈕的形狀可以根據(jù)產(chǎn)品的品牌調(diào)性、界面風(fēng)格以及用戶(hù)操作習(xí)慣進(jìn)行設(shè)計(jì)，以達(dá)到更好的用戶(hù)體驗(yàn)效果。

2. 按鈕的樣式

按鈕樣式：按鈕樣式主要分為面形、線(xiàn)性、圖標(biāo)+文字、文字按鈕、圖標(biāo)按鈕
等。視覺(jué)優(yōu)先級(jí)：面性>線(xiàn)性>圖標(biāo)+文字>文字>圖標(biāo)

① 面形按鈕

面形按鈕以其突出的顏色填充和明顯的邊界而著稱(chēng)，這種按鈕因其較大的視覺(jué)重量而容易被用戶(hù)首先注意到。它通常用于表示主要操作，如“購(gòu)買(mǎi)”或“開(kāi)通”例如下圖馬蜂窩“會(huì)員中心”頁(yè)面

視覺(jué)優(yōu)先級(jí)：由于其顯著的顏色對(duì)比和面積，面形按鈕在視覺(jué)上的優(yōu)先級(jí)是最高的，能夠迅速吸引用戶(hù)的目光并鼓勵(lì)互動(dòng)。

② 線(xiàn)性按鈕

線(xiàn)性按鈕使用細(xì)線(xiàn)來(lái)勾勒其形狀，中間可能搭配圖標(biāo)或簡(jiǎn)潔的文字。這種按鈕較為簡(jiǎn)約，適合現(xiàn)代、干凈的風(fēng)格設(shè)計(jì)。

視覺(jué)優(yōu)先級(jí)：線(xiàn)性按鈕在視覺(jué)層級(jí)上位列面形按鈕之后，適用于次要功能或較少干擾的場(chǎng)景，如“更多”或“收藏”，例如下圖 Tripadvisor“收藏”頁(yè)面。

③ 圖標(biāo)+文字按鈕

這種按鈕結(jié)合了圖標(biāo)的直觀(guān)表達(dá)和文字的具體說(shuō)明，使得功能指示更為明確，用戶(hù)理解起來(lái)更無(wú)歧義，例如下圖高德底部“操作按鈕”

視覺(jué)優(yōu)先級(jí)：圖標(biāo)加文字的按鈕在視覺(jué)上的重要性位于線(xiàn)性按鈕之后，因其信息量大，適合需要解釋說(shuō)明的功能按鈕。

④ 文字按鈕

這類(lèi)按鈕主要由文字構(gòu)成，缺乏圖形元素，使得界面保持簡(jiǎn)潔。文字按鈕通常用在輔助操作或?qū)φw界面干擾小的功能上，如“跳過(guò)”或“取消”，例如下圖美團(tuán)打車(chē)“點(diǎn)擊重試”文字按鈕。

視覺(jué)優(yōu)先級(jí)：文字按鈕的視覺(jué)優(yōu)先級(jí)較低，因?yàn)樗鼈內(nèi)鄙傥⒁獾囊曈X(jué)元素，適合用于不頻繁操作或較不重要的功能。

⑤ 圖標(biāo)按鈕

圖標(biāo)按鈕僅包含圖標(biāo)而無(wú)文字說(shuō)明，依賴(lài)于用戶(hù)對(duì)圖標(biāo)識(shí)別的熟悉度。這類(lèi)按鈕節(jié)省空間，適合操作頻繁且直觀(guān)的功能，如“添加”、“收藏”和“點(diǎn)贊”等，例如下圖盯潮“點(diǎn)贊”、“表情”和“圖片上傳”按鈕。

視覺(jué)優(yōu)先級(jí)：圖標(biāo)按鈕的視覺(jué)優(yōu)先級(jí)最低，因?yàn)閮H靠圖標(biāo)表達(dá)功能可能導(dǎo)致一部分用戶(hù)理解困難，因此通常用于普遍認(rèn)知的簡(jiǎn)易操作。

3. 按鈕的狀態(tài)

在移動(dòng)端設(shè)計(jì)中，按鈕的狀態(tài)是提升用戶(hù)體驗(yàn)和交互效果的關(guān)鍵因素之一。常見(jiàn)的移動(dòng)端按鈕狀態(tài)主要包括以下幾種：

① 正常狀態(tài)

按鈕在未被用戶(hù)直接操作且沒(méi)有特殊條件影響其可用性時(shí)的基本狀態(tài)。這是用戶(hù)第一次看到按鈕或按鈕未被任何外部事件（如點(diǎn)擊、懸停、加載等）影響時(shí)的顯示狀態(tài)。

通常表現(xiàn)為標(biāo)準(zhǔn)的顏色、形狀和大小，無(wú)特殊效果。按鈕的外觀(guān)可能會(huì)以半透明或者灰色的形式呈現(xiàn)，以明確告知用戶(hù)當(dāng)前按鈕不可用。

② 待激活狀態(tài)

待激活狀態(tài)通常指的是按鈕在某種條件下尚未達(dá)到可點(diǎn)擊或可交互的狀態(tài)，但用戶(hù)可以通過(guò)完成某些前置操作來(lái)使其變?yōu)榧せ顮顟B(tài)。

待激活狀態(tài)的按鈕在外觀(guān)上可能更加接近正常狀態(tài)，會(huì)通過(guò)文字提示、進(jìn)度條等方式告知用戶(hù)當(dāng)前狀態(tài)。

③ 點(diǎn)擊狀態(tài)

當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)的狀態(tài)。

按鈕的外觀(guān)會(huì)有明顯的變化，如顏色變深、出現(xiàn)下沉效果（也稱(chēng)為“按下效果”）等，以給用戶(hù)明確的反饋，表明按鈕已被激活或正在被操作。

為了提升用戶(hù)體驗(yàn)，許多應(yīng)用都在努力簡(jiǎn)化操作流程，減少不必要的點(diǎn)擊和等待時(shí)間。在這種背景下，按鈕點(diǎn)擊狀態(tài)的變化（如按下、松開(kāi)等）可能被視為一種額外的視覺(jué)負(fù)擔(dān)，因此被逐漸淡化或取消。

④ 禁用狀態(tài)

禁用狀態(tài)的按鈕完全不可用，用戶(hù)無(wú)法進(jìn)行任何交互。

禁用狀態(tài)的按鈕通常會(huì)有明顯的視覺(jué)變化（如變灰、半透明等）以表明其不可用性。

⑤ 加載狀態(tài)

在某些情況下，當(dāng)按鈕觸發(fā)某項(xiàng)需要較長(zhǎng)時(shí)間處理的操作（如數(shù)據(jù)加載、提交表單等）時(shí)，按鈕會(huì)進(jìn)入加載狀態(tài)。

通常通過(guò)旋轉(zhuǎn)的圖標(biāo)、進(jìn)度條或其他動(dòng)畫(huà)效果來(lái)表示按鈕正在處理中，以避免用戶(hù)重復(fù)點(diǎn)擊。

了上述常見(jiàn)狀態(tài)外，根據(jù)具體的應(yīng)用場(chǎng)景和設(shè)計(jì)需求，按鈕還可能具有其他特定狀態(tài)，如：

1. 成功狀態(tài)：表示操作已成功完成，如提交表單后顯示的“成功”按鈕。
2. 警告狀態(tài)：用于需要用戶(hù)注意或確認(rèn)的操作，如刪除操作前的警告提示。
3. 特殊樣式按鈕：如幽靈按鈕（常用于背景色復(fù)雜的地方）、虛線(xiàn)按鈕（常用于添加操作）等，這些按鈕的狀態(tài)可能會(huì)根據(jù)其特定樣式和設(shè)計(jì)需求有所不同。

移動(dòng)端按鈕的狀態(tài)設(shè)計(jì)旨在為用戶(hù)提供清晰的反饋和交互體驗(yàn)。在實(shí)際設(shè)計(jì)中，應(yīng)根據(jù)應(yīng)用的具體需求、用戶(hù)習(xí)慣以及設(shè)計(jì)風(fēng)格來(lái)選擇合適的按鈕狀態(tài)和外觀(guān)表現(xiàn)。

四、按鈕的位置

在移動(dòng)端設(shè)計(jì)中，按鈕的位置擺放對(duì)于提升用戶(hù)體驗(yàn)至關(guān)重要。在設(shè)計(jì)按鈕的位置時(shí)候我們可以遵循古騰堡原則，它們可以幫助設(shè)計(jì)師更有效地決定按鈕的最佳位置。

1. 古騰堡原則

古騰堡原則，又稱(chēng)對(duì)角線(xiàn)平衡法則，由報(bào)紙?jiān)O(shè)計(jì)師埃德蒙·阿諾德提出。它描述了用戶(hù)在閱讀頁(yè)面時(shí)的自然視線(xiàn)移動(dòng)模式，即從左上角開(kāi)始，沿對(duì)角線(xiàn)向下移動(dòng)，最終到達(dá)右下角。

古騰堡原則基于人類(lèi)從左至右的閱讀習(xí)慣，將頁(yè)面劃分為四大視覺(jué)區(qū)域以?xún)?yōu)化信息布局：

1. 首要視覺(jué)區(qū)（左上）：用戶(hù)首先且頻繁關(guān)注的區(qū)域，適合放置核心內(nèi)容或主要功能，確保信息一目了然。
2. 行動(dòng)號(hào)召區(qū)（右下）：瀏覽流程的終點(diǎn)，適合放置按鈕或行動(dòng)點(diǎn)，引導(dǎo)用戶(hù)完成最終操作，提升轉(zhuǎn)化率。
3. 次要視覺(jué)區(qū)（右上）：相對(duì)較少被注意，不宜放置重要操作項(xiàng)，以免分散注意力或影響流暢體驗(yàn)。
4. 信息輔助區(qū)（左下）：用戶(hù)關(guān)注度最低，適合放置次要信息或提示，不影響主要閱讀路徑。

在移動(dòng)端設(shè)計(jì)中，可以將主要操作按鈕放置在用戶(hù)視線(xiàn)的自然落點(diǎn)處，即屏幕的右下角或底部中央。例如下圖有道精品課“課程報(bào)名”界面，左上角為課程 banner 主文案，“立即報(bào)名”按鈕放在左下角最終視覺(jué)區(qū)域。又或者站酷的個(gè)人“中心頁(yè)面”，左上角為個(gè)人信息，“上傳作品”按鈕放在用戶(hù)視線(xiàn)自然落點(diǎn)處，這樣設(shè)計(jì)可以確保用戶(hù)在完成內(nèi)容閱讀后，能夠迅速找到并執(zhí)行下一步操作。

當(dāng)然，除了古騰堡原則，在按鈕的設(shè)計(jì)上還可以遵循“菲茨定律”、“F 型視覺(jué)模型”、“z 型視覺(jué)模型”等設(shè)計(jì)原則。這些方法論相互補(bǔ)充，共同指導(dǎo)設(shè)計(jì)師創(chuàng)造出既美觀(guān)又實(shí)用的用戶(hù)界面。

五、按鈕的布局

按鈕的布局設(shè)計(jì)在移動(dòng)端和網(wǎng)頁(yè)端都至關(guān)重要，它直接影響到用戶(hù)的操作體驗(yàn)和界面的整體美觀(guān)性。一般來(lái)說(shuō)，按鈕的布局可以歸納為導(dǎo)航欄布局、跟隨內(nèi)容布局、偏向底部布局、 底部懸浮布局、水平多按鈕布局五種常規(guī)布局。

1. 導(dǎo)航欄布局

特點(diǎn)：按鈕通常放置在頁(yè)面的頂部導(dǎo)航欄中，便于用戶(hù)快速訪(fǎng)問(wèn)主要功能或頁(yè)面。

適用場(chǎng)景：常見(jiàn)于各種應(yīng)用的首頁(yè)或主要操作頁(yè)面，如下圖脈脈的“發(fā)布”按鈕，微信的“功能操作”按鈕。

注意事項(xiàng)：確保導(dǎo)航欄中的按鈕數(shù)量適中，避免過(guò)多導(dǎo)致?lián)頂D，同時(shí)要考慮按鈕的優(yōu)先級(jí)和用戶(hù)的操作習(xí)慣。

2. 跟隨內(nèi)容布局

特點(diǎn)：按鈕緊隨內(nèi)容區(qū)域下方或旁邊，與用戶(hù)當(dāng)前操作的內(nèi)容緊密相關(guān)。

適用場(chǎng)景：登錄注冊(cè)、表單填寫(xiě)、評(píng)論提交等需要用戶(hù)輸入內(nèi)容的場(chǎng)景，如下圖唱吧“個(gè)人信息”界面，Scoot 的“卡片詳情”界面。

注意事項(xiàng)：當(dāng)內(nèi)容區(qū)域需要調(diào)起鍵盤(pán)時(shí)，要確保鍵盤(pán)不會(huì)遮擋操作按鈕，或者通過(guò)合理的布局調(diào)整避免這一問(wèn)題。

3. 偏向底部布局

特點(diǎn)：按鈕放置在頁(yè)面的底部區(qū)域，用戶(hù)無(wú)需滾動(dòng)頁(yè)面即可找到并執(zhí)行操作。

適用場(chǎng)景：內(nèi)容區(qū)域不需要調(diào)起鍵盤(pán)的場(chǎng)景，如引導(dǎo)頁(yè)、結(jié)果頁(yè)等。入下圖知乎的“引導(dǎo)頁(yè)”、拍拍嚴(yán)選的“說(shuō)明”頁(yè)面。

注意事項(xiàng)：底部按鈕應(yīng)設(shè)計(jì)得醒目且易于點(diǎn)擊，避免與頁(yè)面其他元素混淆。

4. 底部懸浮布局

特點(diǎn)：按鈕固定在頁(yè)面底部，隨著頁(yè)面的滾動(dòng)而保持位置不變。

適用場(chǎng)景：非填寫(xiě)內(nèi)容超過(guò)一屏或需要用戶(hù)隨時(shí)進(jìn)行操作的場(chǎng)景，如斑馬 AI 學(xué)的“課程購(gòu)買(mǎi)”按鈕，boss 直聘的“立即溝通”按鈕。

注意事項(xiàng)：底部懸浮按鈕應(yīng)設(shè)計(jì)得簡(jiǎn)潔明了，避免過(guò)于復(fù)雜或占用過(guò)多空間。

5. 水平多按鈕布局

特點(diǎn)：將多個(gè)按鈕橫向排列在一起，適用于需要同時(shí)操作多個(gè)功能的場(chǎng)景。可依據(jù)古騰堡法則，目標(biāo)按鈕置底部右側(cè)，利用視覺(jué)終點(diǎn)效應(yīng)，提升操作效率與體驗(yàn)。

適用場(chǎng)景：移動(dòng)端各類(lèi)彈窗、電商立即購(gòu)買(mǎi)、工具欄、操作面板等需要集中展示多個(gè)操作按鈕的區(qū)域，如下圖得物“立即購(gòu)買(mǎi)”、皮皮的“提示”彈窗。

注意事項(xiàng)：那些正向的、鼓勵(lì)性質(zhì)的、高優(yōu)先級(jí)的按鈕往往被放置在右下角。

六、按鈕的功能類(lèi)型

設(shè)計(jì)按鈕時(shí)，我們需要考慮其功能類(lèi)型，因?yàn)檫@將決定按鈕的設(shè)計(jì)方式。例如，
如果一個(gè)按鈕的功能是引導(dǎo)用戶(hù)進(jìn)行某個(gè)操作，那么它的設(shè)計(jì)可能需要強(qiáng)調(diào)，以便吸引用戶(hù)的注意力。相反，如果一個(gè)按鈕的功能只是提供信息，那么它的設(shè)計(jì)可能需要弱化，以避免分散用戶(hù)的注意力。

此外，我們還需要考慮按鈕的文案。如果一個(gè)按鈕的功能是引導(dǎo)用戶(hù)進(jìn)行某個(gè)操作，那么文案可能需要強(qiáng)引導(dǎo)，以激勵(lì)用戶(hù)點(diǎn)擊。而如果一個(gè)按鈕的功能只是提供信息，那么文案可能只需要直接闡述功能。

按鈕根據(jù)功能的不同，可以分為不同的類(lèi)型，主要有行為召喚按鈕、懸浮按鈕、命令按鈕、開(kāi)關(guān)按鈕等。

1. 召喚按鈕

召喚按鈕，它通常被設(shè)計(jì)為引導(dǎo)用戶(hù)執(zhí)行特定操作的按鈕，這種操作能夠
促使用戶(hù)達(dá)成某種目的或完成某項(xiàng)任務(wù)。召喚按鈕也被稱(chēng)為 CTA（Call To Action）按鈕，即行為召喚按鈕。

根據(jù)功能和目的的不同，召喚按鈕可以分為多種類(lèi)型，如：誘導(dǎo)購(gòu)買(mǎi)、訂閱關(guān)注、利益誘導(dǎo)等。

① 誘導(dǎo)購(gòu)買(mǎi)

通過(guò)顏色、形狀、樣式等設(shè)計(jì)元素，突出購(gòu)買(mǎi)按鈕，引導(dǎo)用戶(hù)進(jìn)行購(gòu)買(mǎi)操作，讓用戶(hù)進(jìn)來(lái)第一眼就能知道該按鈕的用途。如下圖淘寶的“購(gòu)買(mǎi)頁(yè)面”，在按鈕上加上倒計(jì)時(shí)，或者下圖優(yōu)酷“會(huì)員”界面在主按鈕上標(biāo)注“已節(jié)省 9 元”，刺激用戶(hù)購(gòu)買(mǎi)欲望。

② 訂閱關(guān)注

在內(nèi)容型應(yīng)用中，引導(dǎo)用戶(hù)訂閱或關(guān)注內(nèi)容，以便持續(xù)獲取更新，如下圖波點(diǎn)音樂(lè)和咸魚(yú)的“關(guān)注”。

③ 利益誘導(dǎo)

通過(guò)展示優(yōu)惠信息、積分獎(jiǎng)勵(lì)等利益點(diǎn)，吸引用戶(hù)點(diǎn)擊按鈕。如下圖支付寶的“積分兌換”和拼多多的“省錢(qián)月卡”。

2. 懸浮按鈕

移動(dòng)端的懸浮按鈕是一種在用戶(hù)界面中常見(jiàn)的元素，它通常用于執(zhí)行主要或高頻次的操作，如創(chuàng)建、分享、編輯等。懸浮按鈕有以下特點(diǎn)：

1. 顯眼：懸浮按鈕在視覺(jué)上往往色彩鮮明，能夠迅速吸引用戶(hù)的注意力。
2. 高效：它鼓勵(lì)用戶(hù)執(zhí)行單一的、集中的行動(dòng)，是用戶(hù)可能會(huì)采用的最常用路徑。
3. 靈活：可以根據(jù)需要調(diào)整大小和位置，以適應(yīng)不同的屏幕尺寸和布局。

如下圖站酷的“作品詳情”界面，收藏、點(diǎn)贊、評(píng)論采用了懸浮按鈕樣式置于界面底部，方便用戶(hù)實(shí)時(shí)操作，或果殼“發(fā)布”按鈕采用懸浮樣式，方便用戶(hù)進(jìn)行發(fā)布操作。

3. 命令按鈕

命令按鈕通常出現(xiàn)在彈框中，具有明確的指令性質(zhì)。它們大多包含一個(gè)或兩個(gè)文字命令，其設(shè)計(jì)要求文字的語(yǔ)義必須清晰無(wú)誤。在布局上，命令按鈕通常遵循用戶(hù)的操作習(xí)慣，采用“左回退右行進(jìn)”的設(shè)計(jì)原則，即左側(cè)的命令按鈕通常用于返回或撤銷(xiāo)操作，而右側(cè)的命令按鈕則用于前進(jìn)或確認(rèn)操作。這種設(shè)計(jì)有助于用戶(hù)直觀(guān)理解各命令的功能，從而提升操作的直觀(guān)性和準(zhǔn)確性。

在命令按鈕的設(shè)計(jì)中，按鈕的外觀(guān)（如顏色、形狀和大?。?yīng)與周?chē)匦纬蓪?duì)比，以便用戶(hù)快速識(shí)別。如下圖花蝦的“隱私設(shè)置”和站酷的“退出登錄”。

4. 開(kāi)關(guān)按鈕

開(kāi)關(guān)按鈕是用戶(hù)界面中常見(jiàn)的一個(gè)組件，用于表示兩種對(duì)立狀態(tài)之間的切換，典型應(yīng)用場(chǎng)景是功能的開(kāi)啟與關(guān)閉。當(dāng)開(kāi)關(guān)按鈕被激活時(shí)，可能會(huì)觸發(fā)一系列的后續(xù)操作。這種按鈕在手機(jī)的設(shè)置菜單中尤為常見(jiàn)，不過(guò)它也廣泛應(yīng)用于許多應(yīng)用程序的界面中，用以控制各種功能的激活狀態(tài)。

開(kāi)關(guān)按鈕的設(shè)計(jì)不僅需要注重其基本的切換功能，還需要考慮其在不同場(chǎng)景下的視覺(jué)表現(xiàn)和交互反饋。例如，在開(kāi)啟狀態(tài)下，按鈕可以采用鮮明的顏色或圖標(biāo)來(lái)強(qiáng)調(diào)其激活狀態(tài)，如站酷的“通知設(shè)置”界面和蘋(píng)果系統(tǒng)里“日期設(shè)置”界面。

寫(xiě)在最后

按鈕設(shè)計(jì)是 UI 設(shè)計(jì)中一個(gè)既基礎(chǔ)又重要的環(huán)節(jié)。通過(guò)明確功能與目的、保持視覺(jué)風(fēng)格一致、合理安排尺寸與布局、提供及時(shí)有效的交互反饋以及考慮無(wú)障礙設(shè)計(jì)等因素，我們可以設(shè)計(jì)出既美觀(guān)又實(shí)用的按鈕，為用戶(hù)帶來(lái)更加流暢和愉悅的操作體驗(yàn)。

作者：土撥鼠