前段時(shí)間做了張黑金頁面，整個(gè)過程可概括為起起落落落落落起。

從「糾結(jié)顏色如何選取」 到「畫面沒有精致感」再到「覺得沒有品質(zhì)感」，整個(gè)過程中都在不斷地自我審視以求達(dá)到最佳?，F(xiàn)在就請大家來看看最后產(chǎn)出的效果：

黑金風(fēng)格的頁面往往用在 VIP、榜單、頒獎(jiǎng)?lì)惖捻撁?，主打一個(gè)尊貴、精致、高端、榮譽(yù)……

怎么在頁面中打造這種尊貴、精致、高端、榮譽(yù)……的感覺呢？ 我有幾個(gè)點(diǎn)可以跟大家分享一下：

1. 黑金頁面顏色選取
2. 黑金畫面中精致小細(xì)節(jié)
3. 畫面的品質(zhì)感如何塑造

一、黑金頁面顏色選取

黑色和金色的配色所帶來的尊貴榮譽(yù)感已經(jīng)深入人心，基本家家戶戶的頁面都用到這種配色去體現(xiàn)尊貴感，唯一的不同點(diǎn)就在于不同頁面上「黑色」或「金色」中的色相偏差。 有的背景會用偏藍(lán)的黑，有的會用偏黃的黑：

而金色，有的金會偏黃一些，有的會偏紅一些。 這里我們選用偏黃的黑色和偏紅的金色，去打造我的黑金頁面。

1. 上大色塊

在對原型進(jìn)行一頓排版處理后，先不著急刻畫細(xì)致的顏色，我們先將大色塊鋪在頁面上，感受一下整體的顏色基調(diào)：

在這一步如果覺得哪里的大色塊顏色不行，就可以及時(shí)調(diào)整。比如說現(xiàn)在這張頁面的鋪色，讓我覺得信息有些分散，且重要模塊不突出。

我們可以嘗試把重要模塊的顏色調(diào)亮一些，它就會更明顯、突出。

上面的處理方式比較含蓄，甚至我們還可以更亮更突出，直接來個(gè)白色：

我們再來看一下，前后的對比，同學(xué)們就能明顯感受到這些差異了：

接著就可以去豐富顏色了。

2. 豐富顏色

我們可以先給顏色上加點(diǎn)明暗：

這樣稍微有點(diǎn)質(zhì)感了，但是還不夠，除了基本色，我們還要融入一些領(lǐng)近色，我們把色相再往鄰近色去偏一偏，加在上面：

現(xiàn)在頭部背景太平了，里面也可以融入一些顏色：

這樣頁面的顏色就確定的差不多了，我們把下方區(qū)域的 icon 都加上看下效果：

現(xiàn)在頁面層次已經(jīng)很豐富了，但是還可以再加些細(xì)節(jié)

二、精致小細(xì)節(jié)

怎么加小細(xì)節(jié)？我去觀察了一些風(fēng)格參考圖：

通過參考圖，我發(fā)現(xiàn)兩個(gè)細(xì)節(jié)：

1. 畫面層次細(xì)節(jié)豐富

2.卡片上喜歡加細(xì)描邊，加上更有精致感

基于這兩點(diǎn)，反觀我的頁面就發(fā)現(xiàn)：

1. 我的頭部背景有些空曠；
2. 卡片的顏色和背景有些融在一起了。

所以咱把頭部的紋理（圖形可來自品牌 logo 的延展）和細(xì)描邊都加上：

雖然頁面差不多了，但是還是達(dá)不到輸出的程度，畫面還是沒有表達(dá)出那種尊貴的品質(zhì)感。

那么怎么去塑造頁面的品質(zhì)感？

三、畫面的品質(zhì)感如何塑造

在我觀察了這么多的黑金頁面之后，發(fā)現(xiàn)主要是從「增加光感」和「增加設(shè)計(jì)樣式」這兩點(diǎn)去體現(xiàn)「品質(zhì)感」

1. 增加光感

在暗色環(huán)境下，這些畫面都通過增加「光感」去體現(xiàn)品質(zhì)感。 可以是一道從右上角或者左上角打過來的光束：

就算沒有光束，那也會有一些光暈、光斑：

所以我們也可以往畫面上加上更多的光感。先是頭部加點(diǎn)光暈：

卡片頭部和按鈕也可以做的更加透亮：

2. 增加設(shè)計(jì)樣式

像一些參考圖上，卡片上添加金屬框進(jìn)行設(shè)計(jì)，文字上加一些樹葉修飾，標(biāo)簽也做了一些設(shè)計(jì)

大家可以根據(jù)自己設(shè)計(jì)的功能添加合適的設(shè)計(jì)樣式，像我這個(gè)頁面，就嘗試去加了一些金屬感的邊框：

最后

想跟大家說，設(shè)計(jì)不是越復(fù)雜、層次越多就代表設(shè)計(jì)得越好，大家可以根據(jù)自己真實(shí)的產(chǎn)品項(xiàng)目去做一些取舍。

作者：菜心設(shè)計(jì)鋪