增强和提高網頁的視覺效果

1使用顏色和權重創建層次結構，而不僅僅是大小比較

7設計技巧，提高網頁視覺效果，增强先進感

在UI文字的樣式控制中，最常見的錯誤是過於依賴字體大小差异來創建對比度。

“這段話重要嗎？那就把它弄大一點。”

“這段話不那麼重要嗎？那就把它弄小一點。”

只使用字體大小的對比度，所產生的對比度是不够的，儘量結合顏色和詞的權重來創造更好的對比效果。

“這段話重要嗎？讓我們用更大膽的顏色。”

“這段話不那麼重要嗎？讓我們把它弄輕一點。”

如果可以，您甚至可以使用兩種或三種顏色：

主要內容應為深色（如標題，但不是純黑色）

灰色表示次要內容（例如出版日期）

支持內容的淺灰色（例如頁腳的版權聲明）

7設計技巧，提高網頁視覺效果，增强先進感

類似地，在UI設計中，兩個不同的單詞權重通常足以創建一個優秀的層次感

大多數文字使用正常的字體粗細（400到500，取決於字體）

對於需要強調的文字，請使用較重的單詞權重（600到700，取決於字體）

7設計技巧，提高網頁視覺效果，增强先進感

我們應該儘量不要讓文字的權重小於400，因為這部分字體的字型大小已經很小，小於400會使可讀性變差。如果你還需要減輕字體的重量，試著讓它更輕一些，或者用一種更容易識別和更輕薄的字體來代替它。

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

7設計技巧，提高網頁視覺效果，增强先進感

在白色背景下，將黑色文字更改為灰色是稀釋其視覺效果的好方法，但在彩色背景下這樣做則是另一回事。

事實上，在白色背景下將文字從黑色改為灰色實際上會降低對比度。

但在彩色背景下，如果想降低對比度，就應該讓文字逐漸接近背景色，而不是變成灰色。

7設計技巧，提高網頁視覺效果，增强先進感

通常有兩種方法可以降低與背景色的對比度：

（1）降低白色文字的不透明度

降低不透明度，可以讓背景色通過一些，以非衝突的管道降低前景文字與背景的對比度。

7設計技巧，提高網頁視覺效果，增强先進感

（2）基於背景色手動選擇文字顏色

當背景是影像或圖案時，半透明文字會影響可讀性。在這種情況下，最好根據背景的主顏色選擇相應的文字顏色。

7設計技巧，提高網頁視覺效果，增强先進感

三。陰影設計

7設計技巧，提高網頁視覺效果，增强先進感

與使用大範圍擴散模糊陰影相比，細微的垂直偏移陰影效果更明顯、更自然。它類比最常見的光源特性，即由燈光從上到下產生的陰影效果。

如果您對此感興趣，那麼材質設計指南將清楚地解釋如何生成此類陰影的詳細資訊。