也許你是個(gè)新手設(shè)計(jì)師，也許你是個(gè)有著豐富開發(fā)經(jīng)驗(yàn)的開發(fā)者，但是有需求讓自己設(shè)計(jì)的網(wǎng)頁(yè)和UI看起來(lái)更像那么一回事，至少看起來(lái)不是一個(gè)外行的手筆。
  那么今天的文章應(yīng)該能夠幫到你。在UI的設(shè)計(jì)過(guò)程中，有很多技巧并不需要很深厚的設(shè)計(jì)知識(shí)，但是它們能讓你的UI和網(wǎng)頁(yè)界面看起來(lái)有明顯的提升。改進(jìn)設(shè)計(jì)這件事情，經(jīng)驗(yàn)和技巧往往能讓人少走彎路。
  閑話少敘，下面我們具體看看。
  1.按鈕色彩凸顯重要性
  在給用戶提供多個(gè)選擇的時(shí)候，可以通過(guò)色彩所傳遞的情緒是積極還是消極的，來(lái)簡(jiǎn)單快速地進(jìn)行設(shè)計(jì)。
  1.png
  實(shí)際上，紅色和綠色按鈕的色彩含義，已經(jīng)橫跨物理世界和數(shù)字設(shè)計(jì)領(lǐng)域，我們每天在很多實(shí)體產(chǎn)品上也能看到類似的設(shè)計(jì)，包括交通上的紅綠燈，警告標(biāo)識(shí)，以及實(shí)體按鈕。
  綠色表示通行，紅色表示禁止。如果用戶需要購(gòu)買一個(gè)漏斗，你希望感興趣的用戶趕緊點(diǎn)擊，而不是取消。
  另外，如果你的網(wǎng)站或者APP涉及到重要性不同的若干交互，除了按鈕都要標(biāo)識(shí)出相應(yīng)的文本標(biāo)簽內(nèi)容以外，還可以借助色彩填充與否來(lái)進(jìn)一步區(qū)分層級(jí)結(jié)構(gòu)：
  2.png
  這是一個(gè)簡(jiǎn)單的示例，有色彩填充的按鈕、幽靈按鈕（無(wú)色彩填充、有邊框）以及無(wú)邊框無(wú)填充按鈕來(lái)區(qū)分。
  而在少數(shù)情況下，對(duì)于系統(tǒng)有重要影響的、破壞性的或者限制性的按鈕，也應(yīng)該突出顯示，但是可以使用紅色來(lái)進(jìn)行強(qiáng)調(diào)和警告。這個(gè)時(shí)候，相對(duì)的「非負(fù)面」的按鈕則被視作為重要性較低的操作：
  3.png
  簡(jiǎn)而言之，實(shí)際上用戶用來(lái)區(qū)分按鈕的核心靠的是感知而非復(fù)雜邏輯判斷，設(shè)計(jì)的基本規(guī)則在上面，但是更重要的是要基于情緒和感知來(lái)進(jìn)行設(shè)計(jì)。
  2.用字重和明暗來(lái)區(qū)分層級(jí)
  尤其是在構(gòu)建文本內(nèi)容的視覺層級(jí)的時(shí)候，可用到的屬性很多，只使用大小差異來(lái)構(gòu)建就顯得過(guò)于單一了。
  在很多時(shí)候，可以借助色彩、字重、明暗來(lái)進(jìn)行區(qū)分。我們可以讓更重要的文本更大、字體更粗、色彩更加鮮明，或者使用更深的黑色來(lái)呈現(xiàn)。
  4.jpg
  綜合地使用這些屬性來(lái)構(gòu)建視覺層級(jí)。
  3.用留白來(lái)隔離元素
  兩個(gè)元素互不相關(guān)，如果想將它們分隔開來(lái)，使用分割線似乎是一件理所當(dāng)然的事情？當(dāng)然可以，但是這種方式真的是非常過(guò)時(shí)且笨拙的一種呈現(xiàn)方式。你需要的是更好、更優(yōu)雅、更貼合當(dāng)下的一種呈現(xiàn)方式。
  不是簡(jiǎn)單地使用分割線，而是使用留白，或者說(shuō)負(fù)空間來(lái)間隔就可以了。分割線在很大程度上是丑陋且難以駕馭的視覺噪音，相對(duì)而言留白則好了很多。
  5.png
  多數(shù)情況下，刪除分隔線條是比較快速的方法，當(dāng)然更多的時(shí)候需要你適當(dāng)?shù)卣{(diào)整一下留白的大小。
  使用分割線來(lái)分隔內(nèi)容，不僅會(huì)讓掃視頁(yè)面花費(fèi)更長(zhǎng)的時(shí)間，而且增加的信息噪音會(huì)影響整體的層次結(jié)構(gòu)。
  4.用陰影替代邊框
  想要凸顯一些元素，并不一定需要依靠描邊。使用陰影則可以起到同樣的效果，單獨(dú)使用則會(huì)顯得更加整潔。描邊+陰影則會(huì)顯得過(guò)于雜亂。
  使用相對(duì)不那么具有侵略性的小陰影無(wú)疑讓效果更加輕松，看起來(lái)也不會(huì)突兀。
  6.png
  △登錄表單
  5.用色條提升視覺調(diào)性
  如果覺得內(nèi)容區(qū)塊過(guò)于單調(diào)，可以根據(jù)你的目的來(lái)強(qiáng)化這一區(qū)塊的視覺屬性。在內(nèi)容區(qū)的一邊加上色條能夠在提升視覺屬性的同時(shí)，賦予這一區(qū)塊內(nèi)容以情緒。
  色條可以是單色的，也可以是漸變的，這取決于你想傳達(dá)什么樣的視覺體驗(yàn)。這個(gè)色條還可以具備良好的功能性。當(dāng)然，這很大程度是用在相對(duì)比較素的頁(yè)面上的，如果頁(yè)面本身已經(jīng)很花哨了，就不太用得上。
  7.jpg
  比如使用紅色和綠色來(lái)標(biāo)識(shí)不同的狀態(tài)，也可以用色條來(lái)標(biāo)識(shí)出被觸發(fā)的Tab或者控件。
  6.用背景色區(qū)分區(qū)塊
  其實(shí)，同樣是為了進(jìn)行區(qū)分內(nèi)容區(qū)塊和層級(jí)，這個(gè)方法同樣優(yōu)雅而快速，幾乎可以算是毫不費(fèi)力的一種設(shè)計(jì)技巧。
  8.png
  為了區(qū)分兩個(gè)不同區(qū)塊的元素，簡(jiǎn)單地使用不同的背景來(lái)進(jìn)行區(qū)分也可以，本質(zhì)上，它采用的類似卡片式設(shè)計(jì)的思路——用不同的卡片來(lái)歸類內(nèi)容。
  相對(duì)而言，使用有差異但是不那么顯著的不同色塊來(lái)作為背景，在保證整體整潔的同時(shí)，起到了區(qū)分的作用。
  7.「字」盡其用
  誰(shuí)不喜歡漂亮的字體呢？當(dāng)然都喜歡，但是字體的功用其實(shí)各不相同。從呈現(xiàn)正文的強(qiáng)可讀性文本，到裝飾性極強(qiáng)的視覺化字體，各種不同的字體需要應(yīng)對(duì)不同的功能。
  簡(jiǎn)單看看幾種不同類型的字體：
  1.襯線字體：Serif本身就是襯線的意思，這樣的字體字符的末尾通常是會(huì)有小的裝飾性的襯線。襯線除了裝飾性以外，還能強(qiáng)化字體的可讀性。常見的襯線字體：Georgia，Times New Roman，Cambria。
  2.非襯線字體：也就是Sans-Serif字體，它相對(duì)而言更加現(xiàn)代，襯線被去掉之后，線條感更強(qiáng)，更加干凈，也更加貼合數(shù)字時(shí)代的一些顯示需求。常見的非襯線字體：Helvetica，Montserrat，Gotham。
  人們通常會(huì)認(rèn)為，襯線字體更加適宜長(zhǎng)時(shí)間閱讀，它也更多地運(yùn)用在印刷品上。然而襯線字體的襯線和邊角大多更加銳利，在一定程度上會(huì)被視作為視覺噪音。在屏幕分辨率尚且達(dá)不到要求的時(shí)代，襯線字體的顯示問(wèn)題很大。當(dāng)然，如今屏幕分辨率提高起來(lái)之后，這個(gè)問(wèn)題幾乎不存在了，只是在小字號(hào)和低分辨率和小屏幕上，依然存在這個(gè)問(wèn)題。
  3.手寫字體：手寫字體通常被認(rèn)為是手寫風(fēng)格的字體，在呈現(xiàn)的時(shí)候，常常會(huì)有連寫的筆畫，更貼近傳統(tǒng)的書寫字體所呈現(xiàn)出來(lái)的效果。手寫字體更加隨意和有趣。常見的手寫字體包括：Alex Brush，Great Vibes，Sofia。
  4.展示性字體：展示性字體是一個(gè)功能導(dǎo)向型的分類，通常指的是用來(lái)作為標(biāo)題展示、用于海報(bào)、徽章等地方的字體，它們表現(xiàn)力更強(qiáng)，視覺特征更突出，直言不諱地說(shuō)就是為了吸引用戶的注意力。常見的展示性字體包括：Algerian，Curlz，Gigi，Umbra。
  9.png
  在網(wǎng)頁(yè)設(shè)計(jì)中，絕大多數(shù)情況下都只會(huì)使用襯線字體和非襯線字體兩種，在英文網(wǎng)站當(dāng)中，通常會(huì)采用一種襯線字體+一種非襯線字體的搭配方式。注意，如果有不同粗細(xì)和字重的字體，使用同一字體族中字體為好。在中文當(dāng)中，開源且可以免費(fèi)商用的「思源黑體」和「思源宋體」是一個(gè)設(shè)計(jì)中非常常見的選擇。
  在進(jìn)行視覺設(shè)計(jì)的時(shí)候，我堅(jiān)持使用2種字體，極少會(huì)使用3種字體，后者最多會(huì)在強(qiáng)調(diào)視覺的商業(yè)或者藝術(shù)性項(xiàng)目當(dāng)中使用，比如Banner和海報(bào)。
  結(jié)語(yǔ)
  我真心期望這樣的小技巧能夠幫你做出好的設(shè)計(jì)，無(wú)論你是設(shè)計(jì)師還是其他職業(yè)。很多時(shí)候，設(shè)計(jì)是靈活的，是基于感知的，有方法可供遵循的，尤其當(dāng)你仔細(xì)觀察一些現(xiàn)有的好設(shè)計(jì)，會(huì)發(fā)現(xiàn)有很多這樣的小技巧。觀察共性，仔細(xì)感知，總結(jié)經(jīng)驗(yàn)，你也可以。