在我們常規意義上組成一個APP的視覺風格有幾大元素——顏色、交互元素、字體、陰影、ICON的圖形等，但是有一個總容易被設計師們忽略的元素，它能給與用戶一個非常直觀的視覺記憶，大家卻總是忽略，甚至做的很糟糕。那就是APP里面的配圖。

（一）

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

（獨特的中國式扁平化引導頁）

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

（二）

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

廢話少說，先放個人認為優秀的配圖，讓我們分析一下優秀的配圖具備什么共同點：

（Airbnb 配圖）

（google 日歷配圖）

（配圖applemusic）

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

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

那么如何能擁有自己產品的配圖風格呢？讓我們來細細分析一下：

1. 色彩

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

（配色極其雷同的配圖）

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

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

（麥當勞的APP配圖，非常贊的插畫）

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

2. 畫法 ?

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

讓我們來就著相同的扁平畫法，來做一個細致的分析幾個關鍵詞：

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

A：2.2d

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

（同樣是google的配圖）

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

B：2.5d

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

（藝術家Igor Kozak 作品）

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

C：正側面

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

（同樣是google的配圖）

D：偽扁平

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

（同樣是google設計團隊的作品）

（藝術家Guillaume Kurkdjian作品）

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

A：無陰影

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

（同樣是google的配圖）

B：有陰影

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

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

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

（同樣是google的配圖）

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

C：強陰影

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

（藝術家Malika Favre 作品）

D：逆光

這個需要相當的功底和審美了，但是同樣的，也非常少的人會這么做，所以如果使用逆光的扁平化配圖，做得好的時候會很有獨特的風格，這是BEHANCE上的大神dani montesinos做的扁平化視頻RIVER的截圖，非常有感覺：

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

A：幾何化

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

（Nod young 設計的表情）

B：人物比例

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

（同樣是google的配圖）

C：人物形象

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

（dribbble上的設計師Markus Magnusson作品）

（同上）

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

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

總結

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

1. 保持手繪的習慣！
2. 不要只看設計類的作品！

各位設計師們，共勉！

作者：Balance Yan

來源：微信公眾號【ME網易移動設計】