L192-产品经理的交互设计基础课(PPT)

L192-产品经理的交互设计基础课(PPT)

这是我在腾讯课堂上给产品经理讲的交互设计入门课,最开始是应邀给部门内部的产品经理做一个交互设计的简单培训,但由于责任心爆炸,写着写着就写成了一门课程……

这门课程主要内容解决三件事情:

  1. 交互设计是什么?解释一些基本概念;

  2. 介绍设计交互原型的常用工具,方便大家选择和学习;

  3. 介绍验证设计的可用性原则,可以更好地和设计同学交(Si)流(Bi)。

大家在阅读和转发前请再次注意了,超超超长文干货预警!!!

下面是内容目录,不支持跳转:

《产品经理的交互设计基础课》一、用户体验和交互二、原型设计三、原型工具四、案例互动五、人人都懂设计六、产品可用性检验附录:案例练习参考答案

《产品经理的交互设计基础课》

L192-产品经理的交互设计基础课(PPT)

一、用户体验和交互

L192-产品经理的交互设计基础课(PPT)

L192-产品经理的交互设计基础课(PPT)

只要讲到用户体验,都离不开这五层结构。最底层的战略层和范围层是产品经理主要思考的范围,他会去定义产品的目标、功能以及具体的内容,然后交由交互设计师去做界面的框架和交互流程,最后由视觉设计师去做表层的华丽展示效果。

L192-产品经理的交互设计基础课(PPT)

其实在十几二十年前,国内是基本没有交互设计这个职位的,一般做产品的团队只需要上面三个职位就够了。产品需求一般是由产品经理甚至是老板直接定义后,交给视觉设计师进行设计,然后直接开始开发。L192-产品经理的交互设计基础课(PPT)

但是这样会有一个很严重的问题,就是一旦到了开发阶段,发现产品表现不对、需求不合理或者是功能无法实现,就会不断地重新修改产品需求,这样会让设计和开发疲于奔命,做的速度有时还赶不上改的速度,恨不得罢工算了。

L192-产品经理的交互设计基础课(PPT)

在这种情况下,交互设计这个职位应运而生了,它起到的作用是连接产品需求方和视觉设计方,整合成常见的“产品设计铁三角”——产品、交互、视觉。L192-产品经理的交互设计基础课(PPT)

这之后,所有的需求都会经由这个铁三角进行讨论和确定,然后由交互设计师画出交互原型稿,等到修改和完善之后,再交由开发同学进行实现,这样就能最大程度地避免返工现象的发生。

L192-产品经理的交互设计基础课(PPT)

以上六个步骤是我们做用户体验设计(UCD)的基本步骤,由始至终都有交互设计师的深度参与。

L192-产品经理的交互设计基础课(PPT)

交互设计师需要关注的有上面三点,第一点决定产品的形式和交互行为,第二点决定产品的易用性,第三点决定产品的情感化升维。

L192-产品经理的交互设计基础课(PPT)

交互设计的核心我认为就是“交互”和“设计”(认真脸),前者更多的是要考虑产品和用户之间的关系,而后者更考验的是设计能力和素养。L192-产品经理的交互设计基础课(PPT)

换而言之,“交互”对应的是对产品需求和用户目的的思考,核心是消除用户和产品之间的沟通障碍;“设计”对应的是搭建信息架构和界面流程,核心是通过原型来快速验证和修正产品方向。

L192-产品经理的交互设计基础课(PPT)

作为交互设计师,需要具备的素质有很多,你认为最核心的是什么?L192-产品经理的交互设计基础课(PPT)

我认为最核心素质就是——“同理心”,作为一个和用户体验直接相关的职位,他必须有足够的体验敏感度,才能够把握好用户的心理,才能够从用户的角度去做深度的设计,做出用户容易懂、愿意用、喜欢用的产品。

二、原型设计

L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)

我们为什么需要原型这种东西,它的作用是什么?

L192-产品经理的交互设计基础课(PPT)

原型的作用有三点:

  1. 验证设计方案是否合理;

  2. 引导需求方提出更为具体的需求;

  3. 灵活地应对错误和需求变更。

L192-产品经理的交互设计基础课(PPT)

所以原型的本质就是——为试用而生的试用品。它做出来就是用来改的!所以我们也可以说交互设计师其实很苦逼,就是个“画草稿”的。

L192-产品经理的交互设计基础课(PPT)

原型可以分为两类,一类是黑白的低保真原型,另一类是可交互、高拟真度的高保真原型。L192-产品经理的交互设计基础课(PPT)

另一种分类方式则会把原型分为水平原型和垂直原型。前者是把所涉及的主要页面都画出来,比如网站导航上的所有主页面;而后者则是把像是微信发送语音消息这样的主要流程画出来。

L192-产品经理的交互设计基础课(PPT)

但其实前面两种单独使用的情况很少,我们更常用的是把它们结合起来,既画出主要界面,又把核心流程细化完善(由于时间关系,我们并不总是一次性把所有界面画完)。

L192-产品经理的交互设计基础课(PPT)

原型设计的主要流程如上,请注意,为什么我们前面要强调“口头讨论出来的原型”和“头脑中的概念原型”呢?因为这方面要先和产品经理或需求方达成共识,设计师再去执行,才不会白白浪费方案设计的时间。

L192-产品经理的交互设计基础课(PPT)

但是一般不会那么顺利,有可能我们在提交设计方案之后,才会在设计评审、开发评审时发现存在问题,这时候最严重还可能会打回到需求阶段重新进行讨论和分析,然后再次进行设计,这种反复打磨的过程是设计师工作的常态。

L192-产品经理的交互设计基础课(PPT)

我们电脑管家设计团队认为,原型最大的价值在于让用设计让需求可视化,让团队中的所有成员快速确认到需求的具体表现是怎样的。

L192-产品经理的交互设计基础课(PPT)

以之前电脑管家V11.0改版为例,我就用 Proto.io 这个工具设计了垃圾清理模块的高保真原型,在视觉设计完成之后,用户就能直接使用这个Demo进行试用,体验完整的垃圾扫描和垃圾清理的流程,细致到动画中的每一帧都被我定义到了。

L192-产品经理的交互设计基础课(PPT)

经由这样高保真的原型,我们对整个电脑管家V11.0做了可用性测试,在正式开始开发前,就确认了用户对它的设计评价是要高于旧版的,并且没有任何负面评价。有了这层肯定,我们就很放心地进行了整个电脑管家的改版开发工作,而不用等到开发上线之后再忐忑等待地用户的使用反馈。而后来开发同学在做的时候,由于有高保真原型做参照,也能够最大程度地保证设计的还原和落地。

三、原型工具

L192-产品经理的交互设计基础课(PPT)

L192-产品经理的交互设计基础课(PPT)

可以用来设计原型的工具有很多,这里我只给各位产品经理介绍最常用的七种武器。

先来猜猜,第一种也就是大家都会用的原型设计方式是什么?

L192-产品经理的交互设计基础课(PPT)

嗯,你们当然都很熟练了,就是用“口头”讲的。

但可能你们不知道的是,这也是一种原型设计方式,你完全可以用它来给用户进行互动测试。

L192-产品经理的交互设计基础课(PPT)

比如我这么描述之后,你是否能够想象出它的产品形态,你能明白火焰和数字的意思吗?

L192-产品经理的交互设计基础课(PPT)

它其实就是上图右侧所示的——电脑管家小火箭的口头原型。就算你没做出来这个产品,你也完全可以用嘴讲清楚,对吗?

L192-产品经理的交互设计基础课(PPT)

除了口头原型,最好理解也是最快速的方案就是——纸质原型。

L192-产品经理的交互设计基础课(PPT)

但是大家可能不知道的是,你还可以在原型外面套一层机器外壳(图左和图右下),当用户做一个操作之后,测试人员再给用户更换下一级界面,从而达到快速测试的目的。

L192-产品经理的交互设计基础课(PPT)

如果你是做移动端产品的,还有一个福利推荐给你,这款叫做“POP – Prototyping on Paper.”的软件可以用来将你画好的纸质原型拍照存档,然后再用简单的创建点击区域和跳转链接的方式,把你的所有原型页面串联起来,做成一个可以在手机上快速体验的原型。

L192-产品经理的交互设计基础课(PPT)

第三种原型工具是Fireworks,这个软件是腾讯CDC团队之前一直用来画交互稿的工具,和PS不同,它是所见即所得的设计方式,不用考虑麻烦的图层,还能同时处理矢量和位图,并且源文件还是谁都能打得开的PNG!

L192-产品经理的交互设计基础课(PPT)

但也别小看它的能力,我们团队中之前就有一位设计师能够用它画出非常漂亮的图标。

L192-产品经理的交互设计基础课(PPT)

Fireworks常用的快捷键我都列在这里了,只要熟记这些,你就已经可以用它来快速地画交互稿了。

L192-产品经理的交互设计基础课(PPT)

其实比起Adobe已经不再更新的Fireworks来,更好用的平面原型工具应该是——Sketch,它几乎具有前者的所有优点,同时还更高效、更智能,但最大的缺点是只有Mac版……为此我甚至自费买了台27寸的iMac放公司当办公机使用。现在有很多交互和视觉同学已经转用Sketch了,甚至连开发同学很多都在用,因为它的上手门槛确实很低。

同时Sketch还有很多官方提供的模版,比如iOS 11的、Android的,如果是做移动端的设计,很简单就能拼出一套基本的设计。另外,丰富的插件系统也是让很多设计师欲罢不能的地方。

L192-产品经理的交互设计基础课(PPT)

你知道苹果公司的御用交互原型工具是什么吗?其实就是Keynote。

他们会用Keynote来做高保真原型,因为它的画图功能和动画功能都比较强,很多简单的演示用它来做完全足够了。

L192-产品经理的交互设计基础课(PPT)

特别是动画中的“神奇移动”转场方式,这是PowerPoint追了多少年才终于拥有的功能,有了它,做很多交互动画都特别省事。

L192-产品经理的交互设计基础课(PPT)

Keynote支持对PPT中的对象如文字、矩形等设置跳转链接,并且可以跳转到指定的幻灯片,由此就能实现页面间跳转的功能。

L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)

我用Keynote做了一个简单的演示,只要用同样的图形画好这三个界面,把它们的幻灯片过渡动画设置成“神奇移动”,再对绿色的按钮设置成跳转到第三个界面,黄色的按钮跳转到第二个界面,一个简单的电脑管家Demo就做好了。

虽然我推荐的是Keynote,但如果你没有Mac,也可以试着用PowerPoint 2016来做这件事情,应该也能做到类似的效果。

L192-产品经理的交互设计基础课(PPT)

Axure RP是业界内最流行的原型工具了,基本上所有的交互设计师和不少产品经理都会使用,我就不多做具体介绍了。它的优点是可以手动实现大多数动画,同时问题就在于只能手动实现,效率不高。还有一个问题就是,它画出来的稿件实在太糙了,远远比不上Fireworks,更不用说矢量化的Sketch了,像素眼的设计师真的不能忍。L192-产品经理的交互设计基础课(PPT)

在高保真原型工具里,最简单易上手的就要数Principle了,它实现动画的方式很简单,只要在两个场景之间做好元素的变化,然后简单的拖拉一下,几分钟就能做出下面这种生动的Path风格菜单动画。

L192-产品经理的交互设计基础课(PPT)

L192-产品经理的交互设计基础课(PPT)

刚才讲的全部七种原型工具,在效率、保真度和难度方面的对比如上,我最推荐大家学习的是蓝色标记的四种。(嗯,这简直是逼你买Mac,反正我买了,逃~)

四、案例互动

L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)

课程中间,大家一起来做一个简单的小练习吧。我们平时都在用各种电商网站,但是你真的有注意到它们的登录页面的细节吗?如果让你来设计,你会怎么设计?

建议你拿出纸和笔,自己动手画一画,目标是画出这个登录页面,以及所有相关的流程页面,还有异常状态。不要打开淘宝和京东这些网站参考,这么简单的小测试,考的就是你根据用户需求和场景来画原型的能力。

题目的参考要点我会在文章的最末尾放出,建议你做完前先不要看。

五、人人都懂设计

L192-产品经理的交互设计基础课(PPT)

想要画出的交互稿不要那么丑?这个章节的内容了解一下。

这本书我推荐非设计专业的同学看看,当然不看也可以,我下面会用十分钟讲完它的主要内容。

L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)

这个网站,可以看出设计者有意让顶部的主标题和其它部分不同,但却还不够果断。

L192-产品经理的交互设计基础课(PPT)

像上图一样,要对比就让它截然不同,这样就能够达到一个很分明的对比效果,凸显了主标题的地位。

L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)

上图图左的样式,同样是标题,样式却不太一样,改成图右那种统一样式之后,看起来就清楚很多了。

L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)

对齐是所有设计师都会做的一件事情,像上图这张名片,它很丑吧?丑在哪?要怎么改?

L192-产品经理的交互设计基础课(PPT)

很简单,只要像上图图右一样,做一个右对齐就好了。是不是漂亮很多?为什么这样就好看了?

既然是对齐,那居中对齐也是一种对齐啊,为什么不居中对齐?

L192-产品经理的交互设计基础课(PPT)

问题在于,居中对齐这种方式,我们看不到那根“对齐线”(蓝色虚线),就算你对齐了,我也看不出来究竟对没对齐。但右对齐或左对齐就不一样了,我们一眼就能看出那根明显的“对齐线”(红色实线)。

L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)

这张海报实在太乱了,红字到底对应哪段黑字?为什么人物要放在右下角?

L192-产品经理的交互设计基础课(PPT)

如果我们根据亲密性原则进行整理一下,马上就好多了。

  • 主标题和副标题合二为一;

  • 红字和对应的黑色段落整合在一起,同时还做到了重复和对齐;

  • 人物和其他元素都无关,那就单独开辟一个空间来放。

L192-产品经理的交互设计基础课(PPT)

六、产品可用性检验

L192-产品经理的交互设计基础课(PPT)

这个部分,就是我们平时会用来检查产品可用性的一些原则,了解这些之后,你就能更好地去发现设计中的一些问题,从而进行改正和补充。

L192-产品经理的交互设计基础课(PPT)

评估可用性,有三个核心指标:

  1. 有效性:用户能够达成自己的目标,他要来注册,那就让他快速完成注册,如果完成率很低,那就是有问题;

  2. 效率:用户不做无用功,他要能够快速、简单地完成任务,能一步做完的就不要让他做两步;

  3. 满意度:用户在使用产品的过程中是否是愉悦的,除了要避免他在过程中感到不爽,还要给他惊喜。

L192-产品经理的交互设计基础课(PPT)

也叫尼尔森十大可用性原则,是检验产品可用性最重要的指标。L192-产品经理的交互设计基础课(PPT)

用户的任何操作,都需要给他明确的进度反馈,比如电商网站的流程指示、网页的翻页指示,以及王者荣耀的段位和星级等等,此外,操作后的按下状态、成功和错误提示也都很重要。这些加起来,构成了用户对产品的初步掌控感。

L192-产品经理的交互设计基础课(PPT)

在这一点上,Windows一直做得很差,比如控制面板上的那些设置项,大多数我们都用不到、看不懂,这就是不符合用户预期。

L192-产品经理的交互设计基础课(PPT)

他们在Windows 10系统中终于意识到这个问题了,所以他们把设置改成了系统、帐户、设备这样好辨别的分类,终于说人话了。L192-产品经理的交互设计基础课(PPT)

这也是构成用户掌控感的重要因素,你要允许用户犯错,给他提供关闭、撤销的机会。

L192-产品经理的交互设计基础课(PPT)

相同的内容,在产品的不同地方出现,一定要有同样的表现,比如微信的收藏功能。同样类型的东西,也要用相似的风格来表现。

L192-产品经理的交互设计基础课(PPT)

我们在设计的过程中,要尽量避免用户犯错,上图这种下载网站就是一个典型的反着来的例子,你很难找到真正的下载按钮。

L192-产品经理的交互设计基础课(PPT)

一定不要觉得用户什么都记得住,像电商网站的购物车,就会在用户选择几件商品之后,自动帮他算出总价格、已选的件数,并且在下一步的订单结算界面,还会再次提醒一遍。L192-产品经理的交互设计基础课(PPT)

如何兼顾简洁性和效率?iOS的计算器就是一个很好的例子,如果你只需要常用的四则运算,那在竖屏状态下就够用了;而如果你想用到一些更高级的函数、平方根等功能,那就把手机横过来,立马就能变成一个科学计算器。L192-产品经理的交互设计基础课(PPT)

为什么Gmail在(因为不可抗力)退出中国市场前,这么受欢迎?就是因为它极简的设计和效率。页面上没有多余的元素,左边的导航也非常简单。同时它还提供了一般邮箱不会有的快捷键功能,高级用户比如程序员完全可以只用键盘就完成所有邮箱内操作。

L192-产品经理的交互设计基础课(PPT)

在谷歌推出自己的搜索引擎之前,雅虎的搜索下面是有很多广告和引导的,但是我就是来找自己要的内容的啊,为什么要看广告?这种极度聚焦用户需求的设计方式,很值得我们学习。

L192-产品经理的交互设计基础课(PPT)

用户在使用产品的过程中,如果碰到系统错误了,那一定要给他友好的说明,也就是——说人话!Windows又用它的傲慢给我们做了一个很好的示范,鬼才看得懂这些错误提示!然后呢?该怎么解决问题?用户是一脸懵逼的。

L192-产品经理的交互设计基础课(PPT)

我们设计过一个帮用户把系统升级到Win10的工具,如果检测到用户的C盘空间不足无法升级,我们会根据情况提供两种解决方案,如果你装了我们的电脑管家,我们会告诉你可以用“软件搬家”这个功能把C盘里的东西转移走;如果你没有装,也可以用清理文件的方式释放空间。此外,我们还提供了升级常见问题的帮助链接。

一定要记住,遇到问题,就帮用户解决问题,而不要仅仅是告知。

L192-产品经理的交互设计基础课(PPT)

现在的软件一般都没有产品说明书和帮助文档了,但是一样需要在用户的使用流程中做好一些功能说明。比如亚马逊的商品详情页,右侧有一个“开启一键下单”的功能按钮,下面就会跟一个“什么是一键下单?”这样的说明,这样就不会让用户迷惑。还有一种方式,像京东就会在页面的右下角做一个悬浮按钮,你可以在这里找到常见问题的解决方案。

L192-产品经理的交互设计基础课(PPT)

以上就是这次基础课要讲的主要内容了,时间关系讲不了很深,如果你还想再继续了解交互相关的知识,我为你推荐以下几本书:

L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)

下面这部分是我这次特别赠送的彩蛋:

作为产品经理,你为什么会想来学交互设计?这种跨界学习的态度非常棒,而我自己最近也在用一种方式提升自己的技能。

L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)

这就是我的1000天写作计划,我每天都在逼自己写出两千字左右的文章,用这种输出倒逼输入的方式让自己保持学习状态。

在这个过程中,我也为自己总结了一套交互设计师应该会的技能树,以及应该如何学习技能树的说明。

L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)

L192-产品经理的交互设计基础课(PPT)

最后分享一句话,做产品和设计师最有趣的地方就是能够像上帝一样创造产品,但是这一切又需要我们像奴隶一样地努力工作、服务用户,激发自己的一切去做得比别人更多、更好。这真是让人又爱又恨的职业。

L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)

对交互技能树感兴趣的同学,欢迎关注我的微信公众号“落羽敬斋”(wingstudy),我每天都会在这里分享我的学习心得,我的写作计划也已经进行到第191天(昨天),今天是192了。

交互技能树01 | 交互设计师该会的技能有哪些?

附录:案例练习参考答案

电商登录页面设计要点:

A.为什么登录要做成独立页面而不是弹窗?

一、复用性考虑:在电商网站,几乎每个页面都会有登录入口,如果每个页面都去做个弹窗,在网页开发上多少都有重复工作量的,而如果是做成独立页面则没有这种问题;

二、安全性考虑:可以看到,这些电商网站的登录页面域名前面都是Https开头的,说明它们要注重安全性,因为登录是每个网站的敏感入口,容不得半点马虎,独立做成页面比每个页面都会弹出的登录弹窗能更好地设置安全域名和保护代码。

B.登录页面没有顶部导航也没有多余的跳转链接

用户之所以要来登录页面,就是从其他页面跳转过来的,他们想要做的就是马上完成登录再跳回去购物、结账,千万不要冒任何打断他们操作的风险,这会降低购物转化率的。

C.账号输入需要注意的细节

  • 通用方式是手机号码、邮箱、用户名都可以作为账号输入,因为这几种格式都可以很容易被程序识别出来,不存在冲突的问题;

  • 密码不能是明文输入,附近还要有“忘记密码”的链接;

  • 下方还要有“自动登录”选项框,一定周期内(一般是7天)可以自动登录;

  • 下面紧跟“登录”按钮,注意不是“登陆”;

  • 账号或者密码输出错误时,提示是“账号或密码不匹配”,而不能直接提示“密码错误”,为的是防止黑客识别这种错误提示,暴力破解密码。

还有很多细节需要考虑到,这里就不一一提示了,大家可以参考这些常见的电商网站,其中我最欣赏的是Amazon的登录页面设计,简洁而有效,没有一丝多余元素。

L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)L192-产品经理的交互设计基础课(PPT)

===END===

题图的图片授权基于:CC0协议


【书斋小笺】

毕竟这是两年前写的PPT,有些地方讲得太浅了,而工具方面又讲得比较多,昨天在讲的时候还是发现有些产品同学对部分内容不太感兴趣,还是应该提前花些时间多做修改的,惭愧。

不过也不用太在意,只要你们能从中获得一点收获,我也没有白讲。

终于写完了!这次总共写了4个小时。看在我写得这么辛苦的份上,是否有同学愿意为知识付费呢?

这篇文章编号192,首发于2018年5月11日。

如果你觉得这篇文章不错,欢迎转发给你的朋友或者朋友圈,你也可以长按下面的二维码扫描并关注我的公众号,谢谢支持~

L192-产品经理的交互设计基础课(PPT)

赞赏请点开图片,长按识别

L192-产品经理的交互设计基础课(PPT)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签云