色彩一刀斬!UI設(shè)計配色之主色的魅力
83 2017-06-01
一直關(guān)注交互時代的童鞋們應(yīng)該都知道配色在UI設(shè)計中的重要性!在交互時代的UI設(shè)計培訓(xùn)課程中,也有專門講解配色的階段,如果我們能夠熟練的運用顏色,能夠讓自己的UI設(shè)計更加酷炫哦!今天交互時代就和大家介紹一種簡單的方法,還附有許多優(yōu)秀實例!還等什么?快學(xué)起來!
到了年底,UI設(shè)計師也還是會很忙的,要設(shè)計活動頁面啦、APP界面改版啦等等。那我們應(yīng)如何快速的選擇或者搭配色彩呢?大家第一眼看到“選擇”與“大配色彩”必然覺得別扭,認(rèn)為這肯定是個坑,要各種折騰,其實很多UI設(shè)計師新手都會碰到這樣的問題,下面就讓我們單刀直入的說說配色吧。
在我們進(jìn)行UI設(shè)計的時候,肯定要有個色表,使用起來才更順手,因此我們要對色彩做到心里有數(shù)。
而色彩的功能能夠劃分成:主色、輔色、裝點色。現(xiàn)在我們就主要來講講主色。
主色的魅力
產(chǎn)品的主色調(diào)會決定其風(fēng)格,在許多產(chǎn)品的UI設(shè)計中色彩都擔(dān)當(dāng)了重要的情感元素。在UI設(shè)計初期,我們需要明確的了解項目定位,才能夠選擇出最適合的主色。而每種顏色都有其獨特的感覺,這種感覺會體現(xiàn)出UI設(shè)計要表達(dá)的主要情感。
下面,我們來看看各種產(chǎn)品對其LOGO顏色的延伸吧,將LOGO顏色設(shè)為主色,能夠讓產(chǎn)品具有統(tǒng)一性。
從上圖我們還能看出,這幾個產(chǎn)品的UI設(shè)計主色的使用面積也是十分相似的。首頁使用的主色面積是較多的,而導(dǎo)航欄則全都填充了主色。
二級頁面中的主色則使用的沒那么多,主色只是起到點綴效果。
由此我們可以去思考,當(dāng)用戶一打開產(chǎn)品時,我們更希望用戶能夠?qū)Ξa(chǎn)品有印象,而進(jìn)入信息頁之后,則更注重頁面的實用性,讓用戶更快捷的達(dá)成目標(biāo)。因此,會在首頁使用更多的主色,信息頁則使用在關(guān)鍵的操作點上。
同時還發(fā)現(xiàn),這幾個產(chǎn)品的界面設(shè)計主色面積使用也是非常一致。首頁中使用的主色彩面積較大,導(dǎo)航條全部填充了主色。在二級頁面中則使用的面積較少,將主色點綴到界面中。
我們可以這樣去理解,在用戶使用產(chǎn)品時,更希望用戶記憶產(chǎn)品。而在用戶進(jìn)入了信息頁面時則更注重易用性,希望用戶能找到自己需要的東西。所以主色在首頁使用的面積較多,而二級頁面使用在關(guān)鍵的操作點上。
而在網(wǎng)站banner、海報的設(shè)計中,主色會更多的當(dāng)成背景色,這樣能夠讓用戶第一眼就有一種品牌的感覺。
今天交互時代與大家分享的這些內(nèi)容其實不僅可以用在UI設(shè)計中,在許多地方都很實用,看似簡單,但是就算在交互時代正進(jìn)行UI設(shè)計培訓(xùn)的學(xué)員們也要經(jīng)歷許多的實訓(xùn),才能運用自如的!
想要了解更多關(guān)于UI設(shè)計的內(nèi)容,就多多關(guān)注我們的網(wǎng)站吧,或者掃描下方的二維碼,也能第一時間接收到我們的消息哦。
請聯(lián)系網(wǎng)站客服,了解詳細(xì)的優(yōu)惠課程信息~
優(yōu)質(zhì)、權(quán)威、便捷、省心
掃一掃
獲取更多福利
獵學(xué)網(wǎng)企業(yè)微信
獵學(xué)網(wǎng)訂閱號
獵學(xué)網(wǎng)服務(wù)號