用户界面设计中的对比类型

2021-8-25    分享达人

了解对比如何在设计中发挥作用,在用户界面中可以找到哪些类型的对比,以及为什么它对积极的用户体验很重要。

一般而言,“对比”一词用于描述彼此截然不同的对象。谈到视觉感知,对比度基本上与颜色或光线的差异有关,可以使物体清晰可辨。

为什么对比度很重要?因为人眼自然会捕捉到对比度。图像的最高可能对比度称为对比度或动态范围。更重要的是,对于色盲等视力不佳的人来说,对比度成为他们看到的物体的核心特征,并让他们能够区分它们。

在学术艺术中,对比处理对立元素和效果的排列,例如明暗颜色、大小形状、粗糙或光滑的纹理。在这种情况下,对比不仅可以用来吸引注意力,还可以设置情绪和氛围,在艺术品中创造多样性、视觉趣味和戏剧性。

在设计中,对比度是影响效果的关键因素之一。 可扫描性网页或移动屏幕的视觉层次结构。它使设计师能够以一种方式呈现布局,告知用户哪些交互点是重要的,哪些是次要的。对比度可以有效地吸引用户的注意力并将其吸引到特定元素上,因此它在支持数字产品的直观导航和可用性方面发挥着重要作用。

Pass-On 应用程序登录页面的设计展示了有效的颜色和尺寸对比示例,为页面构建了坚实的视觉层次结构。

UI设计中的对比类型

对比可以基于 UI 元素的不同特性,包括:

A. 颜色:这种类型是人眼最自然和最明显的对比之一;它适用于颜色明显不同的情况,例如,通过互补、分裂互补或三元方案组合,这种类型的对比最广泛地用于制作按钮和其他关键导航元素。在网页布局或应用程序屏幕中立即看到,支持清晰直观的导航。

B. 大小:这种类型的对比是基于首先引起注意的元素明显大于其他元素。

C. 形状:通过使一个元素的形状与其他元素不同来吸引用户的眼球。

D. 位置:在这种类型中,设计师以这种方式更改一个元素的位置,使其看起来不同,例如,文本片段的新段落以缩进开头。

E. 纹理:这里的差异是由于使用彼此明显区分的纹理而建立的。

F. 方向:改变元素的物理位置,使其在其他方向,这样以不寻常的方式吸引用户的注意力。

经常想到的关于对比度的第一个想法是黑白的东西。在没有阴影和多种颜色的情况下,单色图像使用对比度作为表现潜力的主要助推器。这在用户界面中的工作方式相同。更重要的是,与艺术品或摄影作品相比,对比度不仅会影响美感,而且对布局的可用性也有重大影响。因此,深思熟虑的对比度使用是使网站和应用程序用户友好且易于使用的强大方法。

排版对比

另一种特定类型的对比是排版对比,它基于设计作品文本部分所用字体的区别特征的差异。

加拿大字体设计师卡尔·戴尔定义了 7 种核心类型的排版对比:

A. 尺寸对比:它是关于由表格创建的基本图案的物理放大和用于文本的类型的重量。这里最常见的情况是使标题或标题明显大于文本。

B. 重量对比:粗体在同款较轻的对比中突出。它有助于将注意力吸引到文本的特定部分,并让用户了解它们的重要性。

C. 形式对比:这里的形式是指大写字母和小写字母之间的区别,或者罗马字母和它的斜体变体,压缩和扩展版本,与标准类型协调的脚本类型——所有提到的都可以用于戏剧性的形式的改变。

D. 结构对比:结构意味着不同类型字体的不同字母形式,例如单线无衬线与高对比度现代,或斜体与黑体。

E. 纹理对比:这是关于字体的线条如何看起来像一个整体,这部分取决于字体本身,部分取决于它们的排列方式。

F. 颜色对比:第二种颜色通常不如基本的白底黑字(或黑底白字)强调,因此必须仔细考虑需要强调的元素并注意色调值使用的颜色。

G. 方向对比:这种类型是关于垂直和水平之间的对立以及它们之间的角度。出文本块也有它们的垂直或水平方面,将宽的长线块与高的短线列混合可以产生对比。

另外,还有一些不太流行的对比,比如所谓的孤立对比,就是把一个词或词组放在远离其他元素的地方,这样就可以从人群中脱颖而出,以及对比按节奏(空间间隔)——破碎的部分形成对比并吸引注意力。

对比辅助功能

阅读上面提到的所有内容,很容易假设这里的经验法则是对比度越高,设计越好。然而,事实并非如此:以及任何其他设计方面太多并不意味着更好。虽然低对比度会使内容难以感知和阅读,但过高的对比度会引起眼睛疲劳,使交互更加困难。

根据网页内容无障碍指南 2.0,文字的视觉呈现和文字的图像应该坚持至少 7:1的对比度,以下情况除外:

大文本:大文本和大文本图像的对比度至少为 4.5:1;

装饰:作为界面组件的一部分的文本或文本图像,作为装饰没有对比度要求。

标识:作为徽标或品牌名称一部分的文本没有最低对比度要求。

注意留白

空白是留空的布局区域,不仅在对象周围,还包括对象之间和内部。空白是页面或屏幕上所有对象的一种呼吸空间,因此它极大地影响了 UI 中应用的不同类型对比度的有效性。

总结

生活充满了对比,无论你会采取什么方面。对于所有的生命,我们必须学会如何接受这一点,并尝试享受如此多样化和不可预测的生活。与现实相呼应,设计也充满对比,并尽可能多地借鉴。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:对啊设计君

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档