開發人員必知5個設計技巧

 　　優秀的編碼和優秀的設計之間是相輔相成的。不幸的是，視覺設計能力偏弱的人通常會覺得自己缺乏天賦，換句話說，就是人們要麼覺得自己具有出眾的美學天賦，要麼就是這方面的白癡。對這個說法，我可不敢苟同。

　　你只要稍微思考一下就會發現：如果你5歲的時候就停止寫作，那麼你對寫作可能就是一團糟，對於藝術設計，道理是一樣的。大多數人都是在他們開始掌握畫畫的時候就停止創作藝術了。

　　幸運的是，學習永遠都不晚。並且從事實來講，日漸成熟的你將更容易從主觀觀點中學習到客觀的知識。

　　如果你在一個小團隊裡面身兼數職，卻又沒有多少美學基礎。又或者你覺得你們的項目在視覺上還有更多發揮的空間，那麼這篇文章就是寫給你的。我們將談到傳統的5個消除丑陋藝術設計的元素和原則(或者至少能夠進行一定程度的掩蓋)

　　1.來點留白

　　大多數的開發者並不在意添加空白的像頁邊距，填充，行高，或者其他任何增加空白的CSS屬性。識別出開發者設計的界面是很容易的：文本都是緊緊地挨著邊緣的，沒有任何留白，而且屏幕元素之間是通過直線來實現分割的，而不是空白。

　　可以看到，在上面的盒子中，文本緊緊地擠向了盒子的邊緣，每一行之間也沒有空白。相比之下，第二個就要易讀多了，而且能夠看得出是經過精心規劃的。

　　在藝術領域，元素之間的這個區域就被稱之為負空間，盡管在設計的其他領域，通常被稱作“空白空間”。負空間能夠使得浏覽者迅速地識別設計的不同部分。同時也讓文字更易讀。

　　下面是幾點小建議：

　　確保文本有足夠的“呼吸”空間。在區域的四邊上都應該有合適的填充。文本不應該碰到元素的邊緣。

　　注意“盒中盒”。當頁面的元素之間是使用邊框而不是頁邊距時，你得到的就是矩形的嵌套。下一次給元素添加邊框的時候，試著添加邊距來進行替代。

　　額外建議：給元素的下邊緣添加一點點額外的空白。通常這樣可以制造一些視覺上的抬升，使得這些元素在頁面上看起來更輕。當藝術家在制作襯邊時，他們通常會采用這一招來進行襯邊以使底邊看起來比其他邊更大。僅僅合理地使用留白這一個方法，就已經能夠讓你比其他嘗試做視覺設計的開發者做得好出100%了。

　　2.設置明暗以增加對比

　　在音樂中，有一個概念，叫做力度(Dynamics,指隨音樂強弱變化而變化的舞蹈動作或情態)。通過播放低聲播放輕柔的部分，這樣使得高音部分聽起來更高亢，這樣來增加情感，反之依然。在設計中的道理是一樣的。當所有的東西都是重點的時候，就沒有重點了。

　　這些字符是表示不同音樂力度的符號，從輕柔到高亢：弱，中弱，中強，強。在設計中，你可以通過顏色的明暗來調整視覺比重。圖片下方的漸變被稱之為價值量表。

　　明暗配合，一個用以描述顏色明暗的術語。把明調和暗調放到一起的時候，就形成了對比。比如說，一個表單中的指示文本可能沒有表單的標簽那麼重要，因此，你就應該使用更小的字號或者灰色來顯示相關的文本，而不是搶眼的黑色。如果表單用黑色加粗顯示Email標簽欄，你可能需要在底部添加一些補充說明，以讓用戶相信不會使用被提供的地址來干一些非法的事情。這一段提示性文字相對沒有那麼重要，因此要設置得比其他的稍“輕”一些。

　　當你在Treehouse編輯你的個人資料時，你可以為自己添加一個個性域名。深色的文本顯示了你獨特的名稱，淺色的文字是URL的其他部分。

　　視覺上的重量感不是你要注意的唯一一件事。你還得確保明暗的正確搭配，這樣的話屏幕上的元素就可以很容易地被區分開來。這是一種很常見的設計思路，因為較之色彩來說，人類的眼睛實際上對色彩的明暗更為敏感。

　　幾點建議：

　　與編寫代碼要先進行測試一樣，你也應該先對你的設計進行測試。在放出你的新設計版本以前，試著先用灰度模式來浏覽你的網頁。這樣你就可以立馬看出顏色最深和最淺的區域是哪兒了。如果每一樣東西看起來都是一樣的的話，那就該添加更多的明暗來增加對比了。單純的色彩是不足以把不同的設計元素區分開來的;明暗配合更重要。

　　把你的網頁截屏下來，然後使用像Photoshop這樣的圖片編輯工具調整曲線，色階(level)，看一下不同的效果。有時候，你會發現使用CSS進行一些細微的調整便能夠讓設計看起來更賞心悅目。幾乎在每一種設計形式中，初學者都會禁不住誘惑而去調高明暗對比。將明暗調低是成熟的標志，同時也有助於突出設計中的重要部分。

　　3.用紋理增加多樣性

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

　　紋理能夠讓平淡無奇的對象變得具有自身的特點和生命力。

　　一些關於紋理的建議：

　　無論是象征意義上還是字面上，紋理都可以添加視覺上的豐富程度，同時還能讓頁面開起來更有深度。

　　如果你使用了漸變，或者許多細致的顏色過渡，那麼你真的應該在頂部使用一些輕度的紋理，因為這樣可以減少顏色的條帶效應(Banding)，讓顏色過渡得更自然。CSS3中的Multiple backgounds 可以輕松實現這一點。

　　在CSS3裡面使用多層背景也意味著能以最小的文件大小來實現紋理化。你可以用一個充滿噪點的小方形重復來填充整個頁面。然後，你還可以把這個小方塊用到其他很多地方去。

　　4.用形狀來表達

　　在網頁設計中，最容易被忽略的藝術元素就是形狀。世界上二維的形狀似乎有很多，但是在HTML和CSS的世界裡面更傾向於矩形。事實上，盒模型是CSS中需要掌握的最重要的概念。當你埋頭寫代碼，正在試圖連接一個數據庫，或者正在調整背景的合適位置的時候，很容易就會將這樣基礎的東西拋擲腦後。在頁面中，非矩形可以讓重要元素吸引足夠的注意力。

　　iOS中的這個箭形的返回鍵不但吸引力注意力，而且還能表達按鈕實際功用。

　　僅僅因為我們大多數的工具是以矩形為基礎的，這並不意味著我們不能打破常規，制作其他的形狀。事實上，CSS讓你稍作努力就能做出相對復雜的形狀來。

　　你為什麼應該使用形狀：

　　很多物體都是以矩形為基礎設計的：電視機，桌子，房間，等等。即使你沒有下意識去注意他們，彎曲的和不規則的對象更容易吸引眼球。試一試用獨特的形狀來代替像用顏色，明暗配合，或者簡單地讓元素在頁面中顯得更大這樣的方法。

　　一個設計優秀的圖標或者LOGO就可以被看作一個簡單的形狀，比如說蘋果索尼公司的LOGO一樣。在設計圖標和LOGO的時候，第一步從一個純粹的黑色形狀開始。然後就可以自由發揮，添加任何顏色，任何形狀。

　　額外建議：如果你在你的WebAPP中試圖增加交互，但是訪問者卻不去點擊你得按鈕，試試使用不同的形狀來進行A/B測試，例如，嘗試用箭頭來替代矩形按鈕。或許剛剛開始的時候，看起來會有點別扭，但是這樣可能能夠吸引足夠注意力。相似的，永遠不要讓工具限制了你的想象力。先設計，然後再去尋找那些可能的東西。

　　5.尋找平衡

　　在你花數小時時間去安排像素點進行頁面細節設計之前，回過頭去看看整體效果是很重要的。視覺平衡是用直接的語言很難傳達的一個東西，但是又是一種能夠被很快培養起來的才能。

　　在《星夜》中，梵高在畫面的右邊使用了一條上升的水平線來平衡左邊的暗色形狀。新月的光亮和獨特形狀控制住了右上角，和左下角的暗色空白相呼應。

　　平衡是思考設計構圖和布局的一種方式。它是指在整個設計中不同區域的視覺重量的不同分布。正確應用這一點是很重要的：不平衡的頁面會讓人產生緊張感。在極少的情況下，你可以應用平衡來有意地制造緊張，比如為恐怖電影設計的網站，但是在大多數網頁應用中，都應該避免這種情況的產生。

　　通常稍微看一眼就能看出頁面的一邊是不是比另一邊顯得更重。可能相比於設計中的另一邊，一邊的元素太多了，對比太重了，色彩太多了，等等。哪怕就是有頁面的垂直滾動，考慮