[譯] 迅速提升設計美感的 7 個小技巧

用戰術來改進你的設計

1. 利用顏色和粗體來建立層次結構，而非使用字體大小

對於文本樣式的設計，最常犯的一個錯誤就是依賴字體大小來控制層次結構。

咱們很常聽到這樣的要求：

「這段文字比較重要，加大字體！」

記住，不要過於依賴字體大小，而是嘗試使用顏色和字體粗細來完成相同的工做。

嘗試使用三種如下的顏色進行設計：

• 主要內容用黑色（如文章的標題）
• 次要內容用灰色（如文章發表日期）
• 輔助內容用淺灰色（如頁腳中的版權聲明）

一樣，兩種 font weights 足以適用於大部分 UI 設計了：

• 大部分文本的正常粗細值（400 或 500，取決於字體）
• 更粗號的字體（600 或 700）用於您要強調的文字

用於網頁展現的通常不小於 400，他們更適合大標題，較小尺寸下閱讀會很不舒服。

固然，對於那些不重要的文本（好比電影海報下的出品公司等），能夠改用較淡的顏色或者較小的字體。

2. 不要在彩色背景上使用灰色字體

白色背景上使用淺灰字體是個淡化文本的好方法，那是由於下降了字體與背景的對比度。 但灰色字體並不適用於彩色背景。

正確的方式應該是找尋接近背景色的文本顏色，這樣纔有助於建立層次結構。

兩種方式：

• 下降白色文字的不透明度

這樣可讓背景顏色「滲透」進字體，同時又不會和背景有顏色衝突

• 挑選與背景顏色相近的字體顏色

選擇與背景色調相近的顏色，並調整飽和度和亮度使其與背景更融洽。當文本背景包含圖像或者其餘非顏色元素時，這種方法更好。

3. 正確使用陰影

陰影效果並非採用一大塊模糊效果去仿製，而是正確地模擬現實世界中光源照射的狀況。

陰影效果的設計推薦閱讀『Material Design Guidelines』

4. 不要頻繁使用邊框（border）

當你須要進行分割操做時，嘗試使用留白來創造邊界感。

邊框固然是區分兩個頁面元素的好方法，但它並非惟一的方法，並且頻繁使用邊框會讓頁面顯得很複雜凌亂。

下次能夠試試這樣：

• 使用框型陰影

一樣能達成效果的操做，卻不容易分散用戶的注意力

• 使用兩種不一樣的背景顏色

一般相鄰元素的背景顏色略有不一樣就有明顯的區分效果了

• 添加更大的間距

5. 不要使用過大的圖標

若是你正在使用像 Font Awesome 或者 Zondicons 這樣的免費圖標集，並且你設計的東西須要使用大圖標，好比 landing page 的功能部分，那就須要注意了。

雖然矢量圖像在放大尺寸時並不會下降圖像質量，可是放大尺寸後的缺少細節卻無可辯駁，這會顯得你很不專業。

若是你只有小圖標，嘗試將其放在另外一個包含背景顏色的形狀中，會更合適。

這不只能保持原有圖標處於最合適的尺寸，也能適配更大的頁面。

固然，最好的方法是使用大尺寸高級圖標集，如 Heroicons 或 Iconic。

6. 使用顏色邊框豐富設計

提高設計美感的很討巧的一個辦法就是，給頁面添加色彩鮮明的邊框。

好比警告消息：

好比導航欄標籤：

再好比整個頁面的頂部也是能夠的：

7. 並不是每一個按鈕都須要背景顏色

其實當頁面有多個可執行操做時，要注意語義設計動做帶來的心理暗示。

像 Boostrap 這樣的框架就會提供語義樣式的菜單按鈕：

好比積極語義可能就會用綠顏色按鈕，而刪除數據通常採用紅色按鈕。

語義是按鈕設計的重要組成部分，可是層次結構依然是一個重要的維度。

類比金字塔結構，大多數頁面一般只有一個主要操做，一些不過重要的次級操做，以及其餘不多使用的三級操做。

設計這些動做時，在層次結構中傳達他們的位置很重要。

• 主要動做應該最明顯。可使用實心，高對比度的背景色。
• 次級動做應該明確但不突出。輪廓樣式或低對比的背景色是很好的選擇。
• 三級動做應該是能夠被發現但不顯眼的。設計爲連接樣式就足夠了。

對於破壞性動做，是否應該都用紅色呢？

這得分狀況了。

若是這個動做不是頁面上的主要行爲，那麼採用二級或三級的設計模式可能更恰當：

當這個動做是主要行爲時（好比在確認對話框中），那麼就應當着重強調：

但願以上幾點能幫助到你！

Wish you good light : )

---

原文連接：7 Practical Tips for Cheating at Design

個人知乎：@Aceyclee | 個人微博：@Aceyclee