泛綠色網頁設計

  • 2020-03-16 15:55:34
  • 閱讀次數:
  • 作者:盈嵐科技小編
  • 來源:http://m.iy5y368.cn

【示例】綠色鄰近色應用網頁設計示例截圖如圖所示。

1.jpg

【分析】主色調基本上是屬于明度較高、飽和度較低的顏色,其中還使用了漸變色緩和地過渡,因此頁面看起來舒服協(xié)調。主色調是飽和度較高的翠綠色運用于背景色,幾乎是調節(jié)于整個頁面的關鍵色。如果沒有這一背景色塊,整個頁面容易發(fā)灰。

右邊的粉綠大塊面積稍多,有些灰的感覺,好在前景的文章使用了色度明度稍深的藍色壓住,稍顯好些,關鍵還是有白色的箭頭很好地把粉綠和藍色文字的色階拉開了距離。左邊的照片清晰且純度較高,也對整個頁面配色起到一定的調節(jié)作用。點睛色主要是標志的顏色,如果可以忽略不計,頁面配色更趨于平淡。

【點評】明度較高、飽和度較低的顏色,如果沒有明度較深、飽和度較高的顏色進行勾勒或者點綴,這個頁面配色看起來容易發(fā)灰。

 綠色+紅色

【示例】綠色與對比色紅色網頁設計示例截圖如圖所示。

1.jpg

【分析】主色調是有點黃色傾向的綠色,從HSB數值上可以看到H為98度,綠色特性較明顯。輔助色則是3個淺色系,起到調和整個頁面色彩的作用。粉紅和粉綠色分別取的是頁面綠色、紅色通過提高明度而得,因此整個頁面色彩前后呼應、配色調和。點睛色紅色的HBS模式H數值351度,在色輪表上偏向于紫色方位,因此傾向于冷紅色,色度上稍有些刺目和艷麗。

主色調綠色和點睛色紅色所放置的位置,讓頁面導航區(qū)域和內容區(qū)域視覺引導較為分明:主色調綠色的設計亮點是,既用于導航又很流暢自然地融合到背景,渾然一體;這里尤其是點睛色紅色放置于背景的處理很獨到,烘托突出于前景內容,在眾多網頁設計中并不多見。

【點評】整個頁面的配色取色于標志色,量身定做的感覺。適當地運用對比色有強調的感覺,但頁面配色處理上并不強烈、耀眼,因為使用了白色及其相應的提高明度的粉色做視覺的緩和處理。

小結

綠色是緩和健康的顏色,HSB數值H色相為120度時是正綠色。通過以上實例可以看到,偏向于黃色方位的綠色運用得最多,也就更受到大眾的歡迎。純正的正綠色在視覺感受上可能稍微顯得有些色度較低的生硬,配色難度稍大。不同的黃綠色飽和度、明度的不同變化可以表達不同主題的頁面效果。

點睛色可以是幾種,也可以是不同對比色的組合,有的起到豐富并活躍頁面配色的視覺節(jié)奏,有的起到調和整體頁面配色的作用。輔助色通常是同類色系或者鄰近色系,起到輔助并烘托主色調的作用。輔色調和主色調分別在不同的頁面作為唯一高純度色時,能夠起到挽救于整個頁面發(fā)灰的作用。當整個頁面配色明度太高色度降低時,頁面容易呈現(xiàn)發(fā)灰的感覺,可以適當地使用少許純度較高或者明度較低的色系來加以改善。

當前文章標題:泛綠色網頁設計

當前URL:http://m.iy5y368.cn/news/wzzz/3178.html

上一篇:黃綠色的頁面設計

下一篇:網頁設計中的黃色頁面配色

網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)