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