2022-1-16 資深UI設(shè)計(jì)者
雖然直覺認(rèn)為按鈕是一種很簡(jiǎn)單的控件，但在梳理按鈕相關(guān)知識(shí)點(diǎn)的過(guò)程中，發(fā)現(xiàn)小小控件其中包含了很多容易被忽略的細(xì)節(jié)。
按鈕幾乎是每一個(gè)頁(yè)面不可或缺的元素，對(duì)于按鈕的認(rèn)識(shí)基本停留在視覺層面，一個(gè)圓角矩形搭配一句文案就能拼湊成一個(gè)最基礎(chǔ)的按鈕。視覺是一個(gè)觀察的切入點(diǎn)，但僅停留在視覺層面還是不夠的，比設(shè)計(jì)表現(xiàn)更重要的往往是背后支持設(shè)計(jì)的理由。本文中的所有案例均來(lái)自線上產(chǎn)品，觀點(diǎn)僅是個(gè)人粗淺的理解，有疑問(wèn)的地方歡迎大家討論指正。
1. 按鈕的來(lái)源
數(shù)字世界是現(xiàn)實(shí)世界的一種映射，許多數(shù)字概念，都可以在現(xiàn)實(shí)世界中找到原型。按鈕就是很生動(dòng)的一個(gè)案例。在視覺表現(xiàn)上貼近現(xiàn)實(shí)生活中真實(shí)物體的外觀，擬合用戶心智模型，降低用戶的認(rèn)知和理解成本。
2. 按鈕的定義
如果從視覺形式上看，按鈕的組成很簡(jiǎn)單，一個(gè)矩形容器加上文字或圖標(biāo)即可組合成一個(gè)常見的按鈕，但是僅僅從視覺層面定義按鈕是不嚴(yán)謹(jǐn)?shù)?。按鈕是一種重要的控件類型，而控件是圖形用戶界面（GUI）的主要構(gòu)成模塊。想要深入理解按鈕，就必須要求我們首先理解什么是控件以及控件的分類。
3. 控件分類和介紹
定義：控件是用戶和產(chǎn)品間進(jìn)行交流的屏幕對(duì)象，是圖形用戶界面（GUI）的主要構(gòu)成模塊。
分類：根據(jù)用戶目標(biāo)，可將控件分為 4 大類。
每一類控件下又有更多具體細(xì)分。所有界面中常見的具體控件都可以根據(jù)其功能找到所屬的類別。
4. 按鈕的分類
在以上各個(gè)細(xì)分控件中，我將部分控件歸入按鈕類別：
命令控件下的：傳統(tǒng)按鈕、圖標(biāo)按鈕、文字按鈕
選擇控件下的：開關(guān)按鈕、單選按鈕、組合圖標(biāo)按鈕、狀態(tài)切換按鈕（開關(guān)和復(fù)選框樣式比較固定，為了方便討論，姑且不算在按鈕范疇之內(nèi)）
因此如果以按鈕為主體，以功能屬性為分類條件，可將按鈕分為：命令型按鈕和選擇型按鈕
不論從功能維度、交互維度、視覺維度上看，這兩類按鈕各自都有不同的特點(diǎn)。
選擇型按鈕非瞬時(shí)狀態(tài)有：“選中”和“未選中”兩種互斥狀態(tài)?？梢园堰x擇型按鈕理解為某種狀態(tài)的確認(rèn)和展示。
命令型按鈕的非瞬時(shí)狀態(tài)只有一種：正常狀態(tài)，當(dāng)用戶點(diǎn)擊命令型按鈕后，命令即可下達(dá)?？梢园衙钚桶粹o理解為一個(gè)動(dòng)作，點(diǎn)擊按鈕代表著立即執(zhí)行這個(gè)動(dòng)作。
介紹完了命令型按鈕和選擇型按鈕在功能、交互、視覺層面的區(qū)別點(diǎn)后，我們?cè)賮?lái)看看實(shí)際工作中常見和常用的按鈕類型。
GUI 中“按鈕”的概念來(lái)源于真實(shí)世界中的按鈕。真實(shí)的按鈕具有一個(gè)非常顯而易見的特點(diǎn)：擁有一個(gè)適合點(diǎn)擊按壓的受力面，這個(gè)受力面就是可點(diǎn)擊感的來(lái)源。試想一下，假設(shè)一個(gè)按鈕只有針尖般大小，且不說(shuō)你是否能認(rèn)出這是按鈕，即便你知道這是按鈕，你會(huì)有按下的欲望嗎？真實(shí)情況下，擺在人們面前的按鈕面積越大，想按壓的欲望就越強(qiáng)。因此傳統(tǒng)按鈕的最顯著特點(diǎn)就是擁有一個(gè)承載內(nèi)容的“受力面”，也就是承載文字或者圖標(biāo)的“容器”。受限于早期的顯像技術(shù)，以及與真實(shí)世界的對(duì)照，這種“容器”通常一般都是矩形，后期漸漸衍生出更加柔和的圓角。
風(fēng)格發(fā)展：
在相當(dāng)長(zhǎng)的一段時(shí)間里按鈕都有三維凸起的特征，進(jìn)一步鞏固了按鈕的可點(diǎn)擊感。不過(guò)進(jìn)入移動(dòng)時(shí)代后，這種流行趨勢(shì)發(fā)生了改變，按鈕的三維印記被不斷移除。用戶已經(jīng)建立起了成熟的心智模型，即便按鈕在視覺上越來(lái)越“平”，也不妨礙點(diǎn)擊行為的發(fā)生。結(jié)合多年的使用經(jīng)驗(yàn)，用戶已經(jīng)將矩形形狀這一特征和按鈕牢固地聯(lián)系了起來(lái)。即便現(xiàn)在的按鈕大多都是扁平化，用戶也能一眼就辨認(rèn)出按鈕屬性。
常見按鈕一般是由容器和內(nèi)容組成。
容器層面
移動(dòng)端比較主流的按鈕形狀有：矩形、圓角矩形、膠囊形和圓形 4 種。一般，在人們的認(rèn)知里，圓角越大傳遞的感覺越圓潤(rùn)親切。其實(shí)形狀本身并沒(méi)有好壞區(qū)別，與單純視覺偏好相比，元素的統(tǒng)一性更加重要。一旦選定了某一種按鈕形狀，就需要保證所有場(chǎng)景中出現(xiàn)的按鈕都盡量看上去整體統(tǒng)一。
視覺上，按鈕越大，越吸引用戶注意，決定按鈕大小的主要依據(jù)是按鈕在頁(yè)面中的優(yōu)先級(jí)。而一個(gè)產(chǎn)品涉及到頁(yè)面眾多，如果不同的頁(yè)面元素之間缺乏統(tǒng)一的調(diào)度規(guī)則，就會(huì)出現(xiàn)按鈕尺寸過(guò)多，沒(méi)有規(guī)律，細(xì)節(jié)混亂，效率低下的情況。為了既能適應(yīng)不同的場(chǎng)景，又能保持產(chǎn)品級(jí)的控件統(tǒng)一，一般要給按鈕尺寸設(shè)定幾個(gè)檔位以適配不同頁(yè)面需求。排除個(gè)別特殊頁(yè)面，一般把按鈕設(shè)置為 5 個(gè)優(yōu)先級(jí)梯度檔位就足以滿足設(shè)計(jì)需求。
我們可以從優(yōu)先級(jí)從高到低的順序，將按鈕分為：特大、大、正常、小、特小 5 個(gè)尺寸檔位。
下面展示最常使用的三個(gè)檔位，大、正常、小檔位。
按鈕的大小、形狀、顏色三個(gè)維度中，人眼是對(duì)顏色信息最為敏感的。在一個(gè)頁(yè)面中，突出一個(gè)元素的方式有多種，其中最簡(jiǎn)潔有效的方式就是用顏色進(jìn)行突出。顏色包含了色相、飽和度和明度三種屬性，改變顏色的不同屬性，都會(huì)對(duì)按鈕的表意產(chǎn)生影響。同時(shí)，不同的顏色代表著不同的含義，配色時(shí)需要加以注意。
容器除了基本的尺寸、形狀、顏色之外，還有多種樣式。
上文介紹的容器是強(qiáng)面性的，此外，容器還有弱面性、線性等樣式。
雖然現(xiàn)階段的按鈕越來(lái)越扁平，但在扁平的趨勢(shì)下，依舊有發(fā)揮設(shè)計(jì)創(chuàng)意的空間。
顏色漸變、投影、動(dòng)效都是常用的設(shè)計(jì)手法。
內(nèi)容層面
聊完了“容器”部分，再來(lái)看看容器承載的“內(nèi)容”又有哪些細(xì)節(jié)點(diǎn)。
并非所有按鈕都需要容器，尤其當(dāng)按鈕密度較大時(shí)，去掉容器只保留內(nèi)容，可以更好地提高空間利用率，簡(jiǎn)約視覺。
比圖標(biāo)按鈕更輕量的按鈕類型是文字按鈕，以文字的形式展示，和界面融合度更高，當(dāng)用戶有需要時(shí)才會(huì)注意到文字按鈕的可點(diǎn)擊性。
這種組合形式相當(dāng)常見，將多個(gè)功能整合在一個(gè)區(qū)域內(nèi)，如底部工具欄（ToolBar）或者頂部導(dǎo)航欄（Navigation Bar）。不同按鈕承載著不同功能，側(cè)重越明顯，越利于用戶快速識(shí)別并決策。
上面介紹的是常見的按鈕形式，除了以上按鈕，有一些按鈕形式專門適用于某些特殊場(chǎng)景。
如懸浮按鈕、膠囊按鈕等。
一個(gè)頁(yè)面往往有多個(gè)按鈕，不同按鈕承載不同功能，功能之間有相同或者不同的優(yōu)先級(jí)，因此按鈕之間也存在這相同或者不同的視覺優(yōu)先級(jí)。
我們分兩類情況來(lái)討論：相同優(yōu)先級(jí)的按鈕和不同優(yōu)先級(jí)的按鈕組合。
上文羅列了實(shí)際工作中常用到的一些按鈕樣式，最重要的步驟是分清按鈕主次，使用不同的樣式進(jìn)行搭配。
優(yōu)先級(jí)強(qiáng)到弱：
強(qiáng)面性按鈕、弱面性按鈕/線性按鈕、圖標(biāo)按鈕、文字按鈕
碎碎念：
本文中出現(xiàn)的部分名詞，比如“弱面性”、“容器”等，只是為了便于交流和統(tǒng)一指向，并沒(méi)有具體權(quán)威出處。文中提及的按鈕類型均來(lái)源于線上產(chǎn)品，樣本有限，適用場(chǎng)景相對(duì)固定，還有很多樣式?jīng)]有一一遍歷。但掌握了如何選擇樣式的原理，就可以根據(jù)日后具體需求做出合理方案。文中出現(xiàn)的數(shù)據(jù)都是經(jīng)驗(yàn)型數(shù)據(jù)，如按鈕按下狀態(tài)是在正常狀態(tài)下添加 10%純黑的遮罩，文字字號(hào)大小等，這些都是建議型數(shù)據(jù)，可以根據(jù)具體情況靈活調(diào)整。
文章來(lái)源：站酷 作者：設(shè)計(jì)師doo
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com