交互日思录 | 用体验思维创建交互资料库

作为一名交互设计师，为了保持不断精进，经常在分析产品的同时积累一些优秀的交互模式。但我们经常会遇到这样的情况：

看到好的APP设计，截屏、存在相册里，打算未来某天清理，然后就木有然后了

把截图发到电脑上、放在文件夹里，日日放月月放却没有定时梳理，等你想起用它的时候已经杂乱无章、无比庞大了

或者因为资料无法快速调用，你开始怀疑积累的意义，而且最终实际设计用到的，还是脑子里印象深刻的那些……

那这该怎么办呢？

解决方法就是构建你的个人控件资料库。

其中，“积累”这个动作只是第一步，随后应当像收纳整理师，将碎片井井有条地归类，在需要的时候快速、高效地找到他们。

具体怎么做呢？我们先用3W法分析这个问题

1、WHY：为什么要做这件事

痛点：没有系统的资料库、设计全凭经验

痒点：又快又好地完成任务

超预期：与身边的人共享，创造一起成长的氛围

2、WHAT：在什么场景下需要这些控件库

在实际设计中寻找当前最优解，场景包含“解决问题，优化模式，提供创意”

●  解决问题：满足基本型需求，使产品可用

●  优化模式：满足期望型需求，使产品好用

●  提供创意：满足魅力型需求，创造AHA Moment（如微信读书的推荐=微信读书+摇一摇）

其中，根据目标的不同，控件库的分类方式和触点也应当不同

●  解决问题：问题维度分类

●  优化模式：模式维度分类

●  提供创意：创意维度分类；因为创意较发散，在分类基础上可设置标签

3、HOW：怎么做控件库、步骤分别是什么

产品打造思路：最小MVP，即定义问题、明确方案、设计原型、快速迭代。

按照这个思路，我们做一个变体：选择、整理、吸收、应用

创建控件库的步骤

1）选择

首先，我们需要把积累的资料聚合在一起，并把他们分成三类：

●  模式：一般来源于其他APP，可能是一些让你觉得很棒的基础控件或基础控件的变体

●  问题：一般来源于你的实际设计，如你遇到什么问题，然后通过这个设计解决了

●  创意：让你眼前一亮的设计，或许很概念现阶段用不到，但是提供一个创意方向

如果你还没有很多资料可以分类，可以先看看你的项目控件库、收集一些模式。

毕竟，开始的时候，资料不在多，首先要先做起来~

2）整理

现在手里有很多资料了，怎么整理呢？

推荐使用Axure（Sketch）和Adobe Bridge。前者适合积累模式和问题，便于与设计画簿互相引用；后面适合更发散的内容，文件夹+标签使分类更多重

①  模式：按照交互模式对收集的控件进行分类，并收集在Axure中。其中，每个画簿的标题是该控件的名字，如图1.1 ，类似项目控件库，但这里需根据你的掌握情况做删减，毕竟是自用~

图1.1 我的模式分类

②  问题：同上，只是每个画簿的标题修改为问题名称，所以这里是对你已解决问题的收录，如图1.2

图1.2 我的解决问题示例

③  创意：将所有图片放在电脑中的一个文件夹里，建议先按照功能进行归类，因为功能是一个少有交叉的分类，然后用Adobe Bridge对图片设置标签，便于日后多维度查找。图1.3为微信读书摇一摇，该功能=推荐功能+微信摇一摇，我很喜欢这种设计和专注的推荐，因此把它放在“推荐”文件夹里，标签有#微信读书 #摇一摇 #沉浸式 #转场动效

图1.3 微信摇一摇推荐

3）吸收

只有收集是不够的，我们还需要定期对资料进行内化，使其为我所用。

对于新接触的控件，我们用初级设计师学习控件的方法，比如分析控件的优劣、找案例和变种、分析实际产品的使用合理性等，如图1.4-图1.5

图1.4 分析控件的优劣，by一抹阳光

图1.5 按控件分析合理性，by一抹阳光

对于解决问题的收录，我们可以定期回顾，看之前的解决方式是否在当时是最优，如果不是、如何改进；聚合同一类问题的解决方式，也帮助我们发现共通的底层解决思路，从而建立方法论。

有时候我会“没眼看”自己几个月前的设计，虽然当时可接受，但放在现在一定有更好的设计。这种回顾方式，一方面帮助成长，另一方面也能获取成长的成就感~

为了避免陷入收集整理却没时间吸收的困境，可以在周/月计划增加“整理控件资料库”、“回顾资料库问题解决方式”，为这一行为增加除法点，让它更加可行。

4）应用

因为我们的收集本来就是按场景分类的，因此在应用时会比较得心应手

在遇到问题时，看之前是否遇到过相同的问题，是否可以参考解决

在优化模块时，看看资料库里是否有更好的控件承载自己的设计

在出概念方案时，查看相关功能的文件夹、搜索标签，能否应用一些眼前一亮的设计点

这样日积月累，我们就多了一个实际设计中的可靠工具，将过去的经验应用至现在，也不用在陷入困境时去临时翻竞品了。因此，这样也提升了设计效率~

-【End】-