每個(gè)UI設(shè)計(jì)師一定都會(huì)面臨需要做出視覺(jué)決策的時(shí)候豪治，不管他們是否喜歡洞拨。
你可以說(shuō)“ 我沒(méi)有能力讓這個(gè)設(shè)計(jì)變得更好，我不是個(gè)藝術(shù)家 ”负拟。?
但是事實(shí)證明烦衣，有很多設(shè)計(jì)技巧讓你可以即使沒(méi)有設(shè)計(jì)基礎(chǔ)也可以很好的完成工作。
這里有七個(gè)簡(jiǎn)單的設(shè)計(jì)技巧可以讓你用來(lái)提升設(shè)計(jì)能力掩浙。
1.使用顏色和字重來(lái)劃分層級(jí)
一個(gè)在設(shè)計(jì)界面時(shí)的常見(jiàn)錯(cuò)誤就是用只依賴于字體大小來(lái)劃分層級(jí)花吟。
“這個(gè)信息很重要，讓我們把它變大點(diǎn)”
“這個(gè)信息沒(méi)那么重要厨姚，讓我把它變小點(diǎn)”
試著改變顏色和字來(lái)做同樣的工作衅澈，而不是只用改變字體的大小來(lái)完成所有的工作。
“這個(gè)信息很重要谬墙，讓我們把它加粗”
“這個(gè)信息沒(méi)那么重要今布，讓我們用一個(gè)淺一點(diǎn)的顏色”
嘗試并堅(jiān)持兩種或三種顏色：
一個(gè)深色（dark）但不是純黑的顏色作為重要信息的顏色（例如文章的大標(biāo)題）
一個(gè)灰(grey)一點(diǎn)的顏色作為次要信息的顏色（例如文章發(fā)布的日期）
更淺的灰色(Light grey)作為補(bǔ)充內(nèi)容（例如版權(quán)信息等）
相似的经备，兩種字重對(duì)于界面設(shè)計(jì)就足夠了。
一種是正常的字重（normal font weight）適用于大多數(shù)的文字
一種是加粗的字體（heavier font weight）適用于你想重點(diǎn)強(qiáng)調(diào)的部分
2.不要在彩色的背景上用灰色的字
在白色背景下用淺灰色的字是一個(gè)弱化信息的好辦法部默，但是在彩色背景下并不適用弄喘。
這是因?yàn)樵诎咨尘跋率褂脺\灰色，這兩個(gè)顏色的對(duì)比度較小甩牺。
在彩色背景下，讓字的顏色貼近背景色累奈，會(huì)更好的區(qū)分層級(jí)贬派。
在彩色背景下有兩種辦法可以減小文字與背景的對(duì)比：
1.減小白色文字的透明度
使用白色的文字并減小它的透明度，這樣文字的顏色既不和背景沖突又減小了對(duì)比度澎媒。
2.基于你的背景色選一個(gè)顏色
當(dāng)你的背景是圖片或者其他圖形的時(shí)候搞乏，這種方法相對(duì)于降低透明度那種看起來(lái)更好。
選擇一個(gè)與背景色同樣色調(diào)的顏色戒努，調(diào)整飽和度和亮度等请敦，直到你看起來(lái)合適為止。
3.移動(dòng)陰影的位置
不要僅僅使用大面積的模糊（blur）和擴(kuò)散（spread）來(lái)讓陰影看起來(lái)更明顯储玫，給陰影添加一個(gè)縱向的位移侍筛。
這樣看起來(lái)更自然，就像我們?cè)谡鎸?shí)世界中看到的撒穷，一束光從上打到下面的真實(shí)效果匣椰。
類似的，這種方法也適用于輸入框內(nèi)的陰影：
4.盡量少的使用邊框
當(dāng)你需要分割兩個(gè)元素時(shí)端礼，試著不要使用邊框和分割線來(lái)劃分禽笑。
雖然邊框是一個(gè)很便捷的方法來(lái)區(qū)分兩個(gè)不同的元素，但并不是唯一的辦法蛤奥，并且使用太多的邊框和分割線會(huì)使得你的界面看起來(lái)很亂佳镜。
下次你設(shè)計(jì)界面的時(shí)候 試著嘗試一下以下方法中的一個(gè)：
1.使用陰影
2.使用兩種背景顏色
通常只需要為相鄰元素提供略微不同的背景顏色即可區(qū)分它們：
3.增加間距
有什么更好的辦法來(lái)區(qū)分界面中不同的元素呢，讓不同組的元素的間距大一些是一個(gè)不錯(cuò)的辦法凡桥。
5.不要把應(yīng)該小的icon放大
6.使用彩色的邊框?yàn)槠降脑O(shè)計(jì)添加色彩
如果你不是一個(gè)平面設(shè)計(jì)師蟀伸，如何讓你的界面從帶有好看插畫(huà)和攝影圖片的界面中脫穎而出。
一個(gè)讓你的界面看起來(lái)出彩的簡(jiǎn)單的技巧就是在加入彩色的頂部邊框線唬血。
例如在提示框的側(cè)邊：
亦或者突出顯示某個(gè)導(dǎo)航選項(xiàng)：
甚至是在整個(gè)導(dǎo)航條的上方：
在頂部添加矩形條的辦法不需要你會(huì)任何的設(shè)計(jì)技巧就能完成望蜡，但是它可以讓你的界面看起來(lái)更有設(shè)計(jì)感。
如果你在挑選顏色上遇到了困難拷恨，可以參考dribbble’s color search上的配色脖律，這樣就可以避免你在無(wú)數(shù)顏色中想要選擇一個(gè)合適的的困擾。
7.并不是每一個(gè)按鈕都需要背景顏色
當(dāng)在一個(gè)頁(yè)面有很多按鈕的時(shí)候腕侄，如果按鈕的顏色很多小泉，沒(méi)有重點(diǎn)的話芦疏，我們就必須按照按鈕上的語(yǔ)意來(lái)判斷需要點(diǎn)擊的按鈕，降低了交互效率微姊。
像bootstrap這個(gè)前端框架制定了不同顏色的按鈕代表不同的含義：
“這是一個(gè)正向反饋嗎酸茴？用一個(gè)綠色的按鈕吧”
“這個(gè)操作是要?jiǎng)h除數(shù)據(jù)嗎，用一個(gè)紅色的按鈕吧”
按鈕在界面中的所代表的含義固然重要兢交，但是有一個(gè)很重要的維度很容易被大家忘記就是：信息層級(jí)薪捍。
每一個(gè)界面中的控件的重要程度都像在金字塔上那樣排布。大多是頁(yè)面會(huì)有一個(gè)主要的控件配喳，一些次要的控件酪穿，和很少的不常點(diǎn)擊的控件。
當(dāng)設(shè)計(jì)這些控件時(shí)晴裹，要考慮一下這些控件的信息層級(jí)被济。
主要控件（primary actions）應(yīng)該是很明顯的。字的顏色應(yīng)該和背景色形成鮮明對(duì)比涧团。
次級(jí)控件（secondary action）應(yīng)該是很清楚的但是不突出的只磷。
更次一級(jí)的控件（tertiary action）應(yīng)該是很容音被發(fā)現(xiàn)的但是不明顯的。這些控件的樣式經(jīng)常是帶有下劃線的鏈接泌绣。
“那么關(guān)于負(fù)向反饋的按鈕呢钮追，這些按鈕必須都是紅色嗎”
并不是絕對(duì)的，如果這個(gè)按鈕在頁(yè)面中并不是一個(gè)主要的按鈕赞别，那么就可以把他當(dāng)作次級(jí)或者更次一級(jí)的按鈕來(lái)對(duì)待畏陕。
把明顯的紅色的加粗的樣式用于在界面中重要的控件，例如確認(rèn)對(duì)話框：
