编辑导语:好的设计具有可视性，即用户是否能理解如何操作。可见性自适应应用了五个基本的心理学概念:显现、能指、约束、映射和反馈以及概念模型。本文作者结合自己的工作经验，分析了能量显示的概念和作用。感兴趣的朋友不妨看看。

这五个核心概念是学习交互和设计心理学的基础，在唐纳德先生的《设计心理学》中有提及，即:能指、能指、约束、映射和反馈。

那我就用自己的理解和更多与我们工作项目相关的案例来说说吧。

很多没有接触过交互体验的设计师总会面临一个坎:

看别人怎么互动怎么体验总是很简单的。一个工艺或者原型被别人做出来之后，我们总会想，不就是这样吗？我可以做，但是不能一上手就做。

为什么？因为我们总是看别人的结果下结论，而忽略了中间的思考过程。

就像吃别人做的西红柿炒鸡蛋。你会觉得只是西红柿和鸡蛋一起炒，然后加点盐和糖就好了。

我们只看到了结果，却忽略了食材的选择、处理、顺序、组合。

当我们看到一个控件的时候，你认为它应该在那里，但是当轮到你开始做的时候，你甚至想不到使用那个控件，甚至连信息布局、流程节点和整体结构都无法规划。

所以很多UI设计师觉得做纯执行的工作没有意义，没有价值。

因为计划是别人做的，思考过程也是别人的。

商业设计师的核心是解决问题，商业和用户问题。

既然解决问题的角色是UI的上游，那么UI设计如何体现价值？

当然是了解交互体验的核心底层概念，像交互设计一样从设计端思考问题，为商业赋能。

好吧，那么，先说说:展现能量。

1.展现活力

心理学家吉布森将其描述为:“有形的物体如何传递人们与其互动的重要信息，吉布森将其命名为“能量”。

说白了就是:事物通过外在的形式向用户展示其功能和用途。

日常生活中，有很多例子，比如一扇开着的门，告诉人们可以进出，可以通过。供人们坐和靠的椅子。

如果你面前有一个带把手的门，这个门告诉我，你可以用这个把手和我互动。你可以用手、脚或舌头，但手是最方便的。

如果只是单扇门，那么我们可以通过推拉来打开它。

但是如果两个门是并排的，两个把手在中间靠得很近，那么门的显示就意味着两个门都可以推或者拉。

但如果门把手在门的外侧，那意思就变了，门只能侧滑才能通过。

那为什么门要设计成不同的风格来表现不同的能量呢？

这就要大家思考了，这三门设计的初衷是什么。

我们的数码产品能体现什么？

例如，开关有两个互斥的属性和功能:开/关、启动/禁用。

看到开关控件的外在风格，我们就可以判断当前开关所属的模块和能指的状态是否表明内容是打开的还是关闭的。

在现实生活中，开关有很多种，如单侧倾斜开关、拨动开关、带段落的按压开关、类型控制开关、旋钮开关等。

虽然开关看起来很简单，但是在设计上会有很多问题。

因为状态和能指形式在我们的日常生活中很难成为一个标准，比如最常见的一侧倾斜的开关，没有能指我们就不知道哪一侧倾斜是开/关。

如果你的房间只有一盏灯，那就很简单了。我就闭着眼睛按。灯灭了一定是关了，再按一次就是开了。

但是如果客厅有多个并联的开关呢？一个灯可以由两个甚至三个开关控制。

但是每个地方的开关数量会有3-5个，这时候不用符号标注就很麻烦了。

回到数码产品，开关能量的指示就简单多了。彩色状态表示打开，灰色状态表示关闭。

然而，当开关控件首次用于数码产品时，很多人往往会将滑动交互误认为是控制开关。

虽然可以滑动，但是依靠更简单的点击和触摸就足够了。

但是如果控制做得很长，滑动的迹象会更明显。

开关的模糊性来自于能指，因为很多新人认为有些控件的属性是重叠的，可以混用。那就大错特错了。我们以后再谈。

2.反射能量

，与指标相反，指任何物体之间都不能进行什么样的交互。

比如我们经常做的人体工学的椅子，你可以坐在椅子上，把手放在扶手上，但是不能在椅子上跳，因为椅子承受不了剧烈的晃动。

你不能拿着椅子玩游戏。它没有这个功能。

比如在我们裤子的口袋里，设计师通过设计它们的形状、大小、材质，帮助我们装一些小物件，比如钥匙、手机、卡片等。

但你连笔记本电脑都装不下，更别说猪了。

产品中也会有一些带有明显反身性的控件。

比如iOS原生控件之一的segment Controls ，不能通过左右滑动界面切换不同标签页的视图，与tab不同。

而且，在这个控件的描述中，SEGs的数量只能少于五个，五个标签分别属于同一类型的数据分段，只支持点击切换。

它不能展开、滑动、移动、悬停、进入二级页面或翻转。

有没有一种可能，或者说一种场景，这两个控件应该同时具备一些属性？是的，举个例子，像这样:

标签下面是一个列表，列表也支持滑动删除的交互。

如果用tab会有冲突，而seg视觉上太重，与产品调性不符。

然后我们可以在指示器上做一些调整，让控件不会左右滑动，也不会太繁琐。

所以反身性可以告诉我们事物不具备什么功能。

同时，反身性也是相对的。当我们遇到不同的场景和业务需求时，我们仍然必须学会灵活应变。

3.不同场景下指示器能量的变化

教室里放了一张桌子。我们知道它是用来学习的。书、笔等可以放在书桌上。

如果一张桌子放在室外，靠在墙上，墙上有一个洞，那么这张桌子目前能显示什么？

大家都羡慕一个在健身房秀肌肉的肌肉男，但如果他不穿外套走在路上，估计很多人会骂他变态。

下面图标+文字形式的按钮放在卡片的左右两边让大家感受，显示可以不一样。

左边更像是这个模块的标题，右边更能让人觉得可点击。

如果还不够明显，我们就以三个点为例。三个点图标放在不同的位置，显示出能量的巨大差异。

比如在弹出窗口中显示红色是为了给人一种警示，但是在活动页面和价格数字上显示红色是为了给人一种活泼的气氛和强烈的引导。

这就是同一事物在不同场景下展现能量的区别。

因此，设计者在设计方案时，不仅要正确表达方案的属性，还要考虑场景的影响。

4.同一表现形式的不同表达和意义

这里有个概念叫同构异态，意思是结构相同但形式不同。

例如，我们经常使用tab及其视图演示。tab的本质就是用多个选项卡来切换选项卡下的视图。

所以标签除了选项卡形式，还可以下拉展开成菜单形式，不过一个是平铺的，一个是点击然后从列表中选择。

另一个例子，比如过滤控件。

如果我们需要一个实时过滤功能，那么我们通常会这样做。在B端web设计中，会横向放置一系列过滤条件，每个过滤条件都可以下拉展开进行过滤。

但如果迁移到移动端，由于水平距离被遮挡，垂直标签会扩大。

从结构上来说，两个方案其实是一样的，从多个筛选条件中筛选出不同的标签。

比如另一个亲子集共生内容卡:

设计风格中有很多种同构的形状，比如列表，比如上面提到的单控开关。虽然样式很多，但是单控开关原理都是一样的。

对于初学者来说，对不同控件的理解是片面的，所以会导致一些控件使用上的错误。

说到同构，就不得不提同构。比如一块素牛肉，外观和红烧牛肉一样，但是是豆制品。

我们来看下面两个模块。从整体来看，两边的加号反映的是可以点击添加的指标。

但如果继续考虑互动后的逻辑和过程，就会发现问题。

标签添加到前者，添加后会显示在相关区域，添加按钮不变。

在这里，我可以用一个更形象的比喻。我有四把椅子，其中三把被人占了。

第四把椅子的指标是:只要这把椅子被占用，旁边就会有新的椅子，最多不超过8把；如果没人坐，只会显示一把椅子。

但是，第二个模块中的添加按钮是一个添加条目，与其他内容无关。第四把椅子好像不是坐满了人，而是盖着一个大箱子。椅子没了，应该和其他内容一致的外观也没了，新的东西和新的指标也没了。

所以如果我们想按照第一条规则来玩，就不能在这里放箱子。如果我们想放盒子，我们需要把它们放在其他地方。

所以新手要警惕使用同款的误区。有时候长得很像的两个人，可能根本没有血缘关系。

大家已经明白了显化的概念。对于我们设计师来说，尽量去了解更多事物在不同场景下的表现和反映，在需要解决问题的时候使用各种方案。

#专栏作家#

颖君，人人都是产品经理专栏作家，微信官方账号:shejishiyj。

本文由@英俊原创发布。每个人都是产品经理。未经许可，禁止转载。

图片来自Unsplash，基于CC0协议。