對於網頁設計，有時候不僅僅是UI設計師的任務，有時候還可能是Web開發人員的任務，因此這篇文章將除了適合學UI的同學閱讀，還適合研究H5的同學。
有時候，在進行網頁設計時，很容易就陷入了設計的瓶頸，尤其是當自己的設計被一次又一次的打回，而自己痛苦地在電腦桌前表示，“我永遠都不能讓這看起來很好！”但事實證明，你可以用很多技巧來提升你的工作水平。
這裡就有7個方法，改善你的設計
使用顏色和粗細來創建層次結構而不是大小
樣式UI文本的一個常見錯誤是過分依賴字體大小來控制層次結構。很多都會有這樣的思路
“這個文字很重要嗎？讓它變得更大。“
“這個文字是次要的嗎？讓它變小。“
不要僅僅將所有繁重的工作留在字體大小上，而是嘗試使用顏色或字體粗細來完成同樣的工作。
“這個文字很重要嗎？讓它更粗點。”
“這個文字是次要的嗎？讓它更淺點。”
嘗試並堅持兩種或三種顏色：
主要內容的深色（但不是黑色）（如文章標題）；二級內容的灰色（如文章發佈日期）；輔助內容的淺灰色（可能是頁腳中的版權聲明）
同樣，兩個字體權重通常足以用於UI工作：
大多數文本的正常字體粗細（400或500，具體取決於字體）；要強調的文本較重的字體粗細（600或700）
在設計中，避免使用400以下的字體粗細; 它們可以用於大標題，但是在較小的尺寸下會變得難以閱讀。如果你正在考慮使用較細的字體來減弱某些文本，請使用較淺的顏色或較小的字體大小。
不要在彩色背景上使用灰色文字
在白色背景上，使文本變成淺灰色是強調它的好方法，但這個顏色的字體在彩色背景上看起來並不那麼友好。
那是因為我們實際上在白色背景上看到灰色字體的會產生降低對比度的效果。而使文本更接近背景顏色實際上有助於創建層次結構，而不是使其變為淺灰色。
使用彩色背景時，有兩種方法可以降低對比度：
1.減少白色文本的不透明度
使用白色文本並降低不透明度。這樣可以讓背景顏色稍微滲透，以不與背景衝突的方式去強調文本。
2.手工挑選基於背景顏色的顏色
當背景是圖像或圖案時，或者當降低不透明度使文本感覺太鈍或褪色時，這比減少不透明度更好。
選擇與背景顏色相同的顏色，調整飽和度和亮度，直到它看起來正確。
改善陰影的樣式
不使用較大的模糊和展開值來使框陰影更明顯，而是添加垂直偏移。它看起來更自然，因為它模擬了一個從上面照射下來的光源，就像我們以前在現實世界中看到的一樣。
這適用於您可能在井或表格輸入上使用的插入陰影：
使用較少的邊框
當你需要分離兩個元素時，嘗試避免突然看到邊框。雖然邊框是區分兩個元素的好方法，但它們不是唯一的方法，使用太多邊框可能會讓你的設計感到繁雜和混亂。
當你下次需要解決方法時時，請嘗試以下其中一個想法：
1.使用box shadow
box shadow可以很好地實現像邊框元素那樣的功能，但也可以更精細，並且實現相同的目的而不會分散注意力。
2.使用兩種不同的背景顏色
通常只需要為相鄰元素提供略微不同的背景顏色即可區分它們。如果您已經使用了除邊框之外的其他背景顏色，請嘗試刪除邊框; 你可能不需要它。
3.增加額外的間距
有什麼更好的方法來分離元素，而不只是簡單地隔開？將事物間隔得更遠是不引入任何新UI的情況下創建元素組之間區別的好方法。
不要放大那些小圖標
如果你正在設計一些可以使用一些大圖標的東西（比如登陸頁面的“功能”部分），你可能會本能地使用免費圖標集，然後放大尺寸直到滿足你的需求。
但是它們是矢量圖像，如果增加尺寸，難道質量不會受到影響嗎？
雖然矢量圖像在增加尺寸時不會降低質量，但在16-24px處繪製的圖標在將它們放大到原本尺寸的3倍或4倍時會看起來非常不專業。因為這些圖缺乏細節，總有種不成比例的“矮胖”。
如果你有小圖標，請嘗試將它們包含在另一個形狀中，併為形狀提供背景顏色：
這使您可以使實際圖標更接近其預期大小，同時仍然可以填充更大的空間。
如果您有預算，您還可以使用設計用於較大尺寸的高級圖標集，當然是要錢的那種。
用有色彩的重點邊框改善平淡的設計
如果你不是一名平面設計師，你如何在你的設計中添加那些從美麗的攝影或彩色插圖中獲得的視覺效果？
一個可以產生重大影響的簡單技巧是為界面的某些部分添加色彩鮮豔的邊框，否則會感覺有點乏味。
例如，在警告消息的旁邊：
或突出顯示活動導航項：
甚至在整個佈局的頂部：
它不需要任何圖形設計人才來為您的UI添加彩色矩形，它可以大大有助於使您的網站更“設計”。
並非每個按鈕都需要背景顏色
當用戶可以在頁面上執行多個操作時，很容易陷入純粹基於語義設計這些操作的陷阱。無論何時添加新按鈕，都可以選擇：
“這是一個積極的行動嗎？將按鈕設為綠色。“
“這會刪除數據嗎？將按鈕設為紅色。“
語義是按鈕設計的一個重要部分，但是有一個更常見的重要維度：層次結構。
頁面上的每個操作都位於重要金字塔的某個位置。大多數頁面只有一個真正的主要操作，一些不太重要的次要操作，以及一些很少使用的三級操作。
在設計這些操作時，在層次結構中傳達它們的位置非常重要。
主要行動應該是明顯的。
堅固，高對比度的背景色在這裡工作得很好。
次要行動應該清楚但不突出。
輪廓樣式或較低對比度的背景顏色是很好的選擇。
三級行動應該是可發現的，但不引人注目。
像鏈接一樣設置這些操作通常是最好的方法。
“破壞性的行動怎麼樣，
他們不應該總是變紅嗎？”
不必要！如果破壞性操作不是頁面上的主要操作，則最好給它進行二級或三級按鈕處理。
最重要的是保存大，紅色和粗體樣式，以便當負面操作實際上是界面中的主要操作時，就像在確認對話框中一樣：
這7個方法希望對你以後的工作以及學習有幫助，希望同學們可以設計出自己滿意，領導滿意，甲方滿意的作品。
另外，我們最新一期的UI精英班將在10月11日正式開班喲~
文章來源：medium.com作者：Adam Wathan & Steve Schoger翻譯：源寶
閱讀更多 源碼時代 的文章
