UI設(shè)計(jì)圖標(biāo)配色案例示范

　　對(duì)于圖標(biāo)配色，有的設(shè)計(jì)師會(huì)使用品牌顏色，有的則會(huì)直接采用其他設(shè)計(jì)師的配色，UI設(shè)計(jì)色彩極具重要性。這樣可以嗎?是可以，但在某些方面并不嚴(yán)格。今天AAA教育武老師將介紹一些圖標(biāo)色彩搭配的思考和分析，以期對(duì)您有所幫助。
 

　　如上圖所示，在紅盒子的地方，我對(duì)他進(jìn)行了白紙黑字的處理。先無(wú)視這個(gè)，讓我們優(yōu)先解決圓底圖標(biāo)的顏色匹配問(wèn)題。有的設(shè)計(jì)師在拿到原型圖后，直接開(kāi)始尋找參考，找到類似布局的app產(chǎn)品，然后吸收顏色，改變顏色位置，再完成，這樣會(huì)導(dǎo)致風(fēng)格和色調(diào)不匹配。之前有一期專門講過(guò)UI設(shè)計(jì)的配色經(jīng)驗(yàn)。


         面對(duì)這樣的需求，怎么辦?為了了解產(chǎn)品的定位，我們可以考慮一下。這種圖標(biāo)顏色通常遵循產(chǎn)品的主色調(diào)，例如您的產(chǎn)品采用什么樣式。是年輕化、時(shí)尚潮流、商務(wù)風(fēng)格還是奢華定位?每個(gè)產(chǎn)品的定位、顏色都有很大的不同?？纯唇貓D。
 

　　馬蜂窩和QQ音樂(lè)首頁(yè)產(chǎn)品圖標(biāo)顏色的使用，QQ音樂(lè)延續(xù)了品牌色彩，因?yàn)檫@些功能都是同一類，所以設(shè)計(jì)比較輕薄。讓我們看看蜂箱。為什么這些顏色?因?yàn)槊總€(gè)入口都強(qiáng)調(diào)獨(dú)立功能的品牌定義。兩者在顏色上都趨于年輕化，而黃蜂窩則更年輕、更具個(gè)性。因此，我們可以看到產(chǎn)品傾向于年輕群體。因?yàn)樗膬?nèi)部功能不同，所以顏色也跟著功能走。當(dāng)我們了解產(chǎn)品的色彩選擇定位后，下面就很容易做到了。

　　UI設(shè)計(jì)師需要掌握的技能很多，以小眾群體為例，了解該產(chǎn)品的定位。從功能上講，我們一般都知道與汽車有關(guān)的產(chǎn)品。由于是與汽車相關(guān)的產(chǎn)品，我們可以先分析頂級(jí)競(jìng)爭(zhēng)產(chǎn)品的顏色范圍和產(chǎn)品定位，從而推斷出此類產(chǎn)品的顏色安全范圍。這種做法可以減少錯(cuò)誤。第一步是確定主色，這一般是品牌的主色。
 

　　UI設(shè)計(jì)色彩有多重要？對(duì)于主色調(diào)，讓我們做一個(gè)顏色主屬性分析。
 

　　車輛篩選和幀號(hào)識(shí)別屬于部分功能范疇，中性，因此可以使用相似的顏色。其余的圖表和日常報(bào)到，其中，目前榜單上的大部分條目都是暖色，因?yàn)檎麄€(gè)氣氛相當(dāng)熱鬧，所以這里不能用冷色。每日簽到是這個(gè)應(yīng)用程序功能中比較重要的條目之一。它是保證日常生活的交通入口。因此，你也可以在這里繼續(xù)使用暖色，更加搶眼。根據(jù)前面的分析，確定了四種顏色。
 

　　雖然顏色是有的，但我們可以看到它是相對(duì)剛性和缺乏細(xì)節(jié)。我們可以分析一下目前互聯(lián)網(wǎng)的主流色彩趨勢(shì)，是更傾向于單色漸變還是雙色調(diào)漸變。在這里，我不需要太多的顏色，所以我選擇單色漸變。這也考驗(yàn)設(shè)計(jì)師的UI設(shè)計(jì)的配色經(jīng)驗(yàn)。
 

　　到目前為止，基本上已經(jīng)出來(lái)了。UI設(shè)計(jì)圖標(biāo)按鈕層次重要性。
 

　　現(xiàn)在應(yīng)該找出問(wèn)題所在。首先，紫色不適合在這里排名。紫色一般具有娛樂(lè)性，不適合汽車產(chǎn)品。其次，雖然日常入住使用的是暖色，但目前的顏色是粉色，實(shí)在不太合適。最后，再提醒一下，我們已經(jīng)定義了顏色。圖標(biāo)的設(shè)計(jì)其實(shí)很重要，圖標(biāo)我們可以收集品牌圖形進(jìn)行延伸，這樣一套完整的解決方案。

        以上就是本期UI設(shè)計(jì)圖標(biāo)配色案例示范，色彩是個(gè)極小的細(xì)節(jié)，卻能給人不同的心理暗示，更多資訊請(qǐng)持續(xù)關(guān)注AAA教育。