關於用戶界面設計的十個小竅門

我們大多數人都是從最小的知識點學習UI設計知識的，在工作中遇到的問題，我們可以通過書籍和文章來解決，並且了解配色、排版、布局等方面的工作原理。

但今天我將分享一些從不同設計師那裡學來的小技巧和自己一些小的心得體會。

「不一樣」的東西不一定就是錯的，這是我們如何把設計方案從良好改進到更好的的基礎。

1.「這段文案很重要，能不能再大一點？」

需要區別內容層級的情況下，單純使文字更大以強調重要性通常不能解決問題，如下圖：

字體層次結構不僅取決於字型大小的大小。而是大小、體量粗細、顏色三者適當的組合，從而產生更清晰的對比度：

那麼如何創建更好的對比度？

不要僅僅從字體大小一個維度來區別內容的類別；

對重要內容實用更大更重的表現方式，次要內容用較小較輕的量級；

創建多種不同的文字顏色，從深色（參見下面的示例）。通常使用最常用的顏色作為正 文文字顏色；

嘗試使用大的字間距（例如24像素標題，16像素正文，10像素等），更大的差距=更好 的對比度；

使用在線工具Modularscale可以幫你創建更合適的字體層次結構；

對比度是尺寸+量級+顏色的結合；

確保對比度清晰，可以使用這個計算器來檢查它的可讀性。

從文字基調顏色來看，可以從較暗的標題移動到較亮的輔助內容。

2.區分內容層級，改透明度要比改色值更方便

不要在拾色器內修改色值以區分文字顏色，這樣會叫你之後的修改比較麻煩。

大家都知道純黑色（#000），的閱讀體驗很差，所以大多數情況下我們選擇比較深的灰色作為正文顏色，在背景是白色的時候，我們提倡用幾種不同的透明度而不是靠改變色值來區別字體顏色，這樣在修改的時候比較簡單，交付開發的時候也會叫對方感到便捷：

在上面的示例中，我使用黑色作為我的主要顏色（＃000），並根據其應用的位置（即主要內容，輔助內容等）降低其不透明度。

3.配色也是要「計算」出來的啊

我們在看到一些賞心悅目的插畫作品的時候，總會驚嘆：「他好會配色，是怎麼做到的？」

taken from momoandspirits

直到我發現理解色彩不一定都要靠天分，在色相，飽和度，亮度（HSB）上的簡單加法和減法都會有不一樣的效果（我們這裡研究HSB公式而不是RGB）。靠這些技巧你可以輕易的擺脫枯燥的配色，如下圖：

那麼如何做好HSB的加減法呢？

上面是兩種理解色彩的方式

這裡提到兩種方式，正如上圖兩種方案都具有相同的基色＃B9F4BC（圓圈背景），但文件夾和條紋顏色上有所不同。開始分析之前，請記住下圖中第一個數字對應色相，其次是飽和度，最後是亮度。

Option A

Option A

在方案A中我們可以看到，全部圖形（圓形，文件夾，條紋）的色相都是123，只是在飽和度和亮度上做了改變。

圓形背景的底色飽和度為24，亮度為96，當我們把文件夾改成較深的綠色時，這兩個值都發生了改變——從24的飽和度變為40（增量+16），從96的亮度變為82（減少-14），這表示飽和度的值增加時，亮度會對應減小，飽和度降低時，亮度隨之相應增加。條紋區域同理，使用文件夾的飽和度和亮度作為基礎值，從40增加到44（增量+04），並從82到75（減去-07）。因此，我們得出公式：

更深的顏色=飽和度增加亮度降低

更淺的顏色=飽和度降低亮度增加

每當想知道我的設計應該使用什麼顏色時，這個公式叫我了解到，最好的方式是找好一個基本顏色，並從這個顏色為準保持色相不變，做飽和度和亮度的調整。

Option B

Option B

在方案B中，同樣的原理仍然適用，但色相會改變。我們之前使用的術語RGB和CMY現在對我們來說可以發揮作用的。

RGB代表紅色，綠色和藍色，而CMY是青色，品紅色和黃色。起初這些術語對我來說無關緊要，直到我發現可以使用RGB和CMY來配色。

在方案B中，如果想要使底色變暗，將拾色器向RGB位置方向移動，反之想要使底色變淺，將其移動到CMY的方向：

由於我們想要文件夾圖標比基本顏色＃B9F4BC（圓形背景）要暗，我們需要將拾色器移動到最接近的RGB所在方向（本例子中為藍色）。如果我們想要文件夾顏色變淺，將選擇器移動到CMY（本例中為黃色）左側。

多數情況下，RGB會導致顏色變暗，CMY會導致顏色變淺

將拾色器調整到我們想要的顏色時，應用方案A中的公式，我們得到：

紅色，綠色，藍色（RGB）+方案A公式=更深的顏色

青色，品紅色，黃色（CMY）+方案A公式=更淺的顏色

4.合理運用間距來分組

需要留白的時候，請大方一點

除了在兩組之間添加一條線以顯示分隔之外，在兩個組之間使用寬鬆的空間是更好更簡單的解決方案。

正如接近法則（Law of Proximity）所述：

在時間上或空間上彼此十分接近的刺激物，比相隔較遠的刺激物更容易被視為是一組。

從上面的例子來看，我的目的是通過使用24px大的間距，更清楚明了的分隔開標題和作者。

5.區分每行內容，顏色可能比分割線更好用

顏色作為分隔符

做上圖類似的表格時很簡單，往往只需要複製n次組件。但在站在用戶的角度，如果上下幾行之間沒有很大的區別，閱讀可能會很困難。因此，除了使用分割線之外，在行中添加顏色背景對可讀性可能會有很大幫助，也會提升我們設計的美觀度。

6.改變底圖的疊加方式好過給標題添加投影

常見的界面頭圖設計

如果圖像背景是動態的（或者可以隨時更改），那對於文本或者標題組件來說是件很麻煩的事情。

通常，帶有動態圖像背景的文本的常見解決方案是添加投影，但那樣往往在字母和單詞周圍增加了更多的視覺混亂，填滿了它們之間的空間，更加干擾閱讀。

很多設計師選用了亮色或暗色但遮罩來解決這個問題，效果還是比較不錯。而我發現用漸變填充並且採用Multiply的圖層混合效果，也很不錯。

這樣不用根據圖片的不同去修改遮罩的透明度，而且最大程度的保留了背景圖原來的色彩，文本背景處的顏色更深，也保證了可讀性。

7.一段文字內容需要一個合理的長度

很多設計師為了適配頁面的大小把每行文字做的很長。但這樣做會給用戶造成視覺疲勞，通常每行45-65個英文字元是理想的。

如果你因縮短文本長度導致在右側產生像下面這樣的大面積的空白區域：

這時候可以使正文內容採用中心對齊的方式：

內容中心對齊

8.不要創建過多的組件樣式

造成設計不一致的原因很多時候是因為組件樣式不統一。尤其是當你發現你已經創建了5種卡片，10個按鈕，5個標題樣式的時候。

開始為某個新增內容繪製界面之前，最好查閱以前設計好的模塊，盡量復用之前的組件。

上面的例子中，我們完全可以把文章卡片的形式復用到小組卡片中，而不是重新再為小組內容再創建一種新的形式，這樣既節省了時間又遵循了設計的一致性。

9.用品牌色／產品色做點睛之筆

很多人會認為品牌色／產品色必須在界面中占的面積越大越好。當我們在為向客戶展示本公司千挑萬選出來的明黃、基佬紫、娘炮粉甚至「色彩斑斕的黑」頭疼無比的時候，把它們作為我們乾淨簡約界面中的點睛之色，可能會是最好的選擇。

10.把複選框這樣的組件「丟」到一邊吧

如果你要創建如上圖所示的列表，請把複選框、單選框之類抓人眼球的組件從文字內容中挪出來。使文字內容對齊可以使用戶閱讀時不會被打斷，並使視覺體驗更加清晰明了。

原文出處：https://medium.com/sketch-app-sources/design-cheatsheet-274384775da9

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！