界面设计中的对比类型

0 评论 12553 浏览 15 收藏 13 分钟

编辑导语:有不同,就有对比。不一样的视觉效果总会给人不同的感觉,也让我们的生活、工作越来越有色彩。今天,作者就来借对比为由,谈谈界面设计中的对比类型,希望能给产品设计的小伙伴们一些借鉴,我们一起来看看吧。

世界中从不缺少的就是对比,人和人的对比,价格和价格的对比,生活和生活的对比。

而今天我说的,是设计中的对比,是按钮、颜色、排版布局的对比。

设计中通过有效的对比技法,可以更加快速的传递产品信息,从而提升用户体验。

一、什么是对比

对比,是把具有明显差异、矛盾和对立的双方安排在一起,进行对照比较的表现手法。

对比是把对立的意思或事物、或把事物的两个方面放在一起作比较,让读者在比较中分清好坏、辨别是非。

那么,为什么说对比度很重要呢?

因为人眼最快速捕捉到的就是对比度。

而图像的最高可能对比度,我们称它为对比度或动态范围。

更重要的是,对于色盲等弱视视觉障碍的人来说,对比度显得更加重要。

因为事物的对比度是成为他们看到的物体的核心特征,使他们能够区分它们,没有了对比度,对他们而言,也就失去了视觉。

在学术艺术中,对比是处理对立元素和效果的一种排列方式。

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

在设计中,对比度还是影响效果的关键因素之一。

不管是PC端网页还是手机中的APP,它们的视觉层次、结构,设计师在通过对比度设计后,也能够以一种独特的方式呈现,并告知用户哪些交互点是重要的,哪些是次要的。

同时,对比度还可以有效地吸引用户的注意力并将其吸引到特定元素上,因此它在产品的直观引导和可用性方面也发挥着重要作用。

界面设计中的对比类型

Lucibel的网站设计展示了纯粹的单色颜色对比,为页面构建了坚实的视觉层次结构。

界面设计中的对比类型

LAUDEMIO的品牌网站使用黑色背景和产品主体进行层次分离,最后加上白色文案说明

二、UI设计中的对比类型

对比在UI中具有很多不同的特征属性,其中就包括:

颜色:颜色是人眼最快发现和最明显对比之一,它适用于各种内容下使用。

例如:通过互补色、对比色或类似色进行多种组合。

这鞋方式最广泛地用于洁面按钮、导航、卡片、产品背景等地方,就是希望用户能在打开的第一时间看到,并快速进行操作使用。

大小:这种对比类型是希望重要元素或内容首先引起用户注意所使用的,多数情况下设计师会将元素设计成明显大于其他元素。

形状:这种对比类型属于形状改变,通过使一个元素的形状与其他元素不同来吸引用户的眼球。

位置:在这种类型中,设计师以这种方式更改行中一个元素的位置,使其看起来不同,我们看到最多的这种对比案例就是阅读文本片段时,新段落会以缩进开头。

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

方向:在这里,设计师通过更改元素的物理位置,使其使用其他或意想不到的方向进行,通过这种不寻常的方式来吸引用户的注意力。

以上这几种对比类型,我现在通过可视化的方式为大家呈现一遍,这样可以加深大家对对比的理解。

界面设计中的对比类型

不同特征属性的对对比方式

其实,多数人只要想到对比,我想第一想到的会是黑白的东西吧。

在没有阴影和多种颜色的情况下,单色的对比度是表现潜力最好的形式。

更重要的是,与艺术品或摄影作品相比,对比度不仅会影响美感,而且对布局的可用性和可见性也有重大影响。

因此,对比度的使用应该算是用户最友好、最易于使用的方法了。

界面设计中的对比类型

F2Pool APP的界面中,颜色对比有助于数据和内容形成分割,便于用户阅读使用。

界面设计中的对比类型

区块链APP界面通过使用多色的插画设计,使整体产品更加具有活力和动感,同时吸引力更强。

根据相关数据结果表明,“黑白”的配色方式,是对用户帮助和引导最大的。

所以,使用黑白配色进行对比,可以有效提升用户的体验。

当然,多色对比也是可以的,这里我提供一个色轮配色法,大家可以自行采纳。

界面设计中的对比类型

该色轮可以帮助设计师找到最佳水平的颜色组合。

三、排版对比

除了刚才说到的哪些,接下来我在说一种对比类型,它主要是基于字体的区别进行做排版对比的。

这里提供几种关于字体、排版的对比方式:

尺寸:通过对字体字号的设定进行对比实现,可以有效的展示主次分明。比如以及标题使用30px的字号,而内容文本则使用24px的字号。

重量:主要的方式是将字体加粗呈现,在视觉上看起来更加具有厚重感,这样加粗的文本在视觉上会更加具有地位和突出性。

结构:形式在这里可以理解成是字体的字像,通过改变字体字象进行区别,比如标准的苹方体和花体就是很好的视觉对比。

形式:将字体加以倾斜,也可以呈现出不一样的结果。

颜色:这里的颜色不光是指字体颜色本身,同时也可以为字体添加背景色,用来衬托字体。

方向:通过改变单个字体的方向、或一句话的排列方向,都可以形成有效的对比效果。

界面设计中的对比类型

艺术学院概念展示的不同类型排版对比

四、对比的辅助功能

说了刚才那么多,可能你已经抓住了设计的要害,那就是对比度越高,设计就越好。

其实,并不是这样的,任何事物都需要掌握一个度,超过那个度,有时候就会适得其反。

虽然我们知道对比度会使内容更加明显,但是你还应该知道,过高的对比度也会使用户感到疲劳。

按照文本视觉呈现的正确比例,我们应该将对比度控制在7:1之间才是比较合适的选择。

界面设计中的对比类型

在当前这个概念APP界面中,通过明显的颜色来提升按钮的视觉焦点,同时,加粗的文本也是重点提醒,这些手法都是便于阅读和操作的方式。

五、需要考虑的要点

除了刚才说到的这些对比方式和规则外,作为设计师,还应该考虑的一些问题。

1. 内容加在了图片上,要是用高对比度

由于图片本身的体积较大,覆盖面积也大,所以用户在浏览时,视觉很容易会被图片吸引过去。

但是,由于图片内容的情况,很多相关文案就会显得柔弱不堪。

在这种情况下,一般的对比就无法解决视觉问题了,而是需要你加大提高文案和背景的对比。

比如使用了类似黑色图片的背景,就要使用纯白色文本,如果使用了亮色的图片背景,文本就需要考虑使用暗色。

界面设计中的对比类型

2. 注意对比度给用户带来的伤害

这种情况多数出现在阅读类产品上。

比如我们日常使用的小说类app,产品里就有一种功能叫做背景自定义。

它的主要目的就是担心用户在长时间阅读的情况下产生视觉疲劳,所以需要设计柔和的背景进行自定义切换。

有的产品还会增加字体大小、颜色修改、夜间模式等多个功能,都是为了降低对比度,使用户在体验上不再那么刺眼。

界面设计中的对比类型

3. 留白的重要性

留白是极其重要的设计手法之一。

它同样是产生对比的好技法,通过给产品界面留有适当的空白余地,可使产品具有通透感,用户在使用产品时也不会产生压抑。

另外由于留白是大面积的空白空间,这也就产生了和密集内容的强烈对比。

界面设计中的对比类型

六、为什么对比度很重要

最后总结一下所有的内容,我们可以定义一下对比度的几个关键优势和好处:

  • 更强的视觉层次;
  • 更好的专注;
  • 创意氛围;
  • 增强可读性;
  • 与人类自然感知和反应的对应。

生活充满了对比,无论你会采取什么方面。

对于所有的生命,我们必须学会如何接受这一点,并尝试享受如此多样化和不可预测的生活。

与现实相呼应,设计也充满对比,并尽可能多地借鉴。

 

本文由 @西瓜的设计 原创发布于人人都是产品经理;未经许可,禁止转载

题图来自 Pexels,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!