- 網頁配色設計手冊(寫給設計師的書)
- 孫芳編著
- 737字
- 2021-04-02 21:55:57
2.3 色彩和諧性原則
色彩是一種強有力的視覺語言,它甚至比網頁布局更具視覺影響力。色彩的搭配會影響整個網站的定位、風格、情感。通過不同的配色方案,可以給訪客帶來感官上的刺激,從而產生共鳴。


色彩和諧的網頁設計
每一種色彩都具有不同的情感,所以一個優秀的網頁設計,色彩的搭配是至關重要的。網頁中的色彩和諧,能給訪客一種心曠神怡的感覺,也能夠傳遞一種統一、正確的觀念,讓訪客覺得這個網站是認真、莊重的。

設計理念:該網頁采用海報型的布局方式,視覺效果強烈,利用全屏的圖片和簡潔的文案傳遞出產品的氣質和理念,同時給人大方、舒展的感覺。
色彩點評:該網頁以粉色為主色調,以紅色、洋紅色作為點綴色。整體采用同類色的配色方案,畫面色感和諧,多種點綴色讓畫面顏色變得豐富。
該網頁主題明確,非常具有吸引力和號召力。
以粉色調作為該網頁的主色調,非常貼切主題。
網頁中雖然內容豐富,但是條理清晰,非常易于訪客的理解和消化。


在該網頁中,有彩色的部分主要來自于網頁中的圖片。我們可以看到,這兩幅圖片色調是非常相近的,這也是網頁色彩和諧的關鍵。


該網頁采用單色調的配色方案,紅色的配色與商品的顏色相協調,整個畫面色彩統一、和諧。網頁中黑色的導航欄有穩定畫面效果的作用,白色的文字在紅色背景的襯托下,顯得灑脫、率真,而且易于閱讀。

提升網頁品質的技巧——主次分明的層級關系
視覺元素如果有清楚的瀏覽次序,那么應該明確它們的層級關系。層級關系明確的網頁設計通常會按照順序去瀏覽網頁,網頁的主旨也會在短時間內精準地傳遞給訪客。
如果一個網頁層級關系不明確,那么訪客在瀏覽網頁的過程中就會困惑,甚至離開網頁。
例如在圖中,標題文字與段落文字的字號存在著較大的差異,這就是層級關系的一種體現。

配色方案

三色配色

四色配色

五色配色
網頁設計賞析


推薦閱讀
- jQuery+Bootstrap Web開發案例教程(在線實訓版)
- Bootstrap響應式Web開發
- 眾妙之門:自由網站設計師成功之道
- Dreamweaver CC網頁設計自學經典
- Web前端開發精品課 HTML與CSS進階教程
- UI動效大爆炸:After Effects移動UI動效制作學習手冊
- 網頁制作實用教程(第3版)
- jQuery Web開發案例教程(在線實訓版)
- ADOBE DREAMWEAVER CS6 標準培訓教材
- CSS圖鑒
- 動態網頁設計與制作(HTML5+CSS3+JavaScript)(第3版)
- 網頁設計與制作
- 秩序之美:網頁中的網格設計
- 建筑CAD繪圖技術(第2版)
- 網頁設計與制作項目教程(微課版)