前段時間做了張黑金頁面，整個過程可概括為起起落落落落落起。

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

黑金風格的頁面往往用在 VIP、榜單、頒獎類的頁面，主打一個尊貴、精致、高端、榮譽……

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

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

一、黑金頁面顏色選取

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

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

1. 上大色塊

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

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

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

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

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

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

2. 豐富顏色

我們可以先給顏色上加點明暗：

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

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

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

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

二、精致小細節(jié)

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

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

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

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

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

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

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

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

那么怎么去塑造頁面的品質感？

三、畫面的品質感如何塑造

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

1. 增加光感

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

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

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

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

2. 增加設計樣式

像一些參考圖上，卡片上添加金屬框進行設計，文字上加一些樹葉修飾，標簽也做了一些設計

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

最后

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

作者：菜心設計鋪