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

交互稿是交互设计师的主要产出。在实际工作中,交互设计师的主要职责就是根据产品提出的不同需求,用交互稿的形式给出交互方案。而且,交互方案会在产品、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

相关推荐

  • 【用户体验】“互联网+”如何提升用户体验?

    “你兜售的虽然是产品,但真正能使你获益的却是服务”。为何这样讲?众所周知,顾客就是上帝。在今天,用户体验越来越多的被提及,产品得到了更多的外延及扩展,已经不再局限于产品本身的价值,而有了更多的后续价值和服务的依托。注重交付的每个环节的规范与体验,这让卖点从产品本身逐渐渗透到整个产品的生命周期中,用户对品牌的认识也开始从产品蔓延到店面、店员、交易流程是否顺畅、售后服务是否及时到位等诸多层面。换句话说,产品是基础,而优质的服务可以帮助企业赢...

    2018-03-03
  • 经验分享|利用品牌基因法进行图标设计

    在看这篇文章之前你需要清楚,我所讲的东西并不是什么权威,只是在工作中总结出来的一些的小经验而已,制作图标的方法也有很多种,这里只是给大家一个思路上的启发,希望能对你有所帮助吧!

    2017-05-06
  • D1-交互设计入门

    一阶段:1.交互设计基本原则2.平台特性及其设计规范3.做交互设计的方法,工具4.掌握交互设计的基本流程二阶段:1.特定控件设计,2.特定界面设计3.独立常用功能设计三阶段:1.多项功能设计2.方法研究,总结3.竞品和优秀产品分析4.最新的系统和产品分析5.了解前段技术四阶段:1.产品架构2.设计趋势3.产品发展趋势Windows 用户体验交互设计规范http://www.uxguide.net/wiki/windows:HomeiPh...

    微信热点 2018-04-07
  • 外媒盘点:2014 年最佳 UI&UX 设计

    外媒 fastcodesign 就盘点了 2014 年最佳 UI&UX 设计,这其中有几款设计让人眼界大开,我们一起来看看吧。 GravitySketch 3D 虚拟画板 GravitySketch 让设计师们随时随地"凭空工作"成为了可能。使用者需要戴上 …

    2015-02-04
  • 交互设计中的“无意识错误”:如何帮助用户防错?

    在提高可用性的建议中,如何优雅、清楚的告知用户哪里出错了是非常重要的。当然,如果能够一开始就避免他们犯错是最好的。在讨论用户错误时,一个重要问题是在什么情况下指出用户的错误。「用户错误」这个词似乎暗示用户做错了某些事情,但不仅如此,设计师也犯下了错误,因为他们让用户轻易的做出了错的行为。所以,解决用户错误的方法不是指责用户,让用户再认真一些,或者给他们更多的指导练习,而应该是重新设计软件,让犯错变得困难。两类用户错误在讨论如何避免犯错之...

    2018-03-02
  • 看Google设计师设计的细腻动效

    好的动效设计,从来不以炫酷作为目的。

    2017-05-15
  • 交互实战|Design sprint methods 在To B产品中的应用

    在湾区很火的设计冲刺,真的能有效快速解决项目中棘手问题吗?我们在实际工作中开始了首次尝试与应用。让我们一起来体验一下Design sprint methods的设计过程吧~

    2017-04-30
  • 如何将“用户体验”做到极致?我有绝招!

    如何将“用户体验”做到极致?我有绝招!无崖子现在大多数掌柜的没有重视用户体验或者说不知道如何做用户体验。三只松鼠相信很多掌柜的都很熟悉,坚果类目的老大,三只松鼠是如何成功的呢?三只松鼠的成功不是偶然的而是必然的,三种松鼠将“用户体验”做到了极致,三只松鼠的创始人:章燎原是传统行业出身,在做三只松鼠之前在传统行业就对坚果非常熟悉,章燎原对坚果行业的把控至今无人能敌,三只松鼠的成功一部分是对供应链和仓储的把控,还有就是注重“用户体验”的极致...

    2018-03-16
  • 零基础入门交互设计为什么会失败?

    所有群里最常见的新人问题就是——零基础怎么学习交互设计?其实,很多时候零基础不可怕,但最怕的就是零基础带来的那种浮躁,比如往往他们都追求速成。每个职业人都有零基础的时候(废话),而在社会上获得工作机会…

    2015-12-02
  • 人鸡交互Vs人机交互

    很多人听说我是学人机交互的,都会问我一个问题,什么是人机交互? 答:human-hen(人-鸡),当然这是一些朋友的戏谑之作。但是现在看来,又似乎有些道理,至少有一半是对的,人(human)。至于另一半么,他们想的…

    交互设计 2017-03-08