Pinapps
首发于Pinapps
这个按钮视觉表现究竟要多突出才够?

这个按钮视觉表现究竟要多突出才够?

本文是 PinDesign 会员计划第 91 期周刊的节选内容,如果大家对文章内容感兴趣请加入会员计划获取本文全部内容。

作为视觉设计师,在日常工作中可能经常有人和你说“这个文字或是按钮需要再明显一点、突出一些…”。每当这个时候作为设计师都会非常的无奈,究竟要多突出才够突出呢?

视觉表现力是一个感性的,对于感性的东西往往是难去量化、评价的。但作为设计师,这个问题是绕不开的,我们必须想办法去回答这个问题。

其实这个问题在面试的过程中也同样存在。简历评估中经常被问到的一个问题是如何去判断这个设计的视觉表现力好不好,除了清晰、简洁、阅读性这些通用标准之外,很重要的一点是设计对于当前业务、用户的意义。

而也是为什么我一直强调需要结合业务、情景去阐述自己的设计思路,有了这些信息,也才能够去评判一个设计是否够好、有意义。

在 UI Kit 这个概念普及之前,很多人做设计都是一个个页面顺着做下去,一个项目做完可能发现系统一致性上非常糟糕,同样的信息出现 n 种表现形式,而这一点正是 UI Kit 发挥价值的地方。这种方法能够对系统样式进行全局的控制和使用指导,比如文字,UI Kit 中定义出 10 个等级,所有的文字信息只能在这十个等级中选择一种进行使用。

样式规范是搞定了,但另外一个问题又来了。同样都是文字信息,为什么我这个不能选最大、最粗、最显眼的那一个?

这个问题就在于我们虽然定义了视觉的等级,但并没有给这些等级赋予意义,所以大家并不能更形象的去进行量化。想要回答这个问题,我们只能从系统设计的角度来去分析。这里会涉及到「个体」和「空间」两个概念。

个体

在开始介绍「个体」之前,我们先了解一下 Visual Volume 的概念。

下图是 CDC(疾病控制和预防中心)对于音量分贝的分级的一个对应定义,对照着这张表你就能形象化的去感受它到底有多响。

这是一个有趣并且有效的思路,Viget 依据这个思路对视觉表现力也进行了一个定义。如果将视觉表现力的等级对应成声音分贝的等级,将它想象成一个人用多大的音量来说出这个信息,我们似乎也可以形象化的去理解每个视觉表现形式的“重量”。

还是找一个电商产品做实例,下图是 Google 自家的电商产品 - Express。

这张商品详情界面上的信息字段大家都很熟悉,也都有非常成熟的定义,比如:

  • 商品标题:用于告知商品基础信息,重点是易读,不一定需要被强调;
  • 评价信息:用于增强用户的购买信心,需要容易被用户发现;
  • 价格信息:用于给用户做购买决策判断,需要明显,需要一定冲击力;
  • 折扣信息:用于增强用户的购买信心,需要容易被用户发现,但不一定需要强调;
  • 购买按钮:用于当前页面的核心转化引导,非常重要,需要主动让用户明显的看到,需要一定冲击力;
  • 登录注册/更改地址:用户购买操作的辅助信息,非当前路径必要流程,不需要强调,但需要隐喻用户知道可以操作;
  • ...

基于一个行业的规则,我们可以依据这个方式对界面上的每一个字段信息做一个定义,于是我们可以对每一个信息所需要的视觉“重量”做一个划分。比如:

  • 价格需要强调、显眼;
  • 非核心路径(登陆、更改地址)的操作需要隐喻,但不需要过于强调;
  • 标题的重点是易读性等…

以上是本期会员周刊的节选内容,接下来我们在继续从「空间」的角度来聊聊它对「个体」视觉表现力的影响和约束。

加入 PinDesign 会员,获取本期主题「这个按钮视觉表现究竟要多突出才够?」的全文内容及前两期周刊的赠送。

点击领取 PinDesign 会员计划 50 元优惠券

近期更新周刊主题:

点击下方链接,了解 PinDesign 会员计划详细信息:

PinDesign 互联网产品设计周刊
发布于 2017-11-02

文章被以下专栏收录

    我推荐的不仅仅是apps,更是一种态度。 偶尔我也会聊聊和 apps 相关的设计,请保持关注! 微信搜索「Pinapps」