分享此网站可得100G教程,联系小洁领取点击这里给我发消息

运用20个技巧快速制作易懂美观的图片

经验理念 学UI设计 407次浏览 0个评论

作为一名设计师,大多时候都是将想要传达的事情以图片的形式表达出来。无论是提案书中说明业务内容,还是图表化具体数据,都需要用图片来表现,这个时候你是不是也收到过这样的质疑呢?我不知道你最终想要表达什么结论。

  • 我不知道你最终想要表达什么结论。
  • 元素太多,很难把握整体。
  • 不知道从何看起。
  • 结论最想说的是什么?
  • 字号太多缺乏统一性。
  • 太俗气了,看着像传单。
  • 整体的平衡感很差。
  • 这里就这么空着,太单调了。
  • 颜色太鲜艳了感觉很吵。

我虽然也在每天对后辈做出来的图片进行各种反馈,反过来想想自己,却不记得有人系统地指导过这种图片的制作方法,似乎一直是自己长年累月从失败中总结出来的经验。同时,就在感叹,难道没有一种更高效的让任何人都能理解并且美观的图片吗?

因此,这次想把对于“易懂且美观的图片具体制作方法”,自己所熟知的技巧尽量具体地表达出来,希望不仅仅是设计师,即使和设计工作无关的人员也能轻松地理解。

 

易懂且美观的图片制作三原则

原则1)准确捕捉最想表达的内容

运用20个技巧快速制作易懂美观的图片

插图和文章相比是为了传达一个粗略概念的便捷手段。即使没有花费时间阅读长文,看了图片就能在几秒钟内了解想要传达的主要内容。最重要的是“怎样准确捕捉最想要传达的要点。”无论多么美观的图片,传达不出应有的内容都是没有意义的。无论是插图还是地图,能够用一句话传达“这个图要传达的是什么”,是制作易懂图片的第一步。

原则2)规则和要素尽可能精简

运用20个技巧快速制作易懂美观的图片

为了更加便捷地传达信息,最重要的就是简洁。就是要将冗长的具体文字替换为精简的要素和规则。字号,颜色数,线条种类,线的粗细,边框、形状等,所有的要素用最少的样式规范而成,这些都和简洁易懂有着重要的关系。

原则3)遵守设计的四项4基本原则

运用20个技巧快速制作易懂美观的图片

易懂又美观的图片可以轻易地做出来,这种魔法一般的技能是不存在的。最基本的就是要彻底掌握设计的基本原则。就好比运动员不去锻炼肌肉就会影响一切的结果。图片的细节遵循亲密性、对齐、对比、重复的四项原则,自然就会向易懂且美观的方向靠近。

 

图表制作技巧

01)使用规则图形

运用20个技巧快速制作易懂美观的图片

插图发挥作用的最重要原则就是,将复杂的内容简单易懂地表达出来。以此为前提,插图中使用的要素也是越简单越好。因此,尽量使用正圆形、正三角形、正方形、正五边形等图形。即使使用矩形,也最好使用黄金比例(1:1.618),来保证画面的美感。

02)所有的图形尽量保持对称

运用20个技巧快速制作易懂美观的图片

对称的构图具有稳定感。如果想要组合的内容能以左右对称的形式表现出来,也最好能够将这种对称融入到形状当中。当然,虽然不能保证整个插图完全左右对称,但其左右或上下的平衡感不同会对简洁程度产生重要的影响。这里不需要插图个性鲜明。更重要的是保证安定的印象。

03)容纳信息的边框要保持一层

运用20个技巧快速制作易懂美观的图片

让信息看起来是一组的最简单办法就是将它们框起来。虽然边框使得信息看起来是一个整体,但边框在达到整理信息结构目的的同时,也是一种额外增加的元素,容易使画面看起来更复杂。除此之外也可以通过“缩小间距”和“同一颜色”等手段来表现信息的同组。对于初学者来说,首先要保证信息不是被两层边框所包围,再尝试其他的表现手法。

04)尽量少使用线条

运用20个技巧快速制作易懂美观的图片

和边框类似,线条也经常用来区分信息。最简单的例子就是,为了区分A和B,在其中间画一条线。然而,由于这条线本身并不是信息的一部分,可能的话还是去掉更简洁。线条越多画面看起来越复杂,反之线条越少看起来就越简洁越高端。因此,让我们优先考虑线条以外的表现手法。

05)将颜色简化为主色、辅助色和点缀色三种颜色

运用20个技巧快速制作易懂美观的图片

配色时只使用面积最大的基础色,关键部分的辅助色,和一小部分显眼地方的点缀色三种颜色是一个原则。而究竟使用哪三种颜色,则根据配色设计的载体需要而决定。例如在网站设计中,如果是灰色为主的企业网站,主色为灰色,辅助色可以用相对鲜艳的品牌色。

06)控制字号两种,字体两种(西文和汉语各一个)

运用20个技巧快速制作易懂美观的图片

可以说质量低的插图基本都有一个共同点,那就是字体使用得过于复杂。一个插图中有多重字体和字号都是不愿意被看到的。字体西文和汉语各选一种,字号说明性文字选择一种小的,标题选择一种大的,尽量保证简洁控制为两种。字号要有明确的大小区分。

07)去掉重复语、修饰语和冗长的词尾

运用20个技巧快速制作易懂美观的图片

插图的空间有限,因此要尽可能减少无意义的要素节省空间。这不仅仅是针对图形,也关乎文字。同样文字重复使用的情况,要一个个像标题那样进行总结,过长的语言要一条条总结精简,需要仔细斟酌的地方还有很多。尽可能减少信息,制作易懂的插图非常重要。

08)箭头要尽量缩小

运用20个技巧快速制作易懂美观的图片

即使有一个箭头也会改变插图给人的印象。事实上,就算用很小的,配色很低调的箭头,也会发挥很强烈地视觉引导作用。由于插图中重要的一般是指示关联性的要素,所以还是尽量控制本身具有关联性指示的箭头的表现为好。至少将箭头的指向性调整清晰。

09)对白框的圆角和尖角要小

运用20个技巧快速制作易懂美观的图片

对于表现人物声音的对白框,有明确的避免低质量使用的技巧。首先就是圆角要小,3-4px为好。圆角过大会给人以草率的印象。对白框下面的尖角也同样。对于尖角来说,使用的样式越少越好,放置的位置也最好固定少量的样式。

10) 用平面表现

运用20个技巧快速制作易懂美观的图片

不需要复杂的特殊内容,关联性都可以用平面的方式表现出来。具有纵深感的立体表现,会有违和感的混乱透视,不容易和其他插图保持一致性,制作的时候也很花费时间。所以还是尽可能的使用平面的表现方式。插图的表现不需要太多的创造力,大众习惯的、易懂的方式为最好。

 

插图制作技巧

11) 同项目插图使用同色系并有明确区分的颜色

运用20个技巧快速制作易懂美观的图片

插图中如果相邻项目颜色变化太小会变得不容易区分。所以让颜色的区别鲜明起来吧。当项目多的时候要仔细斟酌颜色使用的数量,如果颜色过多会产生散漫的印象,因此要尽量少一些。使用单色的时候要保证相邻项目区分清晰。

12)指示线尽量缩短,使用90度、45度、0度三种角度

运用20个技巧快速制作易懂美观的图片

插图中会加入说明百分比是什么的文字,数值太小的在项目中会放不下,就需要用线条进行指示。这时候使用的线条,要以简洁为前提,尽可能的保持最低限度的存在感。具体的做法是,线条要短,不要使用90度、45度、0度以外的角度。

 

地图制作技巧

13)积累几种不同表现的素材

运用20个技巧快速制作易懂美观的图片

由于地图从零开始制作非常消耗时间,并且也很难保证准确性,因此要基本要以使用素材为前提。世界地图、国内地图、国内地图也要按市区街道区分开来,因此平日里对素材的研究和整理就很重要。并且使用写实类型的形状还是变形后的形状,也要根据界面的不同而区分开,因此以这种变化为标准事先收集好素材比较好。

14)地图本身不要加边框、投影和立体感

运用20个技巧快速制作易懂美观的图片

地图本身就具有复杂的形状,若是加上一些不必要的装饰就会显得俗气。并且会表现不出来想要传达的信息和重点。因此,保持地图本身的样子,可以说没有太多装饰的必要。基本就是整体上色,将视线集中在地图的要素上。

15)文字适当地使用纵向和横向

运用20个技巧快速制作易懂美观的图片

固定好的区域内放不下文字的时候,要记得使用纵向文字。“规则越少越好”为前提考虑的话,当然是全部为横向的文字会更显得简洁,不过相比遵守这个原则在狭小的区域内多次换行,使用纵向的文字反倒更好地情况也是有发生。要灵活思考。

 

ICON制作技巧

16)使用免费的高质量icon素材

运用20个技巧快速制作易懂美观的图片

icon特别影响插图的质量。如果icon变形了,整个插图的质量都会被拉低。当然,如果有自信自己画icon是很好的,没有自信的时候就可以使用素材,在其基础上进行改良从而保证设计的高质量。免费素材的知识也是设计能力的一部分。因此要时常更新自己的素材库。

17)保证对齐像素网格

运用20个技巧快速制作易懂美观的图片

像素不对齐会给人以敷衍了事的印象。就网页设计而言,界面本身区域简洁化,插图的印象很容易影响整体的感觉,因此敷衍了事的感觉会对整体有很大的影响。对齐像素网格,仔细调整路径的位置,尽快改掉和像素不对齐相关联的操作坏习惯。

18)不要只做想象中的形状,要看着参考研究细节

运用20个技巧快速制作易懂美观的图片

有一个想象sketch的游戏。以动画中的形象为题,凭借记忆中的印象画出来,这个游戏的有趣之处就在于人脑中的印象同输出的画面有差距。之所以能有这样的游戏就是因为人的记忆是模糊的。从零开始只做icon的时候,在网上搜索对象的细节好好研究,抓住特征。

 

整体平衡技巧

19)和设计的一贯性质感相符合

运用20个技巧快速制作易懂美观的图片

到此为止的技巧都在讲述插图的规则要少,尽量保证简洁。这些虽然是基本的思考方式,但包括插图的大型设计,加入适当的编排也是非常重要的。例如这里的例子,色调作为设计重点的情况下,也可以灵活的变化,也有像icon重叠表现透明感的手法。保证简洁,也要领会和设计的一贯性色调和风格相符合的另一种维度。

20)同时使用的各个图片保证共有的规则

运用20个技巧快速制作易懂美观的图片

以上介绍了关于图表、插图、icon的各种技巧,但制作的时候把这些元素放在一起就要考虑统一感了。这包括配色、字体和字号、留白和质感等。虽说制作多少图片就会增加那么多的规则,应当避免增加无用的规则,若是为了扩大表现的广度需要增加规则,也要以美观和平衡为重。这种平衡不是谁能具体地教给你的。

 

总结

虽然详细地讲述了一些技巧,但对于没有自信的人,还是请先实践前三个原则。图片应该传达什么内容,什么是最重要的的内容?这样的信息要如何用少一点的元素和规则表现?最后讲的原则如何渗透到设计的细节?

 

原文地址:tomoyukiarasuna

作者:荒砂智之


推荐:查看最受欢迎的设计导航网站 → http://www.xueuisheji.com

交流:结交更多有才华的设计师?请加入UI设计QQ群 ,与设计师交流设计。

喜欢 (0)
[关注:设计军团]
分享 (0)
关于作者:
学UI设计网专业的UI设计师交流、学习与展示的平台。我们将打造中国最专业的UI设计交流平台,为UI设计师做最好的职业生涯一站式服务,提高UI设计乃至互联网设计的行业价值!