網頁配色設計技巧:紅色

色彩是設計中能在第一時間打動用戶的設計元素,而紅色又是運用得更廣泛的顏色之一,今天分享的《網頁配色設計技巧:紅色》,就是能教你設計好紅色類UI的教程,肯定對您有用,enjoy!

色彩是光的魔術。而對於人類來說,其實光也是人腦的一個魔術。既然有魔術這樣的詞出現,我們就必須放棄對於色彩的固化的思考。比如,對於色彩的命名帶來的限制。

紅色是一種熱烈的色彩,它是所有色彩中最為奪人眼目的一種。紅色所擁有的熱情也是其他色彩所無法比擬的,當你想要表現出熱情活力的一面時,紅色當即是首選。然而,就像我們之前談到的,既有熱情洋溢的正紅,也有輕柔粉嫩的嬰兒粉紅,這就是基於「紅」這個意向上的色調變化所拓寬的情感空間。因此,在選用「紅」作為主題色時,必須要認真的了解設計背後的傳達目的,根據目的最終來瞄準精確的紅色調。

深紅色往往象徵著一種成熟的奢華,而用得不恰當也會顯露出某種邪惡,或讓人聯想到傷口血液這樣的意向。因此在網頁設計中並不多見。而高明度的紅則帶來某種熱情的同時又不至於暗沉,使用較多的也是這個區域的色彩。

紅色的鄰近色系是橙色和紫色,因此,紅色中也有橙紅和紫紅的參與,它們自然也夾雜了橙色和紫色的特點。

下面這個網頁中採用了紅色的明度漸變作為背景展示內容,紅色本身的感染力一覽無餘。紅色作為背景是非常大膽的想法,因此運用漸變會讓背景不會搶奪走主角的風頭,這也是在運用背景紅色的一個解決方案。

將正紅作為背景是十分冒險的行為,如果你將這樣做,那麼就要確保你的網站內容並不需要太多,也就是網站自身能發揮「奪眼球」的功能,而相對「實用」性將下降,毋庸置疑,一個全紅的網站看久了會讓人產生視疲勞。

 
而絕大多數情況下,紅色作為主色使用更為適宜,無論你採用什麼顏色作為背景,將紅色用在主要的組件上,例如按鈕、導航等,都能從背景凸顯出來,而不同擔心主要元素用戶很難留意。

將縮略圖設計為紅色,在白色背景上方十分惹人注目,增加了點擊的慾望。

 
我們知道,紅色在色輪上屬於暖色系,暖色系的色彩都有一種往前擴大的感覺。有時候為了削減紅色的這種激進,可以選用偏紫的紅色。

華美的紫紅色降低了飽和度以後,變為了淡淡的粉紅,讓人感受親切柔和,而作為背景色的存在則顯得非常舒適。

 
網頁設計這兩年開始越多使用淺粉色作為大面積使用,更多時候為了營造一種懷舊感,而同時又表達出時尚。粉色的背景往往可以使用高純度高明度的紅色作為主色。

 
相對而言,橙紅色則沒有紅色如此搶眼,而又沒有失掉紅色的活潑,更帶著橙色獨有的親和力。這樣的顏色在與飲食相關的設計中最為常見,可見它是一種開胃色。

非餐飲類的網頁設計中用到了橙紅色,也能讓畫面變得更加親切活潑。

 
食品類的網頁設計中常見用到橙紅色,這種顏色能刺激人的食慾,讓食物看起來更好吃。

 
淺色粉作為背景,將橙紅色作為強調色,這一組搭配顯得時尚優雅又新鮮活潑。

 

總結

紅色作為強調色而存在,似乎顯得理所應當。顯然,我們對紅色的開發還不盡全然,有些時候我們避免使用這種過於醒目的顏色是為了讓使用變得更流暢,所以,降低紅色的飽和度使其不過與搶眼,提高紅色的明度讓頁面變得「清爽」都是在輕設計中極為重要的原則。如果真的需要用到厚重的深紅色,也要試著降低其使用的比例,使其發揮精準的聚焦作用。

 

轉載註明:yunrui
原文鏈接:ifeiwu


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化