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