超全面!一个完整的交互设计稿有哪些必备元素?

交互稿是交互设计师的主要产出。在实际工作中,交互设计师的主要职责就是根据产品提出的不同需求,用交互稿的形式给出交互方案。而且,交互方案会在产品、UI、开发、测试同学中流转,因此也成为他们评判一个交互设计师能力的重要依据。因此可以这样说,交互方案质量的高低,会成为一个交互设计师能力高低的重要体现之一。

超全面!一个完整的交互设计稿有哪些必备元素?

交互稿是交互设计师的主要产出。在实际工作中,交互设计师的主要职责就是根据产品提出的不同需求,用交互稿的形式给出交互方案。而且,交互方案会在产品、UI、开发、测试同学中流转,因此也成为他们评判一个交互设计师能力的重要依据。因此可以这样说,交互方案质量的高低,会成为一个交互设计师能力高低的重要体现之一。

要想画出高质量的交互稿,一方面,要使用正确、高效的方法对需求进行设计分析,然后依据分析中形成的设计思路来进行设计;另一方面,交互稿中需要具备完备的结构,以体现交互设计师的专业性。下面,我们来看看如何能保证交互稿的完备性,防止信息的遗失。

交互稿的「目标用户」

  • 要讲交互稿,我们先来看看交互设计师的工作流程:
  • 交互设计师从产品经理那里接到需求,跟产品讨论之后,首先需要对需求进行设计分析。
  • 在分析之后,就可以开始画交互稿了。
  • 交互稿完成之后,要把它交接给UI的同学进行界面设计,再然后是给开发的同学进行开发、测试的同学进行测试。

从这里可以看出,交互稿文档的主要「目标用户」是产品、UI、开发和测试。其实仔细想想,交互设计师的职责,就是把一个功能给「说清楚」:

  • 产品同学需要知道这个交互稿是否包含了所有的功能点。
  • UI同学需要知道这个功能都包含哪些界面,每个界面的元素都有什么,元素的状态都有什么。
  • 开发、测试同学需要知道功能的流程是什么,点击了页面的元素会有怎样的反应。

所以,以上这些信息都必须包含在交互稿中。明白交互稿的目标用户对于画出高质量的交互稿十分重要。

交互稿的必备信息

上面我们提到交互设计师产出的交互稿是给谁看的。我们来总结一下,上面提到的交互稿中必须包含的信息有:

  • 界面展现完整的流程。
  • 界面以及界面中的元素展现需求的所有功能点。
  • 界面中元素的各种状态。
  • 元素操作后的效果。

对于第1点展现完整的流程,如果这个功能比较复杂,流程比较长或者流程中逻辑比较多,则可以附上流程图,方便产品、开发、测试同学理解;而对于一般相对简单的功能,依据你使用的交互稿的作图工具,分以下两种情况:

如果你使用的是Sketch,那么可以把所有的界面都平铺在一张图里,UI、开发的同事通过图中的主要界面就可以get到流程;如果你使用的是Axure,建议Axure里的一个页面只展现一个界面或分支流程(好处是可以充分展现一个界面或分支流程的各种状态,展现十分清晰),此时,流程是通过Axure左边的树状结构来展现的,如下图:

超全面!一个完整的交互设计稿有哪些必备元素?

△ 树状结构示例

对于第2、3、4点,我们可以通过遍历的方法来走查流程和界面。遍历的方法,就是从头到尾看一遍自己的交互稿,注意其中是否包含了需求中所有的功能点;每个界面中的每个元素,如果用户点击了,它会有什么反应(颜色是否改变?是否需要动效?等等)?点击之后去到哪个页面?如果没有网络该展现什么?这里为大家总结一下:

  • 按钮、图标一般就包含三个状态:默认态、点击态和点击之后的状态。
  • 用户操作后可能发生的异常情况:无响应、无网络、空数据、大量数据、网络慢、是否有缓存、数据过期、状态的改变(如换城市)、首次使用(新手引导)。

这里给大家举一个之前做的案例(如下图)。在这个例子中,左边的树状结构反映了主要的流程。由于该需求流程中设计的逻辑较多,因此在最后附上了「流程图」这个模块,方便开发和测试的同学。在页面中,只展现了「我的宜定盈详情」这个页面的各种状态和操作后的结果。

超全面!一个完整的交互设计稿有哪些必备元素?

交互稿的附属信息——项目概述

在交互稿的第一页,可以加上「项目概述」这个主题,主要展示该需求的基本信息和迭代说明。增加项目概述这一页,一方面可以记录交互的修改,在发生问题的时候方便追溯;另一方面让交互稿显得更专业,是提升交互稿气场的好方法。

超全面!一个完整的交互设计稿有哪些必备元素?

△ 项目概述示例

交互稿的附属信息——设计分析

有一些需求,如果需求本身比较庞大,涉及到的人员比较复杂,可以在交互稿中加入设计分析的部分。这可以帮助大家更好地理解你的交互稿是如何被设计出来的。由于是放在设计稿里,而不是一个专门的需要展示设计分析的PPT,因此设计分析里只需要放入最核心的信息就好,包括:场景分析、产品目标、用户目标,比如下面这个例子:

超全面!一个完整的交互设计稿有哪些必备元素?

△ 设计分析示例

以上为大家总结了一份完备的交互稿应该包含的要素,希望对大家有帮助。

这里也附上目标导向设计法的链接,教你如何提升设计思维:《一招教你让交互方案更靠谱!超好用的目标导向设计法》

作者最近开了一个小密圈,与普通的小密圈不同,博主的小密圈不仅有问答功能,还有6个专题分享,帮助你系统学习交互:

都是他从近5年工作经验中总结的比较实用的知识点,适合入门一两年的交互设计师进阶学习。除此以外,他会为大家提供7个需求,供大家实战,锻炼之前学到的知识。实战后的点评和建议都是他亲自上手的,这么贴心的指导,感兴趣的抓紧咯 :)

右戳加入小密圈:https://t.xiaomiquan.com

欢迎关注作者微信公众号:「新设计青年」

超全面!一个完整的交互设计稿有哪些必备元素?

「值得新手学习的交互设计方式」

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34363/

(0)
震天下震天下
上一篇 2017-10-16
下一篇 2017-10-18

相关推荐

  • 输出专业交互设计文档清单

    原文转自:http://www.uisdc.com/export-professional-interactive-documents在项目设计中,交互设计师与上游的产品经理,下游的视觉设计师,开发工程师和测试等岗位的工作密不可分。不论是承上启下的工作沟通, 还是方案评审的设计讲解,专业的交互设计师应该具备优秀的表达能力,不仅是语言方面的表达,交互文档的表达也尤其重要。交互文档是对接上下游岗位,利于协同团队工作的重要输出件。(本文会以 ...

    2018-03-25
  • 听说微软这次硬了?苹果赶紧发布了个触摸条压压惊!

    #交互学堂# 前天晚上,#微软# 赶在 #苹果新品发布# 会的前头抢先发布了一波硬件产品,出人意料地推出了Surface Studio 一体机以及交互配件 Surface Dial。一时间设计夹小编朋友圈里的设计师们都沸腾了,惊呼 “巨硬…

    2016-10-28
  • 用户体验设计师、UI 设计师和交互设计师有什么区别?

    首先,不同的公司对不同职位都有自己的理解和定位,名称相似的职位在不同的公司文化中通常职责不尽相同。比如 Google 会要求用户体验设计师有 “专家级的 XHTML,HTML,CSS 和 Javascript 能力” ,而这样的要求在其他公司并不常见。不过通常来说,这三个职位还是各自有一些大概的职责范围的。用户体验设计师用户使用你产品的每一秒钟,都是这 “体验” 的一部分。先不管 “用户体验” 能否被 “设计”,既然你尝试去改变或者影响...

    2018-03-11
  • 交互设计真的很难学吗?

    头几年的时候提到交互设计,大家的脑海里面都会莫名的飘过一张流程图。现在重新提起来交互设计,甲方+老大都会先问你这个产品的场景是什么?为什么大家都开始注重场景,场景究竟是个什么东东?今天给你介绍点干货。…

    2017-08-04
  • Axure RP 8软件和安装教程

    Axure RP 8(64位)下载链接:百度网盘:https://pan.baidu.com/s/1hsfD3Kg提取密码:ivma软件简介:Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。(仅供学习交流使用)安装前须知:1.解压和安装前请关闭...

    2018-04-17
  • 交互设计师的工作流程及不同阶段的职责

    本篇将介绍我目前参与交互设计的工作流程以及各个阶段的工作职责。

    2016-01-31
  • APP小红点如何使用与实现逻辑

    作者:APP君   我们现在已经习惯小红点的不断的骚扰了,每天都不知道要点掉多少个手机APP上的小红点。有些童鞋点击 APP小红点 都已经成瘾。只要看到有小红点就会自然而然去触摸一下。 所以,APP的交互设计已经影响…

    交互专题 2017-08-07
  • UI动画VS微交互貌似都是一个东西?

    出处:https://medium.com/@tubikstudio/ui-animation-microinteraction-for-macroresult-668cd9e71101#.lhcggh7he 原标题:UI Animation. Microinteraction for Macroresult 原作者:Tubik Studio   原谅阿西…

    2016-04-07
  • 【交互设计】怎么让引导页不再是无用小透明?

    前言在接触一款新应用的时候用户常常会看到一些引导页,但在操作的时候直接当透明的就快速滑过或跳过了,这种时候,大家一定会有“这些引导好无用啊”的无力感,目前甚至有着“如果一个产品需要引导,说明该产品缺乏友…

    2017-08-04
  • 总结几个产品交互设计原则

    什么是交互设计?这是一个很泛的概念,很多人讲交互都会试图去区分交互设计、UI设计和体验设计等。但是我个人觉得,这些东西根本没有界限。UI层面也涉及交互、交互也是一种体验设计,没必要把他们彻底分裂出来。每…

    2017-08-02