一次作品展示，想要視覺(jué)效果更高級(jí)，需要通過(guò)各種細(xì)節(jié)綜合打磨。那么在今天推薦的這份作品中，我認(rèn)為打磨比較好的細(xì)節(jié)以及我們可以從學(xué)習(xí)的主要有以下幾點(diǎn)：
- 高級(jí)投影
- 投影的延展運(yùn)用
- 留白藝術(shù)
- 合適的展示角度
- 強(qiáng)設(shè)計(jì)感配圖
在我近期幫星友看的作品集中，發(fā)現(xiàn)很多人的作品本來(lái)還不錯(cuò)的，結(jié)果被糟糕的展示給減分了，很是可惜。我給不少人提的建議之一是先提升自己的審美，但他們遇到的問(wèn)題是不知道看啥，判斷不了哪些才是好的作品，以及怎么用到自己作品中去。這些問(wèn)題不知你是否也有遇到？如果有同樣的困擾，今天的文章一定要看完了，因?yàn)槿歉韶洝?/strong>
所以我在星球中利用審美打卡，每天幫大家搜集一些比較好的展示方式作為參考，同時(shí)提升審美，一舉兩得。這組Behance高級(jí)作品就是在打卡中給大家做的分享。接下來(lái)，我將逐個(gè)分析這幾個(gè)細(xì)節(jié)部分，方便用到咱們自己的作品集中。
1、高級(jí)投影
投影的本質(zhì)就是給畫(huà)面打造空間感，并突出界面內(nèi)容，對(duì)于這一點(diǎn)我后面也會(huì)做一些延展，可能會(huì)有一些觀點(diǎn)你沒(méi)聽(tīng)過(guò)的。在看作品集的過(guò)程中我有發(fā)現(xiàn)很多人不注意投影的運(yùn)用，但它其實(shí)是非常重要的作品加分手段。
1）投影要干凈輕盈
投影在取色的時(shí)候，可以選擇與背景顏色相近的顏色，然后略微加深一些，不要用純黑色來(lái)做投影，會(huì)顯臟。投影的顏色永遠(yuǎn)都需要結(jié)合環(huán)境的顏色，就想象成界面中有一個(gè)太陽(yáng)光打過(guò)來(lái)，會(huì)反射周?chē)沫h(huán)境色，所以帶有環(huán)境色的投影會(huì)顯得更自然。
比如下面這個(gè)界面展示就是把背景色和投影顏色調(diào)整為品牌橙色的色相，只是把飽和度降低到了很淺的程度，看起來(lái)就很舒服。
再比如我之前做的一個(gè)banner，右邊的卡片堆疊的效果，疊起來(lái)的投影層就是用到了藍(lán)色的投影，看起來(lái)就會(huì)顯得非常干凈。
另外，要注意投影的距離不要太小顯得不自然，顏色太深會(huì)顯臟。
2）投影要針對(duì)特定的顏色進(jìn)行微調(diào)
使用不同的投影透明度取決于產(chǎn)生投影物體的顏色。對(duì)于較暗的物體，投影需要做得更強(qiáng)，而對(duì)于較亮的物體，投影應(yīng)該是更淺一些。
如果不注意這一點(diǎn)的話(huà)，假設(shè)兩個(gè)投影都具有相同的不透明度，那么較亮物體的投影會(huì)在較暗物體的投影旁邊看起來(lái)更暗。
比如下面的按鈕投影透明度，投影透明度都是50%透明度時(shí)，白色按鈕看起來(lái)會(huì)比藍(lán)色的更深，可能要降低到30%左右才顯得比較一致。
3）投影要符合現(xiàn)實(shí)規(guī)律
高級(jí)投影應(yīng)該要結(jié)合現(xiàn)實(shí)規(guī)律，做到近實(shí)遠(yuǎn)虛。
上面這張圖的投影就是有些問(wèn)題的，更遠(yuǎn)的投影反而顯得更深，其實(shí)應(yīng)該要改的更淺一些才好。
做到這一點(diǎn)有2個(gè)小技巧：
- 1）如果在PS中設(shè)置投影的話(huà)，可以通過(guò)調(diào)整PS的投影等高線(xiàn)。
如果是在sketch和figma中做投影的話(huà)，也可以疊加多層投影來(lái)做，大家可以嘗試下。
- 2）在做展示的時(shí)候，彌散的范圍建議在6倍左右會(huì)比較舒服，當(dāng)然這個(gè)也更要根據(jù)你選的投影顏色和透明度綜合來(lái)調(diào)整。
2、投影延展
前面提到，投影在做展示的時(shí)候，其作用就是打造空間感，圍繞這一點(diǎn)我們也可以做些延展。
1）增加簡(jiǎn)單圖形
在作品下面增加簡(jiǎn)單圖形，既不干擾作品，又能通過(guò)穿插增加空間感。
2）增加插畫(huà)元素
用一些品牌插畫(huà)，元素，甚至圖標(biāo)給作品增加穿插，增加空間感。
3）增加3D元素
給作品增加簡(jiǎn)單3D元素，比如球、三角之類(lèi)的元素。
來(lái)自Behance，審美打卡
我曾經(jīng)做的界面包裝
4）改變材質(zhì)
把界面做成毛玻璃效果，再做穿插，進(jìn)一步增強(qiáng)空間感
來(lái)自behance，星球?qū)徝来蚩?/span>
5）深色界面
有人問(wèn)，如果界面本身就是深色的怎么辦？其實(shí)也是基于空間感的原理，給畫(huà)面增加一些元素，與背景拉開(kāi)關(guān)系就好。比如下面這樣
來(lái)自behance，星球?qū)徝来蚩?/span>
來(lái)自dribbble，星球?qū)徝来蚩?/span>
來(lái)自dribbble，星球?qū)徝来蚩?/em>
3、大量留白
想要提升作品的逼格，使用大量的留白是非常好的技巧。但在給星友溝通作品集的時(shí)候，得到一個(gè)奇怪的說(shuō)法，說(shuō)是要把作品限定在多少頁(yè)以?xún)?nèi)才更好。
我覺(jué)得這有的本末倒置了，作品要多放精華內(nèi)容沒(méi)錯(cuò)，但不是以頁(yè)數(shù)來(lái)體現(xiàn)的，展示的時(shí)候還是以提升逼格為主，不要影響作品本身的視覺(jué)效果。每一頁(yè)P(yáng)PT，重點(diǎn)展示一件作品就足夠了，物以稀為貴，像一些大牌奢侈品就特別喜歡大留白。
Apple手機(jī)官網(wǎng)截圖
香奈兒官網(wǎng)截圖
舉一個(gè)反例，下面是某位星友的作品，其實(shí)這樣的網(wǎng)頁(yè)展示，一個(gè)頁(yè)面單獨(dú)整理在一頁(yè)是最好的。當(dāng)然前提是每一頁(yè)的設(shè)計(jì)差別較大，如果太類(lèi)似的話(huà)，放一頁(yè)就夠了。如果網(wǎng)頁(yè)比較長(zhǎng)的話(huà)，可以按分屏來(lái)展示。
星友作品截圖
就像開(kāi)頭的作品那樣調(diào)整下，逼格立馬就能上來(lái)。
4、展示角度
作品在做展示的時(shí)候，不論是自己設(shè)計(jì)還是用樣機(jī)，有一個(gè)標(biāo)準(zhǔn)就是一定不能讓人看不清細(xì)節(jié)，不能做了角度變化之后丟失細(xì)節(jié)。
像開(kāi)頭的作品展示，都是用了一些相對(duì)沒(méi)那么夸張的角度，這樣做的一個(gè)好處是能看到細(xì)節(jié)，即使是想帶一些角度，增強(qiáng)設(shè)計(jì)感的話(huà)，也一定要以能看到細(xì)節(jié)為標(biāo)準(zhǔn)。比如像下面這樣就可以了。
我也給大家舉一些反例，比如像下面這位同學(xué)的展示角度就比較奇怪，其實(shí)像這種內(nèi)容較多的界面，擺正就可以了，不然細(xì)節(jié)全都看不清。
星友作品截圖
5、高質(zhì)量配圖
一個(gè)作品中的配圖其實(shí)非常關(guān)鍵，甚至配圖能直接把你糟糕的設(shè)計(jì)拯救過(guò)來(lái)。但遺憾的時(shí)候，很多人在展示的過(guò)程中不大重視自己的配圖，我在跟星友交流過(guò)程中會(huì)發(fā)現(xiàn)大家對(duì)于配圖存在一個(gè)誤區(qū)，就是覺(jué)得配圖一定要是真實(shí)的，有些人甚至覺(jué)得作品里呈現(xiàn)的一定是要去線(xiàn)上截圖。
我想說(shuō)，如果這樣做會(huì)把你坑得很慘。原因有以下2點(diǎn)：
- 線(xiàn)上的圖存在非常多不可控因素，所帶來(lái)的視覺(jué)效果不一定代表你真實(shí)的視覺(jué)設(shè)計(jì)能力
- 審美是設(shè)計(jì)師的核心能力，如果你放一堆審美不在線(xiàn)的圖，那別人有理由懷疑你的審美是有問(wèn)題的。
既然配圖這種重要，那怎么做好配圖這個(gè)事呢？有幾個(gè)小技巧：
1）符合調(diào)性
配圖要符合產(chǎn)品的調(diào)性，像開(kāi)頭的作品中，黑白干凈是它的關(guān)鍵調(diào)性，那么選的圖也是這個(gè)范的。
2）真實(shí)可信
盡量讓配圖看起來(lái)真實(shí)，別偷懶用重復(fù)的圖，包括圖中用到的數(shù)據(jù)也盡量真實(shí)。像下面這位星友的作品展示就有內(nèi)容重復(fù)的問(wèn)題，稍微花點(diǎn)時(shí)間就可以?xún)?yōu)化好了。
星友作品截圖
3）加強(qiáng)設(shè)計(jì)感
在放界面展示圖的時(shí)候，界面中放的圖盡量多一些設(shè)計(jì)感，體現(xiàn)你的審美。
關(guān)于高質(zhì)量配圖我之前也有專(zhuān)門(mén)寫(xiě)文章《如何選到設(shè)計(jì)感強(qiáng)的配圖，我總結(jié)了這7個(gè)實(shí)用方法》，文章中也分享了很多我自己收藏的高質(zhì)量配圖，大家有需要的也可以去閱讀下載。
總結(jié)
最后總結(jié)下，今天主要是從作品展示的角度，給大家介紹了如何利用好投影、投影原理延展、留白、角度、配圖等方面給自己的作品展示加分。
這些技巧操作起來(lái)很簡(jiǎn)單，但又非常有效，具備很強(qiáng)的實(shí)用性。彩云希望大家把這些常用技巧真正用到自己的作品集中去，提升逼格，找到自己理想的工作！
原文地址：彩云譯設(shè)計(jì)（公眾號(hào)）
作者：彩云Sky
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》Behance首頁(yè)推薦的作品集為什么這么高級(jí)？我們能從中學(xué)到什么？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司