编辑指南:视觉设计技能对设计师非常重要。尽管视觉设计技能会随着体验的增加而提高,但是新设计师如何才能快速提高他们的技能?本文的作者为我们总结了这三种方法。希望您能找到帮助。
在查看了数百份初级设计师的简历之后,我发现了一个常见的问题:
设计师,尤其是初级设计师,非常关心UX和许多咨询公司普遍采用的设计思想。他们都缺乏将生活中的事物引入设计的能力。简历上的作品显示出与美术学校相同的视觉设计技能。
截至2017年4月,Glassdoor的调查结果表明,许多公司倾向于招聘具有广泛设计技能的产品设计师。
我以平面设计师的身份进入设计行业,经过反复尝试,我学会了布局和构图艺术。我的设计工作也可以反映我过去几年的设计过程。这是我在学校的第一份工作:
幸运的是,视觉设计技能会随着经验的提高而提高。这是我的最新作品:
我非常注重布局和构图
今天,我将分享提高视觉设计技能的三个技巧。
1.建立视觉层次
视觉层次结构包括根据信息的相对重要性来组织信息,并在布局中安排不同的部分(句子,线条,形状,颜色,图像和空间)。通过强大的视觉层次和构图进行设计可以指导用户的视图。
例如:我们可以看到Airbnb卸载了网站的不同部分:
如上图所示,您的眼睛首先看到的是哪一部分,然后才看到的是哪一部分?如果不确定,我们可以先获取黑白图片吗,然后重试。我认为您已经注意到,您的眼睛是第一个看到饱腹感更明显的部分的人。
可视层次结构基于组件的位置来确定优先级,以便用户可以先看到高优先级的组件,然后看到低优先级的组件。
为此,您需要平衡用户需求和业务目标。对于Airbnb来说,业务目标是增加注册用户数量。在用户需求中,用户希望找到住宿。
换句话说,在此页面的设计中,业务需求大于用户需求。强大的视觉层次结构和构图可指导用户进行布局。视觉层次差会导致沟通不畅。
下图是视觉层次结构不佳的示例:
使用不同样式的设计组件来创建视觉层次效果,如果您觉得笨拙,请尝试使用黑白设计组件。以下是一些组件提示:
字体:粗体和粗体会引起用户的注意,但标题时应谨慎使用线条:线条可用于对信息进行分组,也可以填充尴尬的空间颜色:深色和饱和度高颜色会引起用户的注意;形状:简单的形状(例如圆形,三角形,正方形)看起来更漂亮;图片:图片可能非常吸引人,但它们并未使用受版权保护的图片。将它们留空:设计中经常使用空格来分隔信息或突出显示重要信息,因此如果您不对视觉设计组件没有基本的了解,Steven Bradley在此领域撰写了文章:
Line-Line Color-Color Shapes-Shape Space二,使用形状规则
所有设计师都应了解格式塔理论和人类视觉感知规则。格式塔理论是德国心理学家在20世纪初期开发的,为开发视觉体验提供了理论基础。如今的设计师将格式塔定律视为视觉交流的有效框架。
通过将目标人群与有效的格式塔图像匹配,我们可以缩短有效沟通的距离。-GreggBerryman
SmashingMagazine解释了格式塔理论的原理,因此让我们关注案例。
1.内容/背景通常,背景是指内容的背景。设计的目的是确保用户注意内容,并可以清楚地区分内容和背景。使用高对比度的颜色可以清楚地区分内容和背景,而使用低对比度的彩色显示,则无法达到此效果。
初学者应尝试使背景尽可能简单(浅色背景或微妙的纹理背景),并尽量减少内容中的颜色数量。
2.内容的接近度
当然,人们会自动将相邻对象分组。
如果相邻内容相对较近并指示相同的问题,则可以使用不同的颜色将它们分成一组,以便用户没有太多的关联。当然,不同的间距或间隔也可以使该关系反映出来。
3.相似性自然,人类认为看起来相似的对象是相关的。相似的对象通常具有相似的颜色,形状,大小或方向。通过使用相似的外观,实际相关的对象可以看起来相关。
4.连续性
人眼一个接一个地观察直线,曲线或其他物体。当一个连续的对象与其他对象相关时,我们自然会认为这是两个不同的对象,并且可以在设计中使用颜色来表示对人眼的这种感知以进一步改善。
当然,我们将其他对象与连续对象分开。
5.关闭
当我们看到不完整的物体或不完全封闭的空间时,我们的大脑会自动填充缺失的部分,以便我们相信它们是完整的。设计人员可以使用快门原理在视觉上打开它,以创建更复杂的图形。
三,检查字体!
设计者应确保文本清晰易读。随着年龄的增长,我对小字体和浅色文本越来越不耐烦了。在写作方面,发布者有很多很好的经验:
1.从这两种字体开始
字体是具有一定大小和粗细的字体样式,如乔恩·谭(Jon Tan)所说:
根据经验,请使用一种标题和一种文本字体,并且任何布局中的字体不得超过3种。如果您有很多标题或样式(引号,链接等),则需要更多字体。Medium使用两种字体样式(LucidaGrande和Cambria)和7种字体。
使用Hongkiat字体工具查找合适的字体样式。许多设计师都使用Google字体样式,因为有818种字体样式可供选择。最重要的是它是免费的。当然,有些设计师会付费使用MyFonts或Fonts.com的字体样式。
2.内容的最小字体为14像素
我曾经很喜欢很细的字体,当我发现很多用户试图查看我的12px字体时,我就不再有这种想法了,同时我发现14px是使内容更好的可读性的最小字体。
当前的网页设计趋势是字体越来越大,例如,本文的最小字体为21px,当然有例外。如果您想阅读免责声明,则会发现字体较小大于21像素。
当然,您也可以看看Christian Miller的文章“ Whyyourbodytextistoosmall”。
3.行高=字体大小的1.5到2倍
行高是段落中句子之间的间隔。如果行高太小,文本内容看起来会很拥挤;如果行高太大,则文本内容看起来会变得无关紧要。
许多有认知障碍的人很难用单个空格阅读文本。如果行高是1.5或2倍,则更易于阅读。-W3c.org除了行高?嘿,当然,在快捷方式和段落之间还有一个空格。根据W3C Web内容可访问性指南(W3C Web内容可访问性指南),我们应将段落高度设置为行高的1.5倍以上。
4.最佳行号:66个字符
每行的字符数是可读性的关键因素,当一行上的字符过多时,用户将难以集中精力阅读;如果一行上的字符数太短,则阅读的节奏因此,许多设计师认为TheElementsofTypographicStyle是最佳字符数的行业标准:45至75个字符的行长是最适合用户的阅读长度。通常认为66个字符的长度(包括数字和空格)是最理想的。-Robert Bringhurst
W3c Web内容可访问性指南也加强了此标准。它们声明行长不得超过80个字符或单词。”
译者:Amumu
原文:https://uxdesign.cc/3-ways-to-improve-your-visual-design-skills-fa9dc8e583ff
本文由@阿木木译出版。每个人都是产品经理。未经允许,严禁转载
封面图片来自Unsplash,基于CC0协议