優(yōu)秀的開發(fā)人員和優(yōu)秀的設計師在工作中必須要默契配合肌括，不幸的是，針對審美能力較弱的開發(fā)人員來說泛范，他們通常會覺得自己缺乏天賦让虐，或者壓根就對設計這事提不起興趣。換句話說罢荡，大家可能都有這么一個觀點：如果沒有與生俱來的美學天賦赡突，那么就必然沒有審美能力。然而区赵，對這個說法惭缰，我會在接下來的文章里幫您扭轉過來。

你只要稍微思考一下就會發(fā)現：如果你5歲的時候就停止寫作笼才，那么你對寫作可能就是一團糟漱受，對于藝術設計，道理是一樣的骡送。大多數人都是在他們開始掌握畫畫的時候就停止創(chuàng)作藝術了昂羡。

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

如果你在一個小團隊里面身兼數職昌渤，又或者你覺得你的項目可以取得成功赴穗，并且還有空間可以發(fā)揮的更完美的話，那么這篇文章就是寫給你的膀息。我們將談到傳統(tǒng)的5個消除惡俗設計的原則方法（當然我們也不迷信般眉，但我保證至少能在現基礎上，提升一個檔次）

1. 是時候來點留白了

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

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

在藝術領域遭商，元素之間的這個區(qū)域就被稱之為負空間固灵，盡管在設計的其他領域，通常被稱作“留白”劫流。負空間能夠使得瀏覽者迅速地識別設計的不同部分怎虫。同時也讓文字更易讀。

下面是幾點小建議：

● 確保文本有足夠的“呼吸”空間困介。在區(qū)域的四邊上都應該有合適的填充大审。文本不應該碰到元素的邊緣。

● 注意“盒模型”座哩，當頁面的元素之間是使用邊框而不是頁邊距時徒扶，你得到的就是矩形的嵌套。下一次給元素添加邊框的時候根穷，試著添加邊距來進行替代姜骡。

● 額外建議：給元素的下邊緣添加一點點額外的空白导坟。通常這樣可以制造一些視覺上的抬升，使得這些元素在頁面上看起來更輕圈澈。當藝術家在制作襯邊時惫周，他們通常會采用這一招來進行襯邊以使底邊看起來比其他邊更大。

僅僅合理地使用留白這一個方法康栈，就已經能夠讓你比其他嘗試做視覺設計的開發(fā)者做得好出100%了递递。

2. 設置明暗以增加對比

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

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

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

一些建議：

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

● 把你的網頁截屏下來，然后使用像Photoshop這樣的圖片編輯工具調整曲線秉颗，色階（level）痢毒，看一下不同的效果。有時候蚕甥，你會發(fā)現使用CSS進行一些細微的調整便能夠讓設計看起來更賞心悅目哪替。

幾乎在每一種設計形式中，初學者都會禁不住誘惑而去調高明暗對比菇怀。將明暗調低是成熟的標志凭舶，同時也有助于突出設計中的重要部分。

3. 使用紋理增強設計感

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

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

一些關于紋理的建議：

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

● 如果你使用了漸變成洗，或者許多細致的顏色過渡，那么你真的應該在頂部使用一些輕度的紋理藏否，因為這樣可以減少顏色的條帶效應（Banding）瓶殃，讓顏色過渡得更自然。CSS3中的Multiple backgounds 可以輕松實現這一點副签。

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

4. 千萬別忽略了形狀的使用

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

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

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

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

● 一個設計優(yōu)秀的圖標或者LOGO就可以被看作一個簡單的形狀粪般，比如說蘋果索尼公司的LOGO一樣拼余。在設計圖標和LOGO的時候，第一步從一個純粹的黑色形狀開始亩歹。然后就可以自由發(fā)揮匙监，添加任何顏色，任何形狀小作。

●?額外建議：如果你在你的WebAPP中試圖增加交互亭姥，但是訪問者卻不去點擊你得按鈕，試試使用不同的形狀來進行A/B測試躲惰，例如致份，嘗試用箭頭來替代矩形按鈕〈〔Γ或許剛剛開始的時候氮块，看起來會有點別扭，但是這樣可能能夠吸引足夠注意力诡宗。

相似的滔蝉，永遠不要讓工具限制了你的想象力。先天馬行空的大膽設計塔沃，然后再逐步做減法把那些真的對用戶有幫助的設計挑選出來蝠引。

5. 尋找平衡

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

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

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

讓頁面具有平衡感的幾點建議

● 畫出一直延伸到頁面中部一條垂直的線。是不是現在覺得這一邊比頁面的另一邊看起來多了一些東西届良？設計不需要是對稱的笆凌，但是至少左右應該有相同的比重圣猎。

● 從上到下瀏覽頁面士葫。這樣可以阻止你的眼睛去閱讀文本，解釋UI小部件的作用送悔。相反慢显，你應該去關注頁面中的大多數元素的堆放位置。如果你還不是很確定的話欠啤，也可以和第一點結合起來荚藻。

總結

這些基本的元素和原則讓你能夠更容易地理解設計。他們當然不能賦予你某種神秘的藝術特異功能洁段，但是卻能夠幫助你制作出一些優(yōu)雅的頁面应狱。如果你還有一些類似的建議的話，我也很樂意從評論中看到祠丝。

?作為一個開發(fā)者疾呻，有一個學習的氛圍跟一個交流圈子特別重要這是一個我的iOS交流群：776598941，不管你是小白還是大牛歡迎入駐 写半，分享以下資料哦岸蜗，只要你加群就免費分享哦！