Category Archives: UI/UX設計

想讓作品從80分到100分?你需要這些包裝作品的小技巧!

我們包裝的目標就是:吸引眼球!

我個人覺得要想吸引眼球就要注意以下兩點——層級與細節。

接下來的時間,我們就來了解一下層級與細節具體是什麼!

 

一. 層級

1.1 顏色層級

很多作品包裝背景顏色都是有深有淺,為什麼?

其實就是打造一種顏色層級,刺激視覺感官,看下圖:

1

左側黑白相間的版本要比右側純黑色層級更豐富,在展示作品的時候,就會給人一種視覺衝擊力。

來看真實的作品排版包裝,如下圖:

2

當然顏色層級不一定非要用深淺,色相的對比也可以,如下圖:

3

△ behance優秀作品

但是色相比較難控制,對新人來說最好的方法就是主色和白色相間使用,不易出錯。

 

1.2 內容層級

們每做完一個作品包裝,可以審查一遍,看看整體一共可以分為幾層,如果只有兩層,那就重新做吧。

我們來看看優秀的包裝如何讓層級豐富。

比如使用一些模型,並讓界面局部與模型分離:

4

△ behance優秀作品

再比如讓背景多幾個層次:

5

△ behance優秀作品

再比如像拍照一樣,讓景深變長,在前景增加修飾物,如下圖:

6

△ behance優秀作品

 

1.3 方向層級

方向層級意思就是展示的內容不要都放在同一個方向,要有變化,左右一定要混合使用,不然看著就會死氣沉沉的。

比如下面這張圖:

7

右側的排版是不是要比左側靈活很多?

我幫你答了:是的!

那我們再看看優秀的案例:

8

△ behance優秀作品

主形象的方向順序是右-左-右,看起來變化很豐富。

 

二. 細節

細節體現專業,這句話大家應該都聽過,但是也許很多人並不知道這個細節到底是什麼,能舉幾個例子嗎?

接下來我們就來舉幾個活生生的例子。

1.1 加點小修飾

9

△ behance優秀作品

整個展示界面加了很多點、線、面的元素,使整體看起來很豐富,但是上期說過了,這種方式不好駕馭,一定要謹慎使用。

 

1.2 質感上的細節

圖片素材的質感,手機模型的質感等等都是提高美觀的細節,如下圖:

10

△ 絕命圖師作品

手機模型上加一層屏幕的反光,顯得質感倍增,再加上圖片的質量很高,所以最後的視覺效果非常棒。

 

1.3 適當加點投影

投影是一個非常出效果的方法,但很容易用臟,一定要多練:

11

△ behance優秀作品

 

1.4 適當的“破”

當一個東西規規矩矩的放在一個容器中時,你看不出他的美,但如果你能適當的將其釋放出去一部分,也許能夠得到不一樣的收穫,例如下圖:

12

如果蜘蛛俠沒有“走出屏幕”,衝擊力就不會那麼強了。

再比如下圖:

13

黑白背景色本來沒有什麼關聯,作者用一些元素適當將其打破,增加了一些活力。

這些就是“破”的力量!

其實細節無處不在,多去看那些優秀的作品包裝,你會發現很多很多的細節,這裡就不舉那麼多例子了。

 

 

總結

以上就是我個人對於層級和細節的理解,目前就只整理了這些,大家如果有什麼好的方法歡迎與我交流。

當我們沒有什麼思路的時候,就多去看看大神們的作品,看看他們是怎麼包裝展示的,總結出自己差在哪裡,針對每一個點去進行優化。

當然也不要太過依賴於最後的包裝,因為作品本身才是靈魂所在,還是要先把作品做好,再去思考包裝,千萬不要因為懂了點包裝,就把事情搞的本末倒置哦!

 

 

frankbite-關注UI設計/前端/網頁,如果您喜歡我們的文章,歡迎 Follow 我們的 Facebook 專頁,我們將為您提供最新、最實用的資訊!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03

 

原文地址:歡迎關注作者的微信公眾號:「菜心設計鋪」

Published by:

設計趨勢:創新懸停效應,你看過了嗎?

動效是如今UI設計中的重要組成部分,也是目前最熱門的設計趨勢之一。在之前的《在現代網頁設計中,動效有哪些常見的用法》這篇文章中,我們探討了動效對於交互和用戶的重要意義,動效在不同的環節發揮的作用越越來越大。而今天我們要聊的是光標懸停特效,這也是近年動效設計的熱點之一。 Continue reading

Published by:

現在網頁設計中圖片有哪些常見的使用技巧?

圖片在網頁中所扮演的角色越來越重要。作為最常見也是最早使用的網頁多媒體,圖片對於網頁設計師而言至關重要。如何用好圖片已經成為了一項成熟、完善而又講究的技巧,而在高清屏幕無處不在的今天,稍有瑕疵的圖片都在高密度的像素下無所遁形,而不合理的圖片設計也不會逃過訪客的雙眼。 Continue reading

Published by: