每個(gè)開(kāi)發(fā)人員都應(yīng)該知道五個(gè)設(shè)計(jì)技巧

優(yōu)秀的開(kāi)發(fā)人員和優(yōu)秀的設(shè)計(jì)師在工作中必須要默契配合，不幸的是，針對(duì)審美能力較弱的開(kāi)發(fā)人員來(lái)說(shuō)，他們通常會(huì)覺(jué)得自己缺乏天賦，或者壓根就對(duì)設(shè)計(jì)這事提不起興趣。換句話(huà)說(shuō)，大家可能都有這么一個(gè)觀點(diǎn)：如果沒(méi)有與生俱來(lái)的美學(xué)天賦，那么就必然沒(méi)有審美能力。然而，對(duì)這個(gè)說(shuō)法，我會(huì)在接下來(lái)的文章里幫您扭轉(zhuǎn)過(guò)來(lái)。

你只要稍微思考一下就會(huì)發(fā)現(xiàn)：如果你5歲的時(shí)候就停止寫(xiě)作，那么你對(duì)寫(xiě)作可能就是一團(tuán)糟，對(duì)于藝術(shù)設(shè)計(jì)，道理是一樣的。大多數(shù)人都是在他們開(kāi)始掌握畫(huà)畫(huà)的時(shí)候就停止創(chuàng)作藝術(shù)了。

幸運(yùn)的是，學(xué)習(xí)永遠(yuǎn)都不晚。并且從事實(shí)來(lái)講，日漸成熟的你將更容易從主觀觀點(diǎn)中學(xué)習(xí)到客觀的知識(shí)。

如果你在一個(gè)小團(tuán)隊(duì)里面身兼數(shù)職，又或者你覺(jué)得你的項(xiàng)目可以取得成功，并且還有空間可以發(fā)揮的更完美的話(huà)，那么這篇文章就是寫(xiě)給你的。我們將談到傳統(tǒng)的5個(gè)消除惡俗設(shè)計(jì)的原則方法（當(dāng)然我們也不迷信，但我保證至少能在現(xiàn)基礎(chǔ)上，提升一個(gè)檔次）

1. 是時(shí)候來(lái)點(diǎn)留白了

大多數(shù)的開(kāi)發(fā)者并不在意添加空白的像頁(yè)邊距，填充，行高，或者其他任何增加空白的CSS屬性。識(shí)別出開(kāi)發(fā)者設(shè)計(jì)的界面是很容易的：文本都是緊緊地挨著邊緣的，沒(méi)有任何留白，而且屏幕元素之間是通過(guò)直線(xiàn)來(lái)實(shí)現(xiàn)分割的，而不是空白。

可以看到，在上面的盒子中，文本緊緊地?cái)D向了盒子的邊緣，每一行之間也沒(méi)有空白。相比之下，第二個(gè)就要易讀多了，而且能夠看得出是經(jīng)過(guò)精心規(guī)劃的。

在藝術(shù)領(lǐng)域，元素之間的這個(gè)區(qū)域就被稱(chēng)之為負(fù)空間，盡管在設(shè)計(jì)的其他領(lǐng)域，通常被稱(chēng)作“留白”。負(fù)空間能夠使得瀏覽者迅速地識(shí)別設(shè)計(jì)的不同部分。同時(shí)也讓文字更易讀。

下面是幾點(diǎn)小建議：

• 確保文本有足夠的“呼吸”空間。在區(qū)域的四邊上都應(yīng)該有合適的填充。文本不應(yīng)該碰到元素的邊緣。
• 注意“盒模型”，當(dāng)頁(yè)面的元素之間是使用邊框而不是頁(yè)邊距時(shí)，你得到的就是矩形的嵌套。下一次給元素添加邊框的時(shí)候，試著添加邊距來(lái)進(jìn)行替代。
• 額外建議：給元素的下邊緣添加一點(diǎn)點(diǎn)額外的空白。通常這樣可以制造一些視覺(jué)上的抬升，使得這些元素在頁(yè)面上看起來(lái)更輕。當(dāng)藝術(shù)家在制作襯邊時(shí)，他們通常會(huì)采用這一招來(lái)進(jìn)行襯邊以使底邊看起來(lái)比其他邊更大。

僅僅合理地使用留白這一個(gè)方法，就已經(jīng)能夠讓你比其他嘗試做視覺(jué)設(shè)計(jì)的開(kāi)發(fā)者做得好出100%了。

2. 設(shè)置明暗以增加對(duì)比

在音樂(lè)中，有一個(gè)概念，叫做力度（Dynamics,指隨音樂(lè)強(qiáng)弱變化而變化的舞蹈動(dòng)作或情態(tài)）。通過(guò)播放低聲播放輕柔的部分，這樣使得高音部分聽(tīng)起來(lái)更高亢，這樣來(lái)增加情感，反之依然。在設(shè)計(jì)中的道理是一樣的。當(dāng)所有的東西都是重點(diǎn)的時(shí)候，就沒(méi)有重點(diǎn)了。

這些字符是表示不同音樂(lè)力度的符號(hào)，從輕柔到高亢：弱，中弱，中強(qiáng)，強(qiáng)。在設(shè)計(jì)中，你可以通過(guò)顏色的明暗來(lái)調(diào)整視覺(jué)比重。圖片下方的漸變被稱(chēng)之為價(jià)值量表。

當(dāng)你在Treehouse編輯你的個(gè)人資料時(shí)，你可以為自己添加一個(gè)個(gè)性域名。深色的文本顯示了你獨(dú)特的名稱(chēng)，淺色的文字是URL的其他部分。

一些建議：

• 與編寫(xiě)代碼要先進(jìn)行測(cè)試一樣，你也應(yīng)該先對(duì)你的設(shè)計(jì)進(jìn)行測(cè)試。在放出你的新設(shè)計(jì)版本以前，試著先 用灰度模式來(lái)瀏覽你的網(wǎng)頁(yè)。這樣你就可以立馬看出顏色最深和最淺的區(qū)域是哪兒了。如果每一樣?xùn)|西看起來(lái)都是一樣的的話(huà)，那就該添加更多的明暗來(lái)增加對(duì)比 了。單純的色彩是不足以把不同的設(shè)計(jì)元素區(qū)分開(kāi)來(lái)的；明暗配合更重要。
• 把你的網(wǎng)頁(yè)截屏下來(lái)，然后使用像Photoshop這樣的圖片編輯工具調(diào)整曲線(xiàn)，色階（level），看一下不同的效果。有時(shí)候，你會(huì)發(fā)現(xiàn)使用CSS進(jìn)行一些細(xì)微的調(diào)整便能夠讓設(shè)計(jì)看起來(lái)更賞心悅目。

幾乎在每一種設(shè)計(jì)形式中，初學(xué)者都會(huì)禁不住誘惑而去調(diào)高明暗對(duì)比。將明暗調(diào)低是成熟的標(biāo)志，同時(shí)也有助于突出設(shè)計(jì)中的重要部分。

3. 使用紋理增強(qiáng)設(shè)計(jì)感

真實(shí)世界中的絕大多數(shù)東西都并非是完全平整光滑的。紋理會(huì)給你的界面帶來(lái)多樣性。即使你沒(méi)有嘗試使用擬物化（skueomorphism）來(lái)復(fù)制真實(shí)的表面，在不同的地方添加一些紋理也不失為一個(gè)好主意。紋理的靈感來(lái)源四處都是，紙張，金屬，石頭，都行。甚至連大塊的文字也可以被認(rèn)為是紋理化的。通常一點(diǎn)隨機(jī)的噪點(diǎn)就能夠把你的設(shè)計(jì)和其他那些平庸乏味的設(shè)計(jì)區(qū)分開(kāi)來(lái)。

紋理能夠讓平淡無(wú)奇的對(duì)象變得具有自身的特點(diǎn)和生命力。

一些關(guān)于紋理的建議：

• 無(wú)論是象征意義上還是字面上，紋理都可以添加視覺(jué)上的豐富程度，同時(shí)還能讓頁(yè)面開(kāi)起來(lái)更有深度。
• 如果你使用了漸變，或者許多細(xì)致的顏色過(guò)渡，那么你真的應(yīng)該在頂部使用一些輕度的紋理，因?yàn)檫@樣可以減少顏色的條帶效應(yīng)（Banding），讓顏色過(guò)渡得更自然。CSS3中的Multiple backgounds 可以輕松實(shí)現(xiàn)這一點(diǎn)。
• 在CSS3里面使用多層背景也意味著能以最小的文件大小來(lái)實(shí)現(xiàn)紋理化。你可以用一個(gè)充滿(mǎn)噪點(diǎn)的小方形重復(fù)來(lái)填充整個(gè)頁(yè)面。然后，你還可以把這個(gè)小方塊用到其他很多地方去。

4. 千萬(wàn)別忽略了形狀的使用

在網(wǎng)頁(yè)設(shè)計(jì)中，最容易被忽略的藝術(shù)元素就是形狀。世界上二維的形狀似乎有很多，但是在HTML和CSS 的世界里面更傾向于矩形。事實(shí)上，盒模型是CSS中需要掌握的最重要的概念。當(dāng)你埋頭寫(xiě)代碼，正在試圖連接一個(gè)數(shù)據(jù)庫(kù)，或者正在調(diào)整背景的合適位置的時(shí) 候，很容易就會(huì)將這樣基礎(chǔ)的東西拋擲腦后。在頁(yè)面中，非矩形可以讓重要元素吸引足夠的注意力。

iOS中的這個(gè)箭形的返回鍵不但吸引力注意力，而且還能表達(dá)按鈕實(shí)際功用。

我為什么慫恿你使用形狀：

• 很多物體都是以矩形為基礎(chǔ)設(shè)計(jì)的：電視機(jī)，桌子，房間，等等。即使你沒(méi)有下意識(shí)去注意他們，彎曲的和不規(guī)則的對(duì)象更容易吸引眼球。試一試用獨(dú)特的形狀來(lái)代替像用顏色，明暗配合，或者簡(jiǎn)單地讓元素在頁(yè)面中顯得更大這樣的方法。
• 一個(gè)設(shè)計(jì)優(yōu)秀的圖標(biāo)或者LOGO就可以被看作一個(gè)簡(jiǎn)單的形狀，比如說(shuō)蘋(píng)果索尼公司的LOGO一樣。在設(shè)計(jì)圖標(biāo)和LOGO的時(shí)候，第一步從一個(gè)純粹的黑色形狀開(kāi)始。然后就可以自由發(fā)揮，添加任何顏色，任何形狀。
• 額外建議：如果你在你的WebAPP中試圖增加交互，但是訪(fǎng)問(wèn)者卻不去點(diǎn)擊你得按鈕，試試使用不同的形狀來(lái)進(jìn)行A/B測(cè)試，例如，嘗試用箭頭來(lái)替代矩形按鈕?；蛟S剛剛開(kāi)始的時(shí)候，看起來(lái)會(huì)有點(diǎn)別扭，但是這樣可能能夠吸引足夠注意力。

相似的，永遠(yuǎn)不要讓工具限制了你的想象力。先天馬行空的大膽設(shè)計(jì)，然后再逐步做減法把那些真的對(duì)用戶(hù)有幫助的設(shè)計(jì)挑選出來(lái)。

5. 尋找平衡

在你花數(shù)小時(shí)時(shí)間去安排像素點(diǎn)進(jìn)行頁(yè)面細(xì)節(jié)設(shè)計(jì)之前，回過(guò)頭去看看整體效果是很重要的。視覺(jué)平衡是用直接的語(yǔ)言很難傳達(dá)的一個(gè)東西，但是又是一種能夠被很快培養(yǎng)起來(lái)的才能。

在《星夜》中，梵高在畫(huà)面的右邊使用了一條上升的水平線(xiàn)來(lái)平衡左邊的暗色形狀。新月的光亮和獨(dú)特形狀控制住了右上角，和左下角的暗色空白相呼應(yīng)。

平衡是思考設(shè)計(jì)構(gòu)圖和布局的一種方式。它是指在整個(gè)設(shè)計(jì)中不同區(qū)域的視覺(jué)重量的不同分布。正確應(yīng)用這一點(diǎn)是很重要的：不平衡的頁(yè)面會(huì)讓人產(chǎn)生緊張感。在極少的情況下，你可以應(yīng)用平衡來(lái)有意地制造緊張，比如為恐怖電影設(shè)計(jì)的網(wǎng)站，但是在大多數(shù)網(wǎng)頁(yè)應(yīng)用中，都應(yīng)該避免這種情況的產(chǎn)生。

讓頁(yè)面具有平衡感的幾點(diǎn)建議

• 畫(huà)出一直延伸到頁(yè)面中部一條垂直的線(xiàn)。是不是現(xiàn)在覺(jué)得這一邊比頁(yè)面的另一邊看起來(lái)多了一些東西？設(shè)計(jì)不需要是對(duì)稱(chēng)的，但是至少左右應(yīng)該有相同的比重。
• 從上到下瀏覽頁(yè)面。這樣可以阻止你的眼睛去閱讀文本，解釋UI小部件的作用。相反，你應(yīng)該去關(guān)注頁(yè)面中的大多數(shù)元素的堆放位置。如果你還不是很確定的話(huà)，也可以和第一點(diǎn)結(jié)合起來(lái)。

總結(jié)

這些基本的元素和原則讓你能夠更容易地理解設(shè)計(jì)。他們當(dāng)然不能賦予你某種神秘的藝術(shù)特異功能，但是卻能夠幫助你制作出一些優(yōu)雅的頁(yè)面。如果你還有一些類(lèi)似的建議的話(huà)，我也很樂(lè)意從評(píng)論中看到。

轉(zhuǎn)摘請(qǐng)保留以下信息，謝謝。

翻譯：SDC翻茄匠，@31nm
原文：teamtreehouse