Behance首頁推薦的作品集為什么這么高級?我們能從中學(xué)到什么?

2022-4-7    seo達(dá)人


圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

 

一次作品展示,想要視覺效果更高級,需要通過各種細(xì)節(jié)綜合打磨。那么在今天推薦的這份作品中,我認(rèn)為打磨比較好的細(xì)節(jié)以及我們可以從學(xué)習(xí)的主要有以下幾點(diǎn):

  1. 高級投影
  2. 投影的延展運(yùn)用
  3. 留白藝術(shù)
  4. 合適的展示角度
  5. 強(qiáng)設(shè)計(jì)感配圖

在我近期幫星友看的作品集中,發(fā)現(xiàn)很多人的作品本來還不錯(cuò)的,結(jié)果被糟糕的展示給減分了,很是可惜。我給不少人提的建議之一是先提升自己的審美,但他們遇到的問題是不知道看啥,判斷不了哪些才是好的作品,以及怎么用到自己作品中去。這些問題不知你是否也有遇到?如果有同樣的困擾,今天的文章一定要看完了,因?yàn)槿歉韶洝?/strong>

所以我在星球中利用審美打卡,每天幫大家搜集一些比較好的展示方式作為參考,同時(shí)提升審美,一舉兩得。這組Behance高級作品就是在打卡中給大家做的分享。接下來,我將逐個(gè)分析這幾個(gè)細(xì)節(jié)部分,方便用到咱們自己的作品集中。

 

1、高級投影  

投影的本質(zhì)就是給畫面打造空間感,并突出界面內(nèi)容,對于這一點(diǎn)我后面也會(huì)做一些延展,可能會(huì)有一些觀點(diǎn)你沒聽過的。在看作品集的過程中我有發(fā)現(xiàn)很多人不注意投影的運(yùn)用,但它其實(shí)是非常重要的作品加分手段。

 

1)投影要干凈輕盈

投影在取色的時(shí)候,可以選擇與背景顏色相近的顏色,然后略微加深一些,不要用純黑色來做投影,會(huì)顯臟。投影的顏色永遠(yuǎn)都需要結(jié)合環(huán)境的顏色,就想象成界面中有一個(gè)太陽光打過來,會(huì)反射周圍的環(huán)境色,所以帶有環(huán)境色的投影會(huì)顯得更自然。

比如下面這個(gè)界面展示就是把背景色和投影顏色調(diào)整為品牌橙色的色相,只是把飽和度降低到了很淺的程度,看起來就很舒服。

圖片

再比如我之前做的一個(gè)banner,右邊的卡片堆疊的效果,疊起來的投影層就是用到了藍(lán)色的投影,看起來就會(huì)顯得非常干凈。

圖片

圖片

另外,要注意投影的距離不要太小顯得不自然,顏色太深會(huì)顯臟。

圖片

 

2)投影要針對特定的顏色進(jìn)行微調(diào)

使用不同的投影透明度取決于產(chǎn)生投影物體的顏色。對于較暗的物體,投影需要做得更強(qiáng),而對于較亮的物體,投影應(yīng)該是更淺一些。

如果不注意這一點(diǎn)的話,假設(shè)兩個(gè)投影都具有相同的不透明度,那么較亮物體的投影會(huì)在較暗物體的投影旁邊看起來更暗。

比如下面的按鈕投影透明度,投影透明度都是50%透明度時(shí),白色按鈕看起來會(huì)比藍(lán)色的更深,可能要降低到30%左右才顯得比較一致。

圖片

3)投影要符合現(xiàn)實(shí)規(guī)律

高級投影應(yīng)該要結(jié)合現(xiàn)實(shí)規(guī)律,做到近實(shí)遠(yuǎn)虛。

圖片

上面這張圖的投影就是有些問題的,更遠(yuǎn)的投影反而顯得更深,其實(shí)應(yīng)該要改的更淺一些才好。

做到這一點(diǎn)有2個(gè)小技巧:

  • 1)如果在PS中設(shè)置投影的話,可以通過調(diào)整PS的投影等高線。

圖片

如果是在sketch和figma中做投影的話,也可以疊加多層投影來做,大家可以嘗試下。

  • 2)在做展示的時(shí)候,彌散的范圍建議在6倍左右會(huì)比較舒服,當(dāng)然這個(gè)也更要根據(jù)你選的投影顏色和透明度綜合來調(diào)整。

圖片

 

2、投影延展  

前面提到,投影在做展示的時(shí)候,其作用就是打造空間感,圍繞這一點(diǎn)我們也可以做些延展。

 

1)增加簡單圖形

在作品下面增加簡單圖形,既不干擾作品,又能通過穿插增加空間感。

圖片

 

2)增加插畫元素

用一些品牌插畫,元素,甚至圖標(biāo)給作品增加穿插,增加空間感。

圖片

 

3)增加3D元素

給作品增加簡單3D元素,比如球、三角之類的元素。

圖片

來自Behance,審美打卡

 

圖片

我曾經(jīng)做的界面包裝

 

4)改變材質(zhì)

把界面做成毛玻璃效果,再做穿插,進(jìn)一步增強(qiáng)空間感

圖片

圖片

來自behance,星球?qū)徝来蚩?/span>

 

5)深色界面

有人問,如果界面本身就是深色的怎么辦?其實(shí)也是基于空間感的原理,給畫面增加一些元素,與背景拉開關(guān)系就好。比如下面這樣

圖片

來自behance,星球?qū)徝来蚩?/span>

 

圖片

來自dribbble,星球?qū)徝来蚩?/span>

 

圖片

來自dribbble,星球?qū)徝来蚩?/em>

 

3、大量留白  

想要提升作品的逼格,使用大量的留白是非常好的技巧。但在給星友溝通作品集的時(shí)候,得到一個(gè)奇怪的說法,說是要把作品限定在多少頁以內(nèi)才更好。

我覺得這有的本末倒置了,作品要多放精華內(nèi)容沒錯(cuò),但不是以頁數(shù)來體現(xiàn)的,展示的時(shí)候還是以提升逼格為主,不要影響作品本身的視覺效果。每一頁P(yáng)PT,重點(diǎn)展示一件作品就足夠了,物以稀為貴,像一些大牌奢侈品就特別喜歡大留白。

圖片

Apple手機(jī)官網(wǎng)截圖

 

圖片

香奈兒官網(wǎng)截圖

 

舉一個(gè)反例,下面是某位星友的作品,其實(shí)這樣的網(wǎng)頁展示,一個(gè)頁面單獨(dú)整理在一頁是最好的。當(dāng)然前提是每一頁的設(shè)計(jì)差別較大,如果太類似的話,放一頁就夠了。如果網(wǎng)頁比較長的話,可以按分屏來展示。

圖片

星友作品截圖

 

就像開頭的作品那樣調(diào)整下,逼格立馬就能上來。

圖片

 

4、展示角度  

作品在做展示的時(shí)候,不論是自己設(shè)計(jì)還是用樣機(jī),有一個(gè)標(biāo)準(zhǔn)就是一定不能讓人看不清細(xì)節(jié),不能做了角度變化之后丟失細(xì)節(jié)。

像開頭的作品展示,都是用了一些相對沒那么夸張的角度,這樣做的一個(gè)好處是能看到細(xì)節(jié),即使是想帶一些角度,增強(qiáng)設(shè)計(jì)感的話,也一定要以能看到細(xì)節(jié)為標(biāo)準(zhǔn)。比如像下面這樣就可以了。

圖片

我也給大家舉一些反例,比如像下面這位同學(xué)的展示角度就比較奇怪,其實(shí)像這種內(nèi)容較多的界面,擺正就可以了,不然細(xì)節(jié)全都看不清。

圖片

星友作品截圖

 

5、高質(zhì)量配圖  

一個(gè)作品中的配圖其實(shí)非常關(guān)鍵,甚至配圖能直接把你糟糕的設(shè)計(jì)拯救過來。但遺憾的時(shí)候,很多人在展示的過程中不大重視自己的配圖,我在跟星友交流過程中會(huì)發(fā)現(xiàn)大家對于配圖存在一個(gè)誤區(qū),就是覺得配圖一定要是真實(shí)的,有些人甚至覺得作品里呈現(xiàn)的一定是要去線上截圖。

我想說,如果這樣做會(huì)把你坑得很慘。原因有以下2點(diǎn):

  1. 線上的圖存在非常多不可控因素,所帶來的視覺效果不一定代表你真實(shí)的視覺設(shè)計(jì)能力
  2. 審美是設(shè)計(jì)師的核心能力,如果你放一堆審美不在線的圖,那別人有理由懷疑你的審美是有問題的。

既然配圖這種重要,那怎么做好配圖這個(gè)事呢?有幾個(gè)小技巧:

 

1)符合調(diào)性

配圖要符合產(chǎn)品的調(diào)性,像開頭的作品中,黑白干凈是它的關(guān)鍵調(diào)性,那么選的圖也是這個(gè)范的。

圖片

 

2)真實(shí)可信

盡量讓配圖看起來真實(shí),別偷懶用重復(fù)的圖,包括圖中用到的數(shù)據(jù)也盡量真實(shí)。像下面這位星友的作品展示就有內(nèi)容重復(fù)的問題,稍微花點(diǎn)時(shí)間就可以優(yōu)化好了。

圖片

星友作品截圖

 

3)加強(qiáng)設(shè)計(jì)感

在放界面展示圖的時(shí)候,界面中放的圖盡量多一些設(shè)計(jì)感,體現(xiàn)你的審美。

圖片

關(guān)于高質(zhì)量配圖我之前也有專門寫文章《如何選到設(shè)計(jì)感強(qiáng)的配圖,我總結(jié)了這7個(gè)實(shí)用方法》,文章中也分享了很多我自己收藏的高質(zhì)量配圖,大家有需要的也可以去閱讀下載。

 

總結(jié)  

最后總結(jié)下,今天主要是從作品展示的角度,給大家介紹了如何利用好投影、投影原理延展、留白、角度、配圖等方面給自己的作品展示加分。

這些技巧操作起來很簡單,但又非常有效,具備很強(qiáng)的實(shí)用性。彩云希望大家把這些常用技巧真正用到自己的作品集中去,提升逼格,找到自己理想的工作!

 

原文地址:彩云譯設(shè)計(jì)(公眾號)

作者:彩云Sky

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》Behance首頁推薦的作品集為什么這么高級?我們能從中學(xué)到什么?

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



分享本文至:

日歷

鏈接

個(gè)人資料

存檔