10.28日音訊,網(wǎng)頁(yè)按鈕制作技巧詳解。今天來(lái)和大家一起探討下在網(wǎng)頁(yè)設(shè)計(jì)時(shí)按鈕的作用和制作方法，大家都知道一個(gè)互動(dòng)的成功的網(wǎng)站它的按鈕是必不可少的，當(dāng)然按鈕的外形是否美觀，同樣也影響著網(wǎng)頁(yè)的整體美觀和效果。所以按鈕也要做到仔細(xì)推敲、反復(fù)打磨才行，這樣才能出一個(gè)好的效果秋。

　　網(wǎng)上是不是充斥著一些”UI套件打包下載”？而且是免費(fèi)的？但是即便下載也沒(méi)多大用，這些套件用來(lái)研究學(xué)習(xí)效果更佳，如果直接拿來(lái)就用，效果便不是很好，因?yàn)槟銢](méi)有考慮到上下文的關(guān)系！沒(méi)有考慮到按鈕是否和內(nèi)容相符！也沒(méi)有考慮到按鈕的布局與頁(yè)面的整體布局是否匹配，是否符合一致性！

　　因此，與其拿來(lái)主義，不如花點(diǎn)時(shí)間坐下來(lái)思考，什么才是適合你設(shè)計(jì)的按鈕。應(yīng)該怎樣設(shè)計(jì)？按鈕應(yīng)該怎樣與整個(gè)界面、上下文、品牌相匹配？能否打造獨(dú)一無(wú)二的效果？我還需要主要、次要、第三重要的按鈕嗎？那么他們應(yīng)該怎樣彼此區(qū)分？

　　這里有十條基本準(zhǔn)則，每當(dāng)我設(shè)計(jì)按鈕的時(shí)候就會(huì)考慮到這幾點(diǎn)，我不會(huì)貼出我的圖層樣式，但不要總以為這是空泛說(shuō)教，好的設(shè)計(jì)師對(duì)于設(shè)計(jì)的理解是超越PS，超越套件的，因?yàn)樗凶约旱脑O(shè)計(jì)思維。

　　1.要與品牌相符

　　按鈕要和品牌一致，顏色、視覺(jué)風(fēng)格要和Logo差不太多。你可以從Logo中借鑒形狀、材質(zhì)、風(fēng)格等等。如果Logo是圓形的，那么按鈕也可以試試圓形以及其他能夠引起行為召喚的形狀。

　　形狀、色彩、材質(zhì)、圖案、字體，都能影響到用戶瀏覽的體驗(yàn)。

　　如果一款界面扁平化色彩占主導(dǎo)，那么盡量不要使用擬物風(fēng)格的按鈕。當(dāng)然，如果你基本功過(guò)關(guān)，可以試試進(jìn)行風(fēng)格混合，色彩、形狀、效果、各種裝飾手段都可以試一試。

　　2.要與上下文內(nèi)容相符

　　跟上一條其實(shí)差不多，快別再用”套件PSD”了，雖然它們看起來(lái)效果很棒，但那是別人的設(shè)計(jì)，放在你的界面中可能有點(diǎn)”驢唇不對(duì)馬嘴”了！要記住，界面中”內(nèi)容為王”，可不是”為了按鈕漂亮而進(jìn)行設(shè)計(jì)”！

　　3.確保按鈕用于足夠的對(duì)照

　　很多界面設(shè)計(jì)深受蘋果影響，很多UI套件一看便知，按鈕在其中可能會(huì)顯得不甚顯眼。補(bǔ)救措施是利用色彩、大小、留白、字體來(lái)提高按鈕的視覺(jué)表現(xiàn)力，從而引導(dǎo)用戶交互。

　　重要的按鈕需要做出強(qiáng)調(diào)

　　4.可以考慮圓角或者直角的按鈕

　　如果界面元素中很多都是圓角的，那么按鈕不妨做成直角的，這樣對(duì)照感就會(huì)很強(qiáng)烈，能夠引起行為召喚。

　　5.次要的UI元素可稍微削弱

　　一些次要的UI元素或者按鈕可以通過(guò)減少裝飾性的方式進(jìn)行削弱，以突出主要按鈕。

　　更少的陰影效果，更不明顯的斜面和見(jiàn)面，這樣就能突出主要元素了。

　　削弱其他UI元素=突出主要元素（超級(jí)按鈕）

　　6.按鈕的邊框

　　我們看到的大多數(shù)按鈕都有邊框。如果你的按鈕比背景顏色深，那么使用深色邊框會(huì)顯得非常好看/可愛(ài)，無(wú)邊框效果也不錯(cuò)。如果按鈕比背景顏色淺，那么無(wú)邊框會(huì)顯得特別雜亂，唯有使用深色的邊框才能讓按鈕看起來(lái)”精神飽滿”。

　　深色背景：有邊框=優(yōu)美沒(méi)邊框=優(yōu)美

　　淺色背景：有邊框（深色）=優(yōu)美沒(méi)邊框=雜亂

　　7.要謹(jǐn)慎對(duì)待模糊的陰影

　　我個(gè)人有一條”陰影定律”，講的是：當(dāng)元素比背景顏色淺的時(shí)候，投影效果最佳，元素比背景顏色深的時(shí)候，那么陰影要慎重使用。

　　這跟邊框有點(diǎn)像。這條定律很好用，其他UI元素也適用。

　　模糊的陰影在淺色背景下效果較好，深色背景下陰影效果都不錯(cuò)。

　　8.多利用符號(hào)/圖標(biāo)

　　就比如說(shuō)箭頭，絕對(duì)要比文字的描述更直觀。

　　箭頭朝右，可能意味著離開(kāi)此頁(yè)。箭頭朝下，可能意味著打開(kāi)下面的內(nèi)容，或者打開(kāi)下面的菜單。

　　9.分清主、次、第三重要

　　如果你的界面功能點(diǎn)很多，那么就很有必要設(shè)計(jì)一套主要、次要、第三重要的按鈕。

　　主要按鈕視覺(jué)表現(xiàn)力最強(qiáng)，次要稍弱，第三重要按鈕比次要還要差一點(diǎn)?？梢孕薷倪@些樣式：顏色、陰影、大小、留白、裝飾手段等等。

　　10.按鈕一定要有反饋狀態(tài)

　　這一點(diǎn)很容易被忽略，那就是按鈕在操作中一定要有反饋，讓用戶明白發(fā)生了什么。因?yàn)橛脩魰?huì)按照真實(shí)生活建立認(rèn)知模型，如果你的按鈕反應(yīng)不似真實(shí)用戶，用戶會(huì)感到失落。

　　通過(guò)一些簡(jiǎn)單的CSS調(diào)整，諸如陰影，邊框、漸變便能實(shí)現(xiàn)反饋效果，默認(rèn)狀態(tài)、懸停狀態(tài)、點(diǎn)擊狀態(tài)、忙碌狀態(tài)、失效狀態(tài)等等。好了，說(shuō)了這么多希望對(duì)大家能夠有所幫助，也希望大家與邯鄲網(wǎng)站建設(shè)首創(chuàng)網(wǎng)絡(luò)一起來(lái)探討學(xué)習(xí)。