发布时间:2023-12-20 分类: 电商动态
这篇文章分享了提高视觉设计技巧的三个技巧,希望对你有所帮助。
在筛选了数百名初级设计师的简历后,我发现了一个普遍的问题。设计师,特别是初级设计师,非常关注UX和许多咨询公司正在传播的设计思想。他们非常缺乏将生活中的东西引入他们的设计的能力。他们的简历上的工作展示了他们在艺术学校学到的视觉设计技巧。
截至2017年4月,Glassdoor的调查显示,许多公司倾向于聘请具有端到端设计能力的产品设计师。
我作为平面设计师进入了设计行业。经过反复试验,我学会了布局和构图的艺术。从我的设计工作中,我也可以反映近年来我的设计历史。这是我在学校的第一份工作:
幸运的是,视觉设计能力随着经验的增加而增加。这是我最近的工作:
我非常注重布局和构图
今天,我将分享三个提高视觉设计技巧的技巧。
1建立视觉层次结构
视觉层次结构基于信息的相对重要性来组织信息,并在布局上排列各种部分(排版,线条,形状,颜色,图片和空白)。设计具有强大的视觉层次结构和视觉组合,以引导用户的注意力。例如,让我们看看Airbnb如何发布其代购源码网站的部分内容:
如上图所示,您首先会看到哪一部分,您会看到哪一部分?如果您不确定,那么我们可以先将图片变成黑白,然后再试一次。我相信你已经注意到你的眼睛是第一个看到饱和度更明显的部分。
可视化层次结构按组件的位置划分优先级,以便用户可以首先看到高优先级组件,最后看到低优先级组件。为此,我们需要平衡用户需求和业务目标。对于
对于Airbnb,业务目标是增加注册用户的数量,用户需求是用户想要找到住宿的地方。换句话说,从该页面的设计来看,业务需求超过了用户需求。
强大的视觉层次结构和组合引导用户通过布局的视线。视觉水平差会导致沟通不畅。
下图是不良视觉层次结构的示例:
通过使用不同风格的设计组件实现视觉层效果,并且在没有线索时尝试黑白设计组件。以下是组件的一些提示:
字体:大字体会引起用户的注意,但请仔细使用标题。
线条:线条有助于对信息的呈现进行分组,并且还填充空白区域。
颜色:深色和高饱和度颜色有助于吸引用户的注意力。
形状:简单的形状(如圆形,三角形,正方形)看起来更漂亮。
图像:图片可能非常诱人,但不要使用受版权保护的图片。
空白:设计通常使用空格来分隔信息或突出显示重要信息。
如果您没有可视化设计组件的基础知识,Steven Bradley已经写了这篇文章:
线线
色色
形状形
空格 - 留空
2使用格式塔规则
所有设计师都应该理解格式塔理论和人们视觉感知的规则。格式塔理论是由德国心理学家在20世纪初开发的,为人们体验视觉体验提供了理论基础。今天的设计师使用格式塔规则作为视觉交流的有效框架。
通过将目标受众与高影响力的格式塔图像相匹配,我们可以缩短有效沟通的距离。 —— Gregg Berryman
Smashing Magazine解释了格式塔理论的原理,因此我们专注于案例。
内容/背景
通常,背景是内容的背景。设计的目标是确保用户关注内容并且可以清楚地区分内容和上下文。使用高对比度颜色可以清楚地区分内容和背景,但使用低对比度颜色则不然。设计新手应尽量保持背景尽可能简单(使用浅色背景或细微纹理背景)并尽量减少内容中的颜色数量。
内容邻近度接近
人们自然地将相邻对象自动分组到一个组中。如果相邻内容接近,表明存在同样的问题,那么我们可以使用不同的颜色使它们成为一个组,这样用户就不会生成更多的关联。当然,不同的间距或消隐也可以反映这种关系。
相似性
人们自然认为看起来相似的物体是相关的。类似的物体通常具有相似的颜色,形状,尺寸或方向。使用类似的外观可以使实际相关对象看起来相关。
连续性
人眼按顺序观察线条,曲线或其他物体。当连续对象与其他对象相关时,我们自然会将其视为两个不同的对象。在设计过程中,颜色可用于进一步增强人眼的这种感觉。
我们自然地将其他对象与连续对象分开。
闭性
当我们看到未完全封闭的不完整对象或空间时,我们的大脑会自动填充缺失的部分,让我们认为它们是完整的。设计师可以使用闭合原理来直观地创建更具吸引力的图形。
3检查字体!
设计师应确保文字清晰易读。随着年龄的增长,我对那些体积小,颜色浅的文字失去了耐心。在文字方面,出版商有很多好的经验:
从这两种字体开始
字体是具有特定大小和重量的字体样式。 Jon Tan说:
经验法则是使用标题字体和常规字体,每种布局中不超过3种字体。如果你有很多标题或样式(引号,链接等),那么你需要更多的字体。 Medium使用两种字体样式(Lucida Grande和Cambria)和七种字体。
使用Hongkiat字体工具查找正确的字体样式。许多设计师使用Google字体样式,因为它有818种字体样式可供选择,最重要的是它是免费的。当然,有些设计师会为MyFonts或Fonts.com的字体样式付费。
最小字体大小为14px
我曾经喜欢非常精细的字体。当我发现许多用户都在努力查看我的12px字体时,我不再有这种心态,我发现14px是帮助提高内容可读性的最小字体。而现在WEB设计的趋势是字体越来越大。例如,这篇文章的最小字体是21px。当然也有例外。当您想要阅读免责声明之类的内容时,您会发现该字体小于21px。当然你也可以看一下Christian Miller的文章
为什么你的正文太小了。
行高=字体的1.5到2倍
行高是段落中句子之间的空格量。如果行高太小,文本内容看起来会很拥挤;如果行高太高,文本内容将看起来不相关。
许多有认知障碍的人难以阅读单行间隔的文本内容。如果行高为1.5或2倍,它将使它们更容易阅读。 —— w3c.org
当然,除了行高之外,短段和段落之间也存在差距。根据W3C的Web内容可访问性指南,我们应该将段落高度设置为行高的1.5倍以上。
最佳行字符:66个字符
每行的字符数是确保可读性的关键因素。如果一行中有太多字符,则用户难以专注于阅读;如果一行中的字符数太短,用户的阅读节奏将被中断。因此,许多设计师认为印刷风格元素是最佳字符数的行业标准:
45到75个字符的行长度是用户最合适的读取长度。通常认为66个字符(包括数字和空格)的长度是最佳的。 —— Robert Bringhurst
W3c的Web内容可访问性指南也通过说行长度不应超过80个字符或单词来强化此标准。
—全文—
谢谢你的阅读!
原创:提高视觉设计技能的3种方法
来源:中等
作者:Jules Cheung
本文由@Q_misky发表。未经许可,禁止复制。
地图由翻译人员提供