網(wǎng)頁設(shè)計(jì)中的按鈕設(shè)計(jì)

　　想成為一名優(yōu)秀的設(shè)計(jì)師，拿來主義是行不通的。只有學(xué)會(huì)如何設(shè)計(jì)出符合自己風(fēng)格的按鈕，你才會(huì)成長。而按鈕的設(shè)計(jì)往往要考慮到很多因素：怎樣與整個(gè)界面、上下文、品牌相匹配?能否打造獨(dú)一無二的效果?我還需要主要、次要、第三重要的按鈕嗎?那么他們應(yīng)該怎樣彼此區(qū)分?今天中國設(shè)計(jì)網(wǎng)的編者跟大家分享網(wǎng)頁設(shè)計(jì)中按鈕設(shè)計(jì)的十條基本準(zhǔn)則。

　　1、符合品牌

　　在設(shè)計(jì)按鈕時(shí)，我們遵從品牌。在色調(diào)，風(fēng)格上面，我們要遵從LOGO設(shè)計(jì)。盡量做到跟LOGO設(shè)計(jì)的風(fēng)格類似。這樣才能保證網(wǎng)站從視覺上的整體性。

　　2、按鈕要符合文章上下需求

　　突兀的出現(xiàn)只會(huì)讓人百思不得其解，那么為了避免這樣的問題出現(xiàn)，今天我們就來講講文章中的按鈕位置。

　　漂亮的按鈕固然能賞心悅目，但是設(shè)計(jì)的與網(wǎng)站其它內(nèi)容差異太大，就不是那么美觀了。所以設(shè)計(jì)按鈕的時(shí)候，要考慮該位置按鈕的上下文內(nèi)容，不能顯得太唐突。按鈕首先看功能，如果是跳轉(zhuǎn)可以放在知識(shí)普及，一般需要填資料的放在介紹完之后，顯示按鈕，這樣會(huì)讓用戶知道這樣的按鈕是什么用途。

　　3、確保按鈕不被忽略

　　很多人在頁面上設(shè)置了很多按鈕，可是很多人都不知道這就是按鈕，或者是按鈕的作用沒有被利用起來，因此不要讓你的按鈕被忽略。

　　在符合網(wǎng)頁風(fēng)格設(shè)計(jì)的前提下，要讓其在網(wǎng)站中顯眼，所以，我們要利用色彩、大小、留白、字體來提高按鈕的視覺表現(xiàn)力，從而引導(dǎo)用戶交互。重要的按鈕需要做出強(qiáng)調(diào)，可以利用顏色，可以利用邊框，可以利用不一樣的顯示方式。

　　4、圓角或者直角按鈕

　　現(xiàn)在手機(jī)上幾乎很多都是方框型，那么什么情況適合用什么按鈕。

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

　　網(wǎng)站布局層級(jí)感比較好，使用圓形很容易被凸顯出來。使用對比的感覺讓用戶知道這是按鈕，而不只是頁面上的一個(gè)圖標(biāo)。

　　5、突出按鈕的主次

　　按鈕是辦公中經(jīng)常使用到的，那么按鈕的主次我們是如何來分辨的呢?一般是以大小，顏色，明暗來區(qū)別這些東西。在一些按鈕的設(shè)計(jì)上，對于次要的按鈕，可以減少裝飾性的方式進(jìn)行削弱，以突出主要按鈕。更少的陰影效果，更不明顯的斜面和見面，這樣就能突出主要元素了。一些比較關(guān)鍵的按鈕可以使用變色來顯示該步驟是否完成，切勿本末倒置。

　　6、按鈕的邊框

　　將一段文章放在白紙上，我們會(huì)以為是一段字，其實(shí)用線，框可以隔出不同的意義，因此，你的按鈕讓我們清楚了解了么?

　　我們看到的大多數(shù)按鈕都有邊框。如果你的按鈕比背景顏色深，那么使用深色邊框會(huì)顯得非常好看，無邊框效果也不錯(cuò)。如果按鈕比背景顏色淺，那么無邊框會(huì)顯得特別雜亂，唯有使用深色的邊框才能讓按鈕看起來”精神飽滿”。使用邊框也會(huì)讓人覺得點(diǎn)擊的地方在哪里。所以，在你的按鈕上加上容易識(shí)別的框效果更好

　　7、按鈕的模糊陰影和色彩搭配

　　按鈕很多時(shí)候會(huì)因?yàn)槲恢枚绊扅c(diǎn)擊的次數(shù)，其實(shí)按鈕的陰影和色彩搭配一樣會(huì)有影響。當(dāng)元素比背景顏色淺的時(shí)候，投影效果最佳，元素比背景顏色深的時(shí)候，那么陰影要慎重使用。在色彩的使用上，要符合網(wǎng)頁色彩搭配原則。不要讓你的按鈕設(shè)計(jì)毀了你整個(gè)頁面

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

　　很多時(shí)候文字描述已經(jīng)漸漸被一些圖標(biāo)或者是英文所取代，就好像我們使用的前后左右移動(dòng)鍵，不需要再寫文字就知道什么意思了，使用圖標(biāo)可以讓一切簡單明了

　　就比如說箭頭，絕對要比文字的描述更直觀。箭頭朝右，可能意味著離開此頁。箭頭朝下，可能意味著打開下面的內(nèi)容，或者打開下面的菜單。這只是舉一個(gè)例子，手機(jī)圖標(biāo)就很明顯，不需要說什么，一個(gè)符號(hào)你就懂了。

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

　　很多時(shí)候一個(gè)圖標(biāo)的作用以及重要性是需要被凸顯出來的，你們覺得這樣的說法對嘛?

　　如果你的界面功能點(diǎn)很多，那么就很有必要設(shè)計(jì)一套主要、次要、第三重要的按鈕。主要按鈕視覺表現(xiàn)力最強(qiáng)，次要稍弱，第三重要按鈕比次要還要差一點(diǎn)?？梢孕薷倪@些樣式：顏色、陰影、大小、留白、裝飾手段等等。因此在設(shè)計(jì)的時(shí)候，要學(xué)會(huì)使用以上方法。

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

　　很多小伙伴覺得按鈕做好后就好了，其實(shí)你想過用戶使用的需求是什么嘛?按鈕一定要有反饋。這一點(diǎn)很容易被忽略，那就是按鈕在操作中一定要有反饋，讓用戶明白發(fā)生了什么。因?yàn)橛脩魰?huì)按照真實(shí)生活建立認(rèn)知模型，如果你的按鈕反應(yīng)不似真實(shí)用戶，用戶會(huì)感到失落。作為設(shè)計(jì)師，要多動(dòng)腦，勤動(dòng)手?；顚W(xué)活用才是王道。