设计师升维:集创思维构架设计逻辑

现时代的设计师不应只看到美感,从长远而言,需要从商业/产品/体验/视觉多个角度综合考量构建设计形态(集创思维)。体验分析_方案1_产品提供的原始方案
方式:点击条目>输入数值或点击加减>点击确定完成
最大操作次数23次:点击条目1次,点击21次+号到最大值,点击确定1次,少数用户会使用此方式。
常规操作次数6次:点击条目1次,点击输入框1次,输入数值3次(如3.5),点击确定1次。
最小操作次数3次:点击条目1次,点击+号随即完成1次,点击确定1次。体验分析_方案2_提前防止用户出错
方式:点击条目>滑动弹窗>点击完成
最大操作次数4次:点击条目1次,滑动到最底部需要2次,点击选择1次。
最小操作次数2次:点击条目1次,无需滑动,当前已有他要的选择,点击选择1次。体验分析_方案3_减少操作
方式:点击数值选择
最大操作次数1次:直接点击选中
最小操作次数1次:直接点击选中
屏占比:半屏
扩展性:低
操作点击次数降低,但屏占比过多,且不适用于当数值更大时(如果以后数值扩展到100%,那么整几屏都是按钮)体验分析_方案4_减少操作,防止出错
方式:拖动圆点选择
最大操作次数:1次
最小操作次数:1次
屏占比:低
扩展性:高
操作次数低,效率高,屏占比少,具有适用性,可以多个此类操作叠加使用


现时代的设计师不应只看到美感,从长远而言,需要从商业/产品/体验/视觉多个角度综合考量构建设计形态(集创思维)。

设计师升维:集创思维构架设计逻辑

本文将从生活场景引入思考模式,过渡到实际产品中的综合思考。

生活场景思考

地铁口扶手电梯应该往里开还是往外开?

设计师升维:集创思维构架设计逻辑

显性因素与隐性因素

所谓显示因素是指用户在体验中的第一感受体验,比如进地铁了我想乘扶手电梯方便我下去,出站时我也想继续乘扶手电梯。

所谓隐性因素是指在连续行为过程或随时间推进过程中可能会发现的潜在问题,此处是我们需要重点考虑的。

设计师升维:集创思维构架设计逻辑

内部空间与外部空间

在地铁内的内部空间是有限的,这个是在设计时规划好的空间大小,能容纳多少人,一旦建设后则无法改变。

在地铁外的外部空间是无限的,因为用户出去后即疏散,往不同方向走,不易造成拥堵。

设计师升维:集创思维构架设计逻辑

正向分析

假设电梯【往里开】的场景下会发生什么情况?

在非高峰期,地铁内没有过多人群时,不会造成拥堵,下电梯后随即前行。

当在高峰期时,如上下班时间,在地铁内人群拥堵的情况下,如果排队已经排到了扶手电梯附近,而前面的人又没有移动,此时从扶手电梯源源不断的人群下电梯时会被前方不移动的人挡住,还有一些喜欢走路玩手机的人更加不会经常看前后左右的情况,跟着前面走的人走,然而扶手电梯并不会停,那么就会后面的人群就会不断碰撞前面排队不动的人群,从而造成严重的人群碰撞事故。

设计师升维:集创思维构架设计逻辑

反向分析

假设电梯【往外开】的场景下会发生什么情况,在高峰期或非高峰期,人群排队上扶手电梯,到了出站口后陆续出去往各个方向疏散,因为外部空间无限,极少情况会在地铁出站口造成拥堵,从而降低由于拥堵而造成人群碰撞的情况发生。

设计师升维:集创思维构架设计逻辑

地铁口实际情况

为了避免严重的人群碰撞事故,在只有一条扶手电梯和人行电梯时,电梯运行方向一直是往出站方向外开

设计师升维:集创思维构架设计逻辑

图示为在上下班高峰期观察中所拍,为地铁口真实情况,为了避免严重的人群碰撞事故,在只有一条扶手电梯和人行电梯时,电梯运行方向一直是往出站方向外开。左图可见人群在进站时,由于电梯往外开,方向和人群相反,强制引导用户走楼梯排队。右图可见人群在出站时,电梯依然往外开,此时顺应人群移动方向。

那么,出站口就一定不会拥堵了吗?不是的,还有可能情况,下雨!此时大部分人可能都没带伞,这样就会在出站口站着堵住等待停雨,像之前说的扶手电梯不会停,依然有可能造成跟前面分析的人群碰撞。

此处引入高频和低频思考:首先,上下班进地铁的频率高呢还是下雨的频率高?显然易见,天天都要上下班是高频,几个月或者几周才下一次雨属于低频。我们应该更多考虑高频情况,但也不能放弃低频情况。所以在此建议:平时电梯往外开,但在下雨时工作人员应该让电梯停止运行,阻止人群拥挤碰撞发生。这样会不会更具人性化呢?

用户体验驱动设计形态

根据需求特性优化交互操作体验

设计师升维:集创思维构架设计逻辑

图中为实际产品中所提供的原始方案和需求,设计一种操作方式,需要符合数值在0%~10%之间波动,且数值必须是0.5%的倍数,如0.5%,1.0%,1.5%,不支持其他数值。对此需求进行特性提取:数值范围适中,需要特定倍数的数值,不支持其他数值或文字。

体验分析_方案1_产品提供的原始方案

方式:点击条目>输入数值或点击加减>点击确定完成

最大操作次数23次:点击条目1次,点击21次+号到最大值,点击确定1次,少数用户会使用此方式。

常规操作次数6次:点击条目1次,点击输入框1次,输入数值3次(如3.5),点击确定1次。

最小操作次数3次:点击条目1次,点击+号随即完成1次,点击确定1次。

当用户输入文字时提示请输入数值,当用户输入其他数值时提示请输入0.5%的倍数值,输入容易犯错,降低心理预期

设计师升维:集创思维构架设计逻辑

体验分析_方案2_提前防止用户出错

方式:点击条目>滑动弹窗>点击完成

最大操作次数4次:点击条目1次,滑动到最底部需要2次,点击选择1次。

最小操作次数2次:点击条目1次,无需滑动,当前已有他要的选择,点击选择1次。

无需让用户手动输入,因为容易输错,提前阻止错误提示发生

设计师升维:集创思维构架设计逻辑

体验分析_方案3_减少操作

方式:点击数值选择

最大操作次数1次:直接点击选中

最小操作次数1次:直接点击选中

屏占比:半屏

扩展性:低

操作点击次数降低,但屏占比过多,且不适用于当数值更大时(如果以后数值扩展到100%,那么整几屏都是按钮)

设计师升维:集创思维构架设计逻辑

体验分析_方案4_减少操作,防止出错

方式:拖动圆点选择

最大操作次数:1次

最小操作次数:1次

屏占比:低

扩展性:高

操作次数低,效率高,屏占比少,具有适用性,可以多个此类操作叠加使用

设计师升维:集创思维构架设计逻辑

体验分析_优化对比

此需求特性是数值范围适中,需要特定倍数的数值,不支持其他数值或文字。

对此分析作出优化后,采用拖动圆点方式,相比原方案来说操作次数平均降低3~6倍,且无需用户输入提前防止用户输错。

设计师升维:集创思维构架设计逻辑

商业价值/产品逻辑/用户体验

音乐APP播放歌曲应该用沉浸型还是效率型?

沉浸型指在歌曲列表点击歌曲后直接进入播放界面进行播放,方便听歌看词,随时快进。效率型指在歌曲列表点击歌曲后留在列表页同时进行播放,方便随时切歌,能快速切歌。两类用户各有偏好,有的喜欢听歌看词,有的喜欢随时切歌找别的歌曲听。

设计师升维:集创思维构架设计逻辑

产品逻辑驱动设计形态

网易云音乐是以UCG+评论+个性化为定位的音乐社交平台,用户主动评论互动,在听歌时寻找同好。

用户在点击歌曲进入播放页后,点击更多(三个点的图标)会弹出面板,主要是歌曲的相似推荐,歌手,专辑等,引导用户发现相似歌曲,并且增加了该歌手和专辑的曝光度,高质量歌曲或带版权歌曲需要付费,从而促进用户开通付费音乐包。

在我们这一代,很多读书时都追过的歌曲,那些种种回忆或现在共同的回忆,用户点击评论(消息图标)进入评论页面,在听歌的同时寻找同好,当用户找到同好或看到一些有趣的评论时,产生兴趣点击他的头像进入个人主页发现他收藏的歌单,从而让【听自己喜欢的歌-评论-发现同好-发现他收藏的歌曲-听他收藏的歌】环环相扣。这样来说,网易云音乐采用沉浸式,这样在用户每一次点击都进入播放页,每一次都给一个推力,是不是更符合网易云音乐的定位呢?

设计师升维:集创思维构架设计逻辑

设计师升维:集创思维构架设计逻辑

商业价值驱动设计形态

QQ音乐是一个综合性音乐服务平台,海量歌曲,庞大的用户量。

用户点击歌曲进入播放页后,界面左滑出现相似歌曲推荐,歌手专辑,相似电台,包含此单曲的热单等,和云音乐一样做的相似推荐,同时也是不断帮助引导用户发现其他歌曲,为其他歌曲专辑增加曝光度。

当用户通过此功能发现其他歌曲时,会不断消耗流量,遇到版权歌曲不能下载,此场景会促进用户开通绿钻和付费流包。

界面右滑时,显示歌词,用户沉浸在边听边唱,此时界面中的话筒图标会引起用户注意,感觉点了后能录下来跟唱的心理,但是点击话筒图标后确是跳转到【全民K歌】这款APP的下载页面,QQ音乐做的就是从此场景进行价值转化:听歌-看词-跟唱-点击话筒-下载APP。

这样来说,QQ音乐采用沉浸式,每次点击歌曲都进入播放页,可以潜在提升QQ音乐相关商业价值转化。如果采用效率型,用户只有在真的需要看词时候才会再次点击进来。

设计师升维:集创思维构架设计逻辑

设计师升维:集创思维构架设计逻辑

交互设计中的黑暗模式1

特殊情况下轻微降低体验以零成本换取用户流量

问题1:我们平时使用微信最常用的功能就是聊天和刷朋友圈,那为什么聊天放在了底部tab的一级页面,但朋友圈却放在发现tab里的二级页面呢?

问题2:支付宝之前刚更新蓝色版本引入社交元素时在网上引发大量的讨论,其中一条吐槽是在支付宝首页点击右上角那3个图标然后返回,只有通讯录这个图标点击后是返回到朋友tab而不是首页tab,按正常逻辑来说,首页进去,应该返回首页啊?

设计师升维:集创思维构架设计逻辑

正反分析_微信

朋友圈放在一级页面

  • 体验角度:微信聊天和朋友圈属于常用功能,从高低频角度,此类功能属于高频,放一级页可以方便用户使用。
  • 商业角度:并不能对扫一扫,摇一摇,购物,游戏等功能引流

结果:相比放二级来说用户少点一次,但对核心功能和商业价值无影响

朋友圈不放一级页(维持现状)

  • 体验角度:用户多点一次才能进入朋友圈。
  • 商业角度:朋友圈作为引子不断引导用户点击【发现】,从而0成本让微信的核心功能和商业价值增加曝光度

结果:增加一次点击次数,0成本换取巨大的用户流量促进核心功能和商业价值转化

设计师升维:集创思维构架设计逻辑

正反分析_支付宝

从首页进通讯录后,点返回回到首页tab

  • 体验角度:比较正常的逻辑,从哪进,往哪回。
  • 产品角度:在此并不能潜在增加朋友tab曝光度

结果:体验流畅正常返回,但对朋友tab无产生推力

从首页进通讯录后,点返回回到朋友tab

  • 体验角度:潜在心理模型,通讯录找不到?去朋友tab找找近期联系人看看
  • 产品角度:支付宝想做社交,在多方面努力着手引导用户,潜在增加朋友tab曝光

结果:另一种逻辑,为朋友tab增加推力,支付宝就是想做这个事

设计师升维:集创思维构架设计逻辑

交互设计中的黑暗模式2

利用与体验相反的操作以阻挡用户正常路径

通常我们想卸载一个软件时,会找到卸载按钮去确定卸载,这是一个流畅的操作。但是产品本身是不希望用户去卸载的,在这里交互设计需要利用黑暗模式,设计以用户体验相反的操作以阻挡用户的正常路径。

设计师升维:集创思维构架设计逻辑

行为路径阻挡_驱动精灵

此产品在卸载时,需要通过3步。我们可以看到,第一次阻挡,卸载按钮不明显(灰色字),突出的是问题修复,希望帮助你解决问题,阻止卸载动作。当用户依然点击卸载,进入第二次阻挡,卸载字样变成狠心卸载,配搭一个萌化的形象,给人一种楚楚可怜的感觉,同时突出求助专家的服务。当用户继续点击卸载,进入第三次阻挡,确认窗口,卸载按钮依然是灰字不明显,突出尽情吐槽这个按钮。

设计师升维:集创思维构架设计逻辑

设计师升维:集创思维构架设计逻辑

设计师升维:集创思维构架设计逻辑

行为路径阻挡_2345看图王

此产品在卸载时,也是需要通过3步,为什么大多产品都是3步呢?俗话说,事不过三,一件事情重复发生3次以上会产生厌恶感,给你阻挡10次烦不烦?需要在尽量降低厌恶感的同时进行阻挡。

我们可以看到,第一次阻挡,这里的处理是没有卸载按钮,而是选项,弱化了卸载的感觉,这里要比驱动精灵做的好。

第二次阻挡,可以发现,第一步时取消是在右边,给人感觉右边是取消,到了这一步突然变成右边是卸载,之前给人教育是不要点右边的取消因为我要卸载,那么你会自然的看左边那个继续使用的按钮,同时这里这个按钮也设计的很突出。

当你再次点击卸载,进入第三次阻挡,我们发现,取消按钮又回到了左边而且设计的突出,又颠覆了上一步的操作,可以说2345看图王的交互设计暗黑模式用的很好。体验并不是一直顺着用户走的,需要考虑更多的维度。

设计师升维:集创思维构架设计逻辑

设计师升维:集创思维构架设计逻辑

设计师升维:集创思维构架设计逻辑

综合思维模式构建设计形态

一个设计,需要综合考虑商业,产品,体验,视觉之间的联系,为最终的形态做考量,这样的设计才是具有价值的设计。

  • 商业价值:是否涉及价值转化,是否增加用户流量,是否增加曝光度等
  • 产品逻辑:产品定位,核心功能,需求目标等
  • 用户体验:用户体验多维度评估方法,体验设计流程方法论体系,基于交互五要素的场景思考等
  • 视觉设计:版式设计,情景融合,色彩心理学等

设计师升维:集创思维构架设计逻辑

【最后】一张图描述商业,产品,体验,视觉四者之间的关系:

设计师升维:集创思维构架设计逻辑

视觉是皮,卖相好不好,是否吸引

体验是肉,好不好吃,口感体验如何

产品是核,整个形态一切从此孕育构建

商业是价,这个产品最终所带来的价值有多少

 

本文由 @星夜Design 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-17 03:59
下一篇 2017-05-17 05:59

相关推荐

  • 不好意思,简历有了它,你就领跑于820万毕业生

    又临近一年毕业季找工作成为了应届生们的头等大事但今年的就业形势依旧不容乐观来自教育部的数据2018年全国高校毕业生预计上升至820万人再创近10年毕业生人数新高▲教育部官网截图▲中商产业研究院数据显示:2010-2017年的毕业生人数按照2%-5%的同比增长率逐年增长,近7年间累计毕业生人数达到5706万人。年年都是“史上zui难就业季”并且每年的毕业生人数始终呈增长态势800多万的应届毕业生让“你竟是一个大学生”变成“你只是一个大学生...

    2018-03-27
  • 写在 [ 交互设计小厨房 ] 一周岁

    时光荏苒,感谢无情岁月!感谢大家容忍这个公众号『隔三差五』抽疯式的更新;感谢太太长期战斗在『丧偶式育儿』的第一线;感谢各位『互联网老炮』容忍洒家在微信群里污力十足的飚车;最后还要感谢这个优雅的排比句。当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放金平糖の精の踊り~カチューシャ浜口史郎 - 『ガールズ&パンツァー』オーケストラ・コンサート~Herbst Musikfest 2015~产品厨子的运营总结2017年3月24日,『交...

    2018-03-24
  • 02.案例:用户体验与结婚教练 | 打造产品思维30讲

    02.案例:用户体验与结婚教练来自时间前哨00:0017:10用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观察和判断一个人。因为...

    2018-02-14
  • 【交互基础】系列之解析移动端导航设计模式

    鉴于目前交互设计的知识体系较为混乱,我写了这个[交互基础]系列专题,旨在整理移动端交互设计基础知识。巩固自己的知识体系,也与大家共勉,打好基础,才能飞得更高!

    2017-04-30
  • 交互设计 | Tmall金妆奖 交互体验装置

    天猫金妆奖 · 体验交互装置中国上海· 3.04.2018***装置交互体验概念***Step 1: 待机状态Step 2: 装置检测到观众体验,即将展开体验流程Step 3: 系统提示拍摄区域Step 4: 实时检测体验者面部表情Step 5: 拍摄表情即将开始Step 6: 拍摄完成,正在为观众制作纪念卡***纪念卡设计***纪念卡/拍摄表情等级1:平静纪念卡/拍摄表情等级2:微笑纪念卡/拍摄表情等级3:开心纪念卡/拍摄表情等级4:...

    2018-03-15
  • 交互设计规范

    交互设计规范+iPhone界面尺寸:320*480、640*960、640*1136iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×1080)设计图单位:像素72dpi。在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计,现在iphone6和plus出来后有很多人会使用6的设计效果。如果是我来做的话,我会使用...

    2018-03-21
  • 产品学习——用户体验要素

    最近看完了这边和产品相关的书籍——《用户体验要素》,读完之后感觉这本书写的挺好。下面做了一些思维导图,做的比较详细,这样就可以当做是读书笔记了。自己的不足:1,读起来的困难是这本书翻译的不是特别好,所以为了理清楚这个本的脉络,还是花费了比预期要久的时间。2,是第一次使用xmind,在一边做思维导图,一边学习使用xmind上面花费了一些时间。3,是专注度还是不够,集中精力的时间太少了,所以做一件事的时间就会拖的太久。第一章:用户体验为什么...

    2018-02-23
  • 聊下你不知道的交互设计:交互设计师在项目中是如何工作的

    从事交互设计3年了,经常有朋友和同事问我“到交互到底干嘛的?”答曰:“根据用户的需求及场景,用简单、愉悦的方式完成任务”。但他们似乎还是不太明白。

    2017-05-25
  • 用户吐槽:新版新浪微博的5大槽点

    昨天新浪微博发布了新版V6,据说是“加强基于兴趣的信息传播,在提升用户内容获取效率、阅读体验基础 上,面向垂直领域认证用户推出兴趣内容生产、传播及变现工具,完善内容生产与消费生态。微博计划打造一张以信息…

    2014-10-15
  • 交互设计——绘制流程图

    在上一篇文章中了解如何寻找接触点、梳理接触点,在这篇文章中主要就是如何来绘制流程图。现在普遍对流程图的分类有四种:业务流程图、页面流程图、功能流程图、程序流程图。在这主要通过现有的APP分析来进行区分不同流程图以及如何交互设计师或者产品经理选择应该使的流程图。何为流程图在上文中讲到了流程,流程是事物进行中的次序或顺序的布置和安排。流程是自然而然就存在的,它可以不规范,可以不固定,可以充满问题。而流程图的核心就在于如何排布事物进行的次序,...

    2018-05-06