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端思维-产品经理的自我修炼》

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

主题授权提示:请在后台主题设置-主题授权-激活主题的正版授权,授权购买:RiTheme官网

关于下载

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


免责声明

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