原作者：Adam Wathan & Steve Schoger 

譯：賀紅陽

用設計戰術代替天賦，提高我們的設計能力。

在我們設計開發過程中都不可避免的遇到需要做出視覺決策的情況，除了

專業資深高級設計師外，其他非專業設計師外不管喜歡與否，又或者我們的

公司沒有全職設計師，需要我們自己為新的產品實現UI。

有時候我們正在攻克一個新項目，并希望它看上去比之前的另一個網站更好。對于我們（技術人員或者非專業設計師來說）難為的說“我永遠也無法讓這幅畫好看，因為我不是藝術家。”但事實證明，有很多技巧可以提高我們的工作水平，而不需要有平面設計背景。

這里有7個簡單的方法，大家可以使用來改進我們的設計工作。

1使用字體顏色（color）和字體重量（weight）來代替字體大小（size）創建視覺結構層次

當我們設計UI，樣式文本化的時候，常見的錯誤是過于以來字體的大小，也就是字體的字號來控制層次結構。

“這文字重要嗎？那我們就讓它大點兒。”

“這是次層級文字嗎？那我們就讓它小點兒。”

不要把所有的重擔都放在字體的大小上，試著使用字體顏色和重量來完成同樣的工作要求。

“這文字重要嗎？那就選用一個字重大些的字體，讓它變得粗些。”

“這是次層級文字嗎？那我們就用一個明度高些的字體顏色。”

試著并堅持使用2-3種顏色：

用深色而不是黑做主要內容，就像一篇文章的標題。

灰色用做次層級文字內容，像一篇文章的出版日期信息。

更淺的灰用作輔助次次要內容，也許是頁腳的版權聲明信息。

同樣的道理，對于UI工作來說兩種字重通常就足夠了：

就英文字體來說，對于大部分的文本，普通字重（400—500），如果想要強調的文本可以是（600—700）；就中文來講，主要內容字體一般在常規30-34，標題和想要強調的文本中黑36-42

在ui工作中，英文字體遠離字重在400以下的字體，中文字體遠離16像素以下的字體。如果你考慮使用更輕的字體重量來淡化一些文字，那就使用一個更淺的顏色或者更小的字體大小代替。

關于字體重量（font weight）字體粗細的值：

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 繼承值

font-weight的屬性值有3種指定方法：第1種是關鍵字法，關鍵字包括“normal”和“bold”兩個；也是我們常見的；第2種是相對粗細值法，相對粗細也是由關鍵字定義，但是它的粗細是相對于上級元素的繼承值而言的，包括“bolder”和“lighter”兩個；第3種為數字法，包括從“100”到“900”的9個數字序列（注意，只能是100、200之類的整百數）。這些數字序列代表從最細（100）到最粗（900）的字體粗細程度。每一個數字定義的粗細都要比上一個等級稍微粗一些。

字體的粗和細這種描述方法本身就是一種相對描述，所謂粗和細也必須要有一個參照體。例如，在上面介紹的3類屬性值之間需要有一個相互對照匹配的過程，這是一個很難界定的過程。關鍵字“normal”相當于“400”，“bold”相當于“700”。除了“normal”和“bold”以外的其他關鍵字常常會令瀏覽器產生誤解，無法直接和數值相匹配，此時字體的粗細程度通常取決于字體本身的設置。

另外，有的字體看上去比較粗，但是它們的字體描述卻是“Regular、Roman、Book（常規）”、“Medium、Semi-（半）”或者“DemiBold、Bold、Black（黑體）”等字樣，這主要取決于該字體本身“normal”表示的粗細程度。

2不要在彩色背景板上使用灰色文字

在白色背景下將文本設置成淺灰色是淡化內容重要性的一個好方法。但是在彩色背景此效果就不那么好了。這是因為我們在白色上看灰色是弱化了對比關系。讓文本顏色更接近背景顏色，實際上創建了信息層次結構，而不是使用更亮的灰。

在彩色背景下有兩種方法降低對比度：

1減少白色文本的透明度

使用白色白色文本，降低不透明度。讓背景顏色稍微滲透些，以與背景不沖突的方式淡化文本

2.基于背景，選一個顏色

當你的背景是圖片或是圖案；或者當降低文字的透明度太枯燥或是文字降低透明度被沖淡時，這種方法都優于降低透明度的方法。

選擇一個和背景相似的顏色，調整它的飽和度和亮度直到你覺得合適為止。

3.偏移卡片的投影

不要使用大的模糊和擴展值，這樣會使得卡片的陰影更明顯，所以添加一個垂直偏移量。它會看上去更自然，因為它模擬了一個從上往下發光的光源，就像我們真實世界中經常看到的那樣。

這種內嵌式陰影可以很好的用在輸入表單上

如果你有興趣學習更多關于陰影設計的知識， Material Design是很好的設計指南（https://material.io/design/environment/elevation.html）

4盡可能少使用分割線和描邊

當你需要在兩個元素之間創建分割時，試著不使用分割線。

雖然分割線是區分兩個元素的好方法，但它并不是唯一的方法，使用太多分割線會讓你的設計感覺很雜亂。

下次當你發現自己想要使用分割線的時候，試試下面的方法：

1使用卡片投影

卡片投影是一個非常好的區分元素的輪廓方式，就像邊框分割線一樣，完成同樣的目標但它更巧妙而不分散注意力

2使用兩種不同背景顏色

為相鄰的元素添加稍微不同的背景顏色通常是在他們之間創建區別的好方法。如果你已經使用了不同的背景顏色，又使用了邊框，那請試著把邊框刪掉，你可能不需要它。

3添加額外的空間，也就是留白。

除了簡單地增加距離之外，還有什么更好的方法在元素之間創建分離呢?在空間上加大更多的距離（更多的留白）是一種好的方法，在不引入任何新的UI組件元素時來區分元素

5.不要放大本來應該很小的圖標

如果你正在設計一個可以使用一些大圖標的頁面，像一些登錄頁面的“特色”部分，你可能本能的使用免費圖標庫里的圖標，然后放大它們的尺寸直到符合你的需要。

兩個超棒的免費圖標庫分享給大家：

1FONT AWESOME (https://fontawesome.com/icons?d=gallery)

2 Zondicons(http://www.zondicons.com/)

“它們畢竟是矢量圖，所以如果你放大尺寸質量是不會受到影響的對吧？”

雖然我們增大矢量圖片的尺寸它們的質量是不會下降的，但是當我們把它們放大到3倍或者4倍的時候，那些原來用16-24px繪制的圖標永遠不會看起來非常的專業。因為它們缺少細節，并且總是感覺不成比例的矮胖矮胖的。

如果你只有小圖標，試著把它放在另一個圖形里，并且給這個圖形一個背景色：

這可以讓你的圖標尺寸更接近原始圖標尺寸，同時仍就充滿大的空間。如果你有足夠的預算，你也可以使用高級優質圖標集做設計，在大的尺寸上使用大的圖標，付費圖標庫如Heroicons和Iconic。

1  Heroicons  （http://www.heroicons.com/）

2   Iconic（https://useiconic.com/）

6.在平淡的設計中使用超重的彩色的邊框

如果你不是一名平面設計師，相比其他作品里的漂亮攝影照片或者顏色豐富的插圖作品，你如何在你的uI設計中添加少許的視覺天賦。

有一個簡單的技巧可以讓你的界面有一點不同，那就是添加超重的彩色邊框在你的部分界面里，它會使得你的界面不同于其他平淡的設計。

例如，沿著警告信息的側邊加一個超重的彩色邊框：

又或者是高亮顯示激活的導航欄項目

甚至是在橫穿整個布局的頂部：

它不需要任何的設計天賦增加一個彩色的矩形在你的UI作品里，并且它可以讓你的網站像你期望的那樣更具設計感。

選顏色很困難？試著從有限的顏色板中選取顏色，例如dribbble的顏色搜索，以避免被傳統顏色選擇器帶來的無盡的可能性。

7不是每一個button按鈕都需要一個背景顏色

當用戶在一個頁面上有多個可操作路徑時，很容易陷入基于純語義設計行為陷阱。

如Bootstrap這樣的框架式網站鼓勵你這樣做，當你添加一個新按鈕時，它會給你一個語義樣式菜單供你選擇。

“這是一個正面的行為嗎？是，那就使用綠色。”

“這是刪除數據的操作嗎？如果是，那就使用紅色按鈕。”

語義是按鈕設計的重要部分，但還有一個常常被忘記的重要的維度，那就是等級／層次結構（hierarchy）

頁面上的每個按鈕放在哪都基于重要性金字塔的某個位置。大部分頁面僅有一個主操作按鈕（primary action），幾個不重要的次級操作（secondary actions），和幾個很少使用的三級操作（tertiary actions）

當設計這些操作按鈕時，最重要的是考慮它們在層次結構中的位置。

主要操作按鈕應該是顯而易見的，實心純色的，與背景顏色是高亮度對比。

次要操作按鈕應該是明確清晰但不突出。輪廓風格或者是與背景顏色低對比是很好的選擇。

三級操作路徑應該是可發現但不顯眼。將這些操作路徑設置成鏈接樣式通常是最好的方法。

“那破壞性的行為呢，難道不應該是紅色的嗎？”

不一定！如果破壞性操作不是頁面上的主要操作路徑，那么最好對其樣式按照二級或者三級按鈕的形式處理。

保存大的，紅色的并且加粗的設計樣式，以便于當界面的主要操作路徑是負面的操作路徑時使用，比如在確認的對話框中：