如何编辑交互设计说明书

当你搜索并查阅了很多网上资料后,仍可能不会编辑交互设计说明书。那么究竟该怎么编辑交互设计说明书呢?在编辑的过程中又有哪些要点和注意事项呢?

当你搜索并查阅了很多网上资料后,仍可能不会编辑交互设计说明书。那么究竟该怎么编辑交互设计说明书呢?在编辑的过程中又有哪些要点和注意事项呢?

1470361880-1502-jiaohushejishuofamf

目前很多公司会采用敏捷式开发流程,这时很多产品经理或交互设计师会直接在 Axure 等原型设计工具中制作 PRD 而非原型,并且还会出现 多人编辑一份文档的情况。

下面简单介绍交互设计说明书的基本写法,也算是抛砖引玉吧,最后会给出完整的项目交互设计文档供大家学习参考。

这里需要注意的是,有时使用原型工具导出的交互设计说明书会很混乱,没有可读性,比如,完全是机器按照你的原型站点导航树结构导出的不符合业务逻辑的说明书,但当开发人员、UI 设计师或 PM 拿到这样一份“交互设计说明书”时,真的看不懂。所以需要设计师根据实际的业务需求与业务对象有针对性地编辑一份交互设计说明书。

交互设计说明书的阅读对象

交互设计文档都是给谁看的?这个文档会根据阅读的对象做什么优化吗?下面利用场景化模拟解释交互设计说明文档的使用场景。

交互设计说明书由交互设计师完成编辑、修订、发布。

  • 交互设计师提交交互设计说明书给产品经理。
  • 交互设计师提交交互设计说明书给 UI 设计师。
  • 交互设计师提交交互设计说明书给研发人员。
  • 交互设计师提交交互设计说明书给测试人员。

在交互设计过程中,上述四个角色会不断有所交集。所以,一旦编辑文档,就需要对这几个角色有针对性地解释和阅读优化。

1.产品经理场景

交互设计说明书的阅读人员包括:产品人员、设计人员、研发人员、测试人员等,他们就是交互设计文档的使用主角,产品经理在使用交互设计说明书的时候需要确认的方向是 :交互逻辑、功能架构、交互事件、界面页面流转与内容布局等。这里的产品经理代表产品经理及以上管理层。

关键点:为项目梳理清楚逻辑关系,文档按照逻辑关系和功能架构分支等设置大纲讲清楚项目、功能、组件、页面流转关系。

2.UI设计师场景

UI 设计师在使用交互设计说明书的时候,更多的是看你的说明文档的具体页面数量,因为这决定 UI 设计师出多少效果图。另外,要看你的原型设计给 UI 设计师留了多少发挥空间,不能一开始就制作高保真原型。

关键点:例如,一个页面有三个状态,制作原型动态面板时加原型事件即可,但是设计的文档需要将三个状态都截图标注好,页面流转标记是告诉 UI 设计师这里有三个页面,而不是告诉 UI 设计师有三个状态。

3.研发工程师场景

研发人员拿到交互设计说明书的时候就非常关心细节实现,关心有多 少个功能、多少个功能新特性、多少个页面元素组件、多少个交互动效等, 但他不关心方案里一个输入框里是用彩色还是黑白,因为他是具体功能的实现者。

提供给研发人员的文档需要注意以下关键点 :明确表示出关于功能设计、页面逻辑、组件交互等信息的细节,例如:一个页面刷新,要分为触发刷新事件、刷新加载中、刷新成功提示、刷新失败提示。其中失败提示又要分多种情况:网络不佳、程序异常等。如果你没有提出明确需求,责任就会在需求方,而不是程序部门。

4.测试与需求场景

测试是依靠需求说明书和交互设计说明书,进行测试用例与测试脚本的编写,在交互设计说明文档里需要说明白每一个功能的交互动作与事件,测试是抓细节的,所以需要配一些说明性文字解释交互设计的思路与实现路径,这样测试人员就可根据设计思路设计出测试用例。当然,测试用例分多种类型,这里指的是功能测试与逻辑测试,一些性能测试等需要依靠程序使用的软件、数据库等技术性的接口文档来定。

关键点:功能点、业务逻辑、界面元素、交互过程分解步骤。上面解释了各角色使用交互设计说明文档的场景及他们期待的真实需求,只有清楚地了解这些内容,才能有针对性地制作交互设计说明书。

交互设计说明书包含的内容

众所周知,一份交互设计说明书最重要的当然是内容,下面介绍如何按照实际流程制作文档。

1. 写什么

很多新手在新建一份空白文档后不知道具体写什么内容,如前面所说,对一份交互设计说明书,你只需要把原型截图或原型直接画成一个文档即可。其实交互文档就是页面文档,所有的软件页面、状态都分离出页面进行展现,然后加入页面流程和交互动作说明文字、箭头指示线条等。

关键点:逻辑结构、页面跳转、交互状态的文字说明,统一交互体验动作,确保页面组件的一致性。

示例如图1所示,这是一个包含交互界面动作、逻辑步骤、页面流转、文案和注释的实例。

1470361887-1289-1-12

图1包括交互界面动作、逻辑步骤、页面流转、文案与注释的实例

图中的这个交互动作是将所有出现的界面静态化地写在文档里进 行展示。如果你想直接展示动态交互,可以使用原型设计工具设计好交互 原型之后再截图编辑文档,在交付文档时结合原型演示,这样会更有效果。

2.怎么写

一般的交互设计说明书的文档结构如下 :

  • 文档封皮与版本信息。
  • 目录页。
  • Log(日志)修订记录页。
  • 交互行为逻辑图 + 文字说明。
  • 页面展开图 + 逻辑 + 文字。
  • 详细介绍其他单独的交互动作。

(1)封皮和版本

图2所示是交互设计说明书封皮和版本信息的示例。版本信息一般 包括版本、日期、参与人、变更内容简要、备注。

1470361894-3349-2-8

图2交互设计说明书版本信息格式

(2)目录

这个无须多说,平时我们看的书基本上都有目录,不过要记住,目录 要合理分级,以分清主次。

(3)Log 更新记录页

这个页面用来描述某次更新的信息简介与页码导航等。图3为交互 设计说明文档的更新记录页的示例。

1470361900-7057-3-5

图3交互设计说明书的更新日志

(4)交互行为逻辑图 + 文字说明

图4所示是某个应用商店的更新应用交互逻辑 + 文字说明图例。

1470361904-1609-5-7

图4交互设计说明书中的交互逻辑页面流程

从图中可以看出,这个说明文档是把应用更新功能作为一页,具 体包括其架构、交互、流程、逻辑、交互事件及文字解释说明。

这个过程是针对产品经理和程序人员而言的,因为他们需要看明白交 互流程逻辑。

(5)页面展开图 + 逻辑 + 文字

图5是页面、元件、文案、逻辑、页面状态的展示。这部分是针对 视觉设计人员而言的,需要将所有的页面都展开解释一遍,公用部分可以单独标记。

1470361908-7684-6-4

图5交互设计说明书的页面元素

(6)详细解释其他单独的交互动作

此部分是对不在流程中单独或独立的交互动作进行补充说明。

 

本文节选自《交互设计那些事儿》一书,完整案例在本书的第8章节,[button title="了解书籍" url="https://union-click.jd.com/jdc?d=bzItiq" color="default" size="btn-xs"/]

由阿西UED 编著,电子工业出版社出版

未经出版社书面授权,禁止转载,违者追究法律责任。

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/16797/

(0)
iouedioued
上一篇 2016-08-04 15:46
下一篇 2016-08-10 12:07

相关推荐

  • 雪糕游戏(南京上海)聘:运营/商务/主策/主美/原画/程序等

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)公司简介:南京雪糕网络科技有限公司(简称雪糕游戏)是一家集研发、运营、发行为一体的新锐游戏公司。自2015年成立至今,自主研发了《全民神仙》、《行侠仗义五千年》、《童话大乱斗》、《西游记口袋版》等产品;IOS联运了涵盖三国、武侠、魔幻、神话等题材产品,游戏多次在App Store上榜,凭借精准的IOS流量整合能力、优秀的产品运营能力,雪糕游戏IOS联运产品月收入稳定在千万级水平,也为...

    2018-04-08
  • 交互设计七大定律之Occam's Razor 奥卡姆剃刀原理(简单有效原理)

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    交互设计 2015-08-27
  • UI设计师:教你以问答形式“来“把玩”APP

    作为APP狂热分子,定期去App Store或者其他渠道找新鲜的产品来玩儿,已经持续了很多年。但是光浮于表面的玩儿,还不够。因为只有了解产品背后的逻辑才能更全面的解读为何会那么设计。

    2017-05-02
  • 讯飞输入法 Smartisan 定制版功能交互一览

    #交互学堂# #讯飞输入法# #smartisanOS# 基于 Smartisan OS 的设计语言深度定制了讯飞输入法,界面简洁优雅,还能保留讯飞输入法用户的使用习惯, 识别准确率高达 97% 的讯飞语音,让输入更高效 点击下载   讯飞输入…

    2016-10-31
  • 微信的扫码和摇一摇,给老美好好上了一堂创新课 【UXRen译#150】

    作者: YUNNUO CHENG & RALUCA BUDIU @NNGroup |  翻译:张维钢、朱玲 ,校审:Junliang   摘要:与美国相比,在中国扫描二维码和摇一摇成为了有效沟通线上线下的交流方式,并且应用广泛。   图为中国“绝味鸭脖…

    交互专题 2017-08-07
  • 一文看清过去一年电商用户体验怎么样?

    导读:过去1年电商在对待消费者方面,有没有尽力?它们都干了哪些事?日前,电子商务研究中心发布的《2017年度中国电子商务用户体验与投诉监测报告》显示,2017年通过在线递交、电话、邮件、微信、微博等多种投诉渠道受理的投诉案件数同比增长48.02%,下半年受到电商各大节日影响增速加快。据电子商务消费纠纷调解平台监测数据显示,2017年零售电商类投诉占全部投诉60.59%,比例最高;生活服务电商紧随其后,占据13.47%;跨境电商投诉占比为...

    2018-03-28
  • 【设计竞赛】第二届“衲田杯”等你来挑战!

    📌编辑 | Cassi.W编者按:第二届“衲田杯”可持续设计国际竞赛报名正式启动!中国城市规划设计研究院院长、全国工程勘察设计大师杨保军担任本次竞赛评委会主席。别犹豫啦,招呼你和你的小伙伴,快来报名参赛吧!不知大家是否记得宿迁那片迷人的多彩衲田花海?又是否还记得2017年这些在衲田花海绽放的一大波创意?▼▼▼点击图片了解更多 ↑↑↑没错!就是2017年国际设计竞赛的一匹黑马:“衲田杯”可持续设计国际竞赛第一届“衲田杯”可持续设计国际竞赛...

    2018-03-22
  • 从一个活动来总结一下交互设计的心路历程

    作者:飞起就是一jio链接:http://www.jianshu.com/p/915c4ce32a01最近一直在做电商平台的活动, 大家都知道,电商app会经常做各式各样的活动,面对不同的活动类型,会有不同的需求和用户目标,怎样能够快速理解需…

    2017-08-03
  • 平庸的产品和伟大的产品中间只隔了一个:微交互

    微交互,听起来很生疏的这个词,实际上却出现在我们每天的日常生活中,甚至可能早上起床后我们做的第一件事就是一次微交互操作的典型案例。

    2017-05-20
  • 资深交互设计师经常强调的「场景」到底是什么?

    编者按:资深设计师经常强调的「场景」是什么?今天@拉瓦像阿拉蕾 通过5个搜索的案例,带你认识场景的魅力。

    2017-08-29