Category Archives: UI/UX設計

設計表單的時候,為什麼懸浮式標籤體驗更好?

表單設計中,各種設計模式和技巧已經越來越成熟了。在諸多設計技巧當中,懸浮標籤這一設計手法,應該是對於用戶體驗提升最明顯的一種。早在2013年8月的時候,我第一次考慮在自己設計的表單中運用懸浮標籤,這個想法很簡單,在佔位符文本中,借助動畫加入一個圖標顯示,確保用戶不會在填寫過程中迷失。 Continue reading

Published by:

圖例教學!如何利用記憶心理學提高用戶體驗?

我們日常生活中最重要的信息處理器,是看不見摸不著的。它無法買賣或從別人那里索取,但是它可以通過許多方式來提升和加強。這種東西難以描述,卻是人類最寶貴的特徵之一,它可能決定了我們的每一步行動和每一次決策。它是一種奇蹟,我們很少深入思考它。這就是人類的記憶。 Continue reading

Published by:

想讓作品從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: