說(shuō)起按鈕，不得不先提一下鏈接，因?yàn)樵诖蟛糠秩丝磥?lái)，似乎按鈕與鏈接差不多，都是完成一個(gè)頁(yè)面的跳轉(zhuǎn)。其實(shí)不然，按鈕與鏈接還是有一定的區(qū)別。
　　先簡(jiǎn)單說(shuō)說(shuō)他們的區(qū)別吧。
　　按鈕：按鈕代表著“做某件事”，即點(diǎn)擊了按鈕代表著操作了一個(gè)功能，做的這件事是有后果的，不易挽回的。例如典型的google，QQ郵箱。像信息搜索、回復(fù)、注冊(cè)，他們的共同點(diǎn)是：都是在“做”一件事，并且絕大多數(shù)都是對(duì)表單的提交。從技術(shù)上講，這類(lèi)按鈕的作用是向后臺(tái)提交了數(shù)據(jù)，“命令”服務(wù)器去做了一件事。
　　鏈接：鏈接的作用是:“帶你去另一個(gè)頁(yè)面”，你無(wú)論點(diǎn)幾次鏈接，都是在“看”，而并沒(méi)有“做”任何事。典型的鏈接是文字標(biāo)題，點(diǎn)擊了去看詳情。

　　假如這樣嚴(yán)格來(lái)區(qū)分按鈕與鏈接的區(qū)別，好處是在邏輯上會(huì)非常清晰。然而，現(xiàn)實(shí)的問(wèn)題是，按這種思路設(shè)計(jì)出來(lái)的網(wǎng)站，在一些需要被強(qiáng)化的地方，一些需要引導(dǎo)用戶(hù)點(diǎn)擊的地方，僅用鏈接很難在視覺(jué)上突出表現(xiàn)。再回到我們游戲頁(yè)面設(shè)計(jì)的現(xiàn)狀來(lái)看，其實(shí)按鈕與鏈接也并沒(méi)有嚴(yán)格區(qū)分，而且，假如嚴(yán)格區(qū)分，跟我們要表達(dá)視覺(jué)上的優(yōu)先級(jí)別會(huì)有沖突。典型案例：各游戲引導(dǎo)頁(yè)里的“進(jìn)入官網(wǎng)”，嚴(yán)格來(lái)講，它的作用也只是讓觀(guān)者順利跳轉(zhuǎn)到另一個(gè)頁(yè)面，是屬于鏈接，但這個(gè)往往是我們特別強(qiáng)調(diào)的“按鈕”。所以在游戲頁(yè)面的設(shè)計(jì)過(guò)程中，是否需要嚴(yán)格區(qū)分兩者的區(qū)別，還有待討論……
 
　　小結(jié)一下當(dāng)前大部分人理解的按鈕：有一個(gè)外框（這個(gè)框可以是任何幾何形體，比如方、圓、橢圓等等），再上面有一些文字（比如：下載、注冊(cè)、充值、搜索、登錄，抽獎(jiǎng)等等），滿(mǎn)足了這兩個(gè)基本條件的，大家就認(rèn)為是按鈕，按鈕的本質(zhì)特點(diǎn)就是可以點(diǎn)擊。
  
　　一、下面是針對(duì)沒(méi)有嚴(yán)格區(qū)分兩者關(guān)系的按鈕視覺(jué)表現(xiàn)探討

　　當(dāng)前在頁(yè)面里要強(qiáng)調(diào)的鏈接自然會(huì)以按鈕的形式表現(xiàn)，尤其所謂重量級(jí)按鈕是促成觀(guān)者完成頁(yè)面功能的一個(gè)很重要的部分，所以對(duì)于其本身來(lái)講，應(yīng)該具有“勾引眼球”的效果。對(duì)于一個(gè)可以起到“勾引”作用的按鈕，建議從下面幾個(gè)方面來(lái)思考。

　　1.按鈕本身的用色
　　本身的顏色應(yīng)該區(qū)別于它周邊的環(huán)境色，因此它要更亮而且有高對(duì)比度的顏色。

　　2.按鈕的位置
　　按鈕的位置也需要仔細(xì)考究，基本原則是要容易找到，特別重要的按鈕應(yīng)該處在畫(huà)面的中心位置。

　　3.按鈕上面的文字表述

　　在按鈕上使用什么文字傳遞給用戶(hù)非常重要。需要言簡(jiǎn)意賅，直接明了，如:注冊(cè)、下載、創(chuàng)建、免費(fèi)試玩等，甚至有時(shí)候用“點(diǎn)擊進(jìn)入”，這一點(diǎn)上就是千萬(wàn)不要讓觀(guān)者去思考，越簡(jiǎn)單、越直接越好。

　　4.按鈕的尺寸
　　通常來(lái)講，一個(gè)頁(yè)面當(dāng)中按鈕的大小也決定了其本身的重要級(jí)別，但也不是越大越好，尺寸應(yīng)該適中，因?yàn)榘粹o大到一定程度，會(huì)讓人覺(jué)得那不像按鈕，潛意識(shí)的認(rèn)為那是一塊區(qū)域，導(dǎo)致沒(méi)有點(diǎn)擊欲望。
　　5.讓其充分通透
　　你的按鈕不能和網(wǎng)頁(yè)中的其他元素?cái)D在一起。它需要充足的margin(外邊距)才能更加突出，也需要更多的padding(內(nèi)邊距)才能讓文字更容易閱讀。
　　6.注意鼠標(biāo)滑過(guò)的效果
　　給予較為重要的按鈕適當(dāng)加一些鼠標(biāo)滑過(guò)的效果，會(huì)有力的增強(qiáng)按鈕的點(diǎn)擊感，給用戶(hù)帶來(lái)良好的用戶(hù)體驗(yàn)，起到畫(huà)龍點(diǎn)睛的作用。這里要注意的是，不太適合按鈕集中的地方，每個(gè)都增加高亮的鼠標(biāo)滑過(guò)的效果，這樣會(huì)造成視覺(jué)過(guò)于雜亂，影響用戶(hù)瀏覽的舒適度，所以要強(qiáng)調(diào)的是“恰當(dāng)”地添加鼠標(biāo)滑過(guò)的效果。

　　設(shè)計(jì)師在平常的工作當(dāng)中，經(jīng)常會(huì)遇到一些按鈕修改的意見(jiàn)，時(shí)不時(shí)聽(tīng)到產(chǎn)品人員提到“讓這個(gè)按鈕更像個(gè)按鈕”，面對(duì)這樣的問(wèn)題，不防從上面的6個(gè)方向去思考與改進(jìn)。

　　其實(shí)在我們平常的設(shè)計(jì)當(dāng)中有很多重量級(jí)不那么高的按鈕，需要“低調(diào)”處理，也就是說(shuō)在一個(gè)頁(yè)面當(dāng)中，眾多的按鈕，是有功能優(yōu)先級(jí)別的，這樣就務(wù)必讓一堆按鈕也呈現(xiàn)出視覺(jué)的優(yōu)先級(jí)別。如下面的圖片，右邊的按鈕群除了大小、位置區(qū)分了優(yōu)先級(jí)之外，很重要的一點(diǎn)是色塊的區(qū)分，高飽和色塊的按鈕群是不建議存在的。高飽和色調(diào)的應(yīng)用往往是為了突出重點(diǎn)，而非強(qiáng)調(diào)整體，所以這種局面的處理方式建議用眾多的低飽和色調(diào)來(lái)襯托小部分高飽和的重點(diǎn)信息。

　　二、游戲按鈕視覺(jué)表現(xiàn)

　　在眾多的游戲官網(wǎng)中，可以看到各式各樣的游戲按鈕，相對(duì)于一般商務(wù)型按鈕來(lái)講，游戲性按鈕更加在意的是質(zhì)感上面的表現(xiàn)，比如金屬、石頭、玻璃、木頭、塑膠等等，通過(guò)質(zhì)感的選擇表現(xiàn)來(lái)表達(dá)游戲本身的特質(zhì)。

　　上圖是韓版C9預(yù)告站的畫(huà)面，其中的按鈕是屬于金屬質(zhì)感的表現(xiàn)，瀏覽完這個(gè)預(yù)告站，這些按鈕給我留下了非常深刻的印象，認(rèn)真究其原因，你會(huì)發(fā)現(xiàn)設(shè)計(jì)師同樣是從金屬質(zhì)感出發(fā)，結(jié)合游戲本身的某些特點(diǎn)，努力找到一些不同于常規(guī)金屬按鈕的特點(diǎn)，比如圓角處的凸起、下面中間部分的延展圖紋，然后進(jìn)行細(xì)膩刻畫(huà)，最后在整個(gè)網(wǎng)站里進(jìn)行統(tǒng)一的應(yīng)用,讓人印象深刻。雖然只是頁(yè)面里的一些功能按鈕，卻讓我記住了這個(gè)網(wǎng)站，記住了C9。小結(jié)是，建議在對(duì)游戲按鈕進(jìn)行設(shè)計(jì)的時(shí)候，能夠盡可能結(jié)合游戲的特質(zhì)，究其獨(dú)特性，細(xì)膩的刻畫(huà)，然后做到系統(tǒng)的應(yīng)用，達(dá)到視覺(jué)的統(tǒng)一性（這種在游戲官網(wǎng)上的應(yīng)用尤為重要）。

　　上面三個(gè)按鈕分別截取于韓版CF、AVA、特種部隊(duì)的網(wǎng)頁(yè)畫(huà)面，同樣是FPS游戲，在按鈕的刻畫(huà)上卻相差甚遠(yuǎn)，當(dāng)然，仔細(xì)再去瀏覽更多的頁(yè)面，也會(huì)發(fā)現(xiàn)，就算是都屬于CF的頁(yè)面，不同頁(yè)面的按鈕表現(xiàn)也各有不同，但我們可以找到他們的共性，這些別樣的按鈕基本都是整個(gè)畫(huà)面的重點(diǎn)視覺(jué)訴求，也是功能的重要點(diǎn)，他們的特點(diǎn)是考慮游戲的定位，然后再根據(jù)每次要表達(dá)的主題，變化性的設(shè)計(jì)按鈕，也許有游戲特點(diǎn)，也許比較中性，但最終的效果是以求達(dá)到整體畫(huà)面的協(xié)調(diào)與重點(diǎn)的突出。（這種按鈕的變化就比較適合各種專(zhuān)題的設(shè)計(jì)表現(xiàn)上）
   結(jié)束語(yǔ)：請(qǐng)重視按鈕的表現(xiàn)。

　　原文：http://tgideas.qq.com/?p=1547