如何编辑交互设计说明书

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

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

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

相关推荐

  • 百度地图:智能化设计探索,让出行更简单

    出行一直是地图用户的核心诉求。随着移动互联科技的飞速发展,越来越多的出行服务参与到地图用户的生活中,同时也使得用户的出行场景变得复杂多变。但传统地图的出行功能无论从产品还是从用户体验上,大多只满足了用户规划路线、导航驾车等基础需求。所以,探索用户的潜在出行需求,设计贴心的出行服务,让用户的出行更有效率并提升出行体验,是地图设计团队的核心目标。

    2017-05-12
  • 门诊的用户体验,决定患者的选择

    口腔之声每晚8:00与您一起看口腔汇聚国内外口腔专家3000个视频随便您看世界华人牙医聚集地促进行业交流的价值门诊的用户体验,决定患者的选择现今的口腔医疗市场竞争,呈现出来的形态,公立医院的患者,到处挤满了人,号挂的满满的,而民营口腔医疗机构,又是大肆的营销活动,这家公益宣传,那家优惠活动,这家明星站台,那家老外看诊!的的确确呈现出同一个国家,面对两个市场的景象,当然每一个口腔医疗机构,或者说每一个家口腔,都有服务不同的患者层级。最近经...

    2018-05-06
  • Sketch 49 新增交互原型能力

    看到更新弹窗蛮讶异的,完全没有见到相关消息或Beta版本,官方博客与Medium也毫无动静,太过突然,总之就是这样:“Prototyping: You can now connect Artboards with Links and Hotspot layers to create prototypes of your designs that can be viewed in Sketch Preview,Sketch Cloud,a...

    2018-03-02
  • 破茧成蝶读书笔记

    01什么是用户体验  用户体验:使用一个产品时的主观感受 用户体验设计:提升用户体验而做的设计 书中讲到首先我们要明确什么是设计?设计不等于艺术。我了解到的是,设计是解决问题的,艺术是提出问题的。 书中两口…

  • UED从繁到简三个阶段

    UE设计一般需要经过三个阶段。一个交互设计师,从学徒到出师,不说100%,那也有99%的人走过这是哪个阶段。如果没有,说明他已经转行做自己的安利去了,专门在网上发些如何教人做交互啊。什么是交互设计师啊等等忽悠别人的文章。(就是再说我)我们来详细看一下这三个阶段:第一阶段,多数都是刚入职人生第一份工作或者是刚踏上这段交互征程的新手。对交互设计其实是一知半解的。这一阶段谈论的什么用户体验啊,流程体验啊,几乎可以视为是夸口奇谈。我认为在这个阶...

    2018-03-27
  • 智能语音交互设计 1 — 总览篇

    大家好,从本周开始会进行Conversational AI Design Newsletter编写。希望把一些现有的语音交互的研究成果和一些关于Conversational AI的方法收集起来分享给大家。source: Pinterest第一篇 — 总览篇语音助手(Voice Assistant)主要由几种重要的技术组成:自动语音识别系统(ASR),自然语言处理(NLU),和机器学习(Machine Learning)。ASR类似于我们...

    2018-02-05
  • 从我个人经历来说,交互新人需要注意这3点

    当你做完交互稿的时候你可以不停的讲述给自己或者另外一个人听;在这个反复的过程中你就会发现你的交互稿中的漏洞。

    2017-05-25
  • 【面试】不吹牛13,我是如何7天拿到百度&网易&创新工厂等6个实习offer的...

      “不卑不吭,保持谦逊”,这是管静总结的与HR和面试官打交道的八字法典。 又是一个40度的夏天,没有喧闹,只有窗外吱吱的蝉鸣。刚过完大三的同学,都开始了寻找实习的路程,有人欢喜有人愁。就读于贵州一所普…

    交互设计 2015-08-17
  • Hybrid APP 会吃掉微信等应用?

    先看一则新闻:Facebook今天推出了依托在Messenger上的虚拟助手M。这款虚拟助手借助AI+人工的方式为用户提供服务,M背后的人工运营者被称为M trainers,是Facebook公司里的合同工,而非正式员工。除了提供服务,他…

    2015-08-28
  • 3月19日部分上海实习信息汇总

    2018“猎萝卜”校园宣讲会 松江大学城专场人立方智能科技有限公司时间:3月22日 18:00-20:00地点:上海对外经贸大学 B303上海人立方智能科技有限公司,专注于人工智能与人才招聘,中国人力资源行业领军企业50强。猎萝卜(www.lieluobo.com)是公司创立于2017年的智能猎头招聘平台,服务于互联网、金融这两大领域国际知名客户及500强企业。平台上汇聚上千家优质的猎头公司,通过人工智能算法的引导,精准匹配中高端人才需...

    2018-03-19