用戰術來改進你的設計
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 : )