2020-8-12 資深UI設(shè)計(jì)者
這并不是一篇關(guān)于設(shè)計(jì)趨勢(shì)的文章，而是一篇關(guān)于基礎(chǔ)的設(shè)計(jì)準(zhǔn)則的文章。如果你是一名 UI 設(shè)計(jì)師，無(wú)論你經(jīng)驗(yàn)是否豐富，有些設(shè)計(jì)的基準(zhǔn)是需要保證的，有些容易遺忘的細(xì)節(jié)，需要借助速查清單來(lái)進(jìn)行走查優(yōu)化。
這份優(yōu)化 UI 界面的速查清單，就是幫你搞定這件事情的。
首先聲明，一個(gè)項(xiàng)目中最好不要使用超過(guò)2種主要字體。不過(guò)這種原則已經(jīng)廣為流傳，就不多說(shuō)了，下面說(shuō)說(shuō)更細(xì)節(jié)的事情：
純大寫的字母文本，要額外拉開(kāi)字母之間的字間距，提升可讀性。
字重超細(xì)的字體要謹(jǐn)慎使用。可以使用淺色，但是要根據(jù)字體情況進(jìn)行選擇。如果你設(shè)計(jì)的文本是裝飾性也就算的，如果是需要用戶能清晰閱讀的，就要特別慎重，能不用就不用，否則在部分手機(jī)屏幕上看起來(lái)會(huì)非常糟糕。
先說(shuō)說(shuō)網(wǎng)頁(yè)排版。標(biāo)題通常分 H1 到 H6 總計(jì)6個(gè)不同層級(jí)，但是通常不會(huì)全部用到，你需要確保層級(jí)最多不超過(guò) 4 個(gè)，并且控制它們整體的邏輯和一致性。網(wǎng)頁(yè)的首屏和登錄頁(yè)面上的大標(biāo)題，可以用最大的那一級(jí)，畢竟，富有表現(xiàn)力的視覺(jué)排版是當(dāng)下趨勢(shì)。
但是其他的文本不要和這個(gè)標(biāo)題文本差距太大。英文文本以Chrome 瀏覽器為例，正文使用 16px 和 17px 這種大小，并且保留 12px 文本作為最小文本。
另外，同一個(gè)段落中，不要同時(shí)使用 16px 和 17px 這樣相近又不同的文本尺寸，會(huì)讓用戶感到迷惑。
盡量不要在行高上采用自動(dòng)行高。通常，現(xiàn)在比較流行的做法，是將行高拉高一些，確保整體版面的透氣性和可讀性，尤其是涉及到大量文本的時(shí)候。
在需要突出顯示的部分使用粗體。標(biāo)題、鏈接、按鈕都在這個(gè)范疇內(nèi)。如果將粗體樣式應(yīng)用到全部文本，這樣重點(diǎn)就不突出了。
請(qǐng)?zhí)貏e注意文本的色彩?？刂坪脤?duì)比度，確保任何類型的顯示器上都可以清晰閱讀。在設(shè)計(jì)占位符文本的時(shí)候，這個(gè)問(wèn)題特別突出。
留白對(duì)于整體設(shè)計(jì)的重要性是毋庸置疑的。留白的變化有助于設(shè)計(jì)師理清元素之間的關(guān)系，提供節(jié)奏感，增加平衡感。
將一個(gè)語(yǔ)義塊和另外一個(gè)語(yǔ)義塊分開(kāi)，最簡(jiǎn)單的方法就是在兩者之間增加一條 1px 的線。但是這并不是最好的方法。
我見(jiàn)過(guò)不少設(shè)計(jì)作品中，界面中一個(gè)又一個(gè)線條繪制的盒子相互嵌套，復(fù)雜無(wú)比，每個(gè)盒子都是用 1px 粗細(xì)的線繪制的。但是，如今的UI界面上基本不用這種手法了，大量的卡片替代了以往的各種「盒子」，通過(guò)投影和間距來(lái)控制卡片之間的關(guān)系。
邊距有助于從視覺(jué)上來(lái)判斷元素之間的親疏關(guān)系。當(dāng)我們考慮一個(gè)新聞資訊卡片的布局的時(shí)候，它包含有一張圖片、一個(gè)標(biāo)題，還有3~4行預(yù)覽文本和發(fā)布日期，那么應(yīng)該如何分組和間隔？標(biāo)題和文本應(yīng)該是一組，這一組和圖片、日期的距離更遠(yuǎn)一些。聽(tīng)起來(lái)很令人困惑？看下面的圖片你就理解了：
總會(huì)有客戶或者產(chǎn)品會(huì)想把所有的功能和元素都懟到同一個(gè)頁(yè)面或者 APP 當(dāng)中。這個(gè)時(shí)候，要你讓標(biāo)題、菜單、文本、特價(jià)優(yōu)惠、社交帳號(hào)和電話號(hào)碼都齊齊整整地塞到一起，同時(shí)還要給每個(gè)組件搭配上圖標(biāo)。
說(shuō)真的，這種問(wèn)題總不能避免。這個(gè)時(shí)候可以使用這個(gè)理由來(lái)試圖進(jìn)行溝通：用戶一次接收的信息越少，進(jìn)行有效操作的可能性就越大。循序漸進(jìn)地呈現(xiàn)信息，能夠讓人更加愉悅，用戶對(duì)于信息的接受性也更強(qiáng)。
用戶永遠(yuǎn)都不會(huì)費(fèi)力巴拉地去拆解和分析你的頁(yè)面布局，緊密局促的布局也早已不符合主流審美和日常需求了。
如果你設(shè)計(jì)的是海報(bào)、Banner 或者是 卡片 等我們所熟知的視覺(jué)元素，那么請(qǐng)注意邊緣留白的設(shè)計(jì)。如果按照經(jīng)典的方式來(lái)布置（從左上到右下），那么盡量讓上方的留白更大，這看起來(lái)會(huì)讓視覺(jué)更加穩(wěn)當(dāng)，并且更加具有視覺(jué)吸引力。
Logo、圖像、圖標(biāo)、背景這些元素決定了整個(gè)設(shè)計(jì)給人的情緒。所以在設(shè)計(jì)的時(shí)候，需要有針對(duì)性地挑選和優(yōu)化。
我并不經(jīng)常做 LOGO，但是在我的職業(yè)生涯中也起碼做過(guò) 20 個(gè)LOGO。我的經(jīng)驗(yàn)是：好 LOGO 很難制作。但是設(shè)計(jì)師只要遵循基本的原則，就能創(chuàng)建出像樣的 LOGO。
比如仔細(xì)選擇配色。我有一次看到一家名為 「VIP catch」 的釣魚用品店，他們使用了紫色的 LOGO，從名字、配色到色彩的選擇都和釣魚這個(gè)場(chǎng)景沒(méi)有一點(diǎn)關(guān)系。如果選對(duì)配色，有針對(duì)性地加入一些和釣魚相關(guān)的元素，其實(shí)也就好了。
另外就是，如果你時(shí)間有限，就不要試圖給品牌 LOGO 設(shè)計(jì)一個(gè)特定的符號(hào)或者圖形了，因?yàn)檎娴暮茈y做好。最好制作成文本 LOGO，通過(guò)微調(diào)字體來(lái)制作。
元素下方的陰影一定不要用黑色。始終基于表層的、前景的元素來(lái)選取陰影的顏色和明暗。通常，一個(gè)看起來(lái)舒適的陰影是通過(guò)多個(gè)陰影疊加造就的，一個(gè)小且明確的陰影，位于正下方，另外一個(gè)陰影模糊且彌散，透明度更高。
任何可以矢量化的元素，都盡量制作成為矢量的。從符號(hào)、箭頭到 LOGO ，現(xiàn)在都最好制作成為矢量 SVG 格式，方便開(kāi)發(fā)人員嵌入到設(shè)計(jì)系統(tǒng)當(dāng)中。PNG 圖標(biāo)的邊緣模糊，在清晰度越來(lái)越高的視網(wǎng)膜屏幕上，矢量圖形元素不僅更加銳利，而且消耗更少的系統(tǒng)資源。
如果你正在為網(wǎng)站處理一組圖標(biāo)，請(qǐng)盡量確保這些圖標(biāo)在視覺(jué)風(fēng)格和細(xì)節(jié)處理上是統(tǒng)一的，看起來(lái)是同屬一個(gè)「家族」的。這意味著圖標(biāo)的筆觸寬度、邊框半徑、視覺(jué)重量都應(yīng)該是一樣的。
除了上面的幾個(gè)常見(jiàn)的要點(diǎn)之外，我還要額外補(bǔ)充幾點(diǎn)，它們很難直接歸結(jié)為一類，但是同樣重要。
很多 UI 界面元素在過(guò)去多年的發(fā)展過(guò)程中，已經(jīng)形成了認(rèn)知廣泛的「最佳實(shí)踐」。如果在設(shè)計(jì)這些 UI 組件的時(shí)候，采用打破甚至徹底違背「最佳實(shí)踐」的做法，比如將圖片+標(biāo)題+ 文本 的順序打亂，可能會(huì)讓人感到迷惑。
熟悉的設(shè)計(jì)并不意味著無(wú)聊，你總能夠在 UI 界面的一些地方找到發(fā)揮創(chuàng)造力的地方，而不是在這些有著清晰規(guī)則的地方搞創(chuàng)新。設(shè)計(jì)師和藝術(shù)家是截然不同的職業(yè)，在設(shè)計(jì)過(guò)程中，創(chuàng)意沖動(dòng)應(yīng)該在不干擾用戶體驗(yàn)的前提下，進(jìn)行發(fā)揮。
在設(shè)計(jì)移動(dòng)端 UI 界面之前，應(yīng)該和開(kāi)發(fā)人員進(jìn)行充分的溝通，這一點(diǎn)很重要。iOS 和 Android 端的 APP 的尺寸還相對(duì)固定，但是如果你設(shè)計(jì)的是移動(dòng)端的網(wǎng)頁(yè)，那么可能涉及到的頁(yè)面尺寸就非常多了，這個(gè)時(shí)候就要用到斷點(diǎn)非常多的網(wǎng)格系統(tǒng)來(lái)進(jìn)行響應(yīng)式的設(shè)計(jì)了。
Lorem Ipsum 在中文中叫亂數(shù)假文，它是自動(dòng)生成的一種占位符。在如今的設(shè)計(jì)領(lǐng)域當(dāng)中，直接使用亂數(shù)假文看起來(lái)非常不專業(yè)，因?yàn)闊o(wú)論是 Sketch 還是 Figma 當(dāng)中都有太多的插件，可以幫你生成符合語(yǔ)境的占位符內(nèi)容。在此基礎(chǔ)上還有另外一個(gè)要點(diǎn)，就是展示性的組件內(nèi)容也不要簡(jiǎn)單地復(fù)制，盡量使用不同的圖片和配色，讓它們看起來(lái)更加真實(shí)。
這份UI快速檢查清單目前是比較符合當(dāng)下 UI 設(shè)計(jì)行業(yè)的需求的，但是它并非是教條，在特定的情況下，你可能不用遵循它。當(dāng)然，在多數(shù)時(shí)候，這份清單能夠幫你讓設(shè)計(jì)更加優(yōu)秀。
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com