1. 主页 > 设计资讯 > 行业动态

12个案例告诉你:交互设计的决策要素是什么?

同样的功能,每个APP的设计方案都不一样。为什么?影响交互设计的决策因素有哪些?本文作者结合实际案例进行分析和探讨,并与大家分享。

在玩各种app的时候,应该经常会发现每个app都有不同的产品设计,功能都是一样的。这是为什么?这么多不同的方案,哪个好?应该如何比较?

这些问题转化为:交互设计需要决策时,应该参考哪些要素?

这次我选择了13个案例来分析回答这些问题。

01不同的场景

需求在场景中增长,所以要在场景中解决。所谓场景,其实就是人、时间、地点、对象、终端、过程的组合。同样的功能,人/时间/地点/对象/终端/流程不同,也就是场景不同,解决方案也不同。

1.筛选功能(电子商务VS网上约会)

列表页面的筛选也是如此。我们比较了两种不同类型的应用。一个是电商App:淘宝,一个是网恋App:JION。

12个案例告诉你:交互设计的决策要素是什么?(图1)

说到过滤功能,也许我们最熟悉的是商品/服务列表页面的过滤功能。就像上面的淘宝一样。但是JION的设计其实很少见。

为什么设计如此不同?因为过滤对象不同。

淘宝的筛选对象是商品。物品是标准化的,没有情感,只有一堆固定的特征和属性。所以淘宝的筛选页面是对产品进行特征化,你可以通过筛选这些特征找到目标。

但是JOIN过滤的对象是人。

人是不规范的,很难像物品一样分类。你可能会说,人不能也贴标签吗?是的,但是如果你真的是通过标签来的,你可能需要无数的标签。这显然不划算。而且,用标签筛选人,物化人,在一个交友app里多少有点失礼。

所以Jion用了另外一个解决办法:与其盲目的找一些标签,不如先问问自己。

人是分群的,我们要找的人其实是和自己相似的人。所以与其把立足点放在别人身上,不如放在自己身上,问自己,认识自己。这就是JION问的。你想干嘛?你最近状态如何?此刻你的想法是什么?

提供自己的状态和想法,有一种和别人面对面交流的感觉,而不是粗挑商品。是对自己和他人的一种尊重。我们要找的是人,不是对象,所以要有起码的尊重。尊重的底线是不物化别人。你心里可以有一把尺子,但至少你要有礼貌,就是不要随意把尺子放出来,随意对别人做手势。

所以JION,一个筛选页面,和服务/商品列表的筛选功能不一样,是一个不同的方式做需求提交页面,突出人的特点和温度。通过寻找自我,尊重他人,对物化的人格说“不”,也可以提高效率,找到适合自己的人。

所以我觉得JION的设计是一个好的设计,一个场景驱动的设计。

2.出行计划首页(公交车VS出租车)

12个案例告诉你:交互设计的决策要素是什么?(图2)

智能公交首页没有地图,只有附近的站点定位。出租车App的首页是一张地图,可以查看车况和路况。

同样是旅行计划,但是因为交通工具不同,设计也不同。智能公交是指查询公交线路,公交线路和站点是固定的。我们只需要知道附近的车站和车辆的到达。

但是打车不一样,位置不一样,车辆数量不一样,离我们的距离不一样。打车后,我们需要知道车辆的实时距离。所以我们需要一张地图。

02不同的发展阶段和特点

也是评论功能。知识星球等其他应用鼓励用户评论,但微博提示:最近有多少博主勒索,请谨慎评论。

12个案例告诉你:交互设计的决策要素是什么?(图3)

这是因为:发展阶段不同,微博评论大,知识星球评论小。基数在那里,微博可以提示谨慎发言,提高评论质量。

用户群体的特点是不同的。微博是一个公共社区,用户数量很大。评论可能是自己的粉丝,也可能是其他渠道,比如看到话题/热搜后的非粉丝用户。所以评论的动机和行为是多方面的。

知识星球是一个私人社区,它会加入这个社区是因为它对博主的认可度高,所以价值观也差不多。所以只会引导评论,不会提示你谨慎发言。

另外,微博的这个提示并不是所有用户都有,只有部分用户达到某个临界点才会触发。

因为微博用户规模大,价值观不同,所有这样的保护机制,一方面可以让博主看到有效善意的评论,保护博主的心情;另一方面也能让评论员说话谨慎,防止被黑,也维护了评论员的情绪。

后来者的优化

有些应用或网站没有持续优化,所以有些功能和后来者一样,有些细节会有所不同。不继续优化的原因有很多,例如

发展的比较早,而后续又把精力投入到其他的地方,所以有的功能,没有继续迭代;或者因为之前的技术架构不好改动,所以只好放着不动;用户已经习惯了,再次改动,会带来新的认知成本。评估之后,索性不改。

新网站,没有这些顾虑,站在前辈的肩膀上,可以做的比以前的网站和应用更好。

发布按钮

比如也是内容发布页面,有的网站把发布按钮放在最上面,有的网站把发布按钮放在最下面。

微信微信官方账号的发布界面是把发布按钮放在输入框下面;

12个案例告诉你:交互设计的决策要素是什么?(图4)

而小书放在输入框上。

12个案例告诉你:交互设计的决策要素是什么?(图5)

哪个好?

我们可以用菲茨定律来解释,在输入行为中,微信微信微信官方账号和PMTalk的发布应用菲茨定律,发布按钮放置在离我们最近的地方,目标按钮设置不同的颜色,按钮面积比其他按钮大。这样输入后发布就很方便了。

菲茨定律是人机交互和人机工程学中人类活动的模型。它预测从任何位置快速移动到目标位置所需的时间与两个位置之间的距离和目标的大小有关。

04产品类别

也是类似截图的操作。由于产品类别不同,来自App的反馈也不同。

12个案例告诉你:交互设计的决策要素是什么?(图6)

比如支付宝,截图后会弹出一个很小的浮动层“帮助”。点击后,可以跳转到帮助页面获取帮助和反馈。

Vipshop会生成产品图片,引导分享微信好友和朋友圈;

豆瓣会生成社交内容的长图,可以下载分享。

这是由不同的应用类别决定的。支付宝作为支付产品,用户制作截图的动作很可能出现问题,需要寻求帮助或反馈;从商品内容和社交内容的截图可以猜测,用户的需求可能是分享内容。

截图只能捕捉当前屏幕显示的部分。不过唯品会和豆瓣都做了一些处理,让内容更加完整清晰。特别是豆瓣,直接生成内容的长图。

什么是好的用户体验?这是判断你的意图,然后直接给你最好的解决方案。通过这个案例,我们可以看到支付宝、唯品会、豆瓣根据各自的产品类型使用了不同的截图反馈方式,给用户带来了极佳的体验。

05产品调性

产品的调性不同会导致对相同功能的不同设计,主要是为了保持产品的内外一致性。

1.导航栏

有时候社会类别的底部导航会更活泼,更不一样。比如平行世界的底部导航。

12个案例告诉你:交互设计的决策要素是什么?(图7)

旅游网站马蜂窝顶部tab的勾线也和其他网站不同。很多应用都是正常的直线。马蜂窝是一个好玩的曲线。

12个案例告诉你:交互设计的决策要素是什么?(图8)

看到这两个导航栏,我们不会觉得突兀,反而会觉得这样也挺好的。就是因为他们产品的调性非常适合这种俏皮或者别致的风格。

如果是像支付宝这样的,如果搞这样的风格,其实有些不合适。因为支付宝首先是让人有安全感,设计越正规越好。

2.负荷

不同的调性产品有不同的动画设计。比如哔哩哔哩的装帧动画很符合二次元的感觉,特别可爱。

12个案例告诉你:交互设计的决策要素是什么?(图9)

今天的标题加载图标更常规。

12个案例告诉你:交互设计的决策要素是什么?(图10)

06大胆创新

有时候,有些功能的设计已经被视为常规,就看你有没有打破常规的勇气。这样会带来一定的风险,比如用户根本不会使用;但是也会带来特别的好处,让用户眼前一亮之后就印象深刻。

1.视频编辑的长度编辑功能

例如,在视频编辑页面上,我们需要编辑视频的长度。最常见的方式是像Filmm M一样左右拖动选择框,这样做的好处是用户已经形成了一个心智模型。不需要重新学习就可以直接使用。

打破常规的Spark Camera是拖动视频边缘的圆圈来选择视频的时长。虽然操作和Filmm类似,是拖拽,但是布局/位置/设计不同,需要用户重新认识和学习。

但是学习后操作完全不受影响,省略了缩略图空占用的空间,提高了整个App的利用率空,让App看起来更干净,给用户留下深刻印象。

12个案例告诉你:交互设计的决策要素是什么?(图11)

2.小视频主页

在Tik Tok出现之前,当我们想到制作视频时,我们会想到优酷、爱奇艺、腾讯等老牌视频网站是如何做到的。然后在考虑做小视频的时候,会按照渠道和标签分类。这就是Aauto Speeter一开始所做的。

因此,Tik Tok提出了一个新的解决方案。不需要选择频道,可以直接在全屏幕上推荐小视频。

因此,Aauto Speeter紧随其后,选择了类似的计划。但是我认为奥特·斯派克的计划不如Tik Tok的好。Tik Tok一进就直接打,没时间犹豫让你直接开始消费。另一方面,自动加速需要人们去选择。很多时候,选择太多了,但是又不知道怎么办,有些用户会直接退出。

这就是希克定律。

希克定律是心理物理学的定律。用户面临的选择越多,做出选择的时间就越长。人机交互界面的选项越多,用户做决定的时间就越长。

12个案例告诉你:交互设计的决策要素是什么?(图12)

避免像素级抄袭的恶名

有时候,功能是一样的,我们能想到的最优交互方式也是一样的,需要在UI上花点功夫,花点小心思才能有所作为。

比如也是图片社交。国外Instagram已经有了非常成熟的交互方案。绿洲后续,解决方案不会太差。但为了避免像素级抄袭的恶名,Oasis会选择一些UI风格和小细节进行调整,让我们看到一些不同。

12个案例告诉你:交互设计的决策要素是什么?(图13)

绿洲也铺了大图,只是一些细节有所改变。比如喜欢/评论/分享按钮,喜欢的人数做成头像,标签文字变成显眼的按钮,双击喜欢后出现评论弹出框。

08不同的国内外环境

有时候国内外用户的习惯不一样。所以同样的产品也会有区别。比如VIP页面,我们国内的做法,通常在使用产品的过程中,都是有限制的,然后引导跳转到VIP页面,引导支付,VIP页面的描述也比较长,比如喜马拉雅。

12个案例告诉你:交互设计的决策要素是什么?(图14)

国外的app也有同样的策略,但是很多国外的app有不同的策略:一旦进入app,马上弹出VIP购买框。比如这个视频作物。

12个案例告诉你:交互设计的决策要素是什么?(图15)

看似大胆的策略在国外屡见不鲜。因为国外用户支付意愿足够高,支付决策路径就足够短。

09摘要

从以上13个案例中,我们可以看到,即使功能相同,很多应用的处理方式也是不同的。

有的是因为场景和流程不同,有的是因为产品开发阶段不同,有的是因为产品调性不同,有的是因为产品目标不同。

有些产品可能会格外创新,所以他们选择挑战最初的设计和人们的习惯。其他产品只是想区别于其他产品,以避免像素级抄袭的恶名。

所以他们做了不同的设计。

我们做产品的时候,难免要借鉴别人的产品。(可以看看如何体面的学习别人的产品。)看到琳琅满目的产品,以及它们对相同功能的不同处理方式,如何判断哪个好,哪个不好?

我们不能简单的判断它好看不好看,好用不好用,要多想想他们为什么要这么做,这么做有什么好处。

至少我们可以考虑以下几个角度:

场景产品发展的阶段产品调性国内化环境产品的目标不要像素级抄袭大胆创新

这些原则不仅用来判断别人的产品,在做产品决策的时候也可以用到,尤其是:产品目标是什么,产品的开发阶段,用户的使用场景,产品的调性。在我们对这些有了清晰的认识之后,再做产品决策就会更果断,更准确。

本文由设计学习网整理发布,不代表设计学习网立场,转载联系作者并注明出处:https://ffjianzhan.cn/xingyezixun/jhsj/722.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息