上一節(jié)我寫了在生活中找到按鈕設(shè)計(jì)的元素，這一節(jié)中我也會(huì)延續(xù)生活中的設(shè)計(jì)這個(gè)觀點(diǎn)，這一節(jié)寫的是按鈕在界面中運(yùn)用設(shè)計(jì)，那么我們?cè)趺磸纳钪衼碚业届`感呢，一直覺得做設(shè)計(jì)就是做原色的統(tǒng)一和對(duì)比，無論是平面、UI界面、數(shù)碼、環(huán)境空間、服裝等，一切設(shè)計(jì)概莫能外。有對(duì)比就會(huì)有統(tǒng)一，對(duì)比統(tǒng)一是設(shè)計(jì)師最容易也是最難拿捏的部分。這些往往都是設(shè)計(jì)師在自己的工作和學(xué)習(xí)中總結(jié)的屬于自己的學(xué)習(xí)方法。

那么下來我就說說我在界面設(shè)計(jì)中按鈕設(shè)計(jì)的運(yùn)用方法和大家一起分享、一起學(xué)習(xí)、一起進(jìn)步。

色彩統(tǒng)一

首先我想起自己最早學(xué)設(shè)計(jì)的時(shí)候，總是找不到設(shè)計(jì)的感覺，心里一直在搗鼓究竟問題出在哪兒了，后面在學(xué)習(xí)的過程中才發(fā)覺我一直在對(duì)比和統(tǒng)一中來摸索著學(xué)設(shè)計(jì)。后面的設(shè)計(jì)之路也一直在這上面糾結(jié)，慢慢的后面自己發(fā)現(xiàn)了最簡(jiǎn)單的一種方法。就是同色系的統(tǒng)一，所以在做一個(gè)設(shè)計(jì)的時(shí)候只選定幾種色后，就在這幾種色彩中選擇使用，來完成一幅相對(duì)完整的作品。色彩是最容易讓人識(shí)別的，視覺識(shí)別系統(tǒng)也成為一個(gè)企業(yè)、集體和產(chǎn)品很重視的部分。那么在界面設(shè)計(jì)中，我在按鈕設(shè)計(jì)的使用上，首先也是根據(jù)整個(gè)網(wǎng)站的整體色調(diào)來考慮按鈕的色彩，這樣做的優(yōu)勢(shì)在于整個(gè)界面的統(tǒng)一性，也是用得最多的一種按鈕設(shè)計(jì)方法。如圖

質(zhì)感統(tǒng)一

界面設(shè)計(jì)不同于普通平面設(shè)計(jì)的一個(gè)很重要的地方就是設(shè)計(jì)師要對(duì)界面質(zhì)感的把握，那么這樣我們對(duì)界面中按鈕設(shè)計(jì)的運(yùn)用要就有一定的要求，首先一點(diǎn)就是整個(gè)界面的質(zhì)感統(tǒng)一，不論是圖標(biāo)或按鈕。這一點(diǎn)是最基本的要求。如圖:

色彩對(duì)比

在設(shè)計(jì)中做統(tǒng)一是一種比較簡(jiǎn)單而且很有效果的一種方法，但是缺點(diǎn)就是很難在視覺上給用戶有一種新鮮感，所以好多設(shè)計(jì)師會(huì)在設(shè)計(jì)對(duì)比上思考許久，因?yàn)檫@樣達(dá)到的效果是能給人眼前一亮的感覺。前面我寫了設(shè)計(jì)中的統(tǒng)一，有統(tǒng)一必然會(huì)有對(duì)比，所以接下來我談?wù)勎覍?duì)與按鈕設(shè)計(jì)運(yùn)用的對(duì)比方法。這些方法我們?cè)谏钪卸寄苷业较嚓P(guān)的設(shè)計(jì)元素。

說起色彩對(duì)比那又將是一篇長(zhǎng)篇大論，所以在這里我也只是根據(jù)按鈕設(shè)計(jì)中的問題點(diǎn)到為止。我們知道色彩最重要的屬性之一就是它的冷暖性，所以冷暖對(duì)比是在設(shè)計(jì)中運(yùn)用最多的，但是如果再把色彩對(duì)比劃分的話還有明度對(duì)比，純度對(duì)比，補(bǔ)色對(duì)比，冷暖對(duì)比，面積對(duì)比，黑白灰對(duì)比，同時(shí)對(duì)比，空間效果和空間混何等的對(duì)比。

曾經(jīng)看過一步電影《向左走向右走》里面的一個(gè)場(chǎng)景讓我印象深刻，如圖所示，在這個(gè)場(chǎng)景中我深深的被場(chǎng)景中的色彩對(duì)比鎖吸引，這個(gè)場(chǎng)景對(duì)我以后在做設(shè)計(jì)的時(shí)候強(qiáng)調(diào)主次起了很大的啟發(fā)作用。如圖：

然而被稱之為經(jīng)典的界面設(shè)計(jì)就是蘋果的計(jì)算機(jī)工具界面設(shè)計(jì)，這是典型的來源與生活中的按鈕設(shè)計(jì)。其方法和《向左走向右走》里面的這個(gè)場(chǎng)景一樣。這樣的按鈕設(shè)計(jì)直接給用戶指出了重要的部分，能更加幫助用戶的使用。如圖：

質(zhì)感對(duì)比

在生活中不同質(zhì)感組合表現(xiàn)一樣的物品也很多，但是給我印象最深的就是下面這款筆記本，它是采用木質(zhì)和金屬質(zhì)感以及塑料質(zhì)感的對(duì)比而成，整個(gè)設(shè)計(jì)簡(jiǎn)潔大氣不失美觀。如圖

作為界面設(shè)計(jì)中被設(shè)計(jì)師很看重的界面質(zhì)感設(shè)計(jì)。在進(jìn)行按鈕設(shè)計(jì)上考慮最多的質(zhì)感的搭配，現(xiàn)在來說說質(zhì)感對(duì)比，往往我們看界面設(shè)計(jì)時(shí)按鈕都會(huì)有幾種狀態(tài)，那么怎么來設(shè)計(jì)這幾種狀態(tài)能讓按鈕有新的亮點(diǎn)，這值得每個(gè)界面設(shè)計(jì)師的考慮。在這里思考的質(zhì)感就會(huì)有很多種對(duì)比，沒有好壞之分，關(guān)鍵看設(shè)計(jì)師做這種對(duì)比想給用戶一種什么感覺。如圖：

后面我談到的這種方法也是我個(gè)人的思考點(diǎn)，至于在界面設(shè)計(jì)中怎么運(yùn)用，值得每個(gè)設(shè)計(jì)師的思考，大家都知道過馬路，當(dāng)一群人從走往右走的時(shí)候，對(duì)面一個(gè)人走過來·這樣的的動(dòng)態(tài)是不是很特別呢，是不是有個(gè)醒目的感覺。我曾經(jīng)看過一個(gè)服裝廣告設(shè)計(jì)就是這樣設(shè)計(jì)的，動(dòng)態(tài)的對(duì)比是界面的發(fā)展正朝著運(yùn)動(dòng)的模式發(fā)展，所以我們?cè)诎粹o設(shè)計(jì)的運(yùn)用上可以考慮按鈕的動(dòng)態(tài)對(duì)比的運(yùn)用將會(huì)是怎么樣的。

最后我們無論是在界面設(shè)計(jì)中做統(tǒng)一或?qū)Ρ?，我們都要在整個(gè)產(chǎn)品的整體性基礎(chǔ)之上來考慮，這樣才能保證產(chǎn)品的完整性。同時(shí)我們?cè)谠O(shè)計(jì)界面的時(shí)候千萬記住界面的細(xì)節(jié)表現(xiàn)，因?yàn)樵诮缑嬖O(shè)計(jì)中載體大小的限制，我們應(yīng)該把握好每一個(gè)像素的運(yùn)用，這樣做出來的界面才會(huì)工整美觀。

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