改善網頁視覺效果的7個設計技巧

羅華

對于每個網頁設計師而言，在設計過程中總會碰到需要作出設計決策的時候。也許你的公司并沒有全職設計師，而需求上則要求設計出全新的UI；又或者你正在制作一個你自己的個人項目，而你希望它比Bootstrap的默認效果要強一些。這個時候很多人會退縮：“我并不是一個藝術家，我沒法作出更好的效果！”但是事實證明，想要設計出更優秀的效果，合理地運用技巧其實更重要，而且是可以出效果的。

這篇文章，我們總結了7個簡單直觀的改善網頁視覺效果且能提升高級感的小技巧。很實用，希望你能喜歡。

1.使用色彩和字重來創造層次結構，而不是單純的大小對比

在對UI文本進行樣式控制的時候，最常見的錯誤莫過于過度依賴字體大小差異來營造對比。

“這段文字重要嗎？那么讓它更大一些吧?！?/p>

“這段文字是比較次要嗎？那么讓它變小一點吧?！?/p>

單純使用字體大小對比，所營造的對比并不夠，嘗試結合色彩和字重來營造更好的對比效果。

“這段文字重要嗎？我們讓它色彩更加大膽一些吧?！?/p>

“這段文字是比較次要嗎？我們讓它的色彩更淺一些吧。”

如果可以的話，你甚至可以采用兩到三種顏色：

主要內容采用深色（諸如標題，但是不要用純黑）

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

輔助性內容采用淺灰色（比如頁腳中的版權聲明）

類似的，在UI設計的時候，通常兩種不同的字重足以營造出優秀的層次感：

大多數的文本采用正常的字重（400 ～500，具體取決于字體）