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

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

第一版

第二版

第三版

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

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

什么是橫向顏色？

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

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

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

2. 色相的差異化

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

舉個例子，同樣是紅色：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這樣看起來才不會生硬。

總結(jié)：

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

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

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

                                                            

 

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

 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)