在我們常規(guī)意義上組成一個APP的視覺風(fēng)格有幾大元素——顏色、交互元素、字體、陰影、ICON的圖形等，但是有一個總?cè)菀妆辉O(shè)計師們忽略的元素，它能給與用戶一個非常直觀的視覺記憶，大家卻總是忽略，甚至做的很糟糕。那就是APP里面的配圖。

（一）

從2015年開始，各大APP開始越來越少在升級新版本之后使用tutorial圖（介紹、教育用戶新版本的新功能），似乎產(chǎn)品經(jīng)理們都意識到看tutorial圖的寥寥無幾，反而會讓用戶覺得很雞肋體驗差，而同時在appstore的中放置的APP截圖也越來越趨向返璞歸真，很少使用扁平式的插畫來介紹功能，這使原本曾經(jīng)在UI設(shè)計師們之間經(jīng)常比拼的配圖能力，似乎不那么被大家重視了。同時，也越來越多的UI設(shè)計師開始出現(xiàn)了找工作難的情況，一方面這當(dāng)然是因為去年至今年整體互聯(lián)網(wǎng)資金收緊，但是另一方面，也看到了公司的管理者們越來越輕視UI設(shè)計師存在的必要性了——因為似乎他們的作品都很相似，并沒有那么多個性。

（獨特的中國式扁平化引導(dǎo)頁）

前幾日有人咨詢我一個問題——如何辨別一個UI設(shè)計師的好壞呢？他說自己看大家的作品都很像，似乎一下子沒有了辨別的能力，我仔細(xì)思考了最近ui設(shè)計師作品的現(xiàn)狀才發(fā)現(xiàn)，各種各樣的網(wǎng)站上都發(fā)著各種各樣排版精美、層次清晰、“very clean”的ui界面，這些基礎(chǔ)能力很扎實的設(shè)計師發(fā)出來的頁面作品自然而然會有極強的趨同性。而我也陷入了思考“如何判定一個ui設(shè)計師的好壞呢？如何讓作品不再趨同？”

（二）

我想配圖是一個重要的，同時極易被忽略的點。

廢話少說，先放個人認(rèn)為優(yōu)秀的配圖，讓我們分析一下優(yōu)秀的配圖具備什么共同點：

（Airbnb 配圖）

（google 日歷配圖）

（配圖applemusic）

先放上三個大公司設(shè)計師的作品，看似眼花繚亂，但是卻有一個共同點：他們都有著自己的風(fēng)格、有著極強的設(shè)計感。

風(fēng)格和設(shè)計感，聽起來玄而又玄的詞，但是本質(zhì)就是——不趨同，要求自己的作品不能像市面上的公司一樣，別人做成什么樣自己就做成什么樣，這樣子就自然而然有了一個新的要求，那就是不僅要和市場上的不同，同時還要和自己產(chǎn)品的氣質(zhì)一致。

那么如何能擁有自己產(chǎn)品的配圖風(fēng)格呢？讓我們來細(xì)細(xì)分析一下：

1. 色彩

這可能是在配圖風(fēng)格上最容易被忽略的點，因為大家都以為顏色的使用最容易雷同了，自從進(jìn)入到扁平化以來，似乎市面上的配色都雷同了，根本分不出是什么產(chǎn)品的配色：

（配色極其雷同的配圖）

究其原因非常簡單，在進(jìn)入到扁平年代之后，大家畫法雷同的同時用色也只敢使用那些明度高、純度高的色彩，尤其在背景顏色大量的使用的就是灰、藍(lán)、橙色等，所以感覺相似性極高。讓我們來看看同樣是純平的畫法，國外優(yōu)秀的配圖是怎么做的：

（仍然是Airbnb的配圖，不愧是老總是設(shè)計師的團隊做出來的app……）

（麥當(dāng)勞的APP配圖，非常贊的插畫）

airbnb這一組展示城市風(fēng)采的配圖，用色非常大膽，所謂的大膽不是用了大量的鮮亮的顏色，而是使用了大量的重色穿插和大量的純度不高的顏色進(jìn)行點綴，使得城市的感覺更加真實，反而比那些千篇一律的高純度、高亮度的顏色組合要給人能留下更多深刻的印象。另外后面這一組插畫，使用了強烈的光影反差、對比色反差，因為顏色的使用完全獲得了自己的風(fēng)格，這就是顏色使用的重要性。

2. 畫法 ?

大家可能會疑惑，已經(jīng)是扁平化的時代，大廠不更新風(fēng)格，我們跟著瞎起什么哄呢？我不這么認(rèn)為，沒有任何人規(guī)定你必須和大廠的畫法相同，而且apple和google都使用扁平的畫法時風(fēng)格還是有區(qū)別。這是為什么呢？

讓我們來就著相同的扁平畫法，來做一個細(xì)致的分析幾個關(guān)鍵詞：

（1）角度 ［2.2d？2.5d？正側(cè)？偽扁平？］

A：2.2d

我想我可能是第一次說2.2D的人，估計看官們肯定都覺得我瘋了，但是2.2D是我對于正面45°視角的一種個人叫法，各位看官怎么稱呼它是你們的自由了。讓我們來看看2.2D的優(yōu)秀配圖：

（同樣是google的配圖）

2.2d的優(yōu)點在于它可以簡單并且高效的豐富畫面細(xì)節(jié)，當(dāng)所有人都在用正側(cè)面的扁平化時，往往需要更多的細(xì)節(jié)以與別人不同，這時候2.2d的方法就非常方便，同時，他只是給一些畫面上的物品增加了一個側(cè)面而已。

B：2.5d

2.5d恐怕在大家印象中最深的就是當(dāng)初高德的引導(dǎo)頁，有相當(dāng)一段時間都是使用了2.5D的風(fēng)格，這種風(fēng)格使用起來并不簡單，但是掌握規(guī)律之后就沒那么復(fù)雜了。

（藝術(shù)家Igor Kozak 作品）

再創(chuàng)作不規(guī)則物體的插圖（比如圖二的“人”），2.5D就需要比較扎實的繪畫功底，對設(shè)計師基礎(chǔ)素質(zhì)要求較高，所以使用人數(shù)不多，在這個角度里面仍可以有很大的發(fā)揮余地。

C：正側(cè)面

這恐怕是設(shè)計師們扁平的入門角度，難度低，使用人數(shù)多，想要做正側(cè)面的扁平化插畫做的出彩，就需要對畫法中其他幾點（陰影、圖形）有著比較深的考究，否則畫出來就像爛大街的UI配圖，沒有任何的代表性。

（同樣是google的配圖）

D：偽扁平

在C4D興起的這個時代，只用AI、PS、SKETCH已經(jīng)不再能滿足用戶追求新鮮的眼球了，所以逐漸興起了許多看似是扁平化，但是本質(zhì)卻是使用C4D建模渲染之后做出的作品：

（同樣是google設(shè)計團隊的作品）

（藝術(shù)家Guillaume Kurkdjian作品）

（2）陰影 【無陰影？有陰影？強陰影？逆光？】

A：無陰影

無陰影當(dāng)然是一種風(fēng)格了，很多國內(nèi)設(shè)計師的無陰影風(fēng)格的配圖顯得特別的傻，原因是當(dāng)元素被一層層削弱到越來越少時，圖形的能力、用色的考究都會讓一副正側(cè)面無陰影的配圖立分高下，換而言之UI設(shè)計師的能力就在這個地方得到了體現(xiàn)。能力差的無陰影正側(cè)面配圖，會非常像兒童畫。

（同樣是google的配圖）

B：有陰影

陰影分很多種，Material Design中的紙質(zhì)陰影是一種類型（即繪畫的形象之間的層級），物體本身的陰影也是一種類型，嫻熟的使用陰影固然很重要，但是找到自己使用陰影的風(fēng)格更加的重要，比如：只有在圓柱體時才使用陰影？只有在人物腳部使用一個頂光的投影？陰影是否使用幾何形？這些都是不同的陰影風(fēng)格的組成部分。

（TBWA?Shanghai 工作室為中國女排設(shè)計的插畫）

（dribbble上北京的ui設(shè)計師“包子二蛋”作品）

（同樣是google的配圖）

Google的很多配圖都在陰影部分加入了噪點，這也是使自家的陰影更加的有質(zhì)感，與市面上簡單的扁平化有一個區(qū)分。

C：強陰影

強陰影的應(yīng)用在之前的色彩部分已經(jīng)有提及過了，再放幾張圖你們感受一下。

（藝術(shù)家Malika Favre 作品）

D：逆光

這個需要相當(dāng)?shù)墓Φ缀蛯徝懒?，但是同樣的，也非常少的人會這么做，所以如果使用逆光的扁平化配圖，做得好的時候會很有獨特的風(fēng)格，這是BEHANCE上的大神dani montesinos做的扁平化視頻RIVER的截圖，非常有感覺：

（3）圖形 ?【幾何化？人物比例？人物形象？】

A：幾何化

何為幾何化？不是讓畫面上充斥著正方形、三角形、圓形等等，而是畫面上所有的分塊都是由標(biāo)準(zhǔn)的幾何形進(jìn)行組合得來的，這樣的畫面會有一種規(guī)律的美感：

（Nod young 設(shè)計的表情）

B：人物比例

當(dāng)我們畫的形象千篇一律時，竟然大家都不會嘗試著去改變一下筆下的人物的比例，Google的人物形象比例就和國內(nèi)的風(fēng)格大相徑庭，頭身比例幾乎相反，反而有種新的時尚感~

（同樣是google的配圖）

C：人物形象

我不得不說，國內(nèi)不僅人物形象的比例千篇一律，人物的形象更是夸張的相似，原因只能是在形象這件事上沒有下功夫，看看下面的兩個GIF中人物的形象多么的栩栩如生：

（dribbble上的設(shè)計師Markus Magnusson作品）

（同上）

同樣是一張人臉，如果畫的與別家沒什區(qū)別的話，怎么顯得出自己家產(chǎn)品的自己的特色呢？國內(nèi)的SAME這個APP，在這點上就做的比較出色，它的整套視覺都是有聯(lián)系的，將自己APP的形象深深的植入到了使用者的心里：

人物形象當(dāng)然不僅僅只是人物的臉，還有人物的衣著、身體的畫法是什么樣的？身體中的尖角是怎么處理的？手腳的畫法是什么樣的？等等等，這些都是設(shè)計師需要考慮的地方，而且筆者認(rèn)為，每為一個新的產(chǎn)品設(shè)計APP時，就要考慮使用與眾不同的人物形象，這才是設(shè)計師真正珍貴的地方——能為不同的產(chǎn)品穿上新設(shè)計的“衣服”。

總結(jié)

僅僅是扁平化的配圖，我就嘮叨了這么多，可見在這個時代，UI設(shè)計師自然不會變成一種統(tǒng)一化的技術(shù)工人，而是仍然能充滿了個性與不同，作品也自然分高低，那么除了上面說的構(gòu)成風(fēng)格的要點，真正做到有個人的風(fēng)格還需要什么努力呢？我認(rèn)為是兩點：

1. 保持手繪的習(xí)慣！
2. 不要只看設(shè)計類的作品！

各位設(shè)計師們，共勉！

作者：Balance Yan

來源：微信公眾號【ME網(wǎng)易移動設(shè)計】