明明可以靠天賦做出好設(shè)計(jì)，卻偏偏要技巧。

每個開發(fā)團(tuán)隊(duì)都不可避免的需要有做界面設(shè)計(jì)的人，畢竟當(dāng)下都是靠顏值打天下??！

但是很多小的團(tuán)隊(duì)沒有全職的ui設(shè)計(jì)師，或者只能請資歷比較淺的ui設(shè)計(jì)師，當(dāng)你需要一個好看又好用的界面時，一定很抓狂，也常抱怨：我不是搞藝術(shù)的，不知道怎么做才好看??！

但其實(shí)，有很多實(shí)用的技巧可以讓你的界面更好看，不需要非常專業(yè)的平面設(shè)計(jì)教育背景就能做到。對于已經(jīng)從事界面設(shè)計(jì)多年的ui設(shè)計(jì)師，這些技巧也可以審視自己的設(shè)計(jì)，是否更接地氣，不是僅僅停留在酷炫的概念設(shè)計(jì)上。

1.通過改變字體的顏色和粗細(xì)來區(qū)分層次結(jié)構(gòu)，而不是字體的大小

界面設(shè)計(jì)中，設(shè)計(jì)文本樣式時常犯的一個錯誤是，過于依賴字體大小來控制層次結(jié)構(gòu)。

“這段文字重要嗎？讓我們做得更大一點(diǎn)吧。”

“這段文字比較次要？讓它變小一點(diǎn)咯。”

不要一做設(shè)計(jì)就想著改變字號的大小上，要多嘗試使用顏色或字體粗細(xì)來完成相同的工作。

“這段文字重要嗎？讓我們做得更大膽吧。”

“這段文字比較次要？讓我們使用更淺的顏色咯。”

嘗試并堅(jiān)持兩種或三種顏色：

主要內(nèi)容用深色（不是全黑色）（如文章的標(biāo)題）

次要內(nèi)容灰色（如文章發(fā)表日期）

輔助內(nèi)容的淺灰色（可能是頁腳中的版權(quán)聲明）

類似地，兩種字體粗細(xì)通常足以應(yīng)付所有的界面設(shè)計(jì)：

大多數(shù)文本的正常字體粗細(xì)（400或500取決于字體）

較重的字體粗細(xì)（600或700）用于您要強(qiáng)調(diào)的文字

用于界面設(shè)計(jì)的字體粗細(xì)不要低于400（細(xì)或極細(xì)）?;?細(xì)體或極細(xì)體可以作為大標(biāo)題，但在較小的屏幕尺寸下，閱讀起來非常困難。如果您正在考慮使用細(xì)體來淡化某些文字，請改為使用較淺的顏色或較小的字體。

2.不要在彩色的背景上使用灰色文字

在白色背景上使用淺灰色的文本可以起到淡化的效果，但在彩色背景上使用灰色文本看起來并不理想。

這是因?yàn)?，我們?shí)際上在白色背景上看灰色的效果是對比度降低。所以，既然是這樣的目的，我們應(yīng)該使文本更接近背景色，創(chuàng)建層次結(jié)構(gòu)，而不再繼續(xù)使用灰色。

如何在彩色背景上降低對比度呢？這邊分享2種方法：

方法A，使用白色文本，然后調(diào)整透明度，讓背景顏色滲透出來，不再與背景形成沖突。

方法B，尋找與背景色同色系的顏色。如果背景是單色，方法A沒有問題。如果碰到的背景是圖片或者有紋理時，方法A會使文字過于枯燥乏味，這時，挑選與背景相同色調(diào)的顏色就是更理想的選擇，不要忘記多調(diào)整一下飽和度和亮度，直到最佳。

3.讓您的陰影帶一點(diǎn)偏移

不要使用較大和擴(kuò)散的模糊值來讓陰影變得更明顯，一定要記得添加垂直方向的偏移值。

帶偏移的陰影模擬了現(xiàn)實(shí)世界中的從上照下來的自然光照，讓界面看上去更自然。

除了外框用這種方式外，輸入框也適用這樣的方式。

推薦拓展閱讀：Material Design Guidelines

4.使用更少的邊界線

當(dāng)您需要在兩個元素之間創(chuàng)建分割時，請立即停止想用分割線的念頭！雖然分割線是一個好辦法，但不是唯一的方法，使用太多的分割線會讓設(shè)計(jì)變得繁復(fù)和混亂。

這邊提供3個好的設(shè)計(jì)思路：

思路A，使用陰影來替代，陰影在表現(xiàn)卡片式信息條方便更加出色，不容易用用戶分散注意力。

思路B，使用兩種不同的背景顏色，通常兩種相鄰的元素背景顏色略微不同就可以了，不需要有強(qiáng)烈的對比。如果已經(jīng)使用了兩種顏色做區(qū)分，同時又添加了分割線，這樣就顯得多余啦，真的可以把分割線刪了！

思路C，調(diào)節(jié)額外的間距。讓元素離的遠(yuǎn)一點(diǎn)能夠區(qū)分兩個元素，那如何區(qū)分不同類別的元素呢？答案很簡答，那就讓這兩類元素離得更遠(yuǎn)一點(diǎn)吧！！

5.不要原本就小的圖標(biāo)放大使用

如果您設(shè)計(jì)的頁面（比如著陸頁的“功能”部分）需要用到大的圖標(biāo)，你可能會調(diào)用一些免費(fèi)的例如Font Awesome圖標(biāo)庫，然后放大使用，畢竟這些都是矢量的圖形，尺寸放大了也很清晰嘛！

但是?。?！雖然這些矢量圖標(biāo)放大了不會模糊，然而它們原本是為16-24像素而“生”的，人為的放大3-4倍絕對會顯得不專業(yè)，缺少細(xì)節(jié)設(shè)計(jì)。

如果只有小圖標(biāo)可以使用，沒有找到原生的大圖標(biāo)，請嘗試將這個小圖標(biāo)放在另外一個帶背景顏色的形狀中。

這樣可以讓圖標(biāo)的尺寸不會人為放大，同時又能滿足大尺寸的需求。當(dāng)然，最理想的方案是使用原生設(shè)計(jì)的大圖標(biāo)，可以在如Heroicons或Iconic上找到。

6.使用多彩的粗邊框線為平淡的設(shè)計(jì)加點(diǎn)點(diǎn)綴

如果您不是專業(yè)的ui設(shè)計(jì)師，如何才能讓自己的界面也能有高大上的視覺風(fēng)格，看上去像設(shè)計(jì)過的一樣？

一個小技巧就是在某個邊框添加多彩的粗邊框線條，例如，在警報(bào)消息的旁邊添加：

或者導(dǎo)航條的底部突出激活的欄目：

或者整個頁面的頂部：

7.并非每個按鈕都需要背景顏色

當(dāng)用戶在頁面上可以有多個選擇按鈕時，很容易讓用戶陷入理解語義的選擇動作。

像Bootstrap這樣的的框架，通過點(diǎn)選這樣的語義樣式菜單按鈕來進(jìn)行選擇。

“這是一個積極的行動？讓按鈕變綠?！?/span>

“這是否刪除數(shù)據(jù)？將按鈕設(shè)為紅色。”

這樣設(shè)計(jì)并不是說不對，但是還有一個更重要的緯度不要忽略了：層次結(jié)構(gòu)。

界面設(shè)計(jì)上的每個觸發(fā)動作在位于金字塔的某個位置，大多少頁面只有一個真正的一級動作，一些不太重要的二級動作，還有幾個很少使用的三級動作。

在設(shè)計(jì)這些動作時，要充分考慮它們的層級結(jié)構(gòu)，要傳達(dá)給用戶正確的層級信息。

一級動作：非常明顯的顯示，用實(shí)心填充，并用高對比的背景色。

二級動作：明天但不突出?？梢圆捎幂喞€，或者較低對比度的背景色。

三級動作：可以發(fā)現(xiàn)但不顯眼。將這些按鈕設(shè)計(jì)為鏈接是比較合適的做法。?

“取消按鈕要怎么設(shè)計(jì)呢，它們不應(yīng)該總是紅色嗎？”

其實(shí)不一定，如果取消按鈕不是頁面上的主要動作，那么用二級或三級按鈕可能會更好。

當(dāng)指引和導(dǎo)向按鈕是一級動作時（例如確認(rèn)對話框），應(yīng)該使用紅色背景的按鈕，而取消則用三級按鈕。

如果你喜歡這篇文章，歡迎繼續(xù)關(guān)注25學(xué)堂。