Hi，欢迎来到知果的知果日记。
扫下图二维码加微信，带你进「知果日记」微信成长基地。群里每日进行读书分享，还有来自各行业的产品经理、设计师互相交流，满满的学习氛围。
知果日记分享：人机交互 | B端体验 | 用户思维 | 产品设计 | 认知成长相关话题

「加微信请备注：知果日记」



关键词：交互、B端交互说明规范


近期，有好些小伙伴问知果，B端交互说明规范要怎么写？写地好?写地详细？写地全面？

这里分两类：
第一类是：如何写出一份专业的交互说明规范（这一类对于上线紧急，设计需求量大的项目来说，不适用）。
第二类是：如何写出一份逻辑相对合理，在工作中可以迅速交付视觉设计师，产品经理与研发同学的交互说明规范（这一类，可操作性强）。

第一类交互说明规范包括了产品概况、用户场景、功能结构图等相关信息，假如有小伙伴有时间维护这样一份交互说明规范，是非常好的，便于团队回溯。

今天知果要讲第二类，为B端交互设计师解除编写交互说明规范的疑虑，大家不是不会写（满脑子好的想法呢），只是不知道从何开始。例如，如何才能写地清晰，没有找到有效的方法。这也是知果曾经刚进入B端遇到的情况，找了很多资料，也没有完全解开疑惑。

下面，知果将从「实实在在可用」的角度，为大家分享「如何编写一份清晰的，可以迅速交付视觉设计师，产品经理与研发同学的交互说明规范」。

之前知果整理过「编写友好的可读性强的交互说明文档的几个注意点」，感兴趣的小伙伴可以看这篇：编写一份友好的交互说明文档要注意哪些

本文将从以下6个思维展开：
1、组件思维
2、规则思维
3、功能性思维
4、逐层下钻思维
5、结构化思维
6、协同思维



—— 1 ——
组件思维

组件思维是指，建议大家画原型时，先准备一套组件库，这套组件库不用多好看，但需要尽量整洁和有用。那为什么要准备一套组件库呢？总共有3大好处：

1.1、保证界面统一
假如每个页面上的元素都是点线面一个个单独画出来，或者来自于好几套组件库，就会导致界面杂乱不堪，不像一个系统。特别是同一个控件还有多种样式（例如antd的时间控件和element的时间控件就不同），会让视觉设计师等同学陷入迷茫。
因此，在画原型、设计交互、写说明前，首先构建一套组件库很有必要，至少从原子级先保证界面的一致性。

1.2、减少沟通成本
每一个组件都有其含义，可表达原型设计者的设计思路，若随意绘制，会导致沟通成本变高。知果遇到过有些交互设计师画表单从来不画载体的情况（即：不知道是页面表单、弹窗表单还是抽屉表单），还遇到过明明需要用数字选择器却用成输入框的比比皆是，这导致交互设计师与视觉设计师，及其他团队成员的沟通成本变高。界面上一旦类似的问题多了以后，就会极大提升沟通成本。
如下是之前遇到的一个工作流组件拖拽案例，图一无法看出元素可拖拽，优化后的图二可以。


唐纳德·诺曼在《日常的设计》中说：“产品外观必须能够说明问题，能自然而明显地体现外观与其作用之间的关系，使用户一看就明白。”

1.3、节省绘图时间
同一个元素反复绘制，非常耗费时间，使用组件库，则大大缩短绘图时间。不要小看节省的时候，足够我们将省出来的时间，好好写写我们的交互逻辑啦。


—— 2 ——
规则思维

规则思维是指，建议大家可以根据已有经验，或者当下产品情况，设置一些交互上的规则，避免做一个功能，又重新衍生一个新的交互，假如视觉设计师没注意，就会以为这是特意这么设计的，从而导致前端开发变得复杂。

例如：两张均是表格页面，一张操作列在右侧，一张在左侧。
再例如：分组选择器不同。


这就是交互规则不统一的表现。对于一个产品来说，建议交互设计师针对全局性的交互规则做统一梳理，保证设计效率、降低沟通成本、提升研发效率。

关于基础组件的交互规则，选择一套开源的组件库基本可以解决，但业务性组件交互，或区块交互，交互设计师需要根据业务的情况，从0-1梳理。

如下是知果举例的一个产品「内容复制」全局交互规范。


—— 3 ——
功能性思维

功能性思维是指，我们在撰写交互说明的时候，可以按照页面功能来逐一编写。刚入行的B端交互设计师，画完界面后会不知道如何下手去码下第一个字（心中感觉好多好多要写），那我们可以从第一个功能开始。

如下图，「团队管理」页面功能很多，我们可以给功能标注序号，通过序号线索来慢慢展开我们的交互说明。1号是搜索框 、2号是添加团队、3号是团队管理、4号是添加成员、5号是批量删除、等等。

通过沿着功能写交互的方法 ，可以帮助我们理顺思路。



—— 4 ——
逐层下钻思维

逐层下钻思维是指，当一个交互的层级较为深的时候，需要一层层打开去编写。

拿做宫保鸡丁举例，想要做一份好吃的宫保鸡丁，与鸡肉、花生、胡萝卜、黄瓜的质量有关系，与酱油、豆瓣酱、辣椒酱、陈醋的质量也会有关系。因此，宫保鸡丁第一层是主料、辅料维度，接下来是具体对象，再到怎么挑选、如何处理、多少克等细节。这就是逐层下钻思维。

如下是知果整理的逐层下钻交互说明示例，大家可以看下。我们梳理交互的时候，可以先从n开始，再是n-1、n-2、n-3，假如还有下钻的，可以是n-1-1、n-1-2等，就如树级结构一般。


—— 5 ——
结构化思维

结构化思维不得不说是一个非常好的思维方式，那什么是结构化思维呢？知果简单举例一下，我们看看下面三句话：
第一句：是这样……，然后……，接着……，可能是 ……，那么……
第二句：首先……，其次……，最后……
第三句：规划前……，规划中……，规划后……

大家可以很清楚地感觉到，第一句话很显然是经验导向下的说词，第二句和第三句话是有结构和层次的，倾听者能很好地理解述说者想表达的意思，这就是结构化思维带动结构化表达的结果。

在编写交互说明规范的时候，我们也尽量采用结构化表达的思路，包括正向流、异常流、特殊流。
5.1、正向流：
正向流就是描述用户正向操作的交互模式。如下「搜索团队」的交互模式为正向的。

5.2、异常流：
异常流就是描述用户异常操作时，或者系统、网络异常时候的交互模式。如下「搜索团队」的交互模式为异常的。

5.3、特殊流：
特殊流是指一般情况下不会出现的，在特殊场景中才会出现的一些交互方式，我们交互设计师可以在完成以上两个流后，再进行整理。例如，一般的「高级配置」都是默认收起的状态，因此在全局交互规范中，已经写清楚并和研发团队沟通好了，但此页面比较特殊，「高级配置」默认展开状态，那么这个地方就要特殊写明。如下所示。


—— 6 ——
协同思维

很多交互小伙伴和知果说，他们经常交互思考不全，怎么办？有没有解法？

我们先来看看为什么我们想要把交互想全，一点也不遗漏，很难。主要是4个点：
第一，与我们的设计时间不够有关系。等我们将会出现的各种情况全部想清楚，项目基本要延期了。

第二，与我们对业务不够了解有关系。通常我们对业务的了解不如产品经理那么透彻，因此，总是会遗漏一些场景。

第三，与我们的经验有关系。工作时间久，处理项目比较多的交互设计师，相对能考虑到的面会广一些。但经验不多的小伙伴，就会考虑的窄一些。

第四，与我们是否持续沉淀有关系。草草做10个项目的交互，不如用心做好1-2个项目，深入思考与沉淀下。

因此，想要破解，需要用心与持续沉淀，可以先从以上4个方面去逐一突破。

当然，我们更要有协同思维，其实很多交互并不是交互设计师一个人能想明白，或者说想全面的。我们需要多和产品经理、研发工程师、用户一起来探讨，通过协同方式，把交互补全。

记得有一次，知果在支持「文件上传」功能时候，定义了一个交互，就是“文件上传错误后，可以再次上传”。产品经理当时没看出问题，但拿到研发侧发现，“文件上传错误后，可以再次上传”是个错误的逻辑，因为上传不是一个复杂业务逻辑，出错只有是因为文件本身的问题，所以只能删除后重新上传，没有在当前“再次上传”的可能性，因为不论传多少次都是失败，因此就没有必要提供“再次上传”的交互。

可见，交互设计师不要担心自己思考不全，我们应该考虑的是，如何通过实践逐步将交互思考全面，且不要在类似的交互问题上犯同样的错误。



写在最后

选择大于努力，思维决定出路。

因此，对于刚入行B端的交互设计师来说，不要害怕交互写得不全、不清晰。这个过程任何交互设计师都经历过，且随着工作经验增长，如何写出一份没有瑕疵的交互说明规范，也是资深交互设计师追求的。

我们第一步可以去做的，就是调整好自己的思维方式，而不是一上来就赶紧写交互说明。

今天，知果分享给你们6个思维：
1、组件思维
2、规则思维
3、功能性思维
4、逐层下钻思维
5、结构化思维
6、协同思维

愿可爱的你们，能不害怕写交互说明规范，能一点点积累将交互说明规范写好。

好了，今天知果的分享就结束啦，期望对你们有启发与帮助。

点赞 + 在看 + 分享
关注知果日记，共同实现1.5倍速成长
推荐阅读：
B端常用9大开源组件库集合（必备收藏）
表单第一趴 |  B端表单设计5部分
表单第二趴 | B端抽屉表单设计方法
知果PMTalk演讲2021：从用户体验视角构建B端界面（演讲全文）
刷新自己·进化自己
追逐我们的星辰大海：2021年总结（上篇）
追逐我们的星辰大海：2021年总结（下篇）

-------- 知果日记出品 --------


- 书籍推荐：
一本合适B端从业者（产品经理、设计师、研发工程师等）的入门书籍 《B端思维-产品经理的自我修炼》。

本篇文章来源于微信公众号: 知果日记

关于下载

本站分享的产品前端、B端竞品和所有付费资源，均不是该资源的价格，本身资源是不用付费的，这是赞助知识库资源模板的收集整理、服务器维护的基础开销费用！


免责声明

1、本站分享的产品前端、B端竞品和产品知识库主要来源于网络的公开信息，均为网络搜索，微信缓存，免费下载，互联网平台整理而来，产品知识库的资料文档仅限用于学习交流。如若有侵权你的知识版权的嫌疑，请及时告知我们，我们会在24小时内进行删除。联系管理员：2841552294@qq.com
2、上述资源和模板的知识产权及相关权利归作者及制作公司所有。
3、上述资源和模板仅供学习参考及技术交流之用，未经源码的知识产权权利人同意，用户不得进行商业使用。
4、上述资源和模板如需商业使用，请自行联系源码知识产权权利人进行授权，否则，我们将积极配合作品知识产权权利人 一起维权。
5、上述资源和模板如有侵犯您的知识产权，请您立刻联系我们，我们会在24小时内做删除下架处理。