UX视觉设计原则

作为交互设计师,我们知道:利用良好视觉设计原理的图形可以促进互动并增加可用性。而视觉设计原则告诉我们,线条,形状,颜色,网格或空间之类的设计元素可以共同构成全面而周到的视觉效果。

UX视觉设计原则

本文定义了影响用户体验的5条视觉设计原则:

  1. 比例(scale)
  2. 视觉层次(visual hierarchy)
  3. 平衡(balance)
  4. 对比(contrast)
  5. 格式塔(gestalt)

UX视觉设计原则

1、比例

定义:比例原则是指使用相对大小来表示构图的重要性和等级。

视觉上令人满意的设计通常使用不超过3种不同的尺寸。拥有一系列大小不同的元素,不仅会在您的版式中创造出多样性,而且还将在页面上建立视觉层次结构,确保最大程度地强调设计中重要的内容。

UX视觉设计原则

medium视觉设计:热门文章占据更大比例,将用户引导至可能更有趣的文章。

UX视觉设计原则

在克拉科夫的这个停车场中,拥有最多配套设施的H停车区域的视觉设计最明显。

2、视觉层次

定义:视觉层次结构的原理是指对用户的视觉引导,该原则指导设计师将设计元素按照重要性的顺序在页面上排列。

视觉层次可以通过比例(scale),值(value),颜色(color),间距(spacing),位置(placement)和各种其他信号的变化来实现。

视觉层次结构影响用户对产品的体验。要创建清晰的视觉层次结构,请使用2-3种字体大小,以向用户指示页面的信息体系结构中最高级别的内容。或者考虑对重要项目使用明亮的颜色,对次要项目使用柔和的颜色。

UX视觉设计原则

Uber移动应用程序:Uber移动应用程序中的视觉层次结构清晰。屏幕在地图和输入栏之间分为两半,这使人们认为这些组件对用户同样重要。

3、平衡

定义:平衡原理是指满意的布置或比例的设计元素。当通过屏幕中间的虚轴的两侧均存在相等分布(但不一定对称)的视觉信号时,就会发生平衡。该轴通常是垂直的,但也可以是水平的。

就像在平衡重量时一样,如果在轴的两侧具有一个小设计元素和一个大设计元素,则设计会有些不平衡。设计元素占用的面积在创建平衡时很重要,而不仅仅是元素数量。

您在视觉上建立的虚轴将成为如何组织布局的参考点,并将帮助您了解视觉上当前的平衡状态。平衡可以是:

  • 对称(symmetrical):元素相对于中心假想轴对称分布
  • 不对称(asymmetrical):元素相对于中心轴不对称分布
  • 径向(radial):元素从中心的公共点沿圆形方向辐射出去。

您在视觉中使用的平衡类型取决于您要传达的内容。不对称往往带来动态效果且引人入胜,它可以创造一种活力和运动感;相反,对称是安静且静态的,径向平衡始终将眼睛引向构图的中心。

UX视觉设计原则

耐克:此页面使用不对称平衡,给人以与耐克品牌相称的活力和运动感。如果要在此视觉效果的中心向下绘制一条垂直轴,则该轴两侧的元素数量大约相同。鞋子的左侧有更多的文字,但它与右侧的较大文字是平衡的,后者占用更多空间和视觉重量,因此使它们看起来非常相似。

4、对比

定义:对比原理是指视觉上不同的元素并列,以传达这些元素不同的事实(例如,属于不同类别,具有不同功能,表现不同)。

换句话说,对比度为眼睛提供了两个物体之间(或两组物体之间)的明显差异(例如,大小或颜色),以便强调它们是不同的。

对比原理通常通过颜色来应用。例如,红色常用于UI设计(尤其是在iOS中)以表示删除,因为相较于其他颜色,红色更加明亮。

UX视觉设计原则

在iOS上的提醒应用:红色与周围的环境形成鲜明对比,对用户强调删除效果。

通常,在UX中,“对比”一词使我想到了文本与其背景之间的对比。有时设计人员会故意降低文本的对比度,以便不强调不太重要的文本。但是这种方法很危险-降低文本对比度也会降低可读性。作为设计师,最好使用颜色对比检查器以确保所有目标用户可以阅读您的内容。

5、格式塔原理

定义:格式塔原理通过下意识地将各个部分安排到一个创建整体的有组织系统中,而不是将它们解释为一系列不同的元素,从而解释了人类如何简化和组织由许多元素组成的复杂图像。换句话说,格式塔原则抓住了我们倾向于感知整体而不是个体元素的趋势。

有几种格式塔原理,包括相似性(similarity),连续性(continuation),闭合性(closure),接近性(proximity),图形/背景(figure/ground)以及对称性(symmetry)和顺序(order)。

UX视觉设计原则

Uber注册表单使用格式塔邻近性原则:字段标签靠近其相应的文本框,从而使您很容易理解在哪些字段中键入哪些信息。如果一个字段和后续标签(用于下一个字段)之间的空间较小,则用户将难以理解到底是什么

为什么视觉设计原则很重要

我们为什么要关心和理解视觉设计原理?除了使某些东西看起来“漂亮”之外,理解和利用它们还有助于:

增加可用性。遵循这些视觉设计原则辅助设计师设计易于用户使用的布局。例如,黄金比例除了用于创作精美艺术品,也用于排版,使用黄金比例可以帮助设计师在字体大小,线条高度和线条宽度之间创建视觉上令人愉悦的关系。与强大的交互设计配合使用时,视觉设计将提高任务成功率和用户参与度。

激发情感和喜悦。美丽的事物引起积极的情绪。通过遵循良好的视觉设计原则,设计人员可以创建外观美观的UI,从而使用户体验升高。

加强品牌认知度。强大的视觉系统可建立用户对产品的信任和兴趣,并加强品牌影响力。

本文由 新媒体之家 作者:美国交互设计资讯 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
0

发表评论