在UI和排版中，让图片快速出彩的10个技巧

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

编者按：这篇文章来自 UI 设计师 Victor Adeyemo，他将自己走过无数弯路之后总结出来的图片使用技巧梳理成为一篇干货满满的文章，这些技巧可以应用到UI和平面排版当中，往下看看吧：

如果你仔细查看如今高质量的 UI 设计，会发现那些优秀的设计背后有很多共通的技术和方法，你可以将它们无缝地运用到自己的 UI 和视觉设计当中，这些方法和技巧能够让你看起来足够专业。

这篇文章当中的很多内容来源于我早期设计阶段的挫折和失败。和大家一样，当我看着这些优秀的作品的时候，会像面对着万花筒一样，看到精彩绚丽的效果，可是真等我自己做的时候，才会发现万花筒的外壳拿走之后，剩下的只是一块简单的碎片。这就是我们绝大多数人所面临的问题——我们没有从这些优秀的设计当中找到规则和共性，而不仅仅是漫无目的地欣赏。

在一次次的失败和尝试当中，我开始记录和梳理这些成功的设计的优点，开始将经验反馈到自己的设计项目当中。这篇文章我就主要来分享我这方面的经验和总结，希望这些技巧最后也能让你的设计同样优秀。

1、用图片作为背景来化解单调

在一部分UI界面中，使用贴合场景和氛围的图片作为背景，能带来更加沉浸的体验。只是需要注意的是，需要调整明暗，确保前后景的对比度要足够强。

Login Screen Redesign — Victor Adeyemo

Nature — Popsabey

2、将图片融入背景来使用

同样是一种制造沉浸式视觉体验的设计技巧，通过抠图之类的技巧，让某些图片元素和整个背景融为一体，图片和背景的无缝衔接能够给人以一种奇妙的视觉体验。

Lippear Website — Victor Adeyemo

Bloom. Vladimir Biondic

3、高素质图片紧密拼接使用

让高素质的图片紧密无缝地拼接、并排排版，能够制造出一种无缝切高级的视觉效果，高清的图片通常包含着丰富的视觉信息量，并排拼接起来之后，能够制造出致密的信息量，让整个版面呈现出信息的疏密节奏变化。

Discover Moscow

Denis lomov

4、为图片添加色块投影

同样是一种增加信息层级，消减单调的方法，这种方式百搭而易用，在绝大多数的风格现代的平面排版和UI界面当中，这种小技巧都可以使用，快速提升界面的视觉效果。

Anastasia Yastrebkova

Natalia Smoczyńska

5、在图片的前景/背景添加图案和形状

图案和形状看起来很简单，单独使用的时候确实也很容易显得单调，但是当它作为装饰元素和图片组合在一起的时候，能够快速地构建出颇为不错的装饰效果和视觉张力。

ursAE. majorizzz

Bloom Hair — Web design

6、在图片的前后增加文本、图案和不规则图形

在图片的前景或者背景叠加文本、图案和不规则图形，也同样可以快速增加信息的层级，添加的时候可以不用严格意义上在图片的范畴内，可以错位，可以部分叠加，这样的布局设计更加有趣。

Lifestyle. Vladimir Biondic

Confidence. Vladimir Biondic

Emilia Brewster Website — Halo Lab

7、使用文本或者图形做剪贴蒙板

这也是最近这些年比较流行且非常使用的一种技巧，使用剪贴蒙版来将图片约束在文本或者图形的外轮廓当中，这上一种增加形式感、有趣的传递信息的方式。

About Page — Joonas Virtanen

Portfolio site — Krista

8、让图片的间距足够窄

控制图片之间的间距足够窄，能够让整个布局显得紧凑而富有凝聚感，图片的聚合能够让整片图片区域显得丰富又集中。

Inbox App — Ben Tortorelli

Unsplash Retro — Sebastian Jungbluth

9、在图片上叠加色彩

在图片上叠加色彩，或者说将图片制作为单色调的配色，能够产生类似黑白照片一般更强的形体感，增加视觉主体的视觉效果，同时借用不同的色彩来营造统一的氛围和情绪。

Colour Me timbers -Johan Adam Horn

iLearn LMS — Neil Lawson

同时，还可以选择为部分的图片叠加色彩，这样的处理方法更加有趣，增加了信息层级。

Website Design — Brian Rodenburg

Search Art Direction — John Adam

10、将图片裁切为其他的形状

虽然绝大多数的图片都是矩形的，但是将图片裁切为其他的图形会让整个设计显得非常新颖。

Welch & Smith — Halo lab

Bloom Website

想让数据秒变可视化？试试这个免费神器Meta-Chart！

统计图表（Chart）是一个易于传达想法的方式，将一般文字数据转为可视化图形，让其他人在更短时间内清楚掌握信息，相对于表格来说也更好阅读，大多数的字处理工具都内建制作图表功能，要在报告或投影片中加入统计图表并不难，如果手边没有合适软件，又要制作图表的话也有在线工具可以使用。