用戰術來改進你的設計，而不是天賦。
每個web開發人員都不可避免地遇到需要進行可視化設計決策的情況，不管他們喜歡與否。
也許你工作的公司沒有專職的設計師，你需要為自己的新功能實現UI。或者，你可能正在進行一個側面項目的黑客攻擊，你希望它看起來比yet- another-bootstrap網站更好。
你很容易放棄說:“我永遠也做不出這樣的樣子，我不是藝術家!”但事實證明，你可以用大量的技巧來升級你的作品，而不需要在平面設計方面有任何背景。
這里有七個簡單的技巧，可以用來改善你今天的設計。
一. 用顏色和字重來設計層級，而不是字號的大小
在設計UI文本時，一個常見的錯誤是過于依賴于字體大小來設計你的層級。
“這個文本重要嗎?? 我們讓它更大吧。”
“這個文本次要嗎?? 讓它更小。”
不要把所有繁重的工作都留給字號大小，嘗試使用顏色或字重來做層級區分。
“這是文本重要嗎???讓我們加重吧。”
“這是文本次級嗎???讓我們用淺一點的顏色吧。”
試著堅持兩到三種顏色:
?- 主要內容用黑色(但不是黑色，如文章標題)
?- 次要內容用灰色(如文章發表的日期)
?- 輔助內容的淺灰色(可能是頁腳的版權聲明)
類似地，兩個字重通常足以用于UI工作:
?- 大多數文本用正常字重(根據字體大小為400或500)。
?- 更重的字量(600或700)用在你想要強調的文本。
在UI工作中，不要使用小于400的字重;它可以用于大標題，但如果尺寸較小就很難閱讀。如果你正在考慮用更輕的重量來弱化某些文字，可以用更淺的顏色或者更小的字號。
二. 不要在有色背景上使用灰色文字。
把文字變成淺灰色是一種很好的方法，可以在白色背景下弱化它，但在有色背景下看起來效果不太好。
這是因為我們實際上看到的灰色對白色的影響減少了對比。
使文本更接近背景顏色有助于區分層級，而不是使它變得淺灰色。
有兩種方法可以減少對比度，當你使用色彩豐富的背景時:
1.減少白色文本的不透明度。
使用白色文本，降低不透明度。這讓背景顏色滲出一點，以一種與背景不沖突的方式弱化文本。
2.手動挑選一種基于背景顏色的顏色。
手動選擇一個顏色會比減少不透明度效果更好。尤其當你的背景是一個圖像或圖案時，或者當減少不透明度會使文本感覺太暗淡或顏色流失時。
選擇與背景顏色相同的顏色，調整飽和度和亮度，直到它看起來合適。
三.弱化你的陰影
不要使用大的模糊和擴展來讓模塊的陰影更加明顯，而是添加一個垂直的偏移。
它看起來更自然，因為它模擬了從上面照下來的光源，就像我們習慣在現實世界里看到的那樣。
這適用于嵌入的陰影，比如你可能在輸入框中使用:
如果你有興趣了解更多關于陰影設計的知識，MD設計規范是一個很好的入門。
四.少用分界線
當您需要在兩個元素之間創建分隔時，請少用分界線。
雖然分界線是區分兩個元素的好方法，但它們不是唯一的方法，而且使用太多會讓你的設計變得復雜和混亂。
下次當你發現自己想要用分界線時，不妨試試下面的方法:
1.給模塊添加投影
模塊的陰影很好地區分了一個元素，而且比較舒服，可以實現相同的目的，但是不會太引人注意。
2.使用兩種不同的背景顏色。
給相鄰的元素稍微不同的背景顏色，通常是你需要在它們之間形成區別。如果您已經使用不同的背景顏色添加到邊框中，請嘗試刪除邊框，你可能不需要它。
3.添加間距
有什么更好的方法來創建元素之間的區分，而不是簡單地增加分界線?增加之間的間距是一種很好的方法。
五.不要放大那些小的圖標
如果你正在設計一些需要使用一些大圖標的東西(比如登陸頁面的“功能”部分)，你可能會本能地獲取一個免費的圖標集，比如Font Awesome或Zondicons，并在它們符合你的需求之前增加尺寸。
畢竟它們是矢量圖像，所以如果你增加尺寸，質量不會受到影響?
雖然矢量圖像在增加尺寸的時候不會降低質量，但是當你把它們的尺寸放大到原來的3倍或4倍時，16-24px的圖標就不會顯得很專業了。他們缺乏細節，而且總是感覺不成比例的“矮胖”。
如果你只有小圖標，試著把它們圍成另一個形狀，然后給它一個背景色:
這樣可以使實際的圖標更接近其預期的大小，同時仍然填充較大的空間。
如果你有預算，你也可以使用一個高級圖標集設計用于更大的尺寸，像?Heroicons或Iconic。
六.在邊框上加顏色可以讓平淡的設計出彩
如果你不是一名平面設計師，你如何在你的UI中添加從攝影或彩色插圖中獲得的視覺靈感?
一個簡單的小竅門就是給你的界面添加色彩繽紛的小亮點，否則你會覺得有點乏味。
例如，在警告信息的一側:
……或強調選中的導航欄:
甚至是整個頁面的頂部:
它不需要任何圖形設計天賦，只要在你的UI中添加一個彩色的矩形，就可以讓你的網站感覺更“設計”。
很難選擇顏色?嘗試從一個受限的調色板中選擇，比如Dribbble的顏色搜索，以避免在傳統顏色選擇器的無限可能性中迷失。
七.不是每個按鈕都需要背景色
當用戶可以在頁面上執行多個操作時，很容易陷入設計那些純粹基于語義的操作的陷阱。
像Bootstrap這樣的框架可以通過給你一個語義樣式的菜單來鼓勵它，當你添加一個新的按鈕時，你可以選擇:
“這是一種積極的行為嗎?? ”那就使用綠色按鈕。”
“否刪要除數據?? 那就用紅色的按鈕。”
語義是按鈕設計的一個重要部分，但是有一個更重要的維度，通常被遺忘 :?層級。
頁面上的每一個動作都位于重要級金字塔的某個位置。大多數頁面只有一個真正的主要動作，一些次要的次要動作，以及一些很少使用的三級動作。
在設計這些操作時，重要是要體現它們的重要級。
?- 主要的行動應該是顯而易見的。用堅定的、高對比度的背景色在這里很好。
?- 次要的行動應該是明確的，但不是突出的。用線框或者較低對比度的背景顏色是很好的選擇。
?- 第三重要級的動作應該是可發現的，但不引人注目。將這些動作設計成鏈接通常是最好的方法。
“那些破壞性的行為，難道不是永遠都是紅色的嗎?”
不一定!如果破壞性的行為不是頁面上的主要動作，那么最好給它一個二級或三級按鈕處理。
當這個取消動作是這個界面中的主要動作，比如在一個確認對話框中。那應該用大的、紅色的和大膽的樣式:
加我微信一起討論設計問題：
更多的設計方法論請關注：
知乎：https://www.zhihu.com/people/jiang-zheng-jing-55/posts
簡書：http://www.lxweimin.com/u/46beb00802e7
嗶哩嗶哩：https://space.bilibili.com/112591164/#/
設計作品：
Dribbble：https://dribbble.com/jiangxiaobei
原文作者：Adam Wathan & Steve Schoger
原文鏈接：https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
