畢業(yè)季,兩招快速提升設(shè)計師的作品集格調(diào)

資訊頻道 - 設(shè)計技 來源:中國設(shè)計在線 作者:cdo 2017-02-06

馬上就求職高峰了,大家又要開始著手整理這一年的作品集,那么如何快速提升作品集的展示效果呢?這篇文章從色彩入手,幫你輕松提高作品集的格調(diào)!

一說到作品包裝,有些同學(xué)想到的是

套用Mockup:

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

拉透視:

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

還有一些同學(xué)在展示布局上特別用心:

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)!(實例演示)

有人用了這些方法,作品立刻脫穎而出,而更多的人卻被說成表面功夫,這是為什么?

排版固然重要,但色彩的運用同樣不能忽視,有時色彩甚至是作品脫穎而出的關(guān)鍵

試想一下,在Dribbble 有很多高人氣作品,雖然內(nèi)容平平,但只要顏值到位,依然可以圈粉無數(shù):

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

在這看臉的時代,沒有顏值的作品,縱使布局考究,也鮮受關(guān)注,設(shè)計師的作品必須精致。

前言

首先你要明白一件事非常、非常、非常重要的事

作品包裝不是設(shè)計圖的簡單羅列,更不是讓你世界展現(xiàn)產(chǎn)品的線上截圖,作品包裝包好比用美顏相機自拍

為的是展現(xiàn)作品最完美的一面,下面將為大家講述,如何提升作品的顏值。

01/

包裝色調(diào)

目前主流的 APP 界面配色都是下面這樣

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)!(實例演示)

APP 界面中品牌色已淪為點綴色,界面的顏色主要來自內(nèi)容,且 APP 的品牌色通常不會隨著設(shè)計師的主觀意愿進行調(diào)整

既然設(shè)計師無法改變 UI 界面的顏色,那我們就從包裝的背景色著手,常見的配色手法有四種:

( 長圖太占空間,下面均以小圖示意 )

1. 同色系配色

(最常見)

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

指主色和副色都在同一色相上,在配色上營造一致性

2. 類似/鄰近配色

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

這種方法最為常見,可以讓頁面顏色更加豐富,且色相過度柔和,看起來非常和諧

3. 中性配色

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

即背景以黑白灰為主,突出內(nèi)容(UI 界面),使之不受背景色的干擾,這種配色不僅非常經(jīng)典,還很百搭

4. 對比色配色

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

背景和內(nèi)容色彩間的對比形成強烈的視覺沖擊,使內(nèi)容變得更加突出

02/

界面色

上文提到,目前 UI 界面中的色彩主要來自內(nèi)容

在新版 Apple Music 中,蘋果讓每張專輯自己說話:展現(xiàn)專輯本來之美

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

類似的理念,在 Instagram 改版中也早有體現(xiàn),其設(shè)計主管 Ian Spalter表示:「我們相信色彩應(yīng)該直接來自社交的照片和視頻才對」

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

對此,我們可以寬泛的理解為界面色=內(nèi)容色

如今,目前越來越多的 APP 朝著突出內(nèi)容的方向發(fā)展,在內(nèi)容變得越發(fā)突出的同時,內(nèi)容的質(zhì)量也變成一把雙刃劍。好的內(nèi)容不僅可以提升產(chǎn)品氣質(zhì)有的時候,可以撐起整個作品,如下:

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

而差的內(nèi)容則卻能讓產(chǎn)品氣質(zhì)瞬間歸零,以 Ins 為例:

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

線上產(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)容

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

如果你對內(nèi)容質(zhì)量的把控度不高,建議你可挑選專業(yè)攝影師的作品:

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

人像用模特硬照或明星寫真(含網(wǎng)紅),這類的圖片都是經(jīng)過專業(yè)修片,質(zhì)量有保障

2. 色調(diào)和諧

在確定包裝的整體色調(diào)后,內(nèi)容的色調(diào)根據(jù)包裝的整體效果進行挑選。

下面這張圖來自Dribbble:

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

用下面兩張圖替換原作品中的圖片,結(jié)果會怎么樣?

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

 學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

雖然內(nèi)容質(zhì)量過關(guān),但卻破壞了原包裝的整體色調(diào),拉低了展示效果

3.完善細節(jié)

我總結(jié)了幾個選圖要點,希望可以幫助大家規(guī)避一些問題

1)烘托氛圍

出于某些原因,國內(nèi)很多設(shè)計師時常會出一些英文設(shè)計稿

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

如果要做英文設(shè)計,在內(nèi)容配圖上最好以外國人為主,而類似于“今日故宮”這樣帶有中國風的產(chǎn)品,在選圖的時候,如果插入老外圖片則顯得很跳戲。

2)背景不重色

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)!(實例演示)

如果 UI 界面中背景為白色,那么圖像背景色要避免大面積出現(xiàn)白色,避免與 UI 背景色相同,造成圖片沒有邊緣感

3)慎用藍天白云

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

藍天白云是中國民間最為常用的素材,作為一個有逼格的設(shè)計師你好意思在配圖中出現(xiàn)這個?

如果要用,除了避免大面積出現(xiàn)以外,還要調(diào)整圖片的整體色調(diào)。

4)主體適當

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

盡可能選擇或截取近景圖,圖像的主體可占到圖片尺寸的1/2左右

03/

案例分享

下面將實例講解以往個人作品的包裝思路

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

背景

去年受某培訓(xùn)機構(gòu)邀請,做一個通過配色提升包裝效果的范例,范例主要想體現(xiàn)在簡單排版的情況下精通過“色”的修改提升包裝效果。

包裝對象

愛奇藝啪啪奇6.1設(shè)計圖,如下

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

包裝開始 

1. 確定包裝的主色

初步設(shè)定:產(chǎn)品的主色為綠色,故在整體配色上,以冷色系為主,同時選用綠色的類似色進行搭配。

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

豐富:接著我又在背景色中加入了紫色

不僅可以使包裝顏色更加豐富,形成柔和的漸變,還可以增加一絲神秘感,提升整體感覺 。

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)!(實例演示)

2.確定素材

設(shè)計圖中所用素材人物,多以微笑為主和藍紫色的冷艷氣質(zhì)不符,為此我把目標鎖定在面無表情的 Model 上,并結(jié)合展示布局。

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

如果整體都是艷麗的顏色,不僅會造成視覺疲勞,且會降低素材的新意,所以需要找到藍紫色和白色兩套素材。

原本打算以亞洲模特為主,無奈亞洲模特可用素材不多,不僅顏色相對單一,且多為雜志封面。

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)!(實例演示)

最終還是選用了國外模特:

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

3. 中文 or 英文

啪啪奇原始的設(shè)計稿為中文,我是真真切切不想將其替換成英文(嫌麻煩)。

可在中文界面下,部分頁面展示效果較差,大家可通過下面兩組對比自行感受下

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

最后出于對展示效果的考慮,還是將界面中的漢字替換成了英文。

4. 細節(jié)調(diào)整

至此,文字變成了英文,圖片素材采用國外模特,為了進一步完善包裝效果

將頁面中的圓角改為直角(直角更符合冷艷氣質(zhì)),并調(diào)整蒙層的細節(jié)

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

同時將界面和包裝中出現(xiàn)的社交圖標,如QQ、微信、微博等國內(nèi)應(yīng)用逐一換成Facebook、Twitter、Ins等國外應(yīng)用:

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

5. 輸出成品

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

文字是展示的一部分,在包裝環(huán)節(jié)可結(jié)合產(chǎn)品特點及包裝整體效果選擇文字內(nèi)容(中/英文、字體)

對某些字體特殊的產(chǎn)品,如 今日故宮:

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

 

包裝上,采用與APP相同的中文+方正清刻本悅宋字體包裝效果自然更佳

后記

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

以上三類產(chǎn)品,都可以通過上述辦法快速提升包裝效果,比如下面的界面:

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

雖然布局簡單,卻能做出酷炫的包裝。

學(xué)會這兩招,快速提升<a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>師的作品集格調(diào)。▽嵗菔荆

結(jié)束語

作品的展示包裝固然重要,但優(yōu)秀的設(shè)計思維才是支撐設(shè)計師未來道路的基石,如果沉迷于包裝,忽略真實的產(chǎn)品設(shè)計,反倒會給自己帶來無盡的煩惱。


聲明:站內(nèi)網(wǎng)友所發(fā)表的所有內(nèi)容及言論僅代表其本人,并不反映任何網(wǎng)站意見及觀點。

全部評論

暫無相關(guān)推薦