交互输出文档

协作角色:交互、产品、开发、UI
交互团队:优秀的交互文档需要在组内进行过审核,包括一致的撰写标准和模式的使用,需要在什么情况使用什么交互模式还有组件库的调用都会有详细说明,满足团队设定的交互规范。
产品团队:交互的输出文档需要和产品的prd文档合并
开发团队:开发可以更好的还原该功能中交互的跳转及逻辑。需要交互把交互规则写详细,比如按钮在press和default时候是否会有变化,或者页面转场的方向,注意细节,减少不必要的低效沟通。和开发合作也是一项内部的体验设计。
UI团队:注意只把信息层次表现出来即可。ui与交互重叠度很高,只要有智能化组件库和工具做支撑,在交互和UI的设计流程中,时间就会大大降低。

一、交互输出文档的内容

image.png

1.需求概要
A需求背景:明白需求的价值和原因。比如我们app中业务方(运营)需要做一个扫一扫功能。我们可以从 业务价值用户价值 两个方面去评估,根据对业务方的沟通之后我们发现扫一扫功能将会在周年庆的时候通过物流包裹上的二维码,让用户进行扫那参与活动这样的玩法。所以这个需求对于业务方来说是一个转化手段,通过扫码参与活动-领券-消费,设计师还需要考虑再周年庆结束之后这个功能还有什么用,在以后的规划中的存在是怎样的,在所有包裹中印上活动的二维码周期和成本有多大。
其次,对于用户来说,扫一扫并不是帮助他们解决了某个问题,而是我做了一个东西,同时搭配这个功能让你们去使用,对用户来说是一个可有可无的功能,如果线下包裹上的二维码破损对用户的影响是不可控的。综上,既要要做一个临时的活动,设计师去思考采用其他的方式会不会更好?

因此,在第一步去确定需求的背景、价值,也就是说这个需求怎么来的

举例:一个店铺优化的项目,存在的问题是个人中心和店铺营销场景重合过多,并且卖家的同时可以买和卖两个场景存在。通过数据分析和用户访谈我们发现了一些机会点,必须突出一个核心场景让用户有明确的分辨。

注意:背景描述可以带上你的调研结果和分析,比如首页优化,我们观察了近5个月的数据,都呈现下降的趋势,所以之后进行了一系列的访谈和用户体验地图分析才有了这个需求的背景产生。
image.png

B需求目标

希望通过这次需求迭代达到一个什么成果。比如我们之前做过一次整体体验优化改版,那么我们的目标就是减少用户的流程跳失、提升整体体验满意度、提高用户的任务转化率,其中我们做了一个商品关注的功能,由于是限时特价商品所以限量,在规定时间进行抢购,为了让用户的使用场景统一我们打算在应用内做一个商品关注功能。在这个需求的初期,我们对这个功能的目标和预期时提升x%比的gmv,提高用户对关注商品下单的效率和满意度(购物车功能?)。所以这个功能的一个目标就是解决用户场景迁移的问题。设定目标之后,为了在上线后对其进行复盘和数据跟踪还有用户跟踪。
总结:针对什么用户在什么场景下解决用户的什么问题,达到什么目的。
C需求范围\范围层
在需求中我们需要做哪些相关功能以及功能涉及面。比如扫一扫功能,不同产品定位对于扫一扫功能的要求也是不同的,微信在扫一扫功能中承载了:扫一扫、相册、封面、街景、翻译、手电筒等诸多功能。淘宝扫一扫(AR、拍立淘)、相册、历史、帮助、手电,说明了不同产品对扫一扫功能由不一样的要求。所以在需求范围内我们需要把本次需要做的功能进行描述,并且该功能是否影响其他功能的使用和对整个产品的影响范围。我们也会将所需要的功能进行拆解和优先级查费,在表格中编辑。
D调研分析
在汇报方案和评审,或者在项目推进时,我们需要有相应的论据来支撑方案的客观性。调研分析需要输出结论。比如之前的首页改版,经过用户研究小组的访谈和数据分析得出相关的结论,通过埋点找到相应板块的点击数据和异常点,然后再进行一系列的问卷和访谈研究,找到结果。结论一般包括情绪场景/故事板(访谈用户 日常关键场景描述)和机会点(通过场景和数据分析得到)


埋点

E版本日志
日志是一个重要的组成部分,就像开发跑不通时会去检查log,对设计来说版本日志第一可以记录工作过程和思路变化,第二是对外,包括和需求方的讨论,会议的纪要等。会议纪要在备注中需要详细说明,以做证据。同时邮件通知相关人员和负责人。有些公司还会放一些评审记录,比如各部门负责人对方案和需求的建议,业务方和技术负责人的一些建议也会放在项目概要中。Prd文档也可通过内部服务器进行实时更新和保存,svn。方便大家对需求的进度和迭代有一个直观的追踪
更新日志

F项目成员:产品、运营、交互、视觉、开发各司其职
2.需求方案设计

A业务、任务、界面流程图

业务流程图:在整个需求系统中,相关利益者的业务关系,任务信息流向的一个图表。比如外卖场景,相关利益者有用户、店家、外卖员三者,那么当用户开始触发流程后,这三者在这个流程中就会各司其职,而业务流程图很明显的告诉大家所有联动者的职责和流程走向。
泳道图

任务流程图
用户在具体执行某个任务时候的工作流程,以及其核心任务的操作步骤,比如在登录注册这个任务中,用户需要进行一系列的操作,在这个流程中用户的操作引发的系统判断需要详细说明。
image.png

界面流程图
界面之间的跳转关系和路径,在这个流程图中,不需要把详细的说明协商,只需要将需求中涉及到的页面跳转进行叙述即可
低保真原型图

相关说明和规则
交互文档最关键的部分,如何书写交互说明,以及交互说明应该包含的内容
如何书写交互说明及包含内容

a.全局思考
整体思考
信息架构是否容易理解,信息分类是否合理,比如我们的信息架构是否采用了用户容易理解的,市面上常用的信息架构;
信息层级和路径是否合理,不一定要最简,但是要高效,信息的优先级是否放置准确,信息组织是否具有相关性、逻辑性;
主题是否清晰,3秒内告诉用户【我】在哪里,并且可以做什么;
方案的延展和后续功能规划的可扩展性。
用户权限
根据不同用户的权限对该需求进行检查,比如普通用户、VIP用户、内外网用户、游客用户,在登录未登录时候对需求内功能的使用是否有影响。
登录方式
用户登录和注册、终端的兼容(兄弟账号管理),不同方式注册的用户是否需要补充填写相关信息等
流程
该需求中的功能流程是否和其他类似或者相同功能流程保持一致性;
逆向流程和非正常的思考有没有考虑完全
流程的闭环有没有做好;页面跳转的方式是否合理
中断后的恢复状态如何呈现
是否保留原信息等等
b.内容、状态和显示
内容的获取来源
例如下方的图片为例,banner的图片来源和发现feed流的图片来源肯定是不同但额,要写清楚图片或者数据的来源是来自于用户的上传还是系统后台的配置获取;并且获取的方式是如何的,是需要手动下拉刷新还是切换页面自动刷新,还是设定时间自动刷新。
字段、图标是从接口获取还是前端写死,以及气泡展示的规则等等。另外一张图片可能用在多个地方,而可能呈现的尺寸不同,所以在涉及到相关图片使用时要注意剪裁规则和图片来源

image.png

缓存机制
图片以及一些资源通常我们需要对其进行缓存,缓存是在计算机上的一个原始数据的复制集,一般来说需要缓存的内容是通过浏览产生的,包括图片以及cookie等,浏览过的视频和广告也会被缓存。同时在不同的网络环境下缓存的时间标准也不同,无网络那只能读取缓存文件,wifi环境下缓存的时间可设置的短一些,而流量环境下时间可以设置的偏长。
状态
主要包括初始状态(冷启动无缓存第一次进入)、空状态(无任何内容比如空的购物车)、常规状态、异常状态(网络中断、接口报错)还有过期状态等。
显示
数据和内容的极限值,最打和最小,比如粉丝和关注的数量,小于1万人则显示完整的数量,大于等于1万小于11000则显示1万,大于11000小于12000则显示1.1万。另外包括标题极限为一行显示,超过部分的显示规则,敏感信息、错误提示以及超时的信息提示。金额的格式使用¥xxx还是xxx元,小数点保留的规则。日期的显示格式是xxxx年xx月xx日还是xxxx-xx-xx还是xxxx/xx/xx等。
image.png

3.反馈、提示、手势
一般反馈指的是用户对某一个控件进行出发后获得的反馈,比如按钮按下的反馈,以及之后收到得反馈,是进行跳转还是给用户提示,采用的是模态还是非模态的提示。比如点击关注某个人的按钮后会提示关注成功,比如退出某个图文编辑会二次确认是否退出,再比如抖音长按后出现的三个操作反馈,还有支付成功后的动效提示、恶意多次操作后的提示等等
如果有手势交互也需要说明,比如滑动后的内容置顶、拖拽、左右轻扫的tab滑动、重按的3dtouch等等。
手势

4.加载
去考虑使用模态还是非模态,如果是模态加载请尽量使用情感化设计来减少用户焦虑。如果是非模态,根据信息呈现和体验采用分步加载还是预加载还是智能加载。如果是分布加载就选择先加载资源较小的内容,再加载图片,可以先将图片模糊化粗渲染给用户呈现,包括在浏览信息流的时候的分页加载也是可以的。如果更智能化一些也可以预判用户的行为进行加载,例如当用户在某个图文前停留时间达到某个值后就预先给用户加载里面的内容
分布加载

image.png

image.png

加载的全局方式在方案中需要考虑,页面加载,下拉刷新等,都需要统一
5.环境、设备与场景
不同设备、厂商的不同版本都会影响到方案的落地和用户体验。比如一些交互控件在iphonex和大屏幕上使用效果很好,但在小屏幕的时候交互控件就很难受。所以要仔细斟酌用户的使用情况,考虑交互方案是否需要与其他硬件兼容。
关注用户使用场景,白天和晚上是否需要做不同的风格设计,以及是否需要给用户遮挡隐私的功能
6.文案
产品的文案对应的预期和产品自身调性是相关的,就好比我们说产品的DNA/产品的性格。文案的使用直接影响用户对该信息的理解,比如一个对话框的文案:确定退出吗?下面会有两种选择,一个是确定,一个是退出。还有就是不加[吗]。语音表示性格,避免描述出的语言给人的感觉很冰冷,甚至有一些威胁
image.png

所以文案方面首先确定我们的文案是否有温度,和产品的个性是否相匹配。其次文案的表述是否准确和通俗易懂。还有一个注意的一点是文案用语的一致性,在整个产品同样的场景中,需要统一文案用语。
7.校对审查
image.png

8.撰写方式
作为一个设计师,需要对文档有一个美化意识,。
目录:需要进行分类,通常我做的时候会对需求以页面父子集的关系进行创建,父集为核心页面,子集为其下的相关子页面。
说明:在钻屑规则与说明时可以通过标签法进行标签说明的撰写方式,在视觉上保持美观,对比与对齐的运用。除了交互规则以外,高阶的交互设计还需要补充业务规则,比如排序、商品抓取规则、算法、权重、活动规则等等
image.png

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容