加强视觉设计力量的

在筛选了数百份初级设计师的简历之后,我意识一个通用的问题。设计师,尤其是中低档设计师,都充足爱惜UX
以及被广大提问集团传来的统筹思想。他们都卓殊缺中校生活中的事物引入计划中的能力,简历中的随笔千篇一律地体现了他们在措施院校里学到的视觉设计功底。

利落前年十二月,Glassdoor
的调查结果显示,很多商行襄助于招聘具有端到端设计能力的出品设计师。

自身是以平面设计师的地点进入设计行业的,经过三番五遍的试错,我询问到布局和构图的措施。从我的宏图创作里也能显示自己这几年的计划性过程,这是自家在该校里的率先个创作:

好在,视觉设计能力会趁着阅历的增添而提高。这是自我多年来的随笔:

我早就丰盛强调布局和构图

今天,我快要分享进步视觉设计能力的六个小技巧。

1 建立视觉层次结构

视觉层次结构是依据音讯的争持重要程度社团音信,并透过在布局上排列顺序部分(排版、线条、形状、颜色、图片和留白)。通过有力的视觉层次和视觉构图做筹划,可以指引用户的视线。例如,我们能够看看
Airbnb 是在他们的网站是怎么对各类部分举办投放的:

如上图,你的眼眸会先看看哪一部分,再看看哪一部分吗?尽管你不确定,这我们可以先把图纸转成黑白色再试五次。相信您早就注意到你的双眼是第一看出饱和度更明确的有些。

视觉层次结构是经过组件的地点来确定优先级的,从而使得用户可以先看看高优先级的零部件,最终看看低优先级的零部件。要形成这点,需要平衡用户需求和小买卖目的。对于
Airbnb
来说,商业目的是充实注册用户数,而用户需假如用户想要找到住宿的地方。换句话说,从这多少个页面的设计来看,业务要求胜过用户要求。

强劲的视觉层次和构图会透过布局指点用户的视线。而视觉层次不好会导致交流不畅。

下图是视觉层次不好的事例:

通过应用不同风格的计划组件的方法来促成视觉层次意义,并在感觉到并未眉目标时候尝试黑白色的规划组件。这是部分零件的小技巧:

  • 字体:中号加粗的字体会引发用户的注意力,然而要严峻接纳标题。
  • 线条:线条有助于音信的分组显示,同时它也得以补充难堪的留白空间。
  • 水彩:深色以及饱和度高的颜料有助于引发用户的注意力。
  • 形状:简单的样子(如:圆形、三角形、正方形)看上去越来越赏心悦目。
  • 图形:图片可以非凡诱人,但绝不接纳有版权的图形。
  • 留白:设计中平常选择留白来分隔消息或隆起体现重要的新闻。

一旦您从未视觉设计组件的基础知识,Steve(Steve)n 布拉德利(Bradley) 曾经写过这方面的篇章 :

2 利用 Gestalt 法则

负有的设计师都应该了然 Gestalt Theory 以及人们视觉感知的法则。Gestalt
Theory 是德意志的激情学家在 20
世纪初发展起来的,他们为人们举行视觉感受提供了理论依照。现在的设计师都把
Gestalt 法则算作视觉交换的有效性框架。

经过将指标受众与高影响力的 Gestalt
图片相匹配,我们能够缩小有效交换的偏离。——Gregg Berryman

Smashing
Magazine
业已表明了Gestalt
Theory 的原理,所以,我们把紧要放在案例上。

内容/背景

一般的话,背景就是指内容的背景。设计的靶子就是保证用户关心内容,并且可以显然区分内容和背景。使用高相比较度的水彩可以显著的分别内容和背景,不过使用低相比度的颜料则无从直达这种意义。设计新手应该尽量保证背景的简练(使用浅色背景或者微妙的纹路背景),并且尽量缩小内容的颜料数量。

内容的接近程度 Proximity

众人会自然地将靠近的实体自动归为一组。假设邻近的始末相比像样,表达了同一个题材,这大家得以接纳不同的颜色使他们成为一组,这样用户也不会发生多的联想。当然,不同距离或者留白也能展现这种关联。

相似性

人人会自然地以为看起来相似的实体是连锁的。相似的物体一般装有相似的颜料、形状、大小仍旧倾向。使用相似的外观可以让实际相关的物体看上去相关。

连续性

人眼会依据各个观望线条、曲线依然其余实体。当连续性的物体和其余实体相关时,咱们会理所当然地认为这是六个不等的物体。在统筹时得以采用颜色进一步增长人眼的这种感觉。

俺们会自然地将此外实体从连续性的实体中分出来。

封闭性

当我们见到不完全的实体或者不完全封闭的长空时,我们的大脑会自动填补缺失的有些,从而使得我们以为它们是一体化的。设计师能够采纳封闭性原则在视觉上创设更加扎眼的图形。

3 检查你的字体!

设计师应该保证文字清晰易读。随着我的年华越来越大,我更加对字体小、颜色浅的文字失去耐心。在文字这下面,出版社有成千上万很好的经验:

从这两种字体初步

字体是兼备特定大小和重量的字体样式。Jon Tan 是这般说的:

经验法则是使用一个题名字体和一个正文字体,并且每个布局中的字体不超过 3
个。要是你有那一个的标题或样式(引号,链接等),那么您就需要更多的书体。Medium
使用了两种字体样式(Lucida Grande和Cambria)和 7种字体。

经过 Hongkiat 字体工具找到合适的书体样式。很多设计师运用 Google字体样式,因为它有 818
种字体样式可供采取,最重点的是它免费。当然,也有部分设计师付费使用
MyFonts 或者 Fonts.com 的书体样式。

情节的小小字体为 14px

自己一度分外喜欢极细的书体。当我发现众多用户很尽力地想要看清自己 12px
大小的书体时,我就不再有这种心绪,同时自身发现 14px
为最小字体有助于增高内容的可读性。而且现在的 WEB
设计方向是字体越来越大,比如这篇作品的细小字体是
21px。当然也有例外,当你想要阅读类似免责表明的内容时,你会发觉字体是比
21px 还要小的。当然你也得以看一下 Christ(Christ)ian Miller 的稿子Why your body
text is too
small

行高 = 字体的 1.5 ~ 2 倍

行高是段子中句子之间的空中尺寸。假设行高太小,会使文字内容看上去很拥堵;行高太大,会让文字内容看上去不相干。

广大有着认知障碍的人很难阅读单倍行距的文字内容。假使行高为 1.5 倍或者
2 倍,则会使她们更易于阅读。——w3c.org

当然,除了行高,短落与段落之间也有距离。按照 W3C的网页内容可访问性准则(
W3c’s web content accessibility
guidelines

),大家应有将段落低度设置为行高的 1.5 倍以上。

极品行字符数:66 个字符

每行的字符数是承保可读性的关键因素。倘诺一行字符数太多,用户很难集中注意力看完;假若一行字符数太短,则会卡住用户的阅读节奏。由此,许多设计师认为The
Elements of Typographic
Style
是一级字符数的行业标准:

45 到 75 个字符的行长度对用户来说是最合适的读书长度。66
个字符(包括数字和空格)的长短普遍认为是最优质的。—— Robert(Bert) Bringhurst

W3c的网页内容可访问性准则也加重了这一标准,它说的是行长度应该不超过80个字符或字”。

— 全文完 —

谢谢阅读!

原文:3 ways to improve your visual design
skills

来源:medium
作者:Jules Cheung
发表时间:2017 年 4 月 10 日
阅读量:4.3 K(截止2017-12-06)

相关文章