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

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

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

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

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

這里我做了一個實例分析

玻璃瓶素材

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

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

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

鍵盤素材

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

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

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

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

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

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

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

原文：http://www.xmued.com/?p=1387