如何编辑交互设计说明书

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

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

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

相关推荐

  • 移动端搜索功能设计:3个阶段解析搜索流程设计要点

    这篇文章笔者想和大家聊一聊有关搜索功能的设计,搜索功能是每个内容型APP的核心,它的易用性决定了用户是否能从APP里快速找到自己想找的内容,那么决定搜索体验好坏的关键点又是什么呢?这里我总结了两点,“操作的易用性”和“结果的准确性”。看似简单的两点却有很多的学问,笔者把搜索的交互流程划分成三个关键阶段,“搜索前、搜索中及搜索后”,接下来将从这三个阶段逐一分析整个搜索流程中的相关设计。

    2017-05-11
  • 工业设计与交互设计的关系

          工业设计是一个很宽泛的概念:它的设计构思上需要考虑到产品整体外型线条、各种细节特征的相关位置、颜色、材质、音效、人因工程等;产品范围上包括杯子、电脑、交通工具等实体产品。认为「工…

    2017-08-01
  • 一种强大的交互模式:应用内的手势

    手势是一种强大的交互模式吗?是的,移动设备已经从一块砖头发展成由手指驱动的复杂计算机了。触摸和手势交互具有很大的潜力,使得移动体验更加的轻松和有趣。

    2017-05-09
  • 设计人员和开发人员:不要再四分五裂

    作者:阿西 前言:随着网络的飞速发展,摩尔定律的快速传播,传统的设计和开发之间的分歧越来越多地凸显。 “学会代码”运动是设计师中获得新能力的渠道,但是在其他IT的部门找到类似跨专业的学习其他业务技能的运动不常…

    2015-05-11
  • 用户体验给一百分的应用啊!

    “没想到的是,装了这个桌面应用,可以让手机好玩那么多。”这篇推送,小7就个人使用感受来跟你们聊聊,这个桌面应用给我带来的非一般感受吧。这款桌面应用给我的印象就是:它在尽可能地给你的生活做减法。一、将联系人直接生成桌面图标,点击就能直接拨号,这比将数字键设置为紧要联系人来得更加方便快捷吧。我这部手机大部分都用于工作联系,联系得最多的是我的拍档,这里我可以直接她的联系方式设置为图标,将图标放置于第一页,非常方便。二、底部导航栏可以上滑,惊喜...

    2018-03-24
  • 「10招」教你玩转电商专题页面设计

    电商中的专题设计都是单页设计的一种应用。

    2017-08-04
  • UED设计流程与原则

    UED设计流程在各个公司之间可能存在不同,国内的设计师在知乎社区上讨论了各自公司(包括腾讯、百度等)的UED设计原则、流程等,其中的经验值得读者借鉴。 来自腾讯的交互设计师eviliu强调设计流程主要考虑两方面的问…

    交互设计 2015-04-20
  • 改版设计的思路(下):解决问题

    做改版设计大体思路很简单,只需要做好两件事:发现问题与解决问题。上一期(点击查看)我们做了改版设计的第一步──发现问题,今天我们来做第二步──解决问题!

    2017-05-03
  • 【译】为什么要在绘制线框图之前画草图

    我们在设计的过程中都会有意无意忽略掉很多步骤,大部分原因是我们都不了解这些步骤。当有人问你,交互设计的价值在哪里?会不会觉得很难回答出来,就算答了也觉得很虚。因为本质上我们都不懂。当你了解了整个流程…

    2015-08-19
  • 抖音|如何提升广告的用户体验

    最近发现越来越多的人开始分析抖音这款产品。小编接触抖音时间也蛮久了,到现在成为年轻人的标配。今天小编就来跟你唠唠抖音那些事儿。douyin抖音·  正·  文·  来·  啦·从产品的冷启动,到现在的野蛮成长期,抖音这款产品变化不得不说变化很大,当时的抖音很纯净,并没有什么广告,当然这也是符合产品生命周期的特性。以前的抖音技术流占据了大部分江山,如今的抖音变成了生活小百科,网红商品的发源地,产品内容标准也在随着产品所处的阶段在变化。如今...

    2018-05-05