交互式文档是项目开发的重要组成部分之一,在加快互联网开发过程的过程中,通过统一规格的交互式文档,可以提高团队的工作效率。但是,许多交互式文件的写法多种多样,普遍性不强。作者结合实战案例,遵守了基础的规范细节,分享了适合团队成员阅读的交互式文档。
交互式文档是项目开发的重要组成部分,在互联网迅速发展的迭代产品开发过程中,通过统一规范的交互式文档编写模式,可以提高团队的运营效率。不要认为交互式文件写得好不好,本身没有绝对的统一标准,大企业的文件是最好的。
以前也在网上学过很多大企业交互文档的写法,都是多种多样的,不同公司的项目规模不同,对人员的文档阅读习惯不同,盲目模仿只会收效甚微,遵循基础的规范细节,团队人员可以阅读的交互文档效率最高!
这篇文章相关交互式文档的编写以“苏宁智能屏幕项目”为实战案例进行说明,并以迭代优化后得到的项目总结和思考为参考。
一、互动文件的价值
交互式文档的主要使用人员是交互式设计师和界面设计师、产品经理、开发人员(战后工程师、测试专家)。
苏宁智能终端智能屏幕是一项复杂的系统级业务,项目人员配置由坑组成,以确保开发的每一部分都做得更好。但是在UED内部,视觉设计和交互设计的责任比较重叠,所以基本设计师单独负责整个模块的交互和视觉工作。
这样做对产品的创新扩展也有很大帮助,基本交互文档的存在不会影响设计的发展。双重身份的增加可以同时与设计互动。对已建立的项目的需求直接进行设计思考。
交互文档是在ued内部进行审查后形成基础的框架,其中交互文档规范必须严格、控制细节、全面考虑。组织各部门共同讨论互动文件的草稿,提出改进意见后,向相关人员整理同步,并对互动文件进行说明,供今后新来的同事参考和学习。
不同的文件可能有不同的要求。每个中小企业可能没有专门的互动工作。基本上,产品经理将需求和交互文档集成在一起,成为项目中唯一的文档。但是产品经理不是专业的交互设计师。虽然可以清楚地说明业务规则和逻辑,但很多细节都需要设计师来优化设计。
交互式文档阅读的舒适度、信息完整性等也会影响技术人员的开发心情。在审查过程中,经常会出现技术人员提出的各种问题、抱怨需要的问题、抱怨文件不标准化的问题、质疑专业性的问题。
因此,交互文档必须向技术人员审查实时同步,优化UED部门输出的交互文档的体系结构,接受各部门的用户意见,形成高效、适合团队的交互文档格式。互动文件的价值简编是协调各部门之间沟通的工具。能提高大家工作效率的工具当然是最合适的。
二、互动文件的构成
交互文档的组成部分不一定完整,但只要选择重点内容并适当地表达,就能最大限度地发挥交互文档的价值。设计方案、交互规则说明、版本说明、全球设计规范。
注:并非所有功能都与这些组件相对应。一般来说,优先级较高的需求尽可能充分,拥有尽可能多的组成部分。相应的小要求可以通过简要分析相应的文案、跳转来说明。(比如“详情页订阅功能”,因为优先级高,业务关联多,所以这个功能的互动性更完整。)
1. 版本说明
2. 需求描述和业务目标
3. 设计目标与策略
主推电视注册订阅登录关注流程优化,云钻激励连续两次代码扫描再次使用时无需重复注意。
C2sskVjPMhdsU%3D&index=2" width="640" height="222"/>4. 调研分析
竞品分析方式用“详情页改版设计”为例作简要说明。
1)改版背景
小窗播放详情页承载很多视频的重要信息内容(视频名称,视频基础信息、基础功能、运营活动,会员购买,选集等),在苏宁智慧屏低端机上需要精细化设计布局,剔除冗余的设计信息,提升视觉效果和信息层次,高端机需要使用沉浸式设计方式提升用户体验和视觉观感。(下图为Biu o版本详情页)
2)改版立项
在苏宁的实际项目工作中,设计师可以参与需求和设计改版的讨论,并由设计部门发起需求立项,因为UED设计部们的小伙伴会在版本上线以后,会去做很多次的设计体验测试,去发现一些设计、功能、体验等问题。
总结归纳之后,会针对具体的问题思考后续的设计优化,设计与产品相冲突的部分会提前和产品沟通协调后决定是否可以由UED设计部发起改版立项并跟进。
3)改版原因
改版原因可分为以下几点:实际上线数据以及用户调研、产品测试反馈;
- 存在问题:详情页页面对于用户读取信息的体验不好,线上数据反馈用户页面停留时间短,会员购买及续费转化率比较低。
- 改版重要性:好的详情页设计不光只是为了提升用户体验,同时也能够让设计赋能产品的商业价值,增加产品收入。
- 改版结论:需要通过对详情页的设计改版,提升用户体验和会员购买效率。
4)改版调研
用户调研通过内部和外部用户的用户调研,我们归纳了用户主要的痛点如下:
- 关于导演演员的信息介绍的内容权重过高;
- 需要增加视频关键词标签和热剧排行,引导用户资源内容选择 ;
- 主要功能点层次分散,设计整体太普通,功能区视觉没有识别性。
竞品分析:
通过竞品分析,去观察竞品是如何优化详情页设计,参考竞品:腾讯、优酷、爱奇艺、小米进行调研。(下图为详情页页面竞品分析比较)
5)改版推进
这个改版需求是智慧屏系统设计的冰山一角,但仅仅这个需求就有很多的问题点需要设计师去反复思考,分析,出方案,评审到最终跟进落地,同时改版需要结合项目资源判断是否适合做优化迭代,设计改版时,如果改动使功能和交互有冲突,导致了前后端数据架构的调整,也会增加开发成本。
所以在立项之前需要结合数据、用户反馈和竞品分析、优化方案等,准备充分,这样评审的时候才能够有机会说服技术人员对改版意见保持一致,然后再去具体细化。(下图为Biu o版本详情页)
5. 流程图(业务、任务、界面)
业务流程是由产品经理或高级交互设计师通过泳道图绘制,交互文档的主要流程图就是任务流程图,页面流程图主要是为了去呈现页面跳转,此部分通过页面交互说明来描述。
6. 设计方案
- 主推登录TV订阅提醒,关注公众号微信提醒,扫码登录的弹框与关注的弹框页面结构保持一致,让用户连贯的完成任务;
- 为了激励用户扫码登录和关注,提醒送云钻的奖励;
- 关注成功TV端需要toast提示,按钮有明确的文案提示;
- 移动端提醒消息要有明确的影片名称提示;
- 对一些误操作没有进行微信关注的用户提供统一的关注入口。
7. 交互规则说明
业务规则、数据规则、适配规则、文案说明、交互说明等。
8. 全局的规范
智慧屏的全局规范包括用户权限、交互流程、登录方式、系统模式选择、内容(图片比例、文字选择),运营位使用规范、交互的组件、交互状态的反馈和提示(无网络、物理断网)、加载,苏宁智慧屏规范制定时单独将这些内容从交互文档里面剥离出来,整理出另外两份文档:交互设计规范和运营使用规范文件。
三、交互文档的撰写和规范
界面和设计说明的布局、交互说明规范化、页面目录拆分规则、交互原型稿设计、交互说明的优化。
1. 界面和设计说明的布局
说明布局遵循左边为页面,右边为文字描述的方式。而且每一横行只展示一个页面,新页面另起一行。撰写交互文档的软件为axure,最终是需要将文件导成网页htnl格式,方便技术人员使用浏览器查看。网页浏览是通过鼠标纵向滚动来查看内容,上下滚动浏览符合操作习惯。
2. 交互文档元素对应规则
首先进入一个界面,可以讲页面进行模块化一个个拆分,利用英文字母或者数字和内容进行对应,苏宁智慧平项目中采用和字母和熟悉相结合的方案去标记页面和元素,比如(字母A对应一张页面,A-1对应页面中的某一个模块,模块可以由自己去定义,可以是信息或者功能。
3. 交互文档名词标点符号规则
此处参考了《产品文档中,特殊标点符号的使用建议》。
页面当描述的内容包含某个菜单页面的时候,建议使用「」或者“”,后面增加名词修饰。
Tab栏或状态:当描述的内容包含了某个页面下的Tab信息或状态的时候,建议使用「」或者“”,后面增加名词修饰。
字段或者行内代码:当描述的内容包含某个新增的字段的时候,建议使用 反引号(`code`)来表示。
按钮或者功能:当描述的内容中需要点击某个按钮或者使用某个功能的时候,建议使用来表示,不建议使用「」是怕直角引号太多,代表的含义太杂引起阅读负担。
智能终端举例:我的会员权益模块
先打开「会员权益页」,然后落焦“Biu教育”会员tab,选择对应的会员类型,落焦按【确认】键。由于确认购买完成之后,返回此页面,按钮状态会变为续约。需要新增‘续约’字段。
4. 交互说明分类
交互文档内容分类主要为:规则说明(业务规则、数据规则、适配规则、文案说明)、操作反馈、评审备注作为后续功能交互文档的细节补充。
分类说明除了文字表述之外,还可以建立表格式的展示方式,针对不同的功能说明可以合理使用,如下图详情页的功能文案规则和操作说明使用表格的方式替代文字表述,清晰明了。
5. 页面目录拆分规则
每个模块页面最多不要超多6个。
- 如果一个界面中有多个功能,可另起一行作为子页面说明每一个功能;子页面下有如果很多状态页面,可再另起一行放置;
- 如果一个界面有多个内容类型,可在同一级页面下增加一个页面;
- 如果一个功能,有多个业务流程,可拆解成多个页面。
6. 交互原型稿设计
移动端习惯使用黑白灰的填充色块去做交互设计原型稿,颜色取值深度、中度、浅度三种来保持原型页面的色彩平衡,智慧屏选取的是线框加色块的处理样式,因为智能屏尺寸相对较大,信息承载更多,选用线框样式更为简单,所以不管什么样的形式,适合团队的才是最好的。
7. 交互说明的优化
交互评审时,需要高度保持注意力去记录技术人员关于功能的一些细节的问题,作为后续交互文档的补充,对于业务和交互的一些规则在评审时需要几下更改的点,所以我们在评审后会进行完善修改,更改后用“红色文字”做标记。(见交互说明分类配图)
总结
以上就是我想和大家分享的关于交互文档撰写的相关内容,项目的本质除了考虑商业价值和用户体验之外,还要去节省人力和时间成本,提升开发效率。能让项目有效率的推进的东西肯定是有价值的。所以多思考,多理解,多认真的去倾听项目组人员的反馈,精雕细琢去做一份契合自己团队的交互文档吧!
注释:项目版权归属苏宁智能终端有限公司
本文由 @Q什伍 原创发布于人人都是产品经理,未经作者许可,禁止转载。
题图来自 Unsplash,基于CC0协议。
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。