如何強化色彩體驗
色彩的把控並不容易,大部分UI設計中都不會有過多的色彩存在,最多搭配三種顏色就夠了,如果是多彩色界面,那麼表示這個設計師足夠的配色能力才能駕馭,否則只會花哨至極。所以在每一個設計作品裡,都需要謹慎的使用顏色,並且懂得「平衡」它們,這樣你的作品就算不是優秀但至少會「合格」。
如果在設計過程中,你已經確定好了自己的調色板,但是又需要一些額外的顏色來做補充,可以運用陰影和色調來做一些變化,它們結合起來會呈現出一種和諧的效果。
一.60-30-10原則
這個室內裝修的配色原則是經時間檢驗的配色技巧,可以幫助你輕鬆地將配色方案組織在一起。60%+30%+10% 的比例是為了實現平衡色彩,這個公式之所以起作用,是因為它創造了一種平衡感,讓眼睛可以舒服地從一個焦點移動到另一個焦點。難得的是它的使用也非常簡單。
其中:
主色調佔60%
輔助色佔30%
重點突出顏色佔10%
(牆漆;傢具;配飾)
二.顏色的含義
科學家研究了幾個世紀以來某些顏色對生理的影響。除了美學,色彩是情感和想像力的創造者。顏色的含義很大程度上取決於文化和環境。這就是你經常看到黑色和白色的時尚商店的原因——他們想要使自己顯得優雅、品質卓越。
(Asos網頁)
Asos網頁設計是純粹黑白色,而「加入購物袋」按鈕選擇了綠色,這是有原因的。
· 紅色:激情、愛、危險
· 藍色:冷靜、可靠的、安全的
· 黑色:神秘、高雅、惡魔
· 白色:純潔、安靜、乾淨
· 綠色:嶄新的、新鮮的、自然的
三.灰度優先
在設計過程中,我們都喜歡不停地嘗試各種色彩和色調,但是當你意識到你花了3個小時來調整基色,卻發現你之前都在做無用功。這種習慣對於設計師來說具有致命的吸引力,但是你應該學會克制,避免總是走進這個死胡同。
相反,你要強迫自己專註於元素的間距、布局等,這樣會為你節省大量的時間。這種約束是十分有效的,而且它並不是一件無聊的事情。如果你想讓它更加好看,可以嘗試使用不同的色調。
(我在dribbble上的作品,只用了簡單的單色,專註於元素的調整)
四.避免使用純粹的灰色或黑色
我所學的用色技巧中,有一點很重要,那就是避免使用沒有飽和度的灰色。在現實生活中,純粹的灰色基本上是不存在的,同理黑色也是一樣。
(這張照片中最深的顏色色值不是#000,而是#0A0A10)
始終記得給自己的顏色添加一點飽和度,這樣潛意識中,用戶看著它會覺得更加自然和親切。
五.相信自然
最棒的色彩組合來源於大自然,這些色彩組合總會看起來非常舒服自然。從環境中選取適合的顏色組合,但是設計最佳的最終方案還是需要不停地調試你的調色板。
(要汲取(配色)靈感,我們只需看看周圍)
六.保持對比度
有些顏色很相配,但是有些顏色卻會相互衝突。關於它們是如何相互匹配、相互作用的規則,是可以在色輪上觀察到的。你應該對這套理論有認識,但是不必自己手動去操作。
(從左至右:互補色、相近色、三色系、分散的互補色、方形色系、矩形色系)
七.獲取靈感
當我們說起UI設計參考的時候,dribbble是最好的尋找靈感的地方。它也有搜索顏色的工具,所以當你想對其他設計師「如何使用特殊顏色」進行視覺研究時,請使用。
視頻、印刷設計、室內設計、時尚……有太多可以獲取靈感的地方。不要太依賴那些固有的調色板樣式,而是要把所有你看起來非常喜歡、覺得有趣、讓你眼前一亮的東西存起來。
(我經常從一些韓國視頻里偷顏色,它們非常漂亮)
八、配色工具
為了提高效率,在設計導航 里收集了一些特別棒的選色工具。它們會節省你大量的時間。
http://1.Coolors.co
這是我最喜歡的選色工具。你只需簡單地鎖定選定的顏色,然後按空格生成調色板。在Coolors上你可以上傳一張圖片,並從中生成一個調色板。最酷的事情是,你不僅限於一個調色板結果,它會給你提供一個選擇器,允許你隨時修改引用點。
2.Kuler
這個來自於Adobe的工具已經陪伴了我們很久了。它可以在網頁端使用,也有桌面本地版本。如果你使用的是桌面版本,可以把配色方案導入到Photoshop里。
3.Color Scheme
這個工具跟Kuler很像,不同的是,它生成的調色板里不局限於5種顏色。當你已經確定了主色調,想要找一些填充色的時候,這是個非常棒的工具。
http://4.Designspiration.net
想想一下,你已經有了一套配色方案,但是你還是想看一下他們組合起來的實際效果。這時候,強烈安利Designspiration給你。你可以選擇5種顏色,然後搜索到使用這5種顏色的設計圖。真的很贊,不是因為你可以查到應用了這些色彩的圖像,而是因為你可以真正看到它們在設計中真實被使用、實現的樣子。
5.Shutterstock Lab Spectrum (翻Q)
你可能會詢問——如果我想根據某特定色彩搜索圖片呢?Shutterstock有個功能,名叫Spectrum,可供你根據特定的顏色來搜索圖片。你甚至不需要訂閱,因為帶水印的小圖預覽足夠生成調色板。
6.Tineye Multicolr
但如果你想搜索擁有多種色彩混合在一起的照片,並指定每種色彩的數量,那麼Tineye會幫上大忙。這個網站使用了來自Flickr的1000萬個創意共享圖像資料庫。
總結
色彩是一個很難掌握的概念,特別是在數字時代。上面提到的技巧可以為查找正確的色彩這項工作提供一些便利。而如果你想創造出讓人驚艷的配色方案,最好的方法歸根到底,還是需要不斷地練習。所以,別光看文章,動起手來,沉浸到色彩的世界中,玩兒起來~
推薦閱讀: