上期回顧：

一、首頁(yè)的視覺規(guī)劃解析

信息聚合型首頁(yè)要設(shè)計(jì)成什么樣，受品牌標(biāo)準(zhǔn)與設(shè)計(jì)風(fēng)格影響。但相對(duì)可以確定的一點(diǎn)是，復(fù)雜的信息聚合型首頁(yè)是很難應(yīng)用極簡(jiǎn)風(fēng)格的，它的出發(fā)點(diǎn)就與極簡(jiǎn)理念是沖突的。

尤其是面對(duì)競(jìng)爭(zhēng)激烈的國(guó)內(nèi)市場(chǎng)，首頁(yè)如果做的太“寡淡”，是很難和競(jìng)爭(zhēng)對(duì)手搶奪用戶注意力的。且在作品集中，過于簡(jiǎn)單的視覺效果也難以引起觀看者的興趣，很容易被其它作品集埋沒。所以不管從哪個(gè)角度出發(fā)，這類首頁(yè)的設(shè)計(jì)都需要 “重口”。

沉疴就要下猛藥，花哨就是今晚的康橋……

但花哨不代表畫面就要亂到一發(fā)不可收拾，我們必須要有技巧的控制花哨的區(qū)域、程度、類型，讓首頁(yè)的視覺保持在一個(gè)合理的范圍中。所以這里我們要重點(diǎn)解析的，就是首頁(yè)要怎么合理的 “花哨” 起來。

這里我們先看一些反面案例，花哨到無法容忍的情況：

這些頁(yè)面最初的設(shè)計(jì)方案肯定都不是這個(gè)樣子，之所以失控，是因?yàn)橥局薪?jīng)歷了各種小型迭代，做了各種細(xì)節(jié)調(diào)整，破壞了最初的整體性。同時(shí)還有個(gè)非常重要的影響，就是運(yùn)營(yíng)活動(dòng)往往是獨(dú)立進(jìn)行設(shè)計(jì)的，不會(huì)過多的考慮和界面的適配性，所以它們往往看起來非常的突兀，進(jìn)一步破壞畫面的平衡。

總結(jié)起來這種問題的癥結(jié)就是 —— 缺乏整體性，沒有從全局考慮效果的分布與應(yīng)用，而是把每個(gè)組件作為孤立的元素去設(shè)計(jì)，最后湊不成整體。

所以制定首頁(yè)視覺方案時(shí)，很重要的一點(diǎn)就是不要過早就開始細(xì)節(jié)的設(shè)計(jì)，而是先做一次整體的規(guī)劃，對(duì)不同組件之間視覺效果強(qiáng)弱程度的預(yù)期做管理，建立節(jié)奏感。

下面我們還是圍繞最常見的做法來做分享。

首頁(yè)的結(jié)構(gòu)制定邏輯決定了首屏內(nèi)容是權(quán)重最高的，越往下權(quán)重越低，這是一種頭重腳輕的布局結(jié)構(gòu)?；谶@種邏輯，視覺效果的強(qiáng)弱也是由上到下衰減的，而不是下方權(quán)重低的模塊反而視覺最突出。

所以首頁(yè)中視覺效果最突出的模塊，建議集中在首屏的上半屏內(nèi)，低于上半屏就會(huì)產(chǎn)生明顯的沖突，因?yàn)榇蜷_首頁(yè)我們的視線會(huì)立馬被下半屏的內(nèi)容吸引，這非常不符合正常的瀏覽習(xí)慣。

雖然定了視覺上強(qiáng)下弱的基調(diào)，但這個(gè)衰減的過程不是完全線性的，而是有節(jié)奏性曲線向下減弱的。簡(jiǎn)單表示起來：

節(jié)奏的控制，就是不能視覺性強(qiáng)的元素全部堆積到一塊，而要有目的性的控制臨近模塊的視覺強(qiáng)度，強(qiáng)與強(qiáng)之間一定要有弱化的模塊橋接，要有顯著的變化，才能形成更合理的視覺效果。這也是平面四要素中的 ——?對(duì)比原則。

這是整個(gè)首頁(yè)視覺設(shè)計(jì)中最重要的認(rèn)識(shí)與實(shí)操，會(huì)對(duì)最終效果的優(yōu)劣起到?jīng)Q定性的影響。

除此之外，還有個(gè)非常重要的因素，那就是管理視覺元素的類型。我們可以把一個(gè)界面中的視覺元素分成 UI、運(yùn)營(yíng)、圖片三個(gè)類型。原則上 UI 設(shè)計(jì)師只要完成 UI 控件、組件的設(shè)計(jì)即可，但對(duì)于一個(gè)完整的界面輸出來說，運(yùn)營(yíng)和圖片也全都要成為我們的考慮因素。

其中運(yùn)營(yíng)圖例失控的問題前面已經(jīng)展示過了，我們必須要結(jié)合對(duì)模塊視覺強(qiáng)弱的管理來控制運(yùn)營(yíng)圖的設(shè)計(jì)，不管你是引用素材或是自己獨(dú)立完成。

第二點(diǎn)就是圖片的應(yīng)用，圖片本身也有很強(qiáng)的視覺強(qiáng)弱屬性，如果我們沒有有目的性的管理配圖，那么它們就會(huì)產(chǎn)生自己的視覺特性，直接破壞原有的節(jié)奏安排。

在正常的首頁(yè)設(shè)計(jì)中，配圖使用的數(shù)量會(huì)遠(yuǎn)多于運(yùn)營(yíng)用圖，且會(huì)有不同的分類。這使得我們也要有目的性的去管理配圖的使用，控制它們的視覺強(qiáng)弱與節(jié)奏。

以一個(gè)電商應(yīng)用為例，有的組件內(nèi)配圖可以用淺色或白色背景的簡(jiǎn)化商品圖，有的組件內(nèi)帶有背景的相對(duì)復(fù)雜的商品圖等。通過這種控制，讓圖片能和界面融為一體，不會(huì)破壞畫面的整體效果。

以上就是我們對(duì)首頁(yè)視覺展開的全局規(guī)劃和設(shè)計(jì)思路，具體的風(fēng)格、配色、技法應(yīng)用就是別的話題了，要靠設(shè)計(jì)師自己根據(jù)場(chǎng)景和經(jīng)驗(yàn)來決定。

二、首頁(yè)的視覺樣式總結(jié)

雖然首頁(yè)應(yīng)該怎么做沒有設(shè)限，設(shè)計(jì)師可以自由發(fā)揮，但我們還是總結(jié)幾個(gè)常見的處理方式，幫助你們更好的理解主流線上應(yīng)用中處理花哨的思路。

1. 頂部氛圍背景

在頂部使用漸變或彌散效果作為背景建立品牌的氛圍，而主要顏色通常是該產(chǎn)品的品牌色系，可以是深色也可以是淺色。

但與之對(duì)應(yīng)，如果背景使用深色，那么下一個(gè)模塊背景基本就是淺色且視覺效果較為簡(jiǎn)單，如果背景是淺色則下一個(gè)模塊的視覺效果就會(huì)較強(qiáng)。

2. 快速入口的設(shè)計(jì)

快速入口的設(shè)計(jì)主要是圖標(biāo)加文字的形式，只是使用3D或插畫形式完成圖標(biāo)其實(shí)并不能算 “花哨”，因?yàn)檫@類設(shè)計(jì)也可以得到有細(xì)節(jié)但又簡(jiǎn)約的效果，這是圖標(biāo)設(shè)計(jì)的技法問題。

而進(jìn)一步強(qiáng)化快速入口的視覺強(qiáng)度，除了增加圖標(biāo)本身的色彩和細(xì)節(jié)外，還可以將入口按鈕 —— 卡片化，比如很多奶茶小程序中的堂食、外賣選項(xiàng)，因?yàn)橛辛烁蟮拿娣e所以可以對(duì)背景使用更突出的色彩或圖片。

3. 瓷片區(qū)的設(shè)計(jì)

瓷片區(qū)本來就是卡片，所以最有效簡(jiǎn)單的強(qiáng)調(diào)方式就是為卡片添加背景色，且不同的卡片使用不同的背景色。

同時(shí)，優(yōu)秀的瓷片區(qū)視覺效果不能是均分的，想要讓它的效果更好，就需要形成不同的尺寸大小，且不同的瓷片區(qū)卡片內(nèi)使用不同的細(xì)節(jié)排版方案。

4. 卡片邊框的設(shè)計(jì)

其它卡片式模塊，如果要突出就可以使用非常規(guī)卡片的設(shè)計(jì)方式，可以總結(jié)出三個(gè)具體的設(shè)計(jì)細(xì)節(jié)。非常規(guī)的異形邊緣、彩色的背景邊框、特殊字體的標(biāo)題。

總結(jié)起來就是為內(nèi)容區(qū)域套一個(gè)花哨的外邊框，增加它的視覺效果，這時(shí)候不管里面的內(nèi)容多枯燥，都被強(qiáng)行 “升華” 了……

5. 優(yōu)惠福利的設(shè)計(jì)

優(yōu)惠福利類的組件也是可以重點(diǎn)突出和強(qiáng)調(diào)的組件類型，當(dāng)然這要看它的權(quán)重，如果權(quán)重低可以用相對(duì)簡(jiǎn)單、弱化的視覺效果，如果權(quán)重高就要進(jìn)行強(qiáng)調(diào)。

這類元素的設(shè)計(jì)沒有太多需要總結(jié)的，因?yàn)樗鼈儽旧碜詭А凹t紅火火”的屬性，弱化就是使用淺色背景只突出高飽和度的數(shù)字，強(qiáng)化就是直接讓背景也使用高飽和度的橙色或紅色，它們就會(huì)變得異常顯眼。

6. 底部導(dǎo)航的設(shè)計(jì)

最后一點(diǎn)就是底部導(dǎo)航的設(shè)計(jì)，雖然它在最底部，不應(yīng)該做得太突出，但這是對(duì)整個(gè)組件而言，單一的某些細(xì)節(jié)可以額外去設(shè)計(jì)。

可以強(qiáng)調(diào)其中的某個(gè)選項(xiàng)，比如首頁(yè)或是中間的發(fā)布按鈕，應(yīng)用不同的背景圖形和設(shè)計(jì)形式，來實(shí)現(xiàn)它和其它選項(xiàng)之間的反差。這樣不僅增加了底部的設(shè)計(jì)細(xì)節(jié)，又不會(huì)讓整個(gè)組件在底部非常突兀。

以上就是首頁(yè)常見視覺樣式處理的總結(jié)，雖然還有很多其它方式，但只要靈活運(yùn)用好這幾點(diǎn)已經(jīng)足夠你們做出非常復(fù)雜的頁(yè)面了。而設(shè)計(jì)的過程中，不要光顧著疊效果，一定要基于全局來評(píng)判效果的合理性，對(duì)它們做出有效的設(shè)計(jì)和優(yōu)化。

結(jié)尾

如果看得和分享多的話，我們后面還會(huì)陸續(xù)更新相關(guān)組件的設(shè)計(jì)技巧與演示。有什么想看的東西也可以在留言中分享出來。