-原文地址：http://www.zcool.com.cn/article/ZNDMwMDEy.html-

這部分我會著重說的比較多,，因?yàn)樵诤竺娴木W(wǎng)頁和APP當(dāng)中都會有涉及,，而且當(dāng)了解的大概的原理后看到后面自然也就會很容易的明白了！

A,、主產(chǎn)品美觀突出型

首先從汽車類Banner圖開始說起吧,！因?yàn)檫@算是一大類，如：“汽車,、奢侈品,、高級音響……”甚至是模特、演員相關(guān)的設(shè)計(jì)原理也大都如此,，就是需要宣傳推廣的產(chǎn)品本身忒漂亮,。

上面的這3張圖，算是汽車中的高端車型和一個高爾夫奢侈品,，其實(shí)想一想看過的大部分高端（貴貴貴）的產(chǎn)品設(shè)計(jì)大都是這種風(fēng)格,。這里面說的貴是相對的，就好像哈根達(dá)斯幾個雪球100多元,，也算奢侈了,！

1、因?yàn)楫a(chǎn)品本身已經(jīng)非常精美,，所以文字大都用白色或灰黑做輔助（根據(jù)底色來定）

2,、為了最大化產(chǎn)品優(yōu)勢，文字所占空間也相對較小,，且多用系統(tǒng)字體（因?yàn)椴粨屟郏?/p>

3,、背景多數(shù)選擇實(shí)景，且接近產(chǎn)品本身色系,，要么君臨天下的大場景,、要么卓爾不凡的近距離

當(dāng)然了無論汽車還是奢侈品，他們也都有更加細(xì)分的市場和投放渠道,，如汽車的高端車,、家庭型、運(yùn)動型,、白領(lǐng)代步……所以在設(shè)計(jì)中會根據(jù)產(chǎn)品不同的市場方向進(jìn)行規(guī)劃,。我們做任何設(shè)計(jì)也都是如此，所以在每次接到設(shè)計(jì)任務(wù)的時候一定一定要和需求方溝通清楚具體方向,！

上面這幾個圖就是青年運(yùn)動型咯,，用動感的背景來表達(dá)“看我動力十足，快來一起撒野”

下面這幾張圖很明顯是為了表現(xiàn)繽紛生活,，愉快出行的生活狀態(tài),！畫面背景色和產(chǎn)品本身有較大反差,，這樣依然是最大化的突出了我們的宣傳目的。

當(dāng)最終還是開始說的那樣,，當(dāng)產(chǎn)品（美女帥哥也是哦?。┍旧碜銐蛎烙^的時候，一定要最大化突出產(chǎn)品本身,，信息只是作為輔助,，層級排在商品之后。

B,、產(chǎn)品展示型 

當(dāng)然這個也是我們最常見的設(shè)計(jì)圖,，并且更新頻率更快（想起來都夠了是不是）,電商里面最常見的就是這類圖，這時候就需要在文字字形色彩,、背景色彩或輔助元素上多做一點(diǎn)設(shè)計(jì)排列了,，看下面布靈布靈……↘(ˇ?ˇ)↘

這一組還是以產(chǎn)品本身突出為主，輔助以文字信息介紹

1,、文字占空間略大,，和背景反差色彩較大置于后景（↖左側(cè)兩張）

2、文字占據(jù)空間偏小,，且字體較細(xì)視覺感不強(qiáng)烈,，置于前景（右側(cè)兩張↗）

3、這些常規(guī)性產(chǎn)品推廣,，他們都把背景色接近了產(chǎn)品本身色系（減淡或加深后突出前景） 

尤其是走長線宣傳的產(chǎn)品,，盡可能要有常規(guī)推廣型和事件型（促銷、新功能）兩種模式做區(qū)別

C,、標(biāo)題突出型

韓國也是有暴力型促銷Banner出現(xiàn)的,，不過相對比還是清晰些，這里還要說下天貓官方設(shè)計(jì),，現(xiàn)在的設(shè)計(jì)也都是很贊了,，本人也是經(jīng)?？吹膬?nèi)心驚嘆（ 這個馬屁我覺得拍的蠻好(????) ）,！

上面幾張圖的特點(diǎn)幾乎都是一樣的

1、標(biāo)題占據(jù)前景,，且占據(jù)空間大

2,、色彩與背景色做較大反差

3、讓背景色和產(chǎn)品本身色系接近,，且明暗度也略接近,，目的是增加產(chǎn)品氛圍渲染，但削弱產(chǎn)品本身視覺沖擊,，把標(biāo)題最大化

D,、產(chǎn)品展示,、標(biāo)題點(diǎn)睛

好像看了上面的讓我自己都覺得,，不就是突出產(chǎn)品就是產(chǎn)品占的空間大然后還在前景,，突出文字就是文字占的空間大置于前景么？,！多簡單點(diǎn)事兒啊……其實(shí)好像……也就是這樣咯,，但我還是找了點(diǎn)例外如下↓(ˇ?ˇ) ↓

1、把背景色接近產(chǎn)品（弱化產(chǎn)品本身）,，文字顏色和背景較大明暗度和色相反差,，突出文字（左上↖）。

2,、把文字組模塊化,、圖形化，可以用會話氣泡,、框線,、標(biāo)簽……能讓文字作為一個整體突出，然后這個整體和背景色有較大的反差,！

這樣做的優(yōu)點(diǎn)就是你的圖要看起來是促銷,，而不是廉價(jià)！

單張的設(shè)計(jì)圖說了一大堆,，下面把網(wǎng)頁部分盡可能的說的簡單一點(diǎn)咯！

A,、首屏引導(dǎo)型

這類型的網(wǎng)站或網(wǎng)頁是我們看到的大部分網(wǎng)頁設(shè)計(jì)類型,，多數(shù)是以公司或產(chǎn)品LOGO的主色系進(jìn)行色彩延續(xù)，在頁面需要突出重點(diǎn)的地方,，他們選用首屏的主色調(diào),，輔以黑白灰或在加一個臨近色（點(diǎn)綴使用）

這類型的網(wǎng)頁設(shè)計(jì)不需要做太多介紹，隨便點(diǎn)開兩個網(wǎng)站就有一個這樣咯,！

如果非要說要點(diǎn),，那就是設(shè)計(jì)整體頁面的時候劃分好你的重要信息分級，不要在同一屏內(nèi)出現(xiàn)過多重要信息,，那樣無論信息還是主色彩,，你一定會流失一樣才能保住頁面美感.

B、單底色,、多色彩型

這類型設(shè)計(jì)多出現(xiàn)于宣傳活動頁,，由于需要展現(xiàn)的內(nèi)容較多，甚至多線（品類）展示，所以在不同屏次間做不同色系區(qū)分,，但詳細(xì)文字的基礎(chǔ)色的黑白灰盡量不變,，這樣才能穩(wěn)定整個頁面。

1,、不同頁面用不同色系來做區(qū)分,，前提一定要保持色彩在同一級明度、飽和度范圍

2,、主推產(chǎn)品色彩反差和空間最大化（↖左上）

3,、前景都用那么多色彩了，背景當(dāng)然是黑白色系咯

C,、色彩對比型

這類型網(wǎng)頁不那么常見,，多出現(xiàn)在對陣游戲、競技賽事,、電影傳播,、時間軸展示頁，常見的色彩多為紅V藍(lán),、紅V黑,、藍(lán)V綠、青V粉……還有一個特點(diǎn)就是,，這類型頁面多為敘述性排列信息,！

上面兩個頁面一個是上下跳躍分色（↖左上），一個是左右對比分色（看↑）,。他們的雖然都是在各自敘述一個產(chǎn)品故事,，但第1個是每個頁面表現(xiàn)一段內(nèi)容，右邊則是連貫性展示整體內(nèi)容,。當(dāng)然一段一段講述內(nèi)容的頁面自然就是比較長的,，因?yàn)樗屧L客（受眾）有一個單獨(dú)停留時間，而不是滿篇文字,；而左右對比色的連續(xù)展示頁面相對都較短,，畢竟一連串的看內(nèi)容難道你還想表現(xiàn)很多屏么！

這里只說一個重點(diǎn)就是,，這類型頁面大都要有較好的圖才行,，要么攝影圖片、要么游戲原畫,、至少要有精致的圖標(biāo)……沒有怎么辦,，去搜圖,、去畫圖標(biāo)啊~~,！

寫到這我的內(nèi)心是崩潰的,，這個坑挖的太大了,，居然來分析APP的色彩運(yùn)用,，簡直就是作啊……

第二次崩潰下載了一個看起來漂亮的韓國應(yīng)用CongKong，然后……用不了,，于是我只好用國內(nèi)一小撮文藝青年和一大部分偽文藝青年聚集的豆瓣來叨叨叨了,！

當(dāng)我自己看完了豆瓣的設(shè)計(jì)后，還是恨贊嘆的,，心想我啥時候能做的這么好?。ㄓ忠徊R屁拍的真棒）！他們的APP當(dāng)中色彩確實(shí)也很有系統(tǒng)分級性了,，甚至是在版本迭代后的閃屏圖都保留了整體的色彩傳承,，此處給予掌聲 啪啪啪……啊,！

寫在此處,，整個A部分大家看不看都行（都是廢話），因?yàn)榇蟛糠諥PP都是走這種主色系統(tǒng)形式

A,、主頁面的色彩分析

從首次安裝時的啟動閃屏,、啟動頁、節(jié)日閃屏,，豆瓣已經(jīng)把主色系展現(xiàn)

1,、主色系（明度飽和度）用手寫方式展現(xiàn)

2、輔助色黃色同時并行出現(xiàn)

3,、無論Hello,、還是小插畫都把清新風(fēng)表現(xiàn)出來和豆瓣的主色系形成呼應(yīng)

下面的6張為APP主頁面，截圖色調(diào)的不同,，我只能說也許是因?yàn)樾∶资謾C(jī)

首頁為兩張,，第1張常態(tài)（↓）、第2張向上翻閱內(nèi)容的瀏覽形式（↓）,。

1,、在Tabbar、內(nèi)容提示標(biāo)簽,、Button中都應(yīng)用了LOGO的主色（作為第一級提示常態(tài)）

2,、APP中的具體產(chǎn)品剛好都用到了輔助色橙黃色，產(chǎn)品星標(biāo)和優(yōu)秀內(nèi)容提示標(biāo)簽（重點(diǎn)提示）,，這個用法是不是和那個Banner圖的最后一部分有點(diǎn)像的感覺（小面積高反差的點(diǎn)睛作用）

3,、在個人中心頁面的Icon與Tabbar上面Icon的綠色基本保持了同級的明暗度和飽和度，這些都是較為常用的操作項(xiàng),，所以色彩層級也都用了同一級

加個小重點(diǎn)：在豆瓣的Titlebar上面,，進(jìn)入小組后有一個關(guān)注的Icon選項(xiàng)，當(dāng)點(diǎn)擊選中后你會發(fā)現(xiàn)那個關(guān)注的小心型依然是綠色的哎！不得不說這個和個人中心的小反差他們做的確實(shí)很大膽,，系統(tǒng)性很牛逼,！

B、第二層級色彩

現(xiàn)在重點(diǎn)來了,，在點(diǎn)擊進(jìn)入list page后,，很明顯的第二層級色彩

1、第1張圖在欄目內(nèi)的標(biāo)簽由于大都是非常用圖標(biāo),，所以使用了填色圖形形式,，明度較高飽和度較低（說人話就是淡色），這樣更好的突出了小組文字標(biāo)題,，這里的視覺層級就是 1,、欄目標(biāo)題 2、圖標(biāo) 3,、內(nèi)容概略,。

2、第2張圖在進(jìn)入詳細(xì)內(nèi)容列表頁面后,，右側(cè)的大色塊圖標(biāo)用了相對較深的顏色,，因?yàn)樵谶@一處圖標(biāo)的目的是和內(nèi)容圖片相等（圖片、圖標(biāo)會并行出現(xiàn)）,，因?yàn)槊科林荒苷故救齻€標(biāo)簽,，如果偏淡會讓整個頁面內(nèi)容視覺感偏空，且弱于同層級圖片,。

3,、第3張圖這里面，小組的快捷使用圖標(biāo)雖然色彩并沒有減淡,，但由于用的線性圖標(biāo)空間留白較大,，整體視覺感弱化，同樣重要的下面小組推薦話題Banner圖,，視覺感在整個畫面中第一層級,。當(dāng)然你可以說隨便做個圖在這個位置和大小占比上都第一層級啊（再次提醒這里我說的層級是視覺展現(xiàn)性,，而非交互層面或用戶操作習(xí)慣）,，但他們在色調(diào)飽和度以及畫面形式上也用了非常相近的統(tǒng)一樣式，并沒有過深或過淺,。

咳咳：在這里我還補(bǔ)充一下,，豆瓣君你的小組推薦話題Banner左右滑動的時候經(jīng)常失靈啊,！

C,、第三層級色彩

下面的這幾張圖算是產(chǎn)品詳情和話題內(nèi)容頁了,，在這幾個頁面中很明顯的大量使用第三層級色彩。

再次補(bǔ)充請?jiān)徫医貓D的偏色……

1,、在這些內(nèi)容頁當(dāng)中，話題（無評論 有評論 熱門）和討論,、搜索圖標(biāo)都使用了更加偏淺的色系,，再加上圖標(biāo)本身又較小，很明顯的形成了第三層級

2,、值得深思的是豆瓣在Title的設(shè)計(jì),，無論是色彩還是狀態(tài)并沒有做色彩統(tǒng)一，而是整體分成了白色和APP同級色系兩種樣式,。在首屏常態(tài)和產(chǎn)品詳情（向下瀏覽時會呈現(xiàn))時會呈現(xiàn)LOGO的綠色主色系,，同時在進(jìn)入小組子級的各個小組首頁會隨機(jī)分成明度同級但飽和度偏低一點(diǎn)的多色彩。其它主頁面和子頁面Title則均為為白色,，有興趣的同學(xué)可以去研究一下,，到時候歡迎追加評論！

寫在最后,，其實(shí)多數(shù)的移動端設(shè)計(jì),，產(chǎn)品方（項(xiàng)目組）已經(jīng)把整個產(chǎn)品項(xiàng)目進(jìn)行了規(guī)劃，并且把梳理后的原型圖給到了UI和視覺設(shè)計(jì)師（小公司就全做咯）,，這時候產(chǎn)品信息和交互架構(gòu)的層級已經(jīng)分割非常明確,，更需要我們把屬于視覺方向的色彩、圖標(biāo)甚至是分割線設(shè)計(jì)規(guī)劃出同樣有層級的系統(tǒng)形式,！

設(shè)計(jì)夾 · 設(shè)計(jì)師成長第一站