如何编辑交互设计说明书

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

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

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

相关推荐

  • 考研是工作的理想国 | 同济大学设创交互设计考研分享

    打造最优质的设计教育有趣·专业·创新上次发了那篇跨专业考研的分享之后,小编收到了很多小伙伴的后台留言说,能不能多多分享一些考研的心得,为了保持我们有求必应的优良传统,今天的推文也是一篇干货分享帖~此次的分享,来自一位考上同济的在职小姐姐,一起来听听她是怎么平衡工作与考研之间的压力吧~张 炜15年毕业于山东财经大学的数字媒体技术专业,因为爱好也因为工作上遇到的瓶颈,希望能通过考研取得进步,并顺利考入同济设创院的交互设计方向。(即在职又跨专...

    2018-04-25
  • UI设计师:教你以问答形式“来“把玩”APP

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

    2017-05-02
  • 【颜值已爆表】00io.com-盘点2014最精彩的移动APP动画UI

    原文导读: On the third day of The Highlight 2014, we’re bringing you our picks of some of the best UI animations we’ve seen in apps and across the web. Apps have been a UI playground for quite some …

    2015-01-14
  • 回音专栏丨交互设计中的规律

    回音专栏丨来自行业最前线的设计大咖们的独家MAX干货聚合!库伯学习圈,从行动中归纳出经验,把经验升华为规律,再用规律指导行动。……交互设计中的规律昨天讲了库伯学习圈和正确的学习步骤,应该从行动中归纳出经验,把经验升华为规律,再用规律指导行动。今天就来讲讲我在学习交互设计时,是怎样总结出一些有用的规律的,你同样也能用这种方法学习别的知识。行动中归纳经验我们平时都会使用一些电脑软件和手机APP,你有留意到它们的界面和操作吗?比如iPhone...

    2018-01-30
  • 解密 Facebook 广告业务:用户体验与商业价值的双赢靠什么?

    本文经授权转载自极客公园(id:geekpark)文:宋德胜责任编辑:克里斯「把核心的事情做好,用户增长、收入增加会随之而来」,Facebook 近期在产品上的一些调整恰恰体现了这一想法。当地时间 1 月 19 日下午,扎克伯格在个人的 Facebook 账号上宣布,Facebook将对媒体机构进行评级,并在算法上提高优质媒体的内容在信息流中出现的优先级。公告刚刚发布,《纽约时报》等权威媒体机构的股票应声上涨。无独有偶,扎克伯格发出公告...

    2018-01-30
  • UE干货:Material Design App 实战经验分享

    Material Design(以下简称MD)是Google在Android 5.0发布后主推的ue设计规范,旨在解决Android平台设计风格不统一的问题,其核心理念“材质化”是基于拟物与扁平之间的设计,强调真实世界元素的物理规律与空间关系,既避免了拟物设计的低效问题,又解决了太“扁平”带来的交互层级困惑,个人很认同这种设计理念。本次我们在进行一款孵化型产品-明星App的设计时,也采用了这种设计理念,与大家分享一下实战经验(由于是设计讨论,本次关于这款产品的来龙去脉就先不细表咯)。

    2017-06-05
  • 界面框架与内容控件总结

    UI设计中一项很基本的工作就是界面设计,但是,如果一开始就是从界面这个概念去入手的话,往往会觉得无从谈起。所以,我会一个界面拆分成几个模块:框架、导航和内容。然后根据每个模块的特征去选择适合的展示方式,然后再拼凑成一个完整的界面。

    2017-05-29
  • 亲历经验!没有学位和工作经验要怎么找到UX设计的工作?

    Tiger, Run! :我已经做了几个月的交互设计 师了,有不少人非常好奇想知道「没学历、没工作经验的我是如何找到工作的」。随着市场的逐渐饱合,我想分享一下我的故事,来鼓励那些没有任何设计经验、HCI(人机交互)学历的人,得以继续追求自己的梦想。

    2017-07-01
  • 定义方向策略 – 有理有据做设计

    独立项目中,交互设计师的工作可以分成四个核心环节:定义方向策略、确定解决方案、有理有据的进行设计输出、上线效果跟踪。本期要和大家分享的是:方向策略。 方向策略阶段需要明确了解本次设计原因及产品目标,进…

    2016-12-08
  • 交互与时间:大幅菜单的0.5秒等待时间

    在大幅菜单中,鼠标经过区域的响应时间会很大程度的影响用户的使用体验,那么在现在具体的网页设计中体验时间都是怎么设计的呢?文章分享了几个实例,一起来看看。

    2017-04-28