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

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

相关推荐

  • 作品集 | 交互设计大师的成长轨迹

    致奋斗的你:又是一年花开时,中公教育优就业送走一批批优质学员的同事,又迎来了一群渴望高薪就业,改变现状的U学员。优就业学员在朝九晚九的学习作息中、六大福利的助学保障中、高配的教学设备下、高标准的食宿环境下学习IT技能......相信中公教育的学员一定可以学有所成,实现高薪就业目标!下面,就随小U妹一起来看看近一期学员“小试牛刀”的作品吧:UI交互设计作品01、UI动效展示(部分)UI动效作品展示·《小球飞》UI动效作品展示·《大憨熊》0...

    2018-04-12
  • 度秘一下不如营造情景,一个产品的服务分发应该怎么玩?

    刚刚落幕的2015百度世界大会,百度推出了秘书化搜索工具“度秘”。这是李彦宏在宣称All in O2O后,做出的最符合百度风格的一件事情,也是百度希望能继续主导服务分发的尝试。

    2017-06-04
  • 用户体验才是核心竞争力 英雄互娱《一起来冒险》趣味至上

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)近几年来,随着手游用户增长速度趋于平稳,手游数量的增多,人口红利的优势已经消失殆尽,如何曝光率成为困扰所有开发商的共同难题。在买量成本水涨船高的情况下,靠忠实玩家形成的用户口碑形成病毒传播则成了很多游戏的“制胜法宝”。经过了几年的发展之后,玩家们越来越懂游戏,千篇一律的复刻已经无法提起人们的兴趣,人们有了自己对于游戏的追求,这也是市场上越来越多细分品类游戏成功的主要原因,比如《纪念碑...

    2018-01-30
  • 如何看待近几年网页设计发展与前途?是否网页设计已死成事实?

     抱着理想走下去,跨出封闭的国门,你会看到前途是无限大的。眼界或者环境被约束了,你是爬不高的,甚至会自暴自弃,或者抱怨现实,或者失去长期坚持的信心。 就算爬高了,也只是指定一群人的尖子。不止是眼界,环境也很重要,想办法突破现实环境的约束,否则,你只能看到,web就像是被APP和 ios,android,创业,微信等等玩意儿淘汰的产物,特别是封闭在自己出生的国家,其实不然,不要相信别人说的,也不要相信你看到的,要换个环境, 体验你所感受到的。

    2017-05-21
  • 设计思考模式:“删除、组织、隐藏、附加”

    Giles Colborne简约四策略是“删除、组织、隐藏、转移”,由于“转移”在实际设计过程中比较少运用到,所以我根据elya的知乎回答把四策略定义为“删除、组织、隐藏、附加”,elya没有解释她的理解,所以我根据自己理解重新定义。“删除每个页面上一半的文字,然后把剩下的文字再去掉一半。”(《Don’t make me think》中Krug可用性第三定律)“点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。”(《Don’t make me think》中Krug可用性第二定律》)

    2017-06-04
  • ​从零开始做交互:第一章 交互设计基础知识

    [button type="primary" text="百度阅读:阅读全书" url="http://yuedu.baidu.com/ebook/6d8b975a49649b6648d7479d" open_new_tab="true"] [button type="primary" text="网易云课堂:阅读全书" url="http://study.…

    2015-08-07
  • Sketch 这几招你肯定不知道

    1.精确调整元素属性在点击元素属性旁的箭头时按住 alt 键可以以10px 倍进行调整,按住 option 键则是0.1px 倍。2.用对齐工具对齐锚点Sketch 中的对齐工具不仅可以对齐群组和图层,还能够对齐锚点,非常方便。3.导航栏文本状态调整与其为导航栏每一个状态都重新做一下,不如将导航栏中的所有元素转为一个符号(symbol),这一个符号中调整样式即可。如果要隐藏文字图层的话只需要在符号的对应文字中输入空格键即可。4.直接拖动...

    2018-04-26
  • APPLE WATCH 中文手册:WatchKit Apps--App概要

    原文:Apple Watch Programming Guide:App Essentials Xcode支持用storyboard来创建Watch app的界面。当你在工程中新建一个Watch app,Xcode提供会提供一个storyboard来实现你的UI。这个Storyboard至少有一个Watch…

    2015-06-15
  • 塾乐教育-进阶提高设计思路的秘籍在这里!

    一直以来,我们始终想让知识变的更实用这5年,课程前后完善了几十个方案这篇文章,请认真阅读也许,会改变你的一生01为什么学设计一定要参加系统课程学习?01- 电商设计行业升级更新太快,如果不即时学习最新的知识。单靠自己平时工作的经验是无法满足中高端市场的需求的!通过学习,让你远远超过你的同行技术水平!02- 虽然互联网上免费知识层出不穷,但绝大部分都是挂羊头卖狗肉性质的不系统招生引流课程。给你一点甜头,再收取你高额培训费用!03- 一个人...

    2018-03-03
  • 浅谈设计中的逻辑

    逻辑(理则学),源自古典希腊语λόγος (logos),最初的意思是“词语”或“言语”,还引申出意思“思维”或“推理”。逻辑经常被认为对论证评价准则的研究,尽管逻辑的精确定义在哲学家之间尚有争议的事情。这个主题还是有所…

    2014-09-19