《游戲界面設(shè)計(jì)》課件-02單元-(任務(wù)02)游戲組件按鈕設(shè)計(jì)

任課教師：樊樸

聯(lián)系方式/p>

游戲界面設(shè)計(jì)GameICONDesign目錄一、什么是按鈕二、按鈕的作用三、按鈕的外形四、按鈕的狀態(tài)五、按鈕的設(shè)計(jì)要點(diǎn)什么是按鈕在UI設(shè)計(jì)中，按鈕是最重要的交互元素之一，通常存在于整個(gè)UI界面體系當(dāng)中，如各種對(duì)話框、窗口及工具欄等。按鈕具有明確的后續(xù)動(dòng)作，是用戶和系統(tǒng)之間對(duì)話的橋梁，用戶通過(guò)點(diǎn)擊按鈕實(shí)現(xiàn)游戲功能，或完成界面的跳轉(zhuǎn)根據(jù)界面制作風(fēng)格的不同，按鈕的樣式也會(huì)隨之改變按鈕的作用某一類型的功能操作下一步的明確指引固定習(xí)慣，明確心理預(yù)期按鈕的外形文字型(無(wú)邊框)按鈕扁平型按鈕立體型按鈕圖標(biāo)型按鈕為了營(yíng)造極簡(jiǎn)的界面氛圍或?qū)ν婕疫M(jìn)行偏好引導(dǎo)，某些扁平游戲的界面按鈕，取消了邊框顯示。無(wú)邊框型按鈕扁平風(fēng)格的游戲，必須配扁平風(fēng)格的按鈕。按鈕的形狀多為矩形和圓角矩形，填充純色或漸變色，按鈕無(wú)立體感或只有非常弱的立體感。扁平型按鈕材質(zhì)感稍重的游戲會(huì)搭配立體按鈕，以便在底框上突出，吸引玩家的注意。立體型按鈕如果界面較為復(fù)雜，按鈕很多，則會(huì)選擇將一部分按鈕繪制為圖標(biāo)樣式，這樣可以讓按鈕更直觀，并且避免畫(huà)面單調(diào)。圖標(biāo)型按鈕按鈕的狀態(tài)正常狀態(tài)(激活狀態(tài))未激活狀態(tài)按下?tīng)顟B(tài)禁用狀態(tài)其他狀態(tài)正常狀態(tài)即為最普通最常見(jiàn)的狀態(tài)，大部分界面上的按鈕都是正常狀態(tài)。正常狀態(tài)激活狀態(tài)和未激活狀態(tài)存在于二級(jí)標(biāo)簽按鈕和三級(jí)標(biāo)簽按鈕。選中的標(biāo)簽按鈕為激活狀態(tài)，未選中的標(biāo)簽按鈕為未激活狀態(tài)。未激活狀態(tài)所有的按鈕，必須有按下?tīng)顟B(tài)，這也是為了嚴(yán)格遵守界面設(shè)計(jì)的一個(gè)原則“次次有回應(yīng)”按下?tīng)顟B(tài)禁用狀態(tài)即告知玩家，此按鈕目前不可用。禁用狀態(tài)一般都會(huì)將按鈕灰度化處理，并且該按鈕點(diǎn)擊后不會(huì)有點(diǎn)擊反饋。禁用狀態(tài)按鈕的設(shè)計(jì)要點(diǎn)1.看起來(lái)像個(gè)按鈕按鈕的設(shè)計(jì)要點(diǎn)1.看起來(lái)像個(gè)按鈕具備按鈕的形狀---圓形、方形、圖標(biāo)形，最好帶邊框和文字按鈕的設(shè)計(jì)要點(diǎn)1.看起來(lái)像個(gè)按鈕具備按鈕的形狀---圓形、方形、圖標(biāo)形，最好帶邊框和文字具備按鈕的質(zhì)感---比底框厚一些扁平底框+扁平按鈕或半立體按鈕立體底框+更厚的立體按鈕按鈕的設(shè)計(jì)要點(diǎn)1.看起來(lái)像個(gè)按鈕具備按鈕的形狀---圓形、方形、圖標(biāo)形，最好帶邊框和文字具備按鈕的質(zhì)感---比底框厚一些具備按鈕的顏色---醒目、突出、有別于底框你淺我深、你深我淺、你素我艷按鈕的設(shè)計(jì)要點(diǎn)2.按鈕的顏色你淺我深、你深我淺、你素我艷(對(duì)比色配色)紙張色底框+鮮艷的彩色按鈕的設(shè)計(jì)要點(diǎn)2.按鈕的顏色你淺我深、你深我淺、你素我艷(對(duì)比色配色)紙張色底框+鮮艷的彩色藍(lán)色底框+金色/黃色/藍(lán)色按鈕的設(shè)計(jì)要點(diǎn)2.按鈕的顏色你淺我深、你深我淺、你素我艷(對(duì)比色配色)紙張色底框+鮮艷的彩色藍(lán)色底框+金色/黃色/藍(lán)色紫色底框+橙色按鈕的設(shè)計(jì)要點(diǎn)2.按鈕的顏色你淺我深、你深我淺、你素我艷(對(duì)比色配色)紙張色底框+鮮艷的彩色藍(lán)色底框+金色/黃色/藍(lán)色紫色底框+橙色按鈕文字的顏色：你淺我深、你深我淺(同色系配色)按鈕的設(shè)計(jì)要點(diǎn)3.1按鈕的大小易于閱讀易于點(diǎn)擊避免誤點(diǎn)按鈕的設(shè)計(jì)要點(diǎn)3.1按鈕的大小易于閱讀易于點(diǎn)擊避免誤點(diǎn)按鈕的設(shè)計(jì)要點(diǎn)3.1按鈕的大小易于閱讀易于點(diǎn)擊避免誤點(diǎn)按鈕的設(shè)計(jì)要點(diǎn)3.2按鈕文字的大小文字的尺寸為按鈕的1/2按鈕的設(shè)計(jì)要點(diǎn)3.3按鈕的可伸縮性設(shè)計(jì)方便拉伸的按鈕樣式，能裝下2-10個(gè)字符的文字為宜中間均勻，可拉伸中間有花紋，不可拉伸按鈕