【一網(wǎng)學(xué)，致力于網(wǎng)頁設(shè)計(jì)培訓(xùn)、UI設(shè)計(jì)培訓(xùn)、淘寶美工培訓(xùn)，是最好的遠(yuǎn)程設(shè)計(jì)培訓(xùn)學(xué)校?！?/p>

很多學(xué)網(wǎng)頁設(shè)計(jì)的朋友都是網(wǎng)上在下各種素材來建站。比如一些UI套件包等等。這些資源在網(wǎng)上是免費(fèi)的，但是，大家往往忽略了一個(gè)問題：下載下來的套件到底適不適合你的網(wǎng)站?免費(fèi)的一定是好的么?很多設(shè)計(jì)師們往往下載下來直接使用。卻是效果并不理想。其原因往往是按鈕設(shè)計(jì)與網(wǎng)頁整體不符，按鈕設(shè)計(jì)不符合網(wǎng)站整體布局等。想成為一名優(yōu)秀的設(shè)計(jì)師，拿來主義是行不通的。只有學(xué)會(huì)如何設(shè)計(jì)出符合自己風(fēng)格的按鈕，你才會(huì)成長(zhǎng)。而按鈕的設(shè)計(jì)往往要考慮到很多因素：怎樣與整個(gè)界面、上下文、品牌相匹配?能否打造獨(dú)一無二的效果?我還需要主要、次要、第三重要的按鈕嗎?那么他們應(yīng)該怎樣彼此區(qū)分?

今天一網(wǎng)學(xué)網(wǎng)頁設(shè)計(jì)培訓(xùn)課就來給大家分享設(shè)計(jì)按鈕的十條基本準(zhǔn)則，以供童鞋們?cè)谠O(shè)計(jì)按鈕中參考。符合品牌在設(shè)計(jì)按鈕時(shí)，我們遵從品牌。在色調(diào)，風(fēng)格上面，我們要遵從LOGO設(shè)計(jì)。盡量做到跟LOGO設(shè)計(jì)的風(fēng)格類似。這樣才能保證網(wǎng)站從視覺上的整體性。

符合上下文內(nèi)容漂亮的按鈕固然能賞心悅目，但是設(shè)計(jì)的與網(wǎng)站其它內(nèi)容差異太大，就不是那么美觀了。所以設(shè)計(jì)按鈕的時(shí)候，要考慮該位置按鈕的上下文內(nèi)容，不能顯得太突兀。

確保按鈕不被忽略按鈕的設(shè)計(jì)在符合網(wǎng)頁風(fēng)格設(shè)計(jì)的前提下，要讓其在網(wǎng)站中顯眼，所以，我們要利用色彩、大孝留白、字體來提高按鈕的視覺表現(xiàn)力，從而引導(dǎo)用戶交互。重要的按鈕需要做出強(qiáng)調(diào)。以引起訪客的注意，吸引足夠的重視度。可根據(jù)頁面設(shè)計(jì)圓角或者直角的按鈕如果界面元素中很多都是圓角的，那么按鈕不妨做成直角的，這樣對(duì)照感就會(huì)很強(qiáng)烈，能夠引起行為召喚。

突出按鈕的主次在一些按鈕的設(shè)計(jì)上，對(duì)于次要的按鈕，我們可以減少裝飾性的方式進(jìn)行削弱，以突出主要按鈕。更少的陰影效果，更不明顯的斜面和見面，這樣就能突出主要元素了。

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

要謹(jǐn)慎對(duì)待模糊的陰影和色彩搭配

當(dāng)元素比背景顏色淺的時(shí)候，投影效果最佳，元素比背景顏色深的時(shí)候，那么陰影要慎重使用。在色彩的使用上，要符合網(wǎng)頁色彩搭配原則。

多利用符號(hào)/圖標(biāo)就比如說箭頭，絕對(duì)要比文字的描述更直觀。箭頭朝右，可能意味著離開此頁。箭頭朝下，可能意味著打開下面的內(nèi)容，或者打開下面的菜單。

6

分清主、次、第三重要如果你的界面功能點(diǎn)很多，那么就很有必要設(shè)計(jì)一套主要、次要、第三重要的按鈕。主要按鈕視覺表現(xiàn)力最強(qiáng)，次要稍弱，第三重要按鈕比次要還要差一點(diǎn)?？梢孕薷倪@些樣式：顏色、陰影、大孝留白、裝飾手段等等。按鈕一定要有反饋狀態(tài)這一點(diǎn)很容易被忽略，那就是按鈕在操作中一定要有反饋，讓用戶明白發(fā)生了什么。因?yàn)橛脩魰?huì)按照真實(shí)生活建立認(rèn)知模型，如果你的按鈕反應(yīng)不似真實(shí)用戶，用戶會(huì)感到失落。希望以上十點(diǎn)能對(duì)大家設(shè)計(jì)按鈕有所啟發(fā)，作為設(shè)計(jì)師，要多動(dòng)腦，勤動(dòng)手。活躍活用才是王道。當(dāng)然，通過報(bào)名一些網(wǎng)站設(shè)計(jì)培訓(xùn)班、網(wǎng)頁美工培訓(xùn)班，美工培訓(xùn)班能讓你少走很多彎路。讓你離成功變得更近。

UI設(shè)計(jì)培訓(xùn)ywxue