如何快速的提升作品集的展示效果，增強(qiáng)自己作為專業(yè)設(shè)計師的逼格？
相信是很多同學(xué)關(guān)心的事
一說到作品包裝，有些同學(xué)想到的是
套用Mockup
▽?
拉透視
?▽
還有一些同學(xué)在展示布局上特別用心
▽
?
有人用了這些方法，作品立刻脫穎而出，而更多的人卻被說成表面功夫，這是為什么？
排版固然重要，但色彩的運用同樣不能忽視
有時色彩甚至是作品脫穎而出的關(guān)鍵
?
試想一下，在Dribbble 有很多高人氣作品，雖然內(nèi)容平平，但只要顏值到位，依然可以圈粉無數(shù)
▽
在這看臉的時代，沒有顏值的作品，縱使布局考究，也鮮受關(guān)注
設(shè)計師的作品必須精致，像女人一樣精致
衍生閱讀《沒義務(wù)透過邋遢的外表，發(fā)現(xiàn)你優(yōu)秀的內(nèi)在》
如何快速打造有顏值的作品包裝，讓你作品備受青睞
很多設(shè)計師都為此苦惱
今天就和大家聊聊，如何提高作品逼格
[ 前言 ]
首先你要明白一件事非常、非常、非常重要的事
作品包裝不是設(shè)計圖的簡單羅列，更不是讓你世界展現(xiàn)產(chǎn)品的線上截圖，作品包裝包好比女生用美顏相機(jī)自拍
▽
為的是展現(xiàn)作品最完美的一面，下面將為大家講述，如何提升作品的顏值
NO.1
包裝色調(diào)
目前主流的 APP 界面配色都是下面這樣
▽
?
APP 界面中品牌色已淪為點綴色，界面的顏色主要來自內(nèi)容
且 APP 的品牌色通常不會隨著設(shè)計師的主觀意愿進(jìn)行調(diào)整
既然設(shè)計師無法改變 UI 界面的顏色，那我們就從包裝的背景色著手，常見的配色手法有四種：
（ 長圖太占空間，下面均以小圖示意 ）
1.同色系配色
（最常見）
?
指主色和副色都在同一色相上，在配色上營造一致性
2.類似/鄰近配色
?
這種方法最為常見，可以讓頁面顏色更加豐富，且色相過度柔和，看起來非常和諧
3.中性配色
?
即背景以黑白灰為主，突出內(nèi)容（UI 界面），使之不受背景色的干擾，這種配色不僅非常經(jīng)典，還很百搭
4.對比色配色
?
背景和內(nèi)容色彩間的對比形成強(qiáng)烈的視覺沖擊，使內(nèi)容變得更加突出
NO.2
界面色
上文提到，目前 UI 界面中的色彩主要來自內(nèi)容
?
在新版 Apple Music 中，蘋果讓每張專輯自己說話：展現(xiàn)專輯本來之美
?
類似的理念，在 Instagram 改版中也早有體現(xiàn)，其設(shè)計主管 Ian Spalter表示
「我們相信色彩應(yīng)該直接來自社交的照片和視頻才對」
對此，我們可以寬泛的理解為
界面色=內(nèi)容色
如今，目前越來越多的 APP 朝著突出內(nèi)容的方向發(fā)展
在內(nèi)容變得越發(fā)突出的同時，內(nèi)容的質(zhì)量也變成一把雙刃劍
好的內(nèi)容不僅可以提升產(chǎn)品氣質(zhì)有的時候，可以撐起整個作品，如下
▽
??
而差的內(nèi)容則卻能讓產(chǎn)品氣質(zhì)瞬間歸零，以 Ins 為例
▽
?
線上產(chǎn)品內(nèi)容質(zhì)量受 UGC、運營編輯、后臺技術(shù)等多種限制，很難以最完美的效果呈現(xiàn)給大家
慶幸的是，設(shè)計師在包裝環(huán)節(jié)可以通過自己精妙的配圖，展現(xiàn)作品最完美的一面
但是，配圖并不是簡簡單單的去扒一些美圖那么簡單
不僅要根據(jù)整個包裝的配色反復(fù)斟酌，還要符合產(chǎn)品原有的氣質(zhì)，選圖的思路如下
1.展現(xiàn)美的內(nèi)容
?
如果你對內(nèi)容質(zhì)量的把控度不高，建議你可挑選專業(yè)攝影師的作品
?
人像用模特硬照或明星寫真（含網(wǎng)紅），這類的圖片都是經(jīng)過專業(yè)修片，質(zhì)量有保障
2.色調(diào)和諧
在確定包裝的整體色調(diào)后，內(nèi)容的色調(diào)根據(jù)包裝的整體效果進(jìn)行挑選
下面這張圖來自Dribbble
?
用下面兩張圖替換原作品中的圖片，結(jié)果會怎么樣？?
?
雖然內(nèi)容質(zhì)量過關(guān)，但卻破壞了原包裝的整體色調(diào)，拉低了展示效果
3.完善細(xì)節(jié)
我總結(jié)了幾個選圖要點，希望可以幫助大家規(guī)避一些問題
① 烘托氛圍
出于某些原因，國內(nèi)很多設(shè)計師時常會出一些英文設(shè)計稿
如果要做英文設(shè)計，在內(nèi)容配圖上最好以外國人為主
而類似于“今日故宮”這樣帶有中國風(fēng)的產(chǎn)品，在選圖的時候，如果插入老外圖片則顯得很跳戲
② 背景不重色
?
如果 UI 界面中背景為白色，那么圖像背景色要避免大面積出現(xiàn)白色
避免與 UI 背景色相同，造成圖片沒有邊緣感
③ 慎用藍(lán)天白云
?
藍(lán)天白云是中國民間最為常用的素材，作為一個有逼格的設(shè)計師你好意思在配圖中出現(xiàn)這個？
如果要用，除了避免大面積出現(xiàn)以外，還要調(diào)整圖片的整體色調(diào)
④ 主體適當(dāng)
?
盡可能選擇或截取近景圖
圖像的主體可占到圖片尺寸的1/2左右
案例分享
下面將實例講解以往個人作品的包裝思路
背景
去年受某培訓(xùn)機(jī)構(gòu)邀請，做一個通過配色提升包裝效果的范例
范例主要想體現(xiàn)在簡單排版的情況下精通過“色”的修改提升包裝效果
包裝對象
愛奇藝啪啪奇6.1設(shè)計圖，如下
包裝開始
1.確定包裝的主色
初步設(shè)定：產(chǎn)品的主色為綠色，故在整體配色上，以冷色系為主，同時選用綠色的類似色進(jìn)行搭配
?
豐富：接著我又在背景色中加入了紫色
不僅可以使包裝顏色更加豐富，形成柔和的漸變，還可以增加一絲神秘感，提升整體感覺
?
2.確定素材
原設(shè)計圖中所用素材人物，多以微笑為主和藍(lán)紫色的冷艷氣質(zhì)不符
為此我把目標(biāo)鎖定在面無表情的 Model 上，并結(jié)合展示布局
▽
如果整體都是艷麗的顏色，不僅會造成視覺疲勞，且會降低素材的新意
所以需要找到藍(lán)紫色和白色兩套素材
原本打算以亞洲模特為主，無奈亞洲模特可用素材不多，不僅顏色相對單一，且多為雜志封面
▽
?
最終還是選用了國外模特
▽
?
3.中文 or 英文
啪啪奇原始的設(shè)計稿為中文
我是真真切切不想將其替換成英文（嫌麻煩）
可在中文界面下，部分頁面展示效果較差，大家可通過下面兩組對比自行感受下
▽
最后出于對展示效果的考慮，還是將界面中的漢字替換成了英文
-
中英文視差的相關(guān)分析，可詳見《iOS10新設(shè)計的弊端》最后一節(jié)
4.細(xì)節(jié)調(diào)整
至此，文字變成了英文，圖片素材采用國外模特，為了進(jìn)一步完善包裝效果
將頁面中的圓角改為直角（直角更符合冷艷氣質(zhì)），并調(diào)整蒙層的細(xì)節(jié)
▽
?
同時將界面和包裝中出現(xiàn)的社交圖標(biāo)，如QQ、微信、微博等國內(nèi)應(yīng)用
逐一換成Facebook、Twitter、Ins等國外應(yīng)用
▽
?
5. 輸出成品
文字是展示的一部分，在包裝環(huán)節(jié)可結(jié)合產(chǎn)品特點及包裝整體效果選擇文字內(nèi)容（中/英文、字體）
對某些字體特殊的產(chǎn)品，如 今日故宮
在包裝上，采用與APP相同的中文+方正清刻本悅宋字體
包裝效果自然更佳
[ 后記 ]
?
以上三類產(chǎn)品，都可以通過上述辦法快速提升包裝效果
比如下面的界面
雖然布局簡單，卻能做出酷炫的包裝
▽
不要只給自拍上美顏
作品集也需要美圖秀秀
[ 結(jié)束語 ]
作品的展示包裝固然重要，但優(yōu)秀的設(shè)計思維才是支撐設(shè)計師未來道路的基石
如果沉迷于包裝，忽略真實的產(chǎn)品設(shè)計，反倒會給自己帶來無盡的煩惱
『 顏值只能攬客，活好才是硬道理
設(shè)計師應(yīng)當(dāng)內(nèi)外兼修 』
