用色彩打造專業(yè)的視覺效果

上周看到這篇文章,很有收獲.色彩的使用無論是在網(wǎng)站還是工作各個環(huán)節(jié)的溝通都很重要.好的色彩可以讓用戶更舒服,更愉悅,同時營造更好的氣氛.但同時很多問題需要在產(chǎn)品設計環(huán)節(jié)就該解決,否則會遺留到視覺設計并且無法解決.這篇文章講了很多基礎理論和具體的方法論,尤其喜歡這種文章,翻譯出來…PS:文章很長,要有心里準備…是什么能讓一個設計看上去是協(xié)調的,有條理的,專業(yè)的?答案是”色彩”.不是所有的項目都要用那種淺的”公司藍”(corporateblue)才會看上去很專業(yè).色彩規(guī)劃(planningcolor)就是建立一個描述有哪些色彩可以用以及如何使用的框架.色彩是最難辦的設計元素.“好”的色彩是像個人口味和感覺一樣難以把握的,而且還有諸如對比度,顯示器校準等技術上的限制因素.但是對于內容來說,色彩是至關重要的.如果你認為一個網(wǎng)站很重要,值得花時間來完善,那么用戶通常也會認為它很重要,會花時間來讀.選擇好的色彩就是為了達到這種效果.在本文中,我們會回顧一些用來給你的Web設計建立漂亮的調色板的技術.如果想讓網(wǎng)站看上去是沒有條理(unplanned)的,最好的辦法就是隨機選擇顏色.即使當用戶第一次瀏覽網(wǎng)站的首頁時,色彩也會影響到他們對于內容的態(tài)度.這個網(wǎng)站會讓人興奮嗎?可信嗎?大膽嗎(daring)?乏味嗎?有政治傾向?很正式的嗎?跟印刷制品一樣,色彩會影響人們對所見到的信息的理解.找到合適的色彩并不容易,但是整體過程還是有跡可循的.好的設計策略會包含一個配色方案(比如為了傳達信息和營造氛圍,色彩的可選范圍.)以及這個方案的具體安排.讓我們假設你需要設計一個專業(yè)的網(wǎng)站.(當然這個很有可能演變成一種喝酒游戲(drinkinggame):要嗎是客戶要求網(wǎng)站是”專業(yè)的”,”簡潔的”或者”現(xiàn)代的”,要嗎就是”我喜歡這個網(wǎng)站,扒下來.”)配色方案取決于網(wǎng)站的特點.比如,銀行和花店的網(wǎng)站看上去都會很專業(yè).但是人們可能不會喜歡在一個”公司藍”或銀灰色的網(wǎng)站買花.或者想象一下美國銀行的網(wǎng)站變成紫色和黃綠色.一個”專業(yè)”的設計會讓用戶覺得,這個網(wǎng)站是很嚴肅正規(guī)的展示它的主題,即便主題可能是很輕松的.無論哪種色相(hue)還是色值(value),“專業(yè)”都意味著是協(xié)調的,有條理的,經(jīng)過深思熟慮的.使用灰度與色彩工作的最好方式就是從沒有色彩開始.將設計中的色彩移除之后可以暴露出問題的根本原因,而這些問題在開始考慮哪種黃綠色的色度(深淺)更好看之前就該去解決.如果設計在黑白效果下就感覺不好,那就需要做一些改變了.每個頁面是否都有清晰的目標?設計是否能引導讀者讀完全部的內容?內容是引人入勝的,鼓舞人心的還是客觀的傳遞信息?標題清晰嗎?文字鏈是否與其他文字有對比?色彩可以加強這些效果,但是布局,樣式和組織中的問題都無法單純的通過色彩就能夠解決.如果要重新設計,請先去掉顏色.這個簡單的去色行為真實的展示出網(wǎng)站的立足點.(事實上,重新設計應該開始于重新評估你的目標和內容,不過這是另外一個故事了.)有時,去掉色彩本身就是一種解決方案.我曾經(jīng)跟一個網(wǎng)站設計公司一起工作,重新設計他們的網(wǎng)站.對于這個項目,他們是很挑剔的,希望能更好.但是如果你認為為你自己設計很難,試著與小組一起解決.在項目結束前,下班后我們之中的三個人一邊喝著酒一邊看著第九稿設計.我突然的把photoshop的圖層都合并,然后點擊”去色”把紫銅色和藍色的設計稿變成黑白色.讓每個人都驚訝是,它起作用了.那周結束之前,我們用紅色強化后完成了一個”暖”灰色的設計.當先前的客戶開始贊賞這個新的設計并且接到更多其他的客戶電話時,我們知道我們成功了.用Photoshop的斜視濾鏡來測試你的配色方案.用網(wǎng)站至少三個頁面做截圖.在Photoshop中打開每個截圖都復制一下背景圖層給新的圖層做一下10px左右的高斯模糊使用圖像->修改->色調分離.使用8到12之間,或者使用濾鏡->像素化->馬賽克.使用15到30像素這樣可以看到真正的主色調.整個配色方案,用的越多的顏色,那個顏色在用戶的印象中越重.曾經(jīng)網(wǎng)站的布局和組織過去都沒有色彩,現(xiàn)在是時候來選一個調色板了.但是選哪個?用多少?調整你的色相色彩具有三個屬性:色相,飽和度,色值(有時會叫做明度)(譯者注:想深入了解的話可以讀這個:\o"關于顏色的基本理論"關于顏色的基本理論)飽和度是顏色有多濃:霓虹燈效果的顏色就是飽和度很高,而蠟筆的顏色就是飽和度低一些.色值表示了顏色有多亮(比如,與黑色或者白色有多接近)色相決定了色彩屬于彩虹的哪個部分,比如紅色或者綠色;這個就是人們容易出錯的地方.不協(xié)調的色相可以很容易的K掉一個配色方案.一個設計可以用一種色相的上百種不同深淺的顏色,從蠟筆到霓虹燈,看上去仍然是有條理的.但是如果色相使用錯誤的方式混合在一起,整個配色方案就會混亂了.避免不協(xié)調色相的一種辦法就是使用第三色來分隔.黑色,灰色或者白色的緩沖區(qū)是最安全的,因為灰色系是中性色彩:你可以把黑色,白色,灰色與彩虹中任何部分混合在一起并且很協(xié)調.第二種方案是不同的色相使用不同的比例.如果配色方案中有紫色和棕色,那么設計中可以包含很多深棕色,并且加入一些明亮的紫色來點綴.另一個可選方案是更改色值.純藍色和亮青色是很一般的組合,但是深藍色(海藍色)和靛青色(天藍色)可以通過足夠的對比來彼此襯托.紅色和紫色差異夠大,但不會沖突,同時又足夠接近而不像是刻意為之.淺紅色(粉色)和深紫色可以提供對比.遺憾的是,避免錯誤的顏色組合與選擇好的顏色無法劃等號.如果你滿意了,但是你的用戶感覺不舒服,那就不是一個成功的配色方案.發(fā)現(xiàn)優(yōu)秀的配色方案優(yōu)秀的配色是從哪來的?有上百種顏色和上千種組合,怎么選擇?小的靜態(tài)網(wǎng)站的設計師應該從內容取色.一般是通過相片.我最近做的一個由8個頁面組成的網(wǎng)站,頂部被一個精心制作的金屬架貫穿,與之相對比的是深藍色的天空.使用Photoshop的吸管工具,定成5*5的尺寸,我選取了天空的最深和最淺的部分,并應用到邊欄,鏈接,標題,頁腳,同時調整了色度.當客戶問我們是如何把網(wǎng)站設計的這么好,并且這么快,我們回應說”這才是我們該做的”.但是實際上顏色就在那,我只是找到它.(譯者注:很有陸游的”文章本天成,妙手偶得之”的風采啊…)對于吸引目標用戶的顏色,他們平時穿的衣服是一個優(yōu)秀的指示器.看看你的用戶穿的什么,你會知道什么顏色能讓他們覺得舒服.如果你的網(wǎng)站是關于,描述體育聯(lián)盟的,想想他們比賽時穿的衣服,這要比他們平時工作時的好.如果你幸運的得到目標用戶的照片,一并看看.你需要得到這群人的中間色(average).但是如果照片無法利用,那么去購物吧.商業(yè)界的服裝設計師對于每種心情和生活方式都有優(yōu)秀的色彩感.當然不用跟第五大道上的高級時裝一樣.通過google搜索“campingstores,”“babyclothes,”“skiandswimwear”和“casualliving”會找到很多很好的色彩組合.人們會根據(jù)他們的品味穿衣服.如果你使用他們喜歡的顏色,在你的網(wǎng)站上他們會覺得更舒服.使用紋理通過微小的改變色相,飽和度和色值來制作紋理.單色紋理(比如,只有一種色相的紋理)和圖案毫無沖突的給大部分網(wǎng)站提供了微妙的維度.簡單而特別的紋理背景很容易建立:給內墻(interiorwall)照個像或者其他一些光禿禿的但是感覺粗糙的東西.用photoshop中打開復制背景層然后重命名為”texture1″用配色方案中的顏色將背景填充把圖層”texture1″的屬性改為”柔光”并把透明度調為30%在你的網(wǎng)站上試試.如果看上去不對,繼續(xù)調整透明度.圖層的名字是經(jīng)過考慮的.你可能在嘗試多張的照片.但是要避免給圖層命名成類似”walltexture”或者”papertexture”.你要更關注在你網(wǎng)站中的效果,而不是從何而來.建立優(yōu)秀的配色方案好的配色方案有一定的特性.把它當成是一個框架或者建立一個指南來保證設計的一致性.配色方案應該:列出2到5個可以一起使用的色相描述在設計中色相可以改變多少每種色相深淺的依據(jù)與黑色和白色對比時可以很好的工作下面是個例子設計師通過選擇感覺很好的暖色調開始的.沒有什么邏輯性的,只是一個模糊的目標”秋天”,還有她的感覺.在Photoshop中,兩個圖層運用了不同深淺的黑色和白色(進行疊加).每個圖層的疊加模式都是”柔光”.對于最右側的顏色純黑有些過于暗了,所以圖層的透明度也進行了調整.為了統(tǒng)一色彩,建立一個新的用純紅填充的圖層.疊加模式是”著色”,透明度是大概40%(注意:圖層的順序很重要.如果著色層在黑白圖層的下面,顏色就會變了)它提供給設計師15種顏色可以選擇.她選擇了具有一定范圍和色相的4種.這些顏色與白色是對比的.變化是很重要的,所以設計師繼續(xù)嘗試.當這些顏色與黑色對比時看起來如何?如果我們把顏色稍微加深會怎么樣?如果一起改變會怎么樣?在”tint”層使用圖像->修改->色相/飽和度來創(chuàng)建一個”不秋天”的感覺,但是顏色仍然很協(xié)調.也許這組顏色可以用于復活節(jié).最終的結果是一套配色方案:一套使用不同的色相,搭配效果很好的色度范圍.下載示例文件使用框架明天的圖片,相片,圖標跟今天的配色方案可以很好的搭配嗎?網(wǎng)站在6天后會需要什么圖片?六個星期后?或者六個月呢?但是內容是你配色方案的一部分.你應該通過讓圖片參考配色方案或者讓配色方案參考圖片的方式來解決這個問題.貫徹你的配色方案,甚至照片,這是獲得所有頁面都保持一致的很好的辦法.最簡單的解決辦法是找到符合你配色方案的圖片.請記住一個配色方案會留有一些余地:讓圖片的主色調來符合,這樣會起到很好的效果.很多相片存儲站點允許你通過顏色來搜索(通過原色的色相:比如紅,綠,藍).如果一個圖片沒法匹配你的配色方案,那么要做一些著色調整在Photoshop中打開圖片建立一個新的圖層,把疊加樣式選為”著色”使用配色方案中的一種顏色來填充,最好是跟圖片最接近的把顏色圖層的透明度調整為50%繼續(xù)調整透明度直到你在圖片的原色和網(wǎng)站色系之間找到一個優(yōu)秀的平衡點.這種技術可以使用在照片,圖片和圖標上-任何以像素為基礎的東西(如果你自己沒有圖片,請確認你有權修改它.你可以改進它在你網(wǎng)站中顯示的效果,但是你仍然是對其他人藝術成果的不尊重)看起來專業(yè)沒有一組顏色本身是看起來”專業(yè)”的.甚至你寧愿按照一些步驟來獲得更協(xié)調,有序的感覺.無論網(wǎng)站是關于什么的,用戶都會直到它讓它自己很認真.貼士當你認為你有一個好的配色方案時,至少試一個星期.對色彩的評價需要感覺,而這個感覺需要一段時間來積累.給自己一點時間來充分的吸收這個配色的特點.當你認為你有一個好的配色方案時,別讓它變得枯燥無味了.你用戶的感覺跟你一樣,要保持變化.4個月之后來回顧一下這些顏色并做個筆記.然后問一下:它們還適用嗎?如果不,應該改什么?哪些因素會影響你的修改?少用鮮艷的顏色.一小塊鮮艷的顏色會吸引用戶,但是如果用戶到處都能看見,他們會漫無目的的亂看…一些人認為配色方案的色相范圍應該小,留一些余地可以讓你的設計更有深度.避免使用純的原色比如紅色,綠色,藍色和黃色.給它們賦予真正的個性:紅,但是有些紫.藍色,但是有點綠.加一些橙色讓黃色更”暖”確保你的色彩在”褪色”后依然起作用.如果你選擇紅色,請記得亮紅代表女性,暗紅色看上去像鐵銹或者鮮血.黃色會像褪色的陽光一樣變成深棕.深藍色是神秘的,淺藍色是寧靜的-如果你增加飽和度,或許是水藍色.(譯者注:覺得這塊應該是對于印刷品等可能褪色的產(chǎn)品來說的)Mac用戶,請配置你的顯示器.打開”系統(tǒng)偏好設置”點擊”萬能輔助”.把你的顯示改成”灰度紋理”.當你想沉浸在黑色電影時這樣也有用.無論你想讓你的網(wǎng)站感覺有多生