事情的起因是这样的,我们研发了一个IP素材制造工具 -- 羚珑IP智能图库。
目的是解决京东内部IP授权使用需求量大,但是设计师人力不足的情况。
只需要在平台上智能生成,即可获得业务需要的IP形象素材、纹样素材和3D素材,大大提高设计的产能,同时能规避审核风险。
怎样让平台更容易被了解呢?有的小伙伴就说了,“那不容易吗,给个新手教程就好了”。通过以往经验发现,面对不熟悉的产品,用户会本能拒绝学习。实际上,我们之前招募用户进行用户测试时都会设计新手引导。
但我们惊人地发现,80%以上的用户会直接关闭新手引导,靠上手摸索使用来认识产品。所以,契合用户心智模型的产品能让用户毫无难度地上手使用。
下面就以纹样功能为例,让大家对智能IP平台的纹样功能有个认识。
-
PART · 1
纹样规则生成的前世今生
智能平台的纹样功能最开始是由于Joy studio的衍生品生产需求,后来考虑到集团以后会把IP授权给供应商做衍生品,会有巨大的制作物料需求,为了更好服务供应商、建设设计中台,纹样功能就产生了。
在这之前,我们会讲解下纹样生成的复杂规则是怎么来的。开始设计之前,我们先从纹样拆解,目的是提炼出纹样生成规则。
在大量参考了资料,得出了两个必要条件:元素组合和排列方式。
1.排列组合的3种方式:田字、工字和随机
田字和工字排列都是基于纯理性的演算,但是纯理性的排列方式,有时候制作的纹样就会毫无惊喜,有时甚至不具有纹样的美感,有一定的局限性;为了破除这种完全规律的排列,考虑到在衍生品上好用、好看的纹样应用,还创建了随机排列。
2.元素组合由3种类型搭配而成:IP元素、辅助元素和文字元素
对于元素组合,我们就很明确限定,元素不宜太多设定在6个以内--我们设定最极限的情况是6个狗子同时出现,元素越少纹样才不会太复杂;另外,还根据使用场景设定了3种类型的元素:IP、辅助图形元素和文字元素。
例如我要设定一个圣诞节要用的礼物包装纸上面只允许出现Joy,那就选一个Joy、一个圣诞树的辅助元素和一个Marry Christmas的文字元素,即可生成纹样了。
基于上面元素最多6个元素的限制和3种元素种类,可以交叉出多种组合方式,然后将不好看、难以通用的给剔除出来。
IP元素只剩下单IP和全部IP出现的情况。由于运营最多的情况是单独使用Joy,或者是全部IP一起出现的形式,几乎不存在两只单独IP拿出来使用的情况。
5个元素组合的情况考虑到美观性和通用性的劣势直接砍掉。当只剩下单IP的情况后,5个的组合无论如何搭配辅助元素和文字元素都不是最通用的,不能适配田字和工字排列,最后我们把这种情况删除了。
-
PART · 2
如何将纹样规则变成被用户理解的界面
做到上面这步后,我们的生成逻辑基本完成。同时又面临着新的问题:如何将规则融进界面里,让用户更好使用?但是规则复杂又难以理解,用户会存在很多困惑。我们需要从用户的角度消除困惑,用最简单的方式让用户感知规则。这时候就需要引入一个专业概念:实现模型和心理模型。
1.“心理模型”与“实现模型”
“实现模型”和“心理模型”的差别,“实现模型”是从计算机的视角看问题的,而“心理模型”是以用户的视角来看的。“表现模型”可以简单理解成为我们所看见的界面。
“实现模型是指软件应用中的实现是通过算法和相互通信的代码块的运作的,从开发人员的角度出发,为每个功能设计一个按钮,为数据输入一个字段,设计一个页面,是完全符合逻辑的,但是设计出来的产品只会原理用于所需,让用户感到困惑。用户的心理模型指的是人们使用产品时,不需要了解复杂机制工作原理的所有细节,可以创造一种快捷的认知方式来解释复杂的机制,让人们应付和产品的交互。
设计师将软件运行机制呈现给用户的方式称为“表现模型”,设计师对表现模型有更大的控制权,好的表现模型是贴近用户的心理模型的,而较差的表现模型却是只遵循技术逻辑而忽视用户的心理模型的。设计者的一个重要目标应该是努力让呈现模型尽可能匹配用户的心理模型。”
------About Face 4:The Essentals Of Interactiong Design
2.方案一:反映“实现模型”的界面
上面是整理好的元素组合,如何将这些情况呈现给用户?
当用户不了解前面的推导过程,其实会有很多困惑,也很难理解为什么只有这些组合。如果不加整理分类完全铺出来,在用户看来就是IP搭配元素,似乎没有什么规律。
很容易地,按照实现逻辑,我们最贴近实现模型的设计出来了:
按照逻辑,这个表现模型毫无问题,清晰地表达了这个元素的组合方式有多少种,给了用户组合的所有情况的心理预期。
但这只是站在设计师视角来看是完全没有问题的,那么用户会怎么理解这个界面呢?试一试从用户的心理模型转变视角看一看:
嗯?原来有这么多种组合模板啊?
我做图之前还要想我要几个元素吗?如果做到一半发现我要改模式怎么办?
下拉列表里面这些小图案是什么意思啊?是指我只能要用这几个元素了吗?
图形和文字有什么不一样吗?在我看来完全就是一样啊,都只是不是IP的元素图案而已啊
劣势1:灵活性不高,容错性低
用户事先选择组合模式灵活性不高,毕竟组合方式需要配合具体的元素来确定的。在确定元素组合之前会有无数次更改。下拉的方式在这个场景下容错性不高,修改很容易丢失数据。
劣势2:图形元素和文字元素逻辑区分明显,会引起用户困惑
在用户看来,无论是辅助图案还是文字元素都是图案,都没有很大差异。为什么要根据逻辑严格区分这些图案呢?
3.方案二:反映“心理模型”的界面
我们发现了更多问题:超过3个的选项,用户的精力会被分散;越多选项出现,用户的困惑越多。
能不能用不同的信息分类方式让用户一眼就清楚呢?再次思考了另外一种信息分类方式:
将一整堆元素组合分成两拨:IP+元素、全IP。
在IP+元素的模式中,元素最多搭配3个。不需要用户去主动选择,我们在后台为用户过滤掉不符合规则的元素。
用户的行为不再受逻辑的禁锢,让用户感受到所选择的元素都是自由的,似乎没有限制。
解决1:减少选择项,能大致区分组合规则
新方案就灵活多了,用户可以根据搭配进行增删减,容错性更高了。方案能用简单的文案说明规则:要么是IP+元素,要么就是IP全家福组合。用户再不用细细区分选项之间的差异和规律了。
解决2:后台过滤,减弱规则感
单IP+元素这个组合规则里面,最大的一个棘手点:文字元素最多只能加一个。怎么样能够避免用户选了两个文字元素呢?我们采取了后台判断的方法,如果用户已经选择了一个文字元素,则在整个可选择元素池子里面就不会出现文字元素,避免用户选择。
-
PART · 3
纹样随机生成的自白
上面这个选择元素的交互看起来有点复杂,下面有一个简单的功能描述一下随机生成是如何契合心理模型的。
1.抓住脑子最先的反应
为什么同样是修图工具,美图秀秀却比PS更容易令人容易接受?那也是"心理模型”和“实现模型”的问题。
我们的大脑有3个部分组成,分别影响我们思维和行为的不同方面。旧脑和中脑运行无意识、自动思维,以及新脑运行的有意识、受控思维。
心理学家通常认为潜意识的无意识思维是系统一,他是首先进化出来的,是感知行为的主要控制器;有意识的受控思维属于系统二,在控制人类的认知和行为方面处于次要地位。
在使用新产品时,无意识和自动的操作是容易的,解决问题是困难的、反应也是缓慢的。纹样生成功能就是抓用户这个特点,抓住人脑最先反应的系统一。
2.易用的度量衡--小白用户的“心理模型”
一个平台是否友好易用,要以小白用户在使用时是否简单不费力。新平台刚上线的一段时间内,小白用户占了绝大多数的,也就是说我们要把门槛放低,这样才不会劝退用户。随机生成功能是毫不费力气的,不仅仅满足小白的需求也满足了中高级用户的需求,是向下兼容的。
-
PART · 4
转换思路,给“明确”的业务需求更好的设计方案
当深入分析了上述后,我发现当一个设计师没有自己的观察和判断,就很容易陷入为需求方画稿子的工作状态中。
这就需要我们跳出业务方的视角,站在用户的视角上面去判别这些“明确”的需求是不是只是为“实现模型”画设计稿。
本文先讲解研究纹样提炼规则时的心路历程,引出纹样的规则,然后结合“实现模型”和“心理模型”的两种设计方案是如何融合规则在设计层面的,最后用随机生成剖析用户心智。最后上升到工作层面,意在抛砖引玉,希望大家在工作过程中将“明确”的设计需求多加思考,从而沉淀出更好的设计方案。
参考书籍:
《认知与设计 》Jeff Johnson
《about face4 交互设计精髓》