每個Web開發人員都不可避免地遇到需要做出視覺設計決策的情況，無論他們喜歡與否。
也許你所在的公司沒有全職設計師，而你需要自己實現新功能的UI。
你很容易舉起手來說：“我永遠都不可能讓這個做得很好看，我不是藝術家！”但事實證明你可以用很多技巧來提升你的工作水平，而且不需要圖形設計。
以下是你可以用來改善設計的七個實用技巧。
• • •
目錄
1.使用顏色和粗細來創建層次結構而不是大小
UI文本樣式的一個常見錯誤是過分依賴字體大小來控制層次結構。
“這個文字很重要嗎？讓它變得更大。“
“這個文字是次要的嗎？讓它變小。“
不要單獨將所有繁重的工作留在字體大小上，而是嘗試使用顏色或字體粗細來完成相同的工作。
“這個文字很重要嗎？那就讓它更突出。”
“這個文字是次要的嗎？那就讓它使用更淺的顏色。”
嘗試並堅持兩種或三種顏色：
- 主要內容的深色（但不是黑色）（如文章標題）
- 二級內容的灰色（如文章發布日期）
- 輔助內容的淺灰色（可能是頁腳中的版權聲明）
通常，字體的粗細足以突顯區分文本層次的需求：
- 大多數文本的正常字體粗細（400或500，具體取決於字體）
- 要強調的文本較重的字體粗細（600或700）
在正文文本中不要使用400以下的字體權重 ; 它們可以用於大標題，但是在較小的尺寸下難以閱讀。如果您正在考慮使用較輕的重量來減弱某些文本，請使用較淺的顏色或較小的字體。
• • •
2.不要在彩色背景上使用灰色文字
使文本變為淺灰色是在白色背景上去強調它的好方法，但它在彩色背景上看起來並不那麼好。
那是因為我們在白色背景上看到灰色的效果是對比度降低。
使文本更接近背景顏色實際上有助於創建層次結構，而不是使其變為淺灰色。
使用彩色背景時，有兩種方法可以降低對比度：
1.降低白色文本的不透明度
使用白色文本並降低不透明度。這樣可以使背景顏色稍微滲透，以不與背景衝突的方式去強調文本。
2.挑選基於背景顏色的顏色
當背景是圖像或圖案時，降低不透明度使文本感覺太鈍或者太模糊，這時候挑選一種基於背景顏色的顏色比減少不透明度更好。
選擇與背景色調相同的顏色，調整飽和度和亮度，直到它看起來正確。
• • •
3.合理使用投影
不使用較大的模糊值來加深框的投影，而是添加距離偏移量。
這樣看起來更自然，因為它模擬了一個從上面照射下來的光源，就像我們以前在現實世界中看到的一樣。
這適用於表格或者輸入框的投影設計：
如果您有興趣了解有關陰影設計的更多信息，那麼“ Design Guidelines ”是一本非常棒的入門讀物。
• • •
4.使用較少的邊框
當你需要在兩個元素之間作出區分時，嘗試放棄使用邊框。
雖然邊框是區分兩個元素的好方法，但它們並不是唯一的方法，使用太多邊框可能會讓您的設計感到擁擠和混亂。
當你需要作出區分時，請嘗試以下其中一個想法：
1.使用框陰影
邊框投影可以很好地勾勒出像邊框一樣的效果，並且可以使設計看起來更精細而又不會分散注意力。
2.使用兩種不同的背景顏色
為相鄰元素提供稍微不同的背景顏色可以作出很好的區分效果。如果您已經使用了除邊框之外的其他背景顏色，請嘗試刪除邊框; 你可能不需要它。
3.增加額外的間距
有什麼更好的方法來區分元素而不是簡單地增加分割線？不引入任何新UI元素的情況下，增加元素之間的距離是一種好方法。
• • •
5.嘗試使用更小的圖標
如果你正在設計一些頁面（比如登陸頁面的“功能”部分），通常會用到大圖標，你可能會本能地抓住像Font Awesome或Zondicons這樣的免費圖標集，然後提升尺寸直到滿足需求。
畢竟它們是矢量圖像，所以如果增加尺寸，畫質不會受到影響。
雖然矢量圖像在增加尺寸時不會降低質量，但是當你將它們放大到3倍或4倍時，以16-24px繪製的圖標看起來會非常不專業。它們缺乏細節，給人感覺是不成比例的“矮胖”。
如果你一定要用到小圖標，那請嘗試將它們包含在另一個形狀中並為該形狀附上背景顏色：
這使你可以用實際圖標獲得更好的效果，同時仍然佔據較大的空間。
如果你有預算，你還可以使用設計用於較大尺寸的高級圖標集，例如Heroicons或Iconic。
• • •
6.使用一些邊框為平淡的設計增添色彩
如果你不是一名平面設計師，你如何在你的用戶界面中添加裝飾元素使其更加突出和富有設計感？
一個可以產生重大影響的簡單技巧是為界面的某些部分添加彩色邊框，會為設計加分。
例如，在警報消息的旁邊：
…或在突出顯示的導航中：
……甚至是在整個布局的頂部：
它不需要任何專業的設計師來專門設計，一個簡單的小技巧就可以為你的網站增加設計感。
如果你覺得挑選顏色很難？那可以嘗試從Dribbble上借鑒好作品的顏色組合，你會發現挑選顏色真的很輕鬆。
• • •
7.並非每個按鈕都需要背景顏色
當用戶可以在頁面上執行多個操作時，很容易陷入純粹基於語義設計這些操作的陷阱。
像Bootstrap這樣通過為你提供一個基於語義的按鈕樣式菜單，上面的按鈕，都是可以被點擊執行的：
“對於鼓勵用戶積極點擊的按鈕，將其設為綠色。“
“對於刪除數據這樣的危險動作，將按鈕設為紅色。“
語義是按鈕設計的一個重要部分，但是有一個更更要多維度：層次結構。
頁面上的每個操作都位於金字塔的某個位置。大多數頁面只有一個真正的主要動作，一些不太重要的次要動作，以及一些很少使用的三級動作。
在設計這些操作時，要注意區分它們在層次結構中的位置。
- 主要行動應該是明顯的。運用高對比度的背景色會很有效。
- 次要行動應該清楚但不突出。輪廓樣式或較低對比度的背景顏色是很好的選擇。
- 三級行動應該是可發現的，但不引人注目。像鏈接一樣設置通常是最好的方法。
“負面動作，他們不應該總是紅色的嗎？”
∗不必要！如果負面動作不是頁面上的主要操作，則最好按二級或三級按鈕處理。
當然，如果負面操作實際上是界面中的主要操作時，也可以將按鈕設置為紅色和粗體樣式，就類似下圖的對話框一樣：
不錯哦！