我们都在交互稿中放了些什么?

作为一名交互设计师,在输出交互稿件之时,要考虑的不仅是如何将需求转为具体页面,而且还要清晰的将其中的思想传达给对方。

文章目录[隐藏]


作为一名交互设计师,在输出交互稿件之时,要考虑的不仅是如何将需求转为具体页面,而且还要清晰的将其中的思想传达给对方。

我们都在交互稿中放了些什么?

“你是什么样的人,就会说什么样的话,做什么样的稿子”,作为一名交互设计师,在输出交互稿件之时,要考虑的不仅是如何将需求转为具体页面,而且还要清晰的将其中的思想传达给对方,这看似是一份交互稿,其实更像是一篇表达你思想的文章。

如何才能让对方清晰的感受到你想表达些什么呢?一般我都是通过从以下几点去向别人说明我想表达的内容:

  1. 我是谁?
  2. 我想干什么?
  3. 我想达到什么目的?
  4. 我会通过什么方式去做达到这个目的?
  5. 为了达到目的,我做了哪些准备

自然而然,我在做设计稿的时候也是通过这种方式去思考和表达的,如下图:

我们都在交互稿中放了些什么?

项目说明

其实项目说明在这里就是一个交代和总结,交代这个项目的基本信息、进行程序以及相关人员,告诉别人这个产品是什么,也就是我刚说的第一个问题“我是谁”。这对后续使用该交互稿的人都存在一定的帮助,可以加速别人对产品的了解,高效上手。

总结指的则是告诉别人,“我想要干什么”,这是自己对需求的看法,同时也是产品与交互讨论达成的共同意识。这样一来也避免从开始就产生理解偏差的这种错误,是为了后续能朝着一个正确方向而做了铺垫。

设计思路

当向别人介绍了我的用意和想法的时候,就是时候该告诉别人,“我想达到什么目的”,“我又会通过什么方式去达到这个目的”?设计思路就是为了解释这个而存在的,我将设计思路分成了两块,分别是产品定位和竞品分析,产品定位告诉着我们你的产品将给我们呈现怎样的感受,轻松?愉悦?还是沉稳,这都是需要思考的,而竞品分析的作用就是为了产品定位去做的铺垫,你只要对比竞争,才能明白怎样算会让人觉得轻松、愉悦或者是沉稳。

有时候往往我们会因为一些原因,没办法做到这一块的呈现,但你绝不能因此而忽略甚至跳过此环节,原因是什么呢?

一个完整的设计思路就像是一个交互的灵魂。如果没有这个思路的说明,上来就给别人看页面,给人的感觉就像是一副毕加索的画,你不懂他好在哪里,你也不能很清晰的明白这幅画的意义所在。因为在一个非专业人士来说,看到的都只能是表象。

就像很多人不能理解为什么微信撤回消息之后,还得给对方一个消息提示,提示“对方撤回了一条消息”。

假设你在设计思路那里就体现了你的想法,其实你之所以这么做的原因,一是技术难以实现撤回无痕,二是想告诉广大群众要对自己说的话负责,不要轻易乱说话(这是我看到的一些观点,不完全正确)。这样一来,拿到这份稿子的人就能理解为什么你当初是这样设计的。

凡存在,即有其道理。除了在这里说明自己的思路,还会在设计思路里面有相应的竞品分析,为的是告诉大家,我的页面布局甚至是机制并不是空穴来风,是有事实依据的,这样的说服力明显会翻倍,才不至于被他惹前者鼻子走。这也是告诉大家,你在做这份设计的时候是花了心思和时间的,我的努力并不但只是页面上的呈现,思维才是我的灵魂。这大概也是为什么很多人拿到交互稿之后,总会说交互设计也不过如此,并没有想象中那么难。

你将项目说明及设计思路都跑完后,建议能跟产品或者是BA再次探讨一下,看这样的方法和思路是否存在问题,在确认没问题的时候,就可以进入到实际的交互设计环节了,这样能减少后续的争执及返工情况。

例如如对方觉得你的布局存在不合理,觉得太繁杂,此时你可以很明确的告诉他:这是因为我们当初讨论的时候,是说了必须要在页面突出这几个功能点。如此一来很容易能避免那些带有感观上的问题,就是莫名觉得不好看的那种提问。

不知道大家有没有发现,有时候跟产品评审交互稿时,总容易听到“我觉得这样不看”、“我觉得这样很奇怪”,但是你进一步问是哪里不好看,哪里奇怪的时候,总是得不到结果。如果为了这些问题而过于纠结,这可以说是个失败的评审会。

交互设计

交互设计这块则是将需求具象到页面中的设计,也是最终的交互输出物,是时候该告诉别人,你为了达到这个目的,都做了些什么实际的准备和工作。

不过说到交互页面,是我的一个弱项,因为我无数次的发现,想把许多细节都在交互稿清晰明了的体现,实在是堪比登天(所以看到那些交互稿画的如同视觉稿一般,连规格大小都按照规范走的大神们,只能说你们是我所努力的对象)。我在画稿的过程中,通常都是逻辑流程图和页面流程图相结合使用,逻辑流程图在前,页面流程图在后;但是在碰到逻辑复杂的大流程时,我一般只会画出主流程线,细节则会在具体页面流程图上体现,如下图:

我们都在交互稿中放了些什么?

我们都在交互稿中放了些什么?

两者结合一起使用的好处在于:在还未看到具体页面时,就可以先对整个交互有个大致的了解,知道下方的页面流程主要分几大块,会怎么跑。就跟看电视剧一样:先看个简介,知道个主线,接着再具体看每一个镜头,都拍了些什么,都说了些什么话。

页面流程图就是在交代细节部分。细节是个很不好把控的东西,它很复杂,但却能看得出一个交互设计师的基本功。其中页面流程图的展现方式其实是先变万化的,我们没法给出个模版或者是套路,但是它有其可遵循的原则,如果能遵循这几点,应该不会差到哪里去。

那么在具体页面流程图中,应该要遵循那几点呢?

  1. 逻辑清晰,状态完整
  2. 有相应的文字注释,遵守就近注释原则
  3. 尽量还原真实场景(文字上)
  4. 少用截图,要表现出层次(尽量用灰白)

以上四点并不是最完整的,只是目前我在做设计过程中的一个小总结,如果有更好的,都可以一起探讨。

在遵守原则的前提下,具体表现形式上则可以依据实际场景来定,但也需要考虑这份交互稿主要是给谁看的。

举个例子,我以前在做某个app的整体框架优化的时候,做了一份对比稿;就是我拿着旧版和新版的对比着摆放在页面中,为的是能让别人清晰的感受到我究竟改了哪些地方,改动前后的效果是什么。这份交互稿给产品评审的时候,获得了很大的认可,但是给部门内的其它交互同仁们看,就被小小的“批判”了一下,原因是他们不懂这其中的业务和流程,用对比稿很容易让他们混乱。而产品组的人因为对这款app非常了解,他们不需要任何讲解,只需要给出对比图,就能达到他们想要的结果。

所以为了避免这种事情,不管是给谁看,都应该在画交互稿之前,交代清楚业务及设计思路,以体现自己的专业度。

但是在实际工作中会发现,我们往往会因为各类原因,无法在限定时间内给出一份如此完整的交互设计稿。这种事情无法避免,你能做到的就是即使不能当下给出完整的稿子,但必须有这个思考过程;你可以事后再继续完善稿子,争取做到完整的跑一遍设计流程,丢三落四切记不可取~

 

本文由 @陈小妹纸 原创发布于人人都是产品经理。未经许可,禁止转载

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24233/

(0)
CatherineCatherine
上一篇 2017-05-07 23:16
下一篇 2017-05-08 01:22

相关推荐

  • iOS和Android规范解析——按钮

    今天介绍的是按钮。按钮是设计的过程中,经常使用的一种控件。我们来看看Google的Material Design和苹果的设计规范都是怎么说的。

    2017-04-28
  • 超出预期的才叫用户体验

    什么是用户体验?我认为,用户体验其实就是一种心理感觉。拿最简单的吃饭这件事来打一个比方。我在饭店,吃饭付账,这个过程叫作体验吗?肯定谈不上。用户体验,肯定是特殊的,肯定是不正常的,肯定是在你的预期之外的。超出预期才形成用户体验如果做跟别人一样的东西,那这些功能并不叫体验。很多人在抄袭别人产品的时候,经常说某某公司做了什么功能,老板说照着做一个,但是你想没想过,如果做得跟别人一样,是没有机会的。当年我们做的是免费杀毒。当时所有其他品牌的杀...

    2018-04-08
  • 阿里巴巴UED的设计团队究竟为双11贡献了什么?

    在11月11日这个日子的前后一段时间,当你发现如下症状之一:当你被机场、地铁、公交站牌和网页里频繁出现的双11提醒,感觉重要的时刻就要来临;当你心跳加速,不管什么都先放到购物车里再说;当你最终等待在11号这天的凌晨用风一样的速度支付成功,并长吁一口气;当你认为一切都那么的简单、自然、纯粹,不过是一场轻松的购物。只能说你Too young,Too simple。你的一举一动已经被一个神秘的组织所引导,它让你下单时够快、够准、够狠,并且你毫...

    2018-02-01
  • 设计干货|聊聊设计师玩转Sketch的那些事儿

    点击蓝字关注GOMEOS用户体验设计1调整组内图层父级变换属性新的调整大小选项可以帮助我们更灵活地调整对象与子层之间的响应:1. 默认属性下的成组放大缩小变化,内部的图标跟随组的缩放比例进行变化.2. 锁定图标的固定宽度&固定高度,成组的缩放比例不会影响到图标的比例与尺寸.3. 当锁定上部及右部间距时,成组缩放比例时,图标距离组内上部及右部的距离保持不变.2嵌套样式这个十分强大的功能使得symbols的复用更加的强大,可以同一内容复用多...

    2018-04-04
  • 2019届及以后实习|互联派、苹果、百度等一大波实习来咯!

    今天的实习信息也是满满的哦~快跟着派派一起来看看吧~互联派、苹果、法国优格、百度、京东等多个岗位等你投递~面向人群2019届及以后,包括2019届、2020届、2021届同学,以下的岗位都可以投递哦~岗位预览◆互联派/用户运营实习生/大连◆互联派/新媒体运营(内容编辑)实习生/大连◆网易有道广告优化实习生◆苹果/数据分析实习生/北京◆法国优格/财务助理实习生/上海◆百度/HR实习生(招聘方向)/北京/可转正◆百度/人力资源实习生/北京◆...

    2018-03-23
  • 交互设计完全学习指南

    交互设计起源于网站和平面设计,但已成长为单独的一个领域。工作内容不仅仅有文本和图片,交互设计现在负责创造屏幕上用户可能会划动、点击、按压或输入的每一个元素,简而言之,就是体验的互动。这篇文章为对交互设计感兴趣的人提供了几个好的点可以开始行动。为了这个目的,我们简要的介绍了交互设计的历史、指导原则、值得注意的贡献者和与这个极具吸引力的学科相关的工具。即使你已经是一个交互设计师,阅读下这篇文章然后在下方评论区分享你的想法吧!目录什么是交互设...

    微信热点 2018-05-06
  • 轮播图这样的交互方式,真的有效吗?

    轮播图(Carousels)这样的交互方式,在web时代似乎已经司空见惯。当一群人在会议室里争夺首屏焦点图的优先级时,使用轮播图,似乎能够不费吹灰之力地解决这场争端,没有人是输家。然而,轮播图这种方式真的有效吗?如何设计才能带给用户更好的体验呢?
    固定静止的banner图比自动切换的banner图能带来更高的有效点击率。如果你还不够了解你的用户,投放100%符合他们预期的内容几乎是不可能的,这时似乎在内容上给他们提供更多选择=更多点击率=更多销售额。这实际是行不通的。
    —— 电商专家 Depesh Mandalia

    2017-05-15
  • 从智能手机说起,看设计风格演变的趋势

    长期以来,大多数人对 UI设计趋势的理解,都是扁平化。可这容易引来两种误解:一群人理解扁平化,是一股潮流,这潮流就像流行时尚一样,会不断更替,原来的拟物风会重出江湖;另一群人,认为扁平化就是平,对设计的理解局限在表达手法上。

    2017-05-17
  • 19.怎样绘制用户体验的地图 | 打造产品思维30讲

    19.怎样绘制用户体验地图来自时间前哨00:0015:06这一节讲用户体验地图和用户故事。用户体验地图就是通过画一张图,用一种讲故事的方式,从一个特定用户的角度出发,记录下他与产品或者服务进行接触、进入、互动的完整过程。开始做产品经理的人容易犯的错误,就是用管理员的视角来规划产品。我经常看到这种全局型的产品设计图,复杂、全面、没重点,这肯定是错的。我一般会告诉这种产品经理,请按照一个用户使用的路径,把这个产品设计图再画一遍。从一开始用户...

    2018-03-20
  • 【腾讯讲堂】交互原型设计公开课推荐

    腾讯讲堂交互原型设计公开课推荐哦,因为小编看到这个课比较适合新手们,关键是免费,哈哈哈~~好魔性的笑声。 废话不多说,点击去学习吧:UI交互原型设计公开课。 课程内容如下:  

    2016-01-20