今天給大家講講每周任務(wù)頁(yè)頁(yè)面頭圖案例，講講這里面的思路，讓大家吸收一波！本文頭圖強(qiáng)調(diào)顏色的橫向豐富與縱向豐富，色相的差異化、顏色占比的問題、層次和飽滿度，這樣就能大大提升畫面質(zhì)感。

最近在做每周任務(wù)頁(yè)頁(yè)面，頭圖又是給我難夠嗆，我們先看下第一版到第三版的變化：

第一版

第二版

第三版

中間過(guò)程思考了很多，和大家分享一下。

1. 顏色的橫向豐富與縱向豐富

什么是橫向顏色？

其實(shí)就是同一飽和度、明度的顏色，色相不同，比如下面這組顏色：

雖然色相挺豐富，但是看多了會(huì)比較膩。

所以有時(shí)候我們就需要進(jìn)行顏色的縱向延伸，也就是除了色相的不同，還有飽和度、明度的不同，比如：

2. 色相的差異化

之前在總結(jié)顏色的時(shí)候有說(shuō)過(guò)，色相不要用的太正，會(huì)比較常規(guī)，因?yàn)槿藗兛炊嗔吮容^正的顏色，所以就會(huì)感覺沒什么新意。

舉個(gè)例子，同樣是紅色：

第一個(gè)紅色就會(huì)比較正，如果沒有相當(dāng)足的功力，很可能做成過(guò)年、國(guó)慶的感覺，而第個(gè)組就會(huì)相對(duì)容易出效果一點(diǎn)！

當(dāng)然，顏色本身沒有好壞，要看怎么用，只是說(shuō)不太正的色相對(duì)新手來(lái)說(shuō)比較友好一些。

所以大家看下，色相從比較正的橙色變換色相后，瞬間感覺沒那么老氣了:

3. 關(guān)于顏色占比的問題

當(dāng)然，這個(gè)案例中，除了色相以外，還有顏色完畢的問題，其實(shí)我之前很多作品，重色會(huì)占比多一些，比如下面這種:

而這次的每周任務(wù)頁(yè)面希望能有一點(diǎn)輕松愉悅的感覺，別用太濃烈的顏色讓用戶壓力太大。所以對(duì)我來(lái)說(shuō)也算是一次小挑戰(zhàn)。

所以我將重色占比縮小，只用在最前處的近景和字體暗部（藍(lán)色部分）:

其他地方都是比較輕的顏色。

4.關(guān)于層次和飽滿度

上面講的都是關(guān)于配色的，接下來(lái)說(shuō)下層次和飽滿度。

因?yàn)檫@次的構(gòu)圖比較簡(jiǎn)單，就是中心構(gòu)圖，也沒有什么大透視，那如何增加層次呢？

我使用三、四層云放在前面，這幾本就把算是拉開層次：

但是有個(gè)問題，下面是有層次了，但是上面有點(diǎn)感覺空空的，于是又加了一點(diǎn)小元素進(jìn)行點(diǎn)綴：

這樣整體看起來(lái)就比較和諧了，這里面有個(gè)要說(shuō)的點(diǎn)，對(duì)于小元素的顏色，一定要有前后關(guān)系，也就是用顏色的深淺、色相來(lái)體現(xiàn)：

這樣看起來(lái)才不會(huì)生硬。

總結(jié)：

做到這里，越看越不順眼，總感覺有點(diǎn)油膩，有點(diǎn)土，具體什么原因？怎么修改？因?yàn)椴幌雽懙奶L(zhǎng)，所以我們下期再仔細(xì)的聊一聊在保持基礎(chǔ)框架不變的情況下，如何拆分畫面來(lái)優(yōu)化每一處細(xì)節(jié)，使第二版變成第三版的！

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》最初我覺得這效果也太差了，最后沒想到做的還不錯(cuò)！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)