10個適合UI新手的設計技巧

最新 04-29

轉自：海鹽社（ID：hys-ssc）

作者：阿肆Stella

沒有人生下來就會做設計，大部分UI設計師都是從摸索開始的。但即便開始困難重重，我們依然可以通過從各類書籍和文章中了解到顏色、排版、布局的各種設計知識。因此我想通過這篇文章跟大家分享我從他人處學習以及自己摸索出的10個關於界面設計的經驗，希望能幫到做設計的你們，特別是剛入行的UI設計師。

聲明：文中所謂的「Don"t」並不是說不對，而只是有更好的替代方案。

1. 大並不能解決問題

當我們需要區分信息層級時，只是單純地讓標題變大通常不能解決問題。就像這樣：

信息層級不能僅僅靠字體大小來區分，而是字型大小、字重的字體顏色等多方作用的結果，使層級區分得越明顯越好

所以，如何區分信息層級呢？

1. 不要僅僅是字型大小不同（字體字重都相同）

2. 用更粗的字重和更深的顏色來突出主要內容，用相符較小的字或更淺的顏色來弱化輔助信息

3. 預設好淺中深三種字色，通常我會用中等的顏色作為我正文的字體顏色

4. 不要吝嗇拉大字型大小差距（例如標題24px，正文16px，輔助信息10px）差距越大，層級區分越明顯

5. 用 Modularscale 這款在線字體計算器可以幫助你生成合適的字體層級

Modularscale

最後，要記得檢查字色的對比度，可以用 Contrast Ratio這個網站來檢查你的字色是否存在明顯差別。

Contrast Radio

2. 無需手動選擇灰度

我們都知道#000000的純黑色會造成視覺疲勞，所以我們最好使用除了純黑色以外的較暗的顏色來代替純黑色。但是我並不建議你在顏色選擇器上漫無目的地拖動游標來重新選擇3個或更多色在白色背景上「看上去不錯」的深色，這樣會增加你工作的複雜程度。最簡單的方法就是直接改變純黑色的透明度。

在這個例子中，我使用了純黑作為基礎顏色，然後在標題採用85%透明度，正文75%透明度，輔助信息60%透明度，以此來區分信息層級，是不是很方便呢。

3. 傻瓜配色法

大部分人是不太擅長挑選配色的，每當我們看到一個出色的色彩搭配作品，都忍不住暗自腹誹「他們究竟是怎麼做到的？」就像下面這種：

後來我終於明白，原來配色不僅僅是一種與生俱來的天賦，通過對色相、飽和度和明度（HSB）進行簡單的加減法，你也可以輕鬆地拜託單調的白色背景，把它變成像畢加索般顏色漂亮的作品，如下：

那麼這個加減法是怎麼做的呢？

這裡有兩種配色方法，圓圈背景都使用了一種基礎顏色#B9F4BC，但icon的顏色是不同的。在開始配色前，記住後面的順序是色相H、飽和度S和明度B

方法A

在選項A中，我們可以看出，色相H始終是123，發生變化的只有飽和度S和明度B

我們可以得出一個公式：

顏色變深=增加飽和度S，減少亮度B

顏色變淺=減少飽和度S，增加亮度B

每當我不知道該怎麼進行配色時，這個公式可以幫助我，根本原理是，先選擇一個基本顏色，然後保持基本顏色的H不變，對S和B進行調整。

方法B

跟方法A同理，方法B不同的是H也發生了變化，我們通過在調色盤下面的顏色條上移動游標來讓顏色加深過變淺，通常來說，往左可以變淺，往右可以加深。

調整過左右色相後，再利用方法A裡面的技巧，調節S和B，我們可以得到以下數值

方法B的公式是：

顏色變深=色相向左+增加飽和度S，減少亮度B

顏色變淺=色相向右+減少飽和度S，增加亮度B

4. 大膽留白

除了在兩組之前添加一條線來進行區分，用留白來進行區分也是一個簡單方便的好方法，正如格式塔原理里接近原則所說：彼此靠近或接近的對象會被分成一個組。

如下圖例子所示，我把留白從8px增大到24px，就能夠很明顯的把標題和作者區分開來

5. 顏色也是分行利器

設計表格可以說是一個比較無聊的事情，僅僅需要複製再複製而已，但是對用戶來說，當每一行看起來都差不多的時候，就很難順暢地閱讀下去。因此除了用線進行分割外，加入帶顏色的背景能大大改善用戶的閱讀體驗，同時也能讓設計師在做設計的時候沒那麼無聊。

6. 漸變背景讓圖上文字更清晰

做標題設計或者在圖片上添加文字時，如何讓背景不要「吃掉」文字就成了一大難題，特別是當背景還是動態的或者變化的。

通常的解決方法是給文字添加陰影，但是這樣會大大影響可讀性，因為陰影佔據了字母之前的空隙，無形中增加了閱讀障礙。

標題設計

還有的人會選擇在文字下面疊加一層黑色或白色的底層背景，這樣就能保證文字的可讀性不受影響。但是我喜歡採用一種添加一層漸變填充的方法：

這樣比疊加一個透明黑色背景要簡單得多，而且只是讓有文字的區域稍微變深，但是並不影響沒有文字的部分的顏色。

7. 行寬要有度

很多設計師會根據整個頁面來設置行寬，但是這麼做會帶給用戶視覺壓力，對大部分用戶來說，一行45~65個字元（25~35個漢子）是最為理想的。

不過也別只想著縮短行寬，這樣的話你可能會得到這樣一個不平衡的頁面效果：在頁面右邊會產生一個非常大的留白?，?你還需要將文本內容進行居中，才能得到更好的視覺效果

8. 盡量復用已有格式

沒有一個統一的設計規範會讓你的設計作品雜亂無章，當你意識到這一點的時候你可能已經做了5種卡片布局，10個按鈕和5個標題樣式了

當你要開始設計某個特定內容的界面時，不妨看看你之前的設計，也許會有可以直接復用的樣式。例如上圖，之前已經有了一個圖片+標題+時間的卡片組，但你需要一個封面+組名+成員數量的卡片組時，你可以直接復用之前的樣式，只是把內容改一下，而無需再設計一個完全不同的卡片組，這樣既節省了設計時間，也讓你的界面更加協調統一（如果設計的真實目的是創造頁面的多樣性則另當別論）。

9. 品牌色不能濫用

我們通常以為品牌色必須要佔據大面積的頁面空間才行，但是在一個乾淨整潔的頁面中，我們不可能向用戶展示大面積的黃色、橘色和粉色等耀眼的顏色，這樣會對用戶產生極大的視覺負擔。正確的品牌色的用法是：只用於強調。