界面設計 | 如何正確地打開配色方式?
本文筆者將為大家講述:在界面設計中,做顏色搭配可以參照的三個方法:“色不過三”、“確定主色”、“在色盤中尋找靈感”。
每次我開始做界面設計或者練習的時候,關于顏色的搭配總是不能夠很好的把握。我有很明顯的一個問題:緊緊圍繞的著主題色,導致整體頁面看起來很單調,但是要怎么搭配,這個度又覺得自己很難去把握,emmmm….被配色快逼死的我。
網上看了很多的文章,今天就來總結一下我學到的最簡單易用的三個方法吧!
色不過三
一個界面中的主要色彩不要超過三種,表達出主題即可,不管是做平面還是做網頁和APP,都要遵循這個最簡單的道理。
但是,我一開始以為色不過三是指一個頁面顏色最多不要超過三種。后來又多看了一些文章發現:這個是指不要超過三種色相的搭配。在單個色相中可以運用顏色明度或者飽和度做色彩的豐富性,而這種不要超過三種。
如果設計的界面顏色太多,用戶打開的第一眼印象會覺得有點亂,如下圖:
58同程的金剛區其實是比較有特點的,但是顏色有點過多,會讓用戶覺得整個界面在視覺上會稍微有點凌亂,可能也是因為產品的LOGO顏色比較多,識別度上來說是挺好的,但是用到界面搭配上會有點多了。
右圖中的VIPKID以統一的色彩風格為導向,加上鄰近色作為輔助色,增強用戶對產品的記憶,在視覺上也讓用戶覺得更加舒適和自然。但是,如果整個頁面都換成主題色的話,會讓用戶覺得整個界面沒有重點同時還很單調。
小結:
三色搭配,要控制在不超過三種顏色的色相范圍即可,運用單色的設計,會顯得單調乏味,而整體顏色飽和度過高會顯得界面雜亂無章而不透氣,因此我們在設計的時候要把控好顏色的數量,通過顏色的把控讓我們的界面主次分明。
確定主色
好的色彩搭配同時還需要符合產品的特征和想要給用戶帶來的氛圍,比如藍色能給人帶來平靜,因此大部分的閱讀和學習類的主色調用的是藍色。
想大家都會在做產品之前做一些競品分析,和主要針對人群劃分以及產品定位,當確定好了產品的方向和消費人特征之后,就可以在上圖中選擇合適的顏色來做細微的調整。
我們在設計初期需要對項目有比較明確的了解和定位,然后提煉出比較貼切的主色來進行定位設計。如下圖所示:
每種顏色代表的意義也有所不同,會導致整個的視覺方向和感覺也會有所不同。
從第一張圖中我們能夠發現淺藍色代表可靠,黃色代表活力,而這兩個顏色就比較符合產品的定位。因此在確認了主色之后,再來搭配輔助色和點綴色,就會更加容易一些,因為你心里已經知道需要搭配出怎樣的整體感覺出來。
而網頁設計、界面設計、banner設計等,主色調運用的規律也會有所不同,網頁和界面會將主色調運用在結構和裝飾上,而banner和海報則視覺上要求會比較高,將主色調運用在背景上,重點突出。
如下圖所示:
但是,這種形式大部分會在我們的視覺稿和練習里面使用的比較多。在我們平時的工作中,還是要根據所推的產品和主題來確定banner的顏色,但選擇范圍要在界面整體視覺效果比較協調和統一的情況下。
如下圖所示:
那么我們的主色從哪里來選擇呢?
最常見以及最普遍的用法就是講產品LOGO的顏色來作為主題色,這樣能夠有效的保持品牌基金和視覺上的一致性,如下圖所示:
產品LOGO這個要如何設計,這又是另外一篇文章的啦,我爭取下周出一篇文章來專門寫產品logo的設計。
不過有一點需要注意的是從視覺的角度上出發,選擇了飽和度比較高的色彩做主色時,要考慮用戶是否會在使用時造成視覺疲勞。你懂得~辣眼睛。。。
色盤里尋找靈感
解決了主色調的問題,在界面需要搭配其他輔助顏色的時候,如何搭配也是個很大的問題,要怎么搭配才能好看又平衡呢?我們可以從色盤里尋找靈感。
在色彩運用中能夠達到平衡色的有三種類型:
1. 互補色搭配
在界面的設計中,使用互補色的對比是視覺上最為強烈的,能夠給用戶的視覺產生強烈的刺激,如下圖所示:
這種使用的比較少,但是很容易就能夠讓用戶記住,因此音遇的這種孟菲斯風格目前在是市面上還是比較少見的,但它的整體風格讓用戶一打開就能夠記住。
2. 冷暖色搭配
用冷色和暖色的造成的視覺平衡是設計師經常使用的方法,也是很容易就出效果的,如下圖所示:
這種顏色的搭配使用由于技巧比較多,因此對設計師的要求比較高,需要多練習
3. 深淺色搭配
在設計時都用淺色會顯得界面不夠穩定,但是使用深色又會顯得比較沉悶,因此兩者互相搭配,能夠更好的平衡畫面,如下圖所示:
深淺色搭配最經典的案例是蘋果的產品圖,而最直觀給人的感受是高大上,淺色的背景搭配深色的產品,較多的空間留白,頁面整體穩定平衡,同時突出產品主體。
劃重點:
- 色不過三:三色搭配,要控制在不超過三種顏色的色相范圍即可,設計的時通過顏色的把控讓我們的界面主次分明;
- 確定主色:通過產品定位同時搭配定義色盤來確定主色方向;
- 在色盤中尋找靈感:通過色盤來選擇界面其他顏色的搭配,達到整體視覺的平衡。
參考引文:
- 《界面設計必備,三個快速選擇或搭配顏色的方法》http://t.cn/R54pEZq
- 《色彩設計方法》http://t.cn/RzHexmE
- 《如何在界面設計中色誘用戶》http://t.cn/E9ZLoO3
本文由 @潘團子 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協議
58同城,不是58同程~~字體錯了
是字錯了,不是字體錯了~~
58的定位就是親民,便捷,便宜。所以才這樣去做吧拋棄定位談設計都是耍流氓。
這位盆友,你是在說我耍流氓嗎