如何画出高质量的交互稿

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

要想画出高质量的交互稿,一方面,要使用正确、高效的方法对需求进行设计分析,然后依据分析中形成的设计思路来进行设计,关于设计思路的养成,可以参与我的小密圈“交互小殿堂_格兰芬多”进行学习(https://t.xiaomiquan.com/Z7ieYfM),也可以参考文末附上的“目标导向设计法”来进行;另一方面,交互稿中需要具备完备的结构,以提现交互设计师的专业性。下面,我们来看看如何能保证交互稿的完备性,防止信息的遗失。

交互稿的“目标用户”

要讲交互稿,我们先来看看交互设计师的工作流程:交互设计师从产品经理那里接到需求,跟产品讨论之后,首先需要对需求进行设计分析;在分析之后,就可以开始画交互稿了。交互稿完成之后,要把它交接给UI的同学进行界面设计,再然后是给开发的同学进行开发、测试的同学进行测试。从这里可以看出,交互稿文档的主要“目标用户”,是产品、UI、开发和测试。其实仔细想想,交互设计师的职责,就是把一个功能给“说清楚”:产品同学需要知道这个交互稿是否包含了所有的功能点;UI同学需要知道这个功能都包含哪些界面,每个界面的元素都有什么,元素的状态都有什么;开发、测试同学需要知道功能的流程是什么,点击了页面的元素会有怎样的反应。所以,以上这些信息都必须包含在交互稿中。明白交互稿的目标用户对于画出高质量的交互稿十分重要。

交互稿的必备信息

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

- 界面展现完整的流程

- 界面以及界面中的元素展现需求的所有功能点

- 界面中元素的各种状态

- 元素操作后的效果

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

- 如果你使用的是sketch,那么可以把所有的界面都平铺在一张图里,UI、开发的同事通过图中的主要界面就可以get到流程;

- 如果你使用的是axure,建议axure里的一个页面只展现一个界面或分支流程(好处是可以充分展现一个界面或分支流程的各种状态,展现十分清晰),此时,流程是通过axure左边的树状结构来展现的,如下图:

树状结构示例

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

- 按钮、图标一般就包含三个状态:默认态、点击态和点击之后的状态;

- 用户操作后可能发生的异常情况:无响应,无网络,空数据,大量数据,网络慢,是否有缓存,数据过期,状态的改变(如换城市),首次使用(新手引导)

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

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

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

项目概述示例

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

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

设计分析示例

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

这里为大家准备了一份之前在网易新闻团队做的交互稿,这份交互稿展示了作为一名交互设计师,如何用一份清晰、完备的交互稿来展现一个需求,需要的童鞋可以在这个链接下载(淘宝链接,5元购买):交互原型范例——网易新闻客户端交互源文件

这里也附上目标导向设计法的链接,教你如何提升设计思维:

一招教你让交互方案更靠谱——目标导向设计法(上)

一招教你让交互方案更靠谱——目标导向设计法(中)

一招教你让交互方案更靠谱——目标导向设计法(下)

小密圈“交互小殿堂_格兰芬多”

交互小殿堂第二期开张啦!第二期的知识星球,我们有了更响亮的名字“交互小殿堂_格兰芬多”。使用这个名字,是希望大家可以更好的互动,并且就像格兰芬多学院精神那样,大胆探索交互的奥秘,不怕困难,勇往直前。下面我来详细介绍一下知识星球的用法。设置了6个主题,帮助你系统学习交互:

- 场景思维(2周)

- 心理模型(1周)

- 流程设计(5周)

- 正确使用控件(15周)

- 测试方案(3周)

- 用研(3周)

以上这些专题,将每周固定发布在我的小密圈“交互小殿堂_格兰芬多”。

同时,为了让大家更好地掌握每周的专题,安排每周的计划如下:

- 周一在小密圈“交互小殿堂”独家发布一篇主文,介绍本周主题;

- 周二至周五解答圈友们关于本周主题的问题;

- 周六分享优秀交互设计案例,并带领大家解析设计亮点;

- 周日公布文末问题的答案。

6个专题结束后,会为大家提供7个需求,供大家实战,锻炼之前学到的技能。

具体的安排如下:

第一周,给出需求说明和重点提示;

第一周剩下的几天以及第二周,大家根据需求进行交互方案设计;

第三周集中点评大家的方案,给出建议。

欢迎加入,和大家一起系统学习交互。

加入小密圈方法

点击链接加入 http://t.xiaomiquan.com/MBiq7qV

现在圈子刚刚建立,实行短暂优惠:

两人一起报名,享8折优惠;

三人一起报名,享7折优惠;

四人一起报名,享6折优惠;

五人及五人以上一起报名,享5折优惠;

感兴趣的朋友请加QQ:605130227,以优惠价加入。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,029评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,395评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,570评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,535评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,650评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,850评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,006评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,747评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,207评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,342评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,964评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2 349

推荐阅读更多精彩内容