• 高強力連彈!高質量免費圖庫+一鍵下載UNSPLASH圖庫

    本文要推薦的「SplitShire」是一款國外免費圖庫網站,收錄的項目以相片為主,同時也有少數影片可免費下載使用。這個圖庫不以龐大照片數量為賣點,但相片都具有一定質感和獨特性,種類分門別類,包括抽象、動物、時尚、交通工具、街道、美食、科技、大自然及設計。 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:
  • 設計趨勢:創新懸停效應,你看過了嗎?

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

    Published by: