赞助商
立即赞助

5个产品细节剖析,让你看看大厂是如何做设计的(二)

产品经验3年前 (2021)发布 流光
1.6K 0 0

瑞幸咖啡APP的一处改版设计

场景如下:用户在瑞幸咖啡app下单时,选择好商品并进入提交订单页,此时可以在页选择要使用优惠券,并在进入这个页时,已经为用户自动选择了优惠力度最大张券,减少了用户操作成本,如下图:

5个产品细节剖析,让你看看大厂是如何做设计的(二)

说到这里其实也是常规操作,这设计已经很普遍了,是让作者感觉惊喜其实是优惠券右侧个「取消使用」小按钮,我们把上图片放大下如下:

5个产品细节剖析,让你看看大厂是如何做设计的(二)

在前旧版本,是没有这个「取消使用」按钮,可能有朋友会说,默认选择张优惠券才是比较好设计案啊,你怎么会为这个功能惊喜?

其要理他的优之处还是要从际的使用场来说,者曾经遇到一种样的情况,其中有几个条件下:

  • 我账户存在20张5月份买28元代券
  • 我在6月下单想买一杯24元的咖啡时,系统默认帮我选择28元的代金券
  • 金券优惠券两概念,不可同时使用
  • 的账户中还存在一张5折优惠券

当时账户中的20张金券之官方搞活动的时候买的,所以我常出的一种操作行顺序:先点击金券一栏,入金券页面,点击「不使用金券」按钮,后返回提交订单页面,再去选择使用的5折优惠券。整行径被拉的很,操作繁琐还浪费时间。用户的这种行对于支付功的比例会影响,所以后瑞幸改版时加了面的「取消使用」按钮。

由于作者的代金券已经在瑞幸承认财造假全部用掉了,所以上方图片使用的是「不使用优惠券」截图。而不是「不使用代金券」截图。其交互逻辑都是一的。

当时作者每天早上都会一杯24元的咖啡,发现这个改版后真的十分惊,感叹幸设计团队的敏锐嗅觉,实在是优秀。在思考一种设计方案的产逻辑时,还是要结合同的使场景才解。

解读百度地图中的路线图设计

场景如:户在查看路线时,可点击页面的截图按钮,将路线图片保存到相册,保存到相册的图片会显示一张长图,显示全展开的导航信息。

5个产品细节剖析,让你看看大厂是如何做设计的(二)

5个产品细节剖析,让你看看大厂是如何做设计的(二)

以下是对这个计案例的解读:

这个功已经上线了很长时间了,在之前看到这个截图功时,我的想法是「多余」,因为我们已经到了导航信息页面,即使是络信号好是可继续查看和展开折叠信息的,为么还需要”截图”呢?或者为么直接使手机的截图功呢?最由于到公司入职,租房和公司的距离特别远,在使百地图导航的时候又注意到了这个功,有了一些合的解释。

1. 为么直接使手机的截图功?

手机截屏功只截取一屏,容易导致截图后的信息全。并且在上面这种换乘信息较复杂的时候甚至需要3-4屏才容纳整。还有一点原因是导航信息页面很多信息是折叠起来的,即使是户手机中有截长图软件,需要一个一个点击展开才开始截图,大大增了户的点击次数,效率很慢。

2. 已经到了导航页面,为么还需要这个功?

因为存在多种户场景,作者在之前的思维只考虑到了自己使导航功的场景,除此之外还存在帮他人查询、长期记录导航信息等场景。

真实场景1:某天我家里在北京旅游,于来说很大可能性用个微信,手不会安装很多其他APP,所以此时我需要自己查询好路线后发他。(帮他查询场景)

场2:去年一假期的时,我和女朋计划去杭州玩几天,她又是一个非常有计划的,所以提前做旅行攻略,个文档中就用到类似的导航信息图。(长期录导航信息场)

可能还存一些作者历过到的场景。欢迎家补充。

在做计方案的候,或是在评估一个功能是否有必要去做的候,往往需要备「景化思维」,这可以帮助摆脱「思维」的局限性。从更多维度来进行评估。

还有一直停留在导航页面,手机的耗电会较快,截图保存在本地可省电。

我认为豆瓣中的这种设计不太好

场景如:户在使豆瓣APP查看电影详情时,可看到页面中有演员表一栏,每屏可显示4个演员信息,户将演员表向左滑就可查看到更多的演员,到达一定限后,屏幕右侧就会现一个状态叫做「更多」。

5个产品细节剖析,让你看看大厂是如何做设计的(二)

此时继续向左滑的,「更多」就会变成「释放查看」,如图:

5个产品细节剖析,让你看看大厂是如何做设计的(二)

现此状态后如果户停止滑并松开手指。那么就会打开一个页面,显示全演员的列表或介绍。如图:

5个产品细节剖析,让你看看大厂是如何做设计的(二)

这是一种较奇的交互方式,灵感来源可是一些容产中拉刷的场景。但是这种设计放在豆瓣里面是否合适呢,我有一些一样的想法。

首先,下刷新比左滑刷新从体工程学上来说更加自然。例如,我们用右手拿着手用拇指下滑动时,由于拇指关节构造决定了上下滑动比左右滑动要更加轻松省力。

二点则是用户心智的问题。类似种查看更的互方式一般采用点击的形式,用户也已经习惯种形式。点击只需要点击一次,而滑动则需要控拇指移动的范围和速度。对何取消打开下一个页面、何终止操不是很明确。

这里的用户智,简单就用户根据过往的验,对可能会造的结果的预测。我们都知道设师设方案时,一不能用户已的操作不同的,顺应用户的操作习惯,这样可以减少用户认知本操作出错率。

豆瓣中的这个计在来是一种创新,是一次勇敢的尝。可能这个计在未来的某一势操作的应用规模和范围更广,受众更多,会是一种优秀的计方案,但是在今用户的心智还于探索期,所以对于用户来说,认知成本会比较高。所以认为在现阶段,这不是一种非常优秀的计方案。

淘宝和京东的中类似的隐藏功能

景如下:搜索功能是90%的产品中都不可缺少的功能,按照匹配度对搜索结果进行排序和展示也都是常见的做法了,但是作者最近在和淘个产品中发现了一点关于搜索功能的创新计,在此享给大家。

1. :搜索直达

在中,如果用户在搜索框中输入的关键词预先计好的文字相同则不会显示搜索结果,而是直进入一个新的页面,这个页面一是某业功能的首页。例如搜索「互网医」则是如下图的结果:

5个产品细节剖析,让你看看大厂是如何做设计的(二)

这种做法一是流量规模大的产品为了给新业更多入而计的,在一些用户规模数亿的产品中,可能存在数百个业,这多业然不可能每个都给常驻显示的入,之前的做法一是采用独立的APP才承载,但是这就带来了推广新APP极高的成本问题,所以在这采用了搜索直达的方式来给更多业隐藏式的入,希望能够用集中流量最大的产品来为新业带来更多流量和用户。

2. 淘:定向结果

在淘中也有类似的计,例如用户搜索「象牙」就会触发一个保护大象保护野生动物的页面,如下图:

5个产品细节剖析,让你看看大厂是如何做设计的(二)

淘这显就不是为了给新业导流了,而是发挥巨型的社会责任,体现了一些公益性的内容,但是如果只从产品设计看的话,也不失一种明智的选择,因搜索象牙时完全可以显示一些「人象牙」类的产品品什么的,但这种搜索结果第一肯「卖假」,第二这点售额对淘宝也不一提,所以还不如些公益活动博得用户好感度。其简介价不见得比卖赚钱低。

除了淘和之外,多产品也有类似的计,例如在网易云音中搜索「杀」就会出现非常暖心的内容,在百度中搜索「杀」第一条结果也是心理咨询的热线话。(是不是广告就不知道了,没过)

总结这些设计实都是在满足一些「极数场景」「特定场景」,类似的功虽然暖心但要注意产生命阶再决定做做,或是使卡诺模来对需求进行序。

QQ音乐和知乎中相同的「生成图片」设计

场景如:当户在QQ音乐的播放音乐页面中截图时,系统会为户生成一张精美的海报,供户分享或保存,如图:

5个产品细节剖析,让你看看大厂是如何做设计的(二)

当户在知乎的章详情页面中中一字时,可择「金句分享功」之后系统会为户生成一张精美的海报,供户保存或分享,如图:

5个产品细节剖析,让你看看大厂是如何做设计的(二)

5个产品细节剖析,让你看看大厂是如何做设计的(二)

在这个产品中都出现了「生成图片」的计,以下是对这种计的思考

户进行截图时有几种可的场景

  • 景1:想截图将息保存起来
  • 场景2:想把容发送给友
  • 场景3:分享到朋友圈

对于场景1来说,虽然户截图体现了容质量较,但设计者实并希望户把容截图保存起来,而是更希望户把容收藏起来。截图保存和收藏的区别就在于户之后是否会经到本产中,就是决定了户留存率。那么怎么避免户截图保存呢?难道直接禁吗?这显然可。因为这就违反了户操作的目的,会在更大程上伤害户体验。结果可是带来了更多的流失。此处设计方案的要求应该是:满足户保存信息的目的并且避免户再来。

具体设计案思路可能是这样:

首先我要满用户的目的,即存内容,但是我以只让用户存一部分内容例标题,给用户一个能够找到正文的链接,即二码,样就满用户目的,并且也让用户需要内容的时能够回到产品中来,提高留存率。

对于场景2,图片后同时给出了微信、QQ、微博分享渠道,用户可以一键把图片分享过去,不返回桌面-找到微信-选择好友-点击加-点击图片-选择图片-点击发送这样复杂的操作,减少了用户的操作骤,提高了效率。并且用户将图片分享出去之后的流程里,看到该图片的用户也可以通过二维码入到知乎产品中,这就产品了多用户活跃度,也达到了设者的实的目标。

景3和景2基本类似,就不再多说废话。在这三种景中,一张式更加美的图片都能够起增用户享动力的作用,毕竟颜值即正义~

注作者的微信公众号:「设计的威严」

5个产品细节剖析,让你看看大厂是如何做设计的(二)

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

旅程映射创建了一个完整的体验视图,正是这一过程将不同的数据点聚集在一起并进行可视化处理,以了解产品需求,从而可以吸引...
产品设计
引言 虽然设计师们总在尽量避免用户在使用产品时发生错误,但我们的用户还是时不时会给我们一些小“惊喜”,与错误不期而遇。我...
产品细节
当产品发展到一定阶段,优秀的用户体验设计对于产品在激烈的商业竞争中保持核心竞争力是至关重要的。一个产品能否高效地帮助...
产品设计
大部分UI设计师面对B端产品设计都是唯恐避之不及的,那B端产品应该从哪些角度去切入设计? 对于很多设计师来说,遇上B端产品...
2b产品
我们在分析产品设计的时候,会去思考这些产品为什么这么设计?微信作为国内头号产品,经常会被当作分析的对象。那微信为什么...
产品设计
文章目录 我见过最赞的招聘启事,来自程序员的别样浪漫 断网环境下,Google浏览器页面的小恐龙可以打游戏哟 「亲戚计...
产品细节
@Daidai丶呆 :本周的译文纯粹聊了聊「列表视图」跟「网格视图」在电商产品中的应用法则。但这篇在 Medium 上收获1.5K点赞数...
产品设计
某个时间我们下载了许多优秀的 APP,定了伟大的目标——每天赏析一款优秀产品,学习前沿的交互和视觉风格,努力提高自己的审美...
UI 设计