編者按:這篇文章來自 UI 設計師 Victor Adeyemo,他將自己走過無數彎路之后總結出來的圖片使用技巧梳理成為一篇干貨滿滿的文章,這些技巧可以應用到UI和平面排版當中,往下看看吧:

如果你仔細查看如今高質量的 UI 設計,會發現那些優秀的設計背后有很多共通的技術和方法,你可以將它們無縫地運用到自己的 UI 和視覺設計當中,這些方法和技巧能夠讓你看起來足夠專業。

這篇文章當中的很多內容來源于我早期設計階段的挫折和失敗。和大家一樣,當我看著這些優秀的作品的時候,會像面對著萬花筒一樣,看到精彩絢麗的效果,可是真等我自己做的時候,才會發現萬花筒的外殼拿走之后,剩下的只是一塊簡單的碎片。這就是我們絕大多數人所面臨的問題——我們沒有從這些優秀的設計當中找到規則和共性,而不僅僅是漫無目的地欣賞。

在一次次的失敗和嘗試當中,我開始記錄和梳理這些成功的設計的優點,開始將經驗反饋到自己的設計項目當中。這篇文章我就主要來分享我這方面的經驗和總結,希望這些技巧最后也能讓你的設計同樣優秀。

1、用圖片作為背景來化解單調

在一部分UI界面中,使用貼合場景和氛圍的圖片作為背景,能帶來更加沉浸的體驗。只是需要注意的是,需要調整明暗,確保前后景的對比度要足夠強。

在UI和排版中,讓圖片快速出彩的10個技巧

Login Screen Redesign — Victor Adeyemo

在UI和排版中,讓圖片快速出彩的10個技巧

Nature — Popsabey

2、將圖片融入背景來使用

同樣是一種制造沉浸式視覺體驗的設計技巧,通過摳圖之類的技巧,讓某些圖片元素和整個背景融為一體,圖片和背景的無縫銜接能夠給人以一種奇妙的視覺體驗。

在UI和排版中,讓圖片快速出彩的10個技巧

Lippear Website — Victor Adeyemo

在UI和排版中,讓圖片快速出彩的10個技巧

Bloom. Vladimir Biondic

3、高素質圖片緊密拼接使用

讓高素質的圖片緊密無縫地拼接、并排排版,能夠制造出一種無縫切高級的視覺效果,高清的圖片通常包含著豐富的視覺信息量,并排拼接起來之后,能夠制造出致密的信息量,讓整個版面呈現出信息的疏密節奏變化。

在UI和排版中,讓圖片快速出彩的10個技巧

Discover Moscow

在UI和排版中,讓圖片快速出彩的10個技巧

Denis lomov

4、為圖片添加色塊投影

同樣是一種增加信息層級,消減單調的方法,這種方式百搭而易用,在絕大多數的風格現代的平面排版和UI界面當中,這種小技巧都可以使用,快速提升界面的視覺效果。

在UI和排版中,讓圖片快速出彩的10個技巧

Anastasia Yastrebkova

在UI和排版中,讓圖片快速出彩的10個技巧

Natalia Smoczyńska

5、在圖片的前景/背景添加圖案和形狀

圖案和形狀看起來很簡單,單獨使用的時候確實也很容易顯得單調,但是當它作為裝飾元素和圖片組合在一起的時候,能夠快速地構建出頗為不錯的裝飾效果和視覺張力。

在UI和排版中,讓圖片快速出彩的10個技巧

ursae. majorizzz

在UI和排版中,讓圖片快速出彩的10個技巧

Bloom Hair — Web design

6、在圖片的前后增加文本、圖案和不規則圖形

在圖片的前景或者背景疊加文本、圖案和不規則圖形,也同樣可以快速增加信息的層級,添加的時候可以不用嚴格意義上在圖片的范疇內,可以錯位,可以部分疊加,這樣的布局設計更加有趣。

在UI和排版中,讓圖片快速出彩的10個技巧

Lifestyle. Vladimir Biondic

在UI和排版中,讓圖片快速出彩的10個技巧

Confidence. Vladimir Biondic

在UI和排版中,讓圖片快速出彩的10個技巧

Emilia Brewster Website — Halo Lab

7、使用文本或者圖形做剪貼蒙板

這也是最近這些年比較流行且非常使用的一種技巧,使用剪貼蒙版來將圖片約束在文本或者圖形的外輪廓當中,這上一種增加形式感、有趣的傳遞信息的方式。

在UI和排版中,讓圖片快速出彩的10個技巧

About Page — Joonas Virtanen

在UI和排版中,讓圖片快速出彩的10個技巧

Portfolio site — Krista

8、讓圖片的間距足夠窄

控制圖片之間的間距足夠窄,能夠讓整個布局顯得緊湊而富有凝聚感,圖片的聚合能夠讓整片圖片區域顯得豐富又集中。

在UI和排版中,讓圖片快速出彩的10個技巧

Inbox App — Ben Tortorelli

在UI和排版中,讓圖片快速出彩的10個技巧

Unsplash Retro — Sebastian Jungbluth

9、在圖片上疊加色彩

在圖片上疊加色彩,或者說將圖片制作為單色調的配色,能夠產生類似黑白照片一般更強的形體感,增加視覺主體的視覺效果,同時借用不同的色彩來營造統一的氛圍和情緒。

在UI和排版中,讓圖片快速出彩的10個技巧

Colour Me timbers -Johan Adam Horn

在UI和排版中,讓圖片快速出彩的10個技巧

iLearn LMS — Neil Lawson

同時,還可以選擇為部分的圖片疊加色彩,這樣的處理方法更加有趣,增加了信息層級。

在UI和排版中,讓圖片快速出彩的10個技巧

Website Design — Brian Rodenburg

在UI和排版中,讓圖片快速出彩的10個技巧

Search Art Direction — John Adam

10、將圖片裁切為其他的形狀

雖然絕大多數的圖片都是矩形的,但是將圖片裁切為其他的圖形會讓整個設計顯得非常新穎。

在UI和排版中,讓圖片快速出彩的10個技巧

Welch & Smith — Halo lab

在UI和排版中,讓圖片快速出彩的10個技巧

Bloom Website

收藏 349
點贊 204

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。