網(wǎng)頁UI導航按鈕設計方法論

作為一篇關于設計經(jīng)驗分享的博文，圖趣只有靠自己淺薄的經(jīng)驗寫出自己個人的看法，關于界面視覺設計，要分類的話能分得很細，所以能寫的就很多，所以我打算先從局部來談談我總結的一些設計方法。

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

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

　　“藝術來源于模仿”，“設計來源于生活”。這兩句話對我在學設計的時候起到很大的作用，我在畫按鈕的時候主要從生活中發(fā)現(xiàn)自己需要的元素。下面我就舉例來談談我的方法。

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

　　這里圖趣做了一個實例分析

　　玻璃瓶素材

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

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

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

　　鍵盤素材

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

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

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

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

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

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

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