網(wǎng)頁(yè)UI導(dǎo)航按鈕設(shè)計(jì)方法論

作為一篇關(guān)于設(shè)計(jì)經(jīng)驗(yàn)分享的博文，圖趣只有靠自己淺薄的經(jīng)驗(yàn)寫出自己個(gè)人的看法，關(guān)于界面視覺(jué)設(shè)計(jì)，要分類的話能分得很細(xì)，所以能寫的就很多，所以我打算先從局部來(lái)談?wù)勎铱偨Y(jié)的一些設(shè)計(jì)方法。

　　經(jīng)常有同學(xué)問(wèn)我一些關(guān)于按鈕設(shè)計(jì)的問(wèn)題，怎么樣做些漂亮又特別的按鈕，我常常會(huì)告訴他們?cè)趺串嫲粹o的技法。但是我覺(jué)得一個(gè)設(shè)計(jì)師的成長(zhǎng)都離不開自己對(duì)設(shè)計(jì)方法的總結(jié)。畫按鈕的技法在網(wǎng)上能找到很多，但是很少有人講按鈕設(shè)計(jì)的方法論，所以今天我把自己總結(jié)的按鈕設(shè)計(jì)的方法和大家一起分享。(既然是按鈕設(shè)計(jì)的方法分享，所以我在畫案例的時(shí)候略顯粗糙了，還請(qǐng)大家多多包含)

　　一個(gè)漂亮的按鈕，我們要看他的表現(xiàn)方式、形態(tài)、質(zhì)感是否符合整個(gè)界面所要傳達(dá)的整體風(fēng)格是值得每一個(gè)設(shè)計(jì)師去重視的。隨著網(wǎng)絡(luò)媒體的發(fā)展。各行各業(yè)都在網(wǎng)絡(luò)媒體上來(lái)展示自己，也相繼出現(xiàn)了許多行業(yè)界面，那么這些界面的設(shè)計(jì)風(fēng)格肯定不會(huì)千篇一律，那么涉及到的按鈕設(shè)計(jì)也是各有風(fēng)格的。

　　“藝術(shù)來(lái)源于模仿”，“設(shè)計(jì)來(lái)源于生活”。這兩句話對(duì)我在學(xué)設(shè)計(jì)的時(shí)候起到很大的作用，我在畫按鈕的時(shí)候主要從生活中發(fā)現(xiàn)自己需要的元素。下面我就舉例來(lái)談?wù)勎业姆椒ā?/p>

　　首先，我們知道按鈕在效果表現(xiàn)上很大一部分我們是從質(zhì)感的表現(xiàn)上來(lái)識(shí)別的，比如我們最常見VISTA風(fēng)格的按鈕就是從玻璃質(zhì)感上變現(xiàn)。大家可以看我找的玻璃瓶素材，很明顯就能看出玻璃瓶的高光、反光和投影。我們?cè)谧儸F(xiàn)按鈕質(zhì)感的時(shí)候也多是從這三方面出發(fā)。

　　這里圖趣做了一個(gè)實(shí)例分析

　　玻璃瓶素材

　　A按鈕我是完全按照玻璃瓶質(zhì)感的方式來(lái)畫的;

　　B按鈕是我經(jīng)過(guò)我對(duì)光規(guī)律的觀察而總結(jié)出的自己想要表現(xiàn)方式的一種藝術(shù)處理。主要是為了說(shuō)明我們?cè)谶M(jìn)行參照質(zhì)感進(jìn)行按鈕設(shè)計(jì)的時(shí)候要考慮自己需要的藝術(shù)效果進(jìn)行適當(dāng)?shù)乃囆g(shù)處理。這樣也便于界面制作人員的制作。

　　下面一種是我們經(jīng)常所見的蘋果風(fēng)格的按鈕設(shè)計(jì)，這種風(fēng)格的按鈕也是我們?cè)谏钪薪?jīng)常能見到的，鍵盤手機(jī)就經(jīng)常采用這種設(shè)計(jì)方式，但是隨著觸摸屏手持設(shè)備的普遍，絕大數(shù)的鍵盤界面都采用模仿原來(lái)手機(jī)實(shí)物鍵盤的設(shè)計(jì)方式，這樣是為了讓用戶對(duì)界面產(chǎn)生親切感，同時(shí)這樣的設(shè)計(jì)也看起來(lái)更加簡(jiǎn)潔美觀。

　　鍵盤素材

　　C按鈕是我參照鍵盤的質(zhì)感做的樣稿，

　　D按鈕是我選擇了同一色相不同明度和純度所做的按鈕，之所以列舉這個(gè)列子，是為了說(shuō)明我們?cè)谧鲞@種風(fēng)格的按鈕設(shè)計(jì)的時(shí)候，一定要把握住一個(gè)很重要的問(wèn)題，那就是一定是在同一種色相中拉漸變，這樣的按鈕效果才自然，當(dāng)然除了設(shè)計(jì)師追求一些不一樣的效果。

　　從這張色譜，大家可以看出色相的微妙關(guān)系。有利于我們做漸變類型的按鈕。

　　E按鈕就是我采用的45度角徑向漸變的按鈕，是為了說(shuō)明漸變方式不同最后按鈕的最后出現(xiàn)的效果也會(huì)不同，就這一點(diǎn)我們?cè)O(shè)計(jì)師可以設(shè)計(jì)出很多不同形式的按鈕。

　　其它的我會(huì)根據(jù)我生活中的觀察來(lái)和大家分享一些生活中的按鈕設(shè)計(jì)，如圖所示這個(gè)按鈕設(shè)計(jì)是我仿常見的復(fù)印機(jī)上面的按鈕來(lái)設(shè)計(jì)的，這種按鈕的設(shè)計(jì)方法也很簡(jiǎn)單，但是效果很好。同時(shí)也加強(qiáng)了用戶對(duì)界面的親切感，更加有利于用戶的使用。如下圖：

　　下面這個(gè)按鈕是我們常見的開關(guān)按鈕，我只是按照開關(guān)的樣式，粗糙的畫了一個(gè)實(shí)例，為的就是說(shuō)明其實(shí)在做按鈕設(shè)計(jì)的時(shí)候我們參考的實(shí)物是很多的，多觀察周圍的實(shí)物往往會(huì)得到一些意想不到的收獲，并且我們還可以通過(guò)簡(jiǎn)單的藝術(shù)效果處理得到不同的按鈕效果。如下圖：

　　我覺(jué)得界面設(shè)計(jì)師在做界面設(shè)計(jì)的時(shí)候應(yīng)該多觀察生活中看到的物品，這些都能給界面設(shè)計(jì)師很大的啟發(fā)。這篇博文希望得到拋磚引玉的作用，希望大家多多發(fā)表自己在做按鈕設(shè)計(jì)的時(shí)候總結(jié)的方法論。希望和大家一起共同成長(zhǎng)!