迅速提高設計美感，你需要這七個「作弊」小竅門

編者按：無論喜歡與否，每個網頁開發人員都不可避免地會遇到需要做出視覺設計決策的情況。在設計決策中，一些小的技巧可以實現事半功倍的效果。本文原題為7 Practical Tips for Cheating at Design，介紹了作者設計工作中總結的一些技巧，快來學習一下吧。

當你工作的公司沒有一個全職設計師，而你需要自己實現一個新功能的網頁時，你可能覺得

我永遠無法讓這個看起來很好，我又不是一個藝術家！

事實證明，有很多技巧可以用來平衡你的工作，不需要平面設計的專業背景。

這裡有七個簡單的小竅門可以用來改善你設計的美感。

1.使用顏色和字體粗細來創建層次結構，而不是字體大小

對網頁文本進行樣式設計時常犯的一個錯誤是過於依賴字體大小來控制層次結構。

錯誤觀念：重要的就用大字體，次要就用小字體。

不要將所有繁重的工作都留在字型大小上，你可以嘗試使用顏色或字體粗細來完成相同的工作。

正確觀念：重要用深色，次要用淺色

嘗試並堅持兩種或三種顏色：

主要內容用黑色（如文章的標題）

次要內容用灰色（如文章發表日期）

輔助內容用淺灰色（可能是頁腳中的版權聲明）

類似地，兩種字體權重通常足以用於網頁設計工作：

大多數文本的正常字體重量（400或500，取決於字體）

較重的字體重量（600或700）用於您要強調的文字

用於網頁展示的字體權重不超過400 ; 他們更適合大標題，較小尺寸下閱讀會讓讀者感到不適。如果您正在考慮使用較輕的重量來淡化某些文字，請改用較淡的顏色或較小的字體大小。

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

使文本變為淺灰色是在白色背景上淡化它的好方法，但在彩色背景上看起來並不太好。

使文本更接近背景色實際上有助於創建層次結構，而不是使它變成淺灰色。

處理彩色背景時有兩種方法可以降低對比度：

1.減少白色文字的不透明度

使用白色文字並降低不透明度。這可以讓背景顏色滲透一點點，以不與背景衝突的方式減弱文字。

2.手工挑選基於背景顏色的顏色

當您的背景是圖像或圖案時，或者當減少不透明度會使文字感覺過於枯燥或不適應時，這會比減少不透明度效果更好。

選擇與背景色調相同的顏色，調整飽和度和亮度，直到看起來合適。

3.正確使用陰影

好的陰影效果不是打造尷尬的層次感，而是模擬在現實世界中看到的那樣從上方照射下來的光源。

如果您有興趣進一步了解陰影設計，《材料設計指南》是一本很棒的入門指南。

4.少使用些分割線

當你需要在兩個元素之間創建分隔時，盡量學會留白，使兩者有一個邊界。

雖然邊界是區分兩個元素的好方法，但它們並不是唯一的方法，而使用其中太多元素可能會讓您的設計顯得混亂。下一次你發現自己到達邊境時，請嘗試以下其中一個想法：

1.使用框型陰影

框型陰影在繪製像邊框這樣的元素方面做得非常出色，但是可以更加微妙並且完成相同的目標，而不會分散注意力。

2.使用兩種不同的背景顏色

通常只需將相鄰元素的背景顏色略有不同就可以在它們之間進行區分。如果您已經在邊框上使用不同的背景顏色，請嘗試刪除邊框; 你可能不需要它。

3.添加額外的間距

什麼更好的方法來創建元素之間的分離，而不是簡單地增加分離？將事物劃分得更遠是一種區分元素的好方法。

5.不要使用過大的圖標

如果你設計的東西使用了一些圖標，你可能會本能地選擇設置大字體，畢竟它們是矢量圖像。雖然矢量圖像在增加尺寸時不會降低質量，但他們細節體驗還是有提升空間的，不當的伸縮會讓人感覺不成比例的「矮胖」。

6.使用邊框為平淡的設計添加色彩

如果您不是平面設計師，那麼您如何將其他設計美麗的、色彩豐富的用戶界面？

一個可以產生巨大差異的簡單技巧就是，您可以在界面的某些部分添加色彩鮮明的邊框。

例如，在警報消息的旁邊：

...或突出顯示活動的導航項目：

......甚至是整個布局的頂部：

它不需要任何平面設計人才為您的用戶界面添加彩色矩形，並且可以使您的網站更加「設計」。

7.並非每個按鈕都需要背景顏色

「這是一個積極的行動？將按鈕設置為綠色。

「是否刪除數據？將按鈕設為紅色。「

語義是按鈕設計的重要組成部分，但是還有一個更重要的維度被人們遺忘：層次結構。

網頁上的每個動作都位於重要金字塔的某處。大多數頁面只有一個真正的主要操作，一些不太重要的次要操作，以及幾個很少使用的三級操作。

在設計這些行動時，在層次結構中傳達他們的位置很重要。

主要行動應該很明顯。實心，高對比度的背景色在這裡很有用。

次要行動應該明確但不突出。輪廓樣式或較低的對比度背景色是很好的選擇。

三級行動應該是可以發現但不顯眼的。將這些行為設計為鏈接通常是最好的方法。

「破壞性行為怎麼樣，他們不應該總是紅色嗎？」

不必要！如果破壞性行為不是頁面上的主要行為，那麼給它一個普通顏色按鈕更好。

當負面行為實際上是界面中的主要行為時（如在確認對話框中），保存大的，紅色的和粗體的樣式：

編譯組出品。

編輯：郝鵬程、王雅琪

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！