這并不是一篇關(guān)于設(shè)計(jì)趨勢的文章，而是一篇關(guān)于基礎(chǔ)的設(shè)計(jì)準(zhǔn)則的文章。如果你是一名 UI 設(shè)計(jì)師，無論你經(jīng)驗(yàn)是否豐富，有些設(shè)計(jì)的基準(zhǔn)是需要保證的，有些容易遺忘的細(xì)節(jié)，需要借助速查清單來進(jìn)行走查優(yōu)化。

這份優(yōu)化 UI 界面的速查清單，就是幫你搞定這件事情的。

1、字體版式

首先聲明，一個(gè)項(xiàng)目中最好不要使用超過2種主要字體。不過這種原則已經(jīng)廣為流傳，就不多說了，下面說說更細(xì)節(jié)的事情：

1.1、注意大寫

純大寫的字母文本，要額外拉開字母之間的字間距，提升可讀性。

1.2、注意超細(xì)體的字體

字重超細(xì)的字體要謹(jǐn)慎使用。可以使用淺色，但是要根據(jù)字體情況進(jìn)行選擇。如果你設(shè)計(jì)的文本是裝飾性也就算的，如果是需要用戶能清晰閱讀的，就要特別慎重，能不用就不用，否則在部分手機(jī)屏幕上看起來會(huì)非常糟糕。

1.3、標(biāo)題和正文字體尺寸

先說說網(wǎng)頁排版。標(biāo)題通常分 H1 到 H6 總計(jì)6個(gè)不同層級(jí)，但是通常不會(huì)全部用到，你需要確保層級(jí)最多不超過 4 個(gè)，并且控制它們整體的邏輯和一致性。網(wǎng)頁的首屏和登錄頁面上的大標(biāo)題，可以用最大的那一級(jí)，畢竟，富有表現(xiàn)力的視覺排版是當(dāng)下趨勢。

但是其他的文本不要和這個(gè)標(biāo)題文本差距太大。英文文本以Chrome 瀏覽器為例，正文使用 16px 和 17px 這種大小，并且保留 12px 文本作為最小文本。

另外，同一個(gè)段落中，不要同時(shí)使用 16px 和 17px 這樣相近又不同的文本尺寸，會(huì)讓用戶感到迷惑。

1.4、行高

盡量不要在行高上采用自動(dòng)行高。通常，現(xiàn)在比較流行的做法，是將行高拉高一些，確保整體版面的透氣性和可讀性，尤其是涉及到大量文本的時(shí)候。

1.5、文本和標(biāo)題的層次結(jié)構(gòu)

在需要突出顯示的部分使用粗體。標(biāo)題、鏈接、按鈕都在這個(gè)范疇內(nèi)。如果將粗體樣式應(yīng)用到全部文本，這樣重點(diǎn)就不突出了。

1.6、文字對比

請?zhí)貏e注意文本的色彩?？刂坪脤Ρ榷?，確保任何類型的顯示器上都可以清晰閱讀。在設(shè)計(jì)占位符文本的時(shí)候，這個(gè)問題特別突出。

2、間距和邊距

留白對于整體設(shè)計(jì)的重要性是毋庸置疑的。留白的變化有助于設(shè)計(jì)師理清元素之間的關(guān)系，提供節(jié)奏感，增加平衡感。

2.1、去掉多余的框架和線條

將一個(gè)語義塊和另外一個(gè)語義塊分開，最簡單的方法就是在兩者之間增加一條 1px 的線。但是這并不是最好的方法。

我見過不少設(shè)計(jì)作品中，界面中一個(gè)又一個(gè)線條繪制的盒子相互嵌套，復(fù)雜無比，每個(gè)盒子都是用 1px 粗細(xì)的線繪制的。但是，如今的UI界面上基本不用這種手法了，大量的卡片替代了以往的各種「盒子」，通過投影和間距來控制卡片之間的關(guān)系。

2.2、梳理從屬關(guān)系

邊距有助于從視覺上來判斷元素之間的親疏關(guān)系。當(dāng)我們考慮一個(gè)新聞資訊卡片的布局的時(shí)候，它包含有一張圖片、一個(gè)標(biāo)題，還有3~4行預(yù)覽文本和發(fā)布日期，那么應(yīng)該如何分組和間隔？標(biāo)題和文本應(yīng)該是一組，這一組和圖片、日期的距離更遠(yuǎn)一些。聽起來很令人困惑？看下面的圖片你就理解了：

2.3、少即是多

總會(huì)有客戶或者產(chǎn)品會(huì)想把所有的功能和元素都懟到同一個(gè)頁面或者 APP 當(dāng)中。這個(gè)時(shí)候，要你讓標(biāo)題、菜單、文本、特價(jià)優(yōu)惠、社交帳號(hào)和電話號(hào)碼都齊齊整整地塞到一起，同時(shí)還要給每個(gè)組件搭配上圖標(biāo)。

說真的，這種問題總不能避免。這個(gè)時(shí)候可以使用這個(gè)理由來試圖進(jìn)行溝通：用戶一次接收的信息越少，進(jìn)行有效操作的可能性就越大。循序漸進(jìn)地呈現(xiàn)信息，能夠讓人更加愉悅，用戶對于信息的接受性也更強(qiáng)。

用戶永遠(yuǎn)都不會(huì)費(fèi)力巴拉地去拆解和分析你的頁面布局，緊密局促的布局也早已不符合主流審美和日常需求了。

2.4、屏幕邊緣留白不均勻

如果你設(shè)計(jì)的是海報(bào)、Banner 或者是 卡片 等我們所熟知的視覺元素，那么請注意邊緣留白的設(shè)計(jì)。如果按照經(jīng)典的方式來布置（從左上到右下），那么盡量讓上方的留白更大，這看起來會(huì)讓視覺更加穩(wěn)當(dāng)，并且更加具有視覺吸引力。

3、配色和圖像

Logo、圖像、圖標(biāo)、背景這些元素決定了整個(gè)設(shè)計(jì)給人的情緒。所以在設(shè)計(jì)的時(shí)候，需要有針對性地挑選和優(yōu)化。

3.1、關(guān)于 LOGO

我并不經(jīng)常做 LOGO，但是在我的職業(yè)生涯中也起碼做過 20 個(gè)LOGO。我的經(jīng)驗(yàn)是：好 LOGO 很難制作。但是設(shè)計(jì)師只要遵循基本的原則，就能創(chuàng)建出像樣的 LOGO。

比如仔細(xì)選擇配色。我有一次看到一家名為 「VIP catch」 的釣魚用品店，他們使用了紫色的 LOGO，從名字、配色到色彩的選擇都和釣魚這個(gè)場景沒有一點(diǎn)關(guān)系。如果選對配色，有針對性地加入一些和釣魚相關(guān)的元素，其實(shí)也就好了。

另外就是，如果你時(shí)間有限，就不要試圖給品牌 LOGO 設(shè)計(jì)一個(gè)特定的符號(hào)或者圖形了，因?yàn)檎娴暮茈y做好。最好制作成文本 LOGO，通過微調(diào)字體來制作。

3.2、陰影

元素下方的陰影一定不要用黑色。始終基于表層的、前景的元素來選取陰影的顏色和明暗。通常，一個(gè)看起來舒適的陰影是通過多個(gè)陰影疊加造就的，一個(gè)小且明確的陰影，位于正下方，另外一個(gè)陰影模糊且彌散，透明度更高。

3.3、圖標(biāo)和圖像

任何可以矢量化的元素，都盡量制作成為矢量的。從符號(hào)、箭頭到 LOGO ，現(xiàn)在都最好制作成為矢量 SVG 格式，方便開發(fā)人員嵌入到設(shè)計(jì)系統(tǒng)當(dāng)中。PNG 圖標(biāo)的邊緣模糊，在清晰度越來越高的視網(wǎng)膜屏幕上，矢量圖形元素不僅更加銳利，而且消耗更少的系統(tǒng)資源。

如果你正在為網(wǎng)站處理一組圖標(biāo)，請盡量確保這些圖標(biāo)在視覺風(fēng)格和細(xì)節(jié)處理上是統(tǒng)一的，看起來是同屬一個(gè)「家族」的。這意味著圖標(biāo)的筆觸寬度、邊框半徑、視覺重量都應(yīng)該是一樣的。

4、其他設(shè)計(jì)常識(shí)

除了上面的幾個(gè)常見的要點(diǎn)之外，我還要額外補(bǔ)充幾點(diǎn)，它們很難直接歸結(jié)為一類，但是同樣重要。

4.1、避免使用怪異的布局

很多 UI 界面元素在過去多年的發(fā)展過程中，已經(jīng)形成了認(rèn)知廣泛的「最佳實(shí)踐」。如果在設(shè)計(jì)這些 UI 組件的時(shí)候，采用打破甚至徹底違背「最佳實(shí)踐」的做法，比如將圖片+標(biāo)題+ 文本 的順序打亂，可能會(huì)讓人感到迷惑。

熟悉的設(shè)計(jì)并不意味著無聊，你總能夠在 UI 界面的一些地方找到發(fā)揮創(chuàng)造力的地方，而不是在這些有著清晰規(guī)則的地方搞創(chuàng)新。設(shè)計(jì)師和藝術(shù)家是截然不同的職業(yè)，在設(shè)計(jì)過程中，創(chuàng)意沖動(dòng)應(yīng)該在不干擾用戶體驗(yàn)的前提下，進(jìn)行發(fā)揮。

4.2、布局尺寸和參數(shù)

在設(shè)計(jì)移動(dòng)端 UI 界面之前，應(yīng)該和開發(fā)人員進(jìn)行充分的溝通，這一點(diǎn)很重要。iOS 和 Android 端的 APP 的尺寸還相對固定，但是如果你設(shè)計(jì)的是移動(dòng)端的網(wǎng)頁，那么可能涉及到的頁面尺寸就非常多了，這個(gè)時(shí)候就要用到斷點(diǎn)非常多的網(wǎng)格系統(tǒng)來進(jìn)行響應(yīng)式的設(shè)計(jì)了。

4.3、亂數(shù)假文

Lorem Ipsum 在中文中叫亂數(shù)假文，它是自動(dòng)生成的一種占位符。在如今的設(shè)計(jì)領(lǐng)域當(dāng)中，直接使用亂數(shù)假文看起來非常不專業(yè)，因?yàn)闊o論是 Sketch 還是 Figma 當(dāng)中都有太多的插件，可以幫你生成符合語境的占位符內(nèi)容。在此基礎(chǔ)上還有另外一個(gè)要點(diǎn)，就是展示性的組件內(nèi)容也不要簡單地復(fù)制，盡量使用不同的圖片和配色，讓它們看起來更加真實(shí)。

結(jié)語

這份UI快速檢查清單目前是比較符合當(dāng)下 UI 設(shè)計(jì)行業(yè)的需求的，但是它并非是教條，在特定的情況下，你可能不用遵循它。當(dāng)然，在多數(shù)時(shí)候，這份清單能夠幫你讓設(shè)計(jì)更加優(yōu)秀。

文章來源：優(yōu)設(shè)    作者：Anna Sh

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)