第八章
3.考慮圖片和網站色彩計劃之間的關係
隨著網速的提升、上網流量限製的減少,圖片在網頁以及手機應用中的比例越占越大,不僅是網頁,越來越多的應用開始使用精美的大圖。圖片的使用,能為用戶帶來更好的視覺體驗。圖片相比文字,色彩層級更加豐富,永遠比文字有著更多的吸引力。一張精美大圖,本身就是一件藝術品,運用到界麵中,能提升整個界麵的視覺感染力。
精美大圖的使用,多集中於餐飲、購物、新聞、音樂類網站或移動應用中。特別是在餐飲和購物類網站或者移動應用,精美的大圖展示勝過千言萬語的介紹,比文字更能直接地觸及用戶的心靈深處,刺激消費;音樂類網站或者應用中的精美圖片,藝術氣息強烈;新聞類網站或者應用中大圖的使用,能緩解長時間閱讀文字所造成視覺疲勞,而且能增加其真實性,使內容更加生動。
精美大圖運用的好壞取決於界麵的色彩搭配。一般來說,設計講究的網站為保證視覺體驗的流暢性,會對所有使用的圖片做一些修飾,使其能融入到色彩氛圍當中。我們常常看到一些應用圖片很多的界麵,其主色大多都是白色、灰色等無彩色,目的就是為了突出色彩精美、豐富的圖片。
讓彩圖的色調和界麵的色調自然地搭配在一起還有兩個技巧。第一種技巧就是在彩圖中選擇一個核心色彩,作為界麵的強調色或者菜單色彩。如170000+ Recipe 應用界麵就是這個技巧的典型案例。強調色(淺赭石紅)可以看做是從食物彩圖中提煉出來的核心色彩,作用於九宮格布局菜單圖標的色彩和搜索框的色彩。
170000+ Recipes 是一個專門介紹西餐各色菜譜知識的應用,收集了眾多精美實用的西餐菜譜可供用戶賞析。用戶可以從中認識到各色各樣不同風味的菜譜並學習製作。界麵采用牙黃灰作為主色,搭配著淺赭石紅、淺棕色,整個界麵色調溫和、清新、細膩,視覺感受很舒服。首頁選擇的圖片很吻合界麵整體視覺風格,引起用戶的食欲。界麵簡潔大氣,圖標的造型設計也十分簡潔直觀。
名稱: 170000+ Recipe
主色彩 R252 G249 B236
輔助色彩 R251 G236 B194
R174 G154 B119
R143 G120 B076
R183 G188 B010
強調色彩 R213 G103 B076
讓彩圖的色調和界麵的色調自然地搭配的第二種技巧就是先決定整體網站色彩後,再相應製作出照片和彩圖。例如由環球音樂和索尼聯合推出的一個音樂視頻應用VEVO 中大量運用到精美的圖片。
VEVO 的主色調以黑色為主,由灰色到黑色的漸變,酷感時尚,更重要的是黑色、灰色可謂是百搭色。推薦歌手的圖片也經過精心選擇和處理,能與主色調相呼應,細節把握十分完美,盡管圖片眾多,但始終和界麵色調比較協調。
名稱: VEVO
主色彩 R000 G000 B000
輔助色彩 R036 G036 B036
強調色彩 R223 G033 B000
1.4.3 個性
基本色相的數量是有限的,但配色方案及給人的感受卻是無限豐富的。比如客戶要求以“粉紅”色相來作為主色,但是其實“粉紅”涵蓋的範圍是很廣的。鮮亮飽和的粉紅、柔和淡雅的粉紅,這些粉紅形成的情感差異很大,印象自然不同。
本書中所列舉的配色感覺關鍵詞,如自然的、溫和的、華麗的,以及按色相配色,具有一定的典型性和普遍意義,是日後經常用到的創作參考,但不能程式化,即使是同一行業類型的項目,傳達類似的情感類型,色彩的表達方式也是多種多樣的,必須深入挖掘每個客戶自身的特點,從設計細節入手,創作出其獨特的配色方案,和版式、文字、插圖等其他視覺元素構成一個令人印象深刻的個性的視覺風格,從眾多的網站中脫穎而出。
例如嬰幼兒網站常用的色彩有淺粉色(最常見的主色)、淺藍色、明黃、橙黃、淺綠色,基本都是采用亮色調和淺色調。如果進行創造性的個性化設計,就會造成缺乏新意的雷同,這類網站最為突出的問題就是在網站色彩設計上容易出現同質化。為了避免受眾的審美疲勞,很多網站也力圖創新,例如貝因美網站盡管使用的是最為常見的粉紅色,但很好地搭配了鮮亮的藍色,並很好地突出了其品牌色(紅色),消除過於粉嫩的感覺。幫寶氏網站使用其品牌的標準色(青綠色)作為強調色,運用精彩的大圖片作為網站的背景,很好地烘托了氣氛,讓人過目不忘。