选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

7个选图技巧秘籍,让您UI设计配图无忧

在一幅作品中,配图往往是吸引用户的重要元素,而在设计作品中,配图同样需要具备设计感,它能直接体现这位设计师的品味。配图图选的好,能快速拉高作品的设计品质。 
640-1
640-11
640-19
图片来源:dribbble

这里有个点需要引起注意,有些人在做概念稿的时候会纠结到底要用真实场景的图,还是要用设计感更强的图。严格来说也没有对错,但我建议大家选用设计感更强的图更加分,因为设计师在看作品时的第一印象还是作品本身的设计感,更关注视觉专业能力。优质的选图能够体现一个设计师基本的审美,真实的产品配图虽然更能体现线上实际效果,但第一印象扣分了就很难继续往下看了。
640-13
好看的作品会有一种直觉美,就是你一眼看过去,就能打动你。按我自己的经验,我会从以下7个方面快速判断一张图是否具有设计感:

1.颜色要饱满

一张图里应该有暗部,亮部和比较多的灰度区域,有一个简单的办法,如果把照片去色后用色阶检查的时候依然从黑到白颜色信息饱满就是合格的,有1分最暗的地方,1分最亮的地方,8分暗部过渡这种图片会比较好。(当然这不是唯一的标准,不同的颜色氛围能表达不同的情绪,这里只是为了方便判断)
640-23
图片来源:behance

或者也可以直接打开色阶,如果直方图中从白到黑都有较多颜色信息,就代表颜色是饱满的。
640-16

2.光影关系要细节

画面中有合理的高光,投影有细节,能突出画面主体内容,避免出现死黑。不仅限于照片,在UI设计中,要注意投影会反射场景中其他的颜色信息,避免使用纯黑色投影。有2个做法,一个是直接给投影吸上周围的颜色然后加深一些,另一个是通过修改投影的叠加模式改为正片叠底。
640-14
640-22
图片来源:behance

3.大的留白

要让画面具有不错的设计感,大量留白是一个比较好的办法,画面简洁,具有高级感。
640-4
640-2
640-8
图片来源:behance

4.构图有特点

一幅好的作品,首先吸引你注意的多半是构图,构图关系比较独特,往往就能令你印象深刻。常见的画面构图方式有:中心构图、水平线构图、垂直线构图、三分构图、对称构图、对角线构图、引导线构图、框架构图、重复构图。这些常见构图法引用自知乎上一篇很棒的文章《九种最常用的构图法》https://zhuanlan.zhihu.com/p/21261635,推荐大家看看,我这里就不详细展开了。
1)中心构图
640-10
图片来源:https://www.pexels.com

2)水平线构图
640-3
3)垂直线构图
640-15
图片来源:https://www.pexels.com

4)三分构图
640-21
图片来源:https://www.pexels.com

5)对称构图
640-18
图片来源:https://www.pexels.com

6)对角线构图
640-19
图片来源:behance

7)引导线构图
640-20
图片来源:https://www.pexels.com

8)框架构图
640-11
图片来源:https://www.pexels.com

9)重复构图
640-12
图片来源:https://www.pexels.com

这些构图方法需要经常在看图的过程中进行有意识的分辨,才能加深印象,然后潜移默化的改变自己的审美。比如我自己在拍照的时候,看图的时候,会下意识的判断下这个画面属于什么样的构图方式,不论是拍摄的过程中还是后期,都能比较准确的把握好画面的美感。

5.细节有亮点

在看一副作品时,要注意找画面中吸引自己的点,并随时做好笔记。这些亮点可以是一个少见的材质,可以是一个有意思的创意,但凡有点出人意料的小细节,就可以为作品增色不少。
比如可以是这种颠覆的对比关系
640-16
图片来源:behance

比如可以是烟雾加花草的特殊效果
640-5
图片来源:behance

比如这张人像与鱼的组合,眼睛部分做成了鱼鳞的形状,就是一个不错的亮点
640-17
图片来源:behance

这些设计亮点相对比较主观,只有你能说出你喜欢它的理由,那么这就是它亮点。

6.切合主题

配图的选择要有系列感,千万不要让画面显得凌乱。比如做UI时的概念稿,选定一个配图风格后,后续的配图也保持这种风格,统一才有更好的美感。
比如偏概念性的配图就可以使用下面这个系列,我个人非常喜欢的:
640-15
640-13
640-18
图片来源:behance

实际案例,以品牌色和用途选择的主题配图

640-7
图片来源:https://dribbble.com/shots/15667376

 

高质量的主题插画配图
640-12
图片来源:https://dribbble.com/shots/14873066-Cepirit-Japan-Travel-App-Exploration

7.颜色丰富

干净或者炫酷的颜色,都能非常吸引用户的注意力,在一些需要设计感的UI配图中,比如音乐,艺术类的APP设计中非常好用。
640-14
640-17
640-9
图片来源:behance

实际案例
640-6
图片来源:https://dribbble.com/shots/14973122

转载注明:云瑞设计
原文地址:彩云译设计

云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。