像素畫 UI 按鈕設(shè)計(jì)：從簡(jiǎn)單形狀到可交互狀態(tài)

你有沒(méi)有盯著自己游戲的界面想過(guò)：哪里不對(duì)勁？

很多時(shí)候問(wèn)題出在按鈕上——夠不夠好看、有沒(méi)有把“正常 / 懸停 / 按下”等狀態(tài)都畫出來(lái)。

這篇教程我會(huì)用像素風(fēng)為例，一步步把“更好看、更好用”的按鈕做出來(lái)：先定形狀和層級(jí)，再加邊框、圓角、陰影，最后做齊四種交互狀態(tài)。

先做一個(gè)簡(jiǎn)單形狀

先用一個(gè) 48×16 像素的色塊當(dāng)?shù)装?，上面寫“Go”，就是一個(gè)最基礎(chǔ)的按鈕。

界面上按鈕有主次之分，一般一個(gè)畫面只強(qiáng)調(diào)一個(gè)主操作。

主按鈕要在視覺上更突出，次要、再次要的按鈕依次弱一點(diǎn)。

下面同一段文字、同一套顏色，只靠粗細(xì)和對(duì)比就能分出閱讀順序：

文案要清晰

主操作按鈕上的字最好直接說(shuō)清“要做什么”，用動(dòng)詞、短詞，比如“開始游戲”用“Play”而不是含糊的“Go”。

整款游戲的按鈕用詞風(fēng)格也建議統(tǒng)一。

加邊框，讓用戶知道“可以點(diǎn)”

加一圈邊框會(huì)讓按鈕更像“真實(shí)可按的控件”，也更容易被注意到。

鏈接是“跳轉(zhuǎn)”，按鈕是“執(zhí)行操作”，用邊框把按鈕和鏈接區(qū)分開，能減少誤點(diǎn)。

圓角讓氣質(zhì)更友好

圓角在心理學(xué)上會(huì)顯得更柔和、好接近；尖角則偏硬、偏嚴(yán)肅。

做給家庭或兒童向的游戲可以多加點(diǎn)圓角；偏恐怖、嚴(yán)肅的可以少用或不用。給像素按鈕加一點(diǎn)圓角，整體會(huì)友好不少。

用陰影增加層次

真實(shí)按鈕是可以“按下去”的，用陰影表現(xiàn)立體感，按下時(shí)再配合位移或顏色變化，交互感會(huì)更強(qiáng)。

四種狀態(tài)缺一不可

除了“默認(rèn)樣子”，還要考慮三種交互狀態(tài)：

• Normal：可點(diǎn)擊、未聚焦
• Focus：用鍵盤等聚焦到該按鈕時(shí)
• Hover：鼠標(biāo)懸停
• Active：按下瞬間

下面用 13 幀把 Normal、Hover、Active 做成了小動(dòng)畫，設(shè)計(jì)時(shí)可以對(duì)照動(dòng)畫十二法則來(lái)微調(diào)。

不推薦用“Disabled 灰掉”當(dāng)主要反饋：玩家看不到“為什么不能點(diǎn)、要怎么才能點(diǎn)”。

盡量用點(diǎn)擊后的提示（例如“請(qǐng)先完成某某”）代替單純禁用。

參考案例

下面幾張是其他游戲里的像素風(fēng)按鈕，風(fēng)格不一，但都兼顧了辨識(shí)度和狀態(tài)反饋。

做的時(shí)候可以既保留自己風(fēng)格，又注意對(duì)比度、狀態(tài)、尺寸等可用性。

小結(jié)

像素風(fēng) UI 按鈕要既好看又好用：從簡(jiǎn)單形狀和主次層級(jí)開始，加上清晰文案、邊框、圓角、陰影，再把 Normal / Focus / Hover / Active 四種狀態(tài)畫清楚，必要時(shí)用短動(dòng)畫強(qiáng)化反饋。

少依賴“灰掉”的 Disabled，多給玩家明確提示。這樣你的界面就會(huì)又統(tǒng)一又耐看。