提交需求
賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱危覀儠?huì)在第一時(shí)間與您聯(lián)系!
作者:Aric 微博:@AricWorks Instagram:aricwu 個(gè)人設(shè)計(jì)作品:http://www.htnj110.cn/user.php?id=29036
小編:小欣
扁平化設(shè)計(jì)在一片爭議聲中悄然成為當(dāng)下眾多移動(dòng)應(yīng)用界面設(shè)計(jì)的主流風(fēng)格,而鮮明的配色更是扁平化設(shè)計(jì)的一大亮點(diǎn)。今天我們很高興邀請到資深設(shè)計(jì)師Aric來跟我們分享他的“好色”心得。來!讓我們都成為好“色”之徒吧~!
一、在扁平化設(shè)計(jì)里面,配色要注意什么?
1.切忌把賞心悅目、形式感放在第一位。
首先應(yīng)該明確,好的配色在產(chǎn)品中的意義:讓產(chǎn)品易用;讓用戶愉悅;定義視覺風(fēng)格,傳達(dá)品牌等。在拿到產(chǎn)品需求后,我們需要調(diào)查它的主要用戶群體,分析其功能、信息架構(gòu),從而確定產(chǎn)品的配色基調(diào)。所以,在產(chǎn)品的視覺設(shè)計(jì)過程中,配色要跟著功能走,切忌把讓賞心悅目、形式感放在第一位。
2.讓配色符合人們的預(yù)期
在生活中,當(dāng)你提到海洋,人們會(huì)想到藍(lán)色;當(dāng)你提到陽光,人們會(huì)想到黃色;這些是大自然給人們留下的色彩印象。
色彩還具有象征性,紅色,熱情;藍(lán)色,冷靜;黃色,溫暖。這些都是人們通過現(xiàn)實(shí)生活中的色彩印象建立起的色彩感受。每一種色彩給人們留下的印象感受是不一樣的,這些色彩印象可以幫助產(chǎn)品迅速建立用戶認(rèn)知。在我們在做設(shè)計(jì)時(shí),需要根據(jù)這些符合人們認(rèn)知的印象去設(shè)計(jì),盡量讓配色符合人們的預(yù)期。
3.配色不能雜亂,會(huì)增加用戶的記憶負(fù)擔(dān)。
色彩就像音符一樣,巧妙的組合才能譜出美妙的音樂,相得益彰。 相信大家都看過STEVE KRUG的“Don't Make Me Think”一書,要讓一款界面看起來毫不費(fèi)腦,切忌使用雜亂的配色。在產(chǎn)品的視覺設(shè)計(jì)中,除了對交互控件、字體等進(jìn)行規(guī)范,配色應(yīng)該規(guī)范、統(tǒng)一。建立有跡可循的配色規(guī)范,才能讓信息結(jié)構(gòu)層次分明,功能明確,讓人們一目了然。
比如說在移動(dòng)APP設(shè)計(jì)中,首先確定主題色,然后確定鏈接、按鈕、icon、點(diǎn)擊狀態(tài)等可以點(diǎn)擊交互的色彩,一般和主題色相同。除此之外文字的配色規(guī)范也很重要,可點(diǎn)擊的文字一般用主題色,其他的則按照重要程度用灰色系加以區(qū)分。最后確定背景色規(guī)范,背景色可以對內(nèi)容模塊的主次進(jìn)行很好的區(qū)分。
如下圖,instagram的配色規(guī)范:
instagram的主題色是藍(lán)色,主要的按鈕、鏈接也是藍(lán)色。其他的則以黑白灰相輔。
二、扁平化配色與擬物化配色的差異是什么?
扁平設(shè)計(jì)的配色更傾向于純色、色階很小的漸進(jìn)色。色彩更抽象,概括。
擬物設(shè)計(jì)由于要模擬現(xiàn)實(shí)中的物,所以在配色上更接近于現(xiàn)實(shí)世界。但是在配色的基本原理上還是大同小異的。
三、你覺得iOS7的icon色彩運(yùn)用得怎么樣呢?
ios7的icon整體配色非常棒,不管是從色彩的隱喻還是從美觀角度。但相對于高飽和度的圖標(biāo)配色,我更傾向于柔和的、經(jīng)久耐看的配色。
四、我了解到很多設(shè)計(jì)師習(xí)會(huì)用配色網(wǎng)站,但效果卻一般,你有什么好技巧嗎?
配色網(wǎng)站會(huì)給出色彩組合,仔細(xì)觀察分析,還是可以得到一些色彩的搭配規(guī)律。掌握色彩的屬性、相互間的關(guān)系才是最重要的。
下面總結(jié)幾種在APP設(shè)計(jì)中常用得配色方案:
1.一種彩色+黑白灰,這是入門配色,也是經(jīng)典配色,它可以很明確的讓用戶區(qū)分出信息的主次,引導(dǎo)用戶進(jìn)行主要功能的操作。
2.多種同色系彩色+黑白灰:
Mike | Creative Mints
3.多種對比彩色+黑白灰
Fabio Basile
但是我們要具體問題具體分析,根據(jù)實(shí)際的設(shè)計(jì)情景去使用它們。就像時(shí)尚雜志一樣,它可以給你無數(shù)套好看的搭配套裝。但具體怎樣穿,還要根據(jù)天氣、出席的場合、心情等因素去決定。
UNIQLO RECIPE 是優(yōu)衣庫的一款食譜APP,教會(huì)你做出精美的菜肴同時(shí),還教你怎樣去穿衣服。通過廚師們的菜肴給廚師們搭配同色系的衣服,整個(gè)界面的配色也會(huì)根據(jù)衣服和食物的顏色去變化,配色非常大膽,但很協(xié)調(diào)舒適,讓人有喜出望外的感覺。喜歡做菜的我對這款A(yù)PP也是愛不釋手,尤其是它的計(jì)時(shí)時(shí)鐘,時(shí)鐘的底盤是不斷變化的食物,色彩根據(jù)食物的顏色,跳躍變化,計(jì)時(shí)音樂也取自于廚具的敲擊,非常悅耳動(dòng)聽。
五、可以說說你自己學(xué)習(xí)配色的過程嗎?
我的配色想法主要來自于以下幾點(diǎn):
1.多看好的設(shè)計(jì),培養(yǎng)自己的品味。生活中的設(shè)計(jì)無處不在,觀察它們的配色,根據(jù)他們的使用場景去思考他們給你的感受。
2.觀察大自然,最美的色彩都在大自然里。不同時(shí)間段的天空、四季的花朵、植物,動(dòng)物的花紋,等等,都可以教會(huì)我們色彩的基本搭配方法。基本的鍛煉方法是拍照,我喜歡自然,在我的instagram(aricwu)里有很多自然的色彩。同時(shí)去享受生活,有時(shí)候食物也能帶來靈感,最近在學(xué)著切果盤,仔細(xì)去研究一番,水果有最美的色彩。
3.最后一點(diǎn),也是最重要的一點(diǎn):“多練習(xí),多試錯(cuò)”。
六、網(wǎng)站配色與APP配色有沒有區(qū)別?
由于移動(dòng)設(shè)備的興起,網(wǎng)站不僅要在PC上有好的展現(xiàn),在不同分辨率的移動(dòng)終端上也是。但是配色大同小異,比如說,Path的網(wǎng)站在手機(jī)上顯示,只是排版布局適應(yīng)了屏幕,配色并沒有變。
從使用情景考慮,在移動(dòng)終端的APP,也有可能會(huì)考慮移動(dòng)的因素去安排配色。比如說對于地圖導(dǎo)航APP,怎樣讓用戶在開車、走動(dòng)等場景,對路線清晰可見,這值得我們?nèi)ニ伎肌?/p>
七、請推薦五個(gè)你最愛用的顏色。
紅,藍(lán),黑,白,灰,
八、就你的作品/最近的項(xiàng)目為例子 解析一下其中的配色思路
現(xiàn)在進(jìn)行的作品還處在保密中,不能公開。
最近在學(xué)著切出好看的果盤,從中理解到了一些色彩搭配技巧,分享給大家,希望會(huì)對大家有所幫助 ;)
我希望做一個(gè)豐富多彩,層次感豐富的果盤,所以需要考慮水果的屬性,包括顏色、形狀、面積大小。
首先我們將水果進(jìn)行色系分類:
紅色系里面深紅色的葡萄偏暗,面積大,所以用來打底。草莓有好看的漸變色,還有綠色的花邊梗,用來做果盤的裙邊很不錯(cuò),鮮紅色的番茄可以對紅色區(qū)進(jìn)行提亮。
紅色水果擺放完畢后,接著將它的鄰近色黃色系擺上,芒果切片,便于品嘗同時(shí),增加層次感,枇杷的核沒有去掉,可以讓細(xì)節(jié)更豐富。
接下來將奇異果切片,梨分半,用綠色對整體進(jìn)行提亮,讓果盤很清爽。
最后撒上藍(lán)莓,做點(diǎn)綴,藍(lán)莓和枇杷核都有深色、面積小這兩個(gè)特點(diǎn),可以在面積和色彩上與整體拉開,很適合做點(diǎn)綴用。
雖然是第一次切果盤,但是很有樂趣,大家可以試一試;)
這是第二個(gè)次,哈哈:
小編后記:再次感謝Aric在百忙之中抽空來完成這篇訪問,小編初學(xué)UI的時(shí)候,也是經(jīng)常拿著作品請教Aric的,借此機(jī)會(huì)再次感謝!
讀完這篇文章,我最深刻的是Aric最后那招:【切水果】!?。‰m然我也很想提高我的“色感”,但對于一個(gè)超級無敵忙(懶)的人來說,我是不可能每次都會(huì)打開ps老老實(shí)實(shí)的畫圖啦~所以Aric的這個(gè)方法真的很好!又可以吃又可以練習(xí)配色和構(gòu)圖(玩)~還可以拍照發(fā)朋友圈報(bào)騙騙贊欸~~~Yeah~!
還有一點(diǎn),不知道大家在設(shè)計(jì)移動(dòng)應(yīng)用的時(shí)候有沒有這個(gè)習(xí)慣,就是在ps里面一邊畫,在手機(jī)里面一邊看。因?yàn)殡娔X顯示屏與手機(jī)是會(huì)有一些色差的,所以為保證用戶在手機(jī)上也能看得舒服,我平時(shí)就會(huì)一邊畫一邊看。那要推薦的神器就是Screen Runner(回到首頁,點(diǎn)擊“工具”就看到了,歡迎下載)還有Ps Play~
大牛,別默默的看了,快登錄幫我點(diǎn)評一下吧!:)
登錄 立即注冊