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

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

你有沒有盯著自己游戲的界面想過：哪里不對勁？

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

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

先做一個簡單形狀

先用一個 48×16 像素的色塊當(dāng)?shù)装澹厦鎸憽癎o”，就是一個最基礎(chǔ)的按鈕。

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

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

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

文案要清晰

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

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

加邊框，讓用戶知道“可以點”

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

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

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

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

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

用陰影增加層次

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

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

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

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

下面用 13 幀把 Normal、Hover、Active 做成了小動畫，設(shè)計時可以對照動畫十二法則來微調(diào)。

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

盡量用點擊后的提示（例如“請先完成某某”）代替單純禁用。

參考案例

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

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

小結(jié)

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

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