赞助商
立即赞助

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

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

编者注:几乎每一新手设师,都会被求多下载优秀的产品把玩一番。但如果下载后不知道从哪里始体验,也发不了那些优秀的设计细节

解读MOO音乐的极简设计

由小良同投稿,我们一起讨论并编辑成,MOO音乐中的案例,场景如:

今天家的MOO音乐中播页面的设解析。MOO音乐这产品不知道家使用过,它腾讯18末推出的一款音乐app,主面向喜欢流行音乐与小众音乐的潮流轻人。与主流音乐app不同,他过多复杂的功能模块,旨打造沉浸感的听歌体验。我们今天就通过其播页面的设看看:

进入MOO音乐播放页,最观感受是简洁。比QQ音乐,MOO音乐在此页各元素与文都常少,控件数量也是屈指可数。接下来让我们起看看它是如何处理播放页各个功能来实现极简设计。

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

△ 图为MOO音乐与QQ音乐播放页比

首先MOO音对进度条这个功能的计,在主流音App中,用户需要拖动进度条的圆点或点击进度条相应位置来改变播放进度,而在MOO音中,用户可直在页面下方约四之一的域进行拖动来改变播放进度。这个计相比传统播放进度条,大大提高了热面积;热的位置也位于用户持机大拇指容易触达的域,用户拖动无需盯着页面控件进行操作。但它也存在一个问题,用户在正常播放状下无法播放进度,想也有可能是计为了造沉浸有而为之的。

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

△ 图为MOO音进度条操作热展示

在暂停/播放功能的设计上,不同其他主流App需要通点击按钮来暂停和播放,在MOO音乐中用户以单击屏幕任意位置(除其他按钮热区)来暂停或播放。一操见视频/短视频应用中,符合绝大部分用户对播放/暂停的操习惯。

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

△ 图为 单击屏幕任意位置进行暂停

在切换上一首/一首的功上,同于他流App需要通过点击按钮来切换上一首或一首歌曲,在MOO音乐中户可通过在屏幕任意位置上划或划来切换。这一操作很符合户在浏览短视频时养成的操作习惯。

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

△ 图为上划划切换歌曲

以几的功能的设都通过用符合用户操作习惯的手势交互替用户对页面控件的操作,从达到页面的布局的极简状态。

这设计优十分显著,不仅帮用户在操作过程省去了视线聚焦时和精力,而大大增加热区积降低了用户操作成本。拖动改变播放进度、单击暂或播放、上下划动切换歌曲手势操作符合用户在以往使用其他品时养成操作习惯。极简页布局也增加了用户听歌沉浸感。

但这个计也存在一些缺点,首先为了造极简的页面沉浸,MOO音将评论功能放在了二页面,这必然会带来社交属性的降低,再加上它有限的的用户规模众的音类型,用户使用的受孤独就尤为显。其次,由于它主流音App的操作方式差异大,用户的认知成本高,新用户有可能因为不愿学习或不适应这种交互方式也而无法留存。最后,虽然势操作的热面积大、操作灵活,但也增大用户误操作的可能性。

结语:MOO音乐刚刚面世的时小火一段时间,当时有很用户被它优的设计吸引,它也曾收获很赞誉。但是随着用户的新鲜感逐渐减少,MOO音乐一直处用户流失的状态,我能查到最近的数据只有艾瑞研究院显示的MOO音乐今年三月的月活只有两万左右。但我得就是新鲜感去,还是有一部分人用户坚守在里。因为是它陪伴着他们的独处时光,陪伴着他们度一个又一个个充满感的夜。

解读石墨文档的非主流设计

由乃馨同学投稿,石墨文档中的一个案例场下:进,石墨文档的「默认页」定位到二个标签——桌面。与常规的做法不太一样。

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

在常规APP中,进通常默认定位在一个标签下。同时一个标签也往往是APP最重要的页面,包含产品中最常用的功能或是最主推的业务。无论是文档笔类APP,还是国民级应用APP几乎是样。例下面的:

有道笔记——最(默认)、件夹、增、笔、我的

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

腾讯档——首页(默认)、增、档

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

支付宝——首页(默认)、财、口碑、友、我的

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

微信——微信(默认)、通讯录、发现、我

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

较之,石墨档显得有些「非流」。——通知、桌面(默认)、增、最、收藏。对于这样的特殊设计,我有两种猜想:

猜想1:

石墨档打协作概念,团队成员的行为、档的变是需要强传达给户的「通知」;石墨档把通知放在第一个标签中,是为了凸显产的协作功。而桌面标签是户操作和查件的要入口。更多的户进入APP是希望够快速触达目标。于此需求石墨档才把默认标签定位到了「桌面」,起到了缩短户操作路径的作。

即第一标签很重,第二标签常用,因此采用了这样的布局与默认。达到「突出功能」与「用户目的」平衡。

猜2:

第二、第三、第四标签属于高频操作,且页面内非常重。用户使用过程中可能频繁切换。那么设者意将这3者置靠近,且于tab栏的中央置。让用户使用过程中减少手指的移动,聚焦于页面中央的3入口。

发散来看,这「定位不在第个标签」设计,在其他品出现过吗?答案是肯定。

例如keep和读书:

微信读书的标签定位逻辑是在「上一次退出时的标签」,是由读书类app的户的使用具有一定的「连续」。次打开app时,希望能够快速继续上次的任务。因而微信读书App默认标签定位到上次使用的位置,意在提高用户使用效率。

而keep——首页、计划、(默认)、商城、我的的设计逻辑与石墨档的较相似,首页承载的是App的打/商功,即社交,户可在首页看到注、推荐、热门的达人态,可自己上传态,形成良好的社区氛围。

默认的tab「运动」,符合用户的使用场景——运动时速打App始记录。用户高频操作的入口。

在作者看来,这设计其实是商业目标和体验目标互相妥协,品放为了拓展新业务、或是更好投资讲故事所以把些内容放到了最要第个标签,是又不希望影响些「需求纯粹」用户使用体验,所以默认定位是在核心功能所在页。

这作者对墨文档的这种计还有一个猜想是;由于墨文档目标的功能十一(也可以叫纯粹),所以其实是没有什西可放的。才给了通知内容这高的地位,否则如果只是为了提高通知度的话其实还是有不少其做法的。当墨文档的功能和业越来越多,这种计会有比较大的概率被改掉。

QQ音乐,设计师多想一步,用户就可以少走一步

QQ音中的一个案例景如下:用户在QQ音中查推视频,视频播放5秒后,页面中除视频外的其素就会「变暗」,如下图:

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

其素变暗后用户的注力就可以集中在视频本身,从体验目标上来说可以让用户更舒适的观视频,通过减少噪的方式避免干扰。从业目标上来说不被干扰就味着用户观视频的间可能会得延长,提高了「用户使用间」这一关键性的数据。

其类似的设计甚至在年前就已经有,例我们在使用优酷网站观看视频时,鼠标在屏幕中间点击一下就以隐藏底部的播放进度条,来种设计被优化成根据时间判断是否隐藏的方式。质上就是通设计师对用户使用场的思考得到优化点,设计师想一步,用户就以少走一步(俺得句就值一个转)。

百度地图咋我没搜索就显示结果了?

百度地图中的一个案例场下:某天者下班的时随手打开百度地图,刚想搜索一下最近的还有久能到我一站,结果还没搜索就出现下面的图:

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

我想要的搜索结果居已经显示在屏幕上!!!时为一个用户当是非常惊喜的,看完信息就随回到手机桌面,但是为一个设计师还以想到更的东西。

为么它知道我要搜索的容

  • 一点前提是我已经在个产品中完善自己的信息,包括居住地点、司地点等等。
  • 第二项基础是作者每天的轨迹较固定,基本是里和公司来往返的路线。
  • 第三点条件当时作者打软件的时间「下班时间范围」

百地图就可根据作者当时的定位、当时的时间,判断了这一户打开软件的目的是么,再根据已经存在的住地点信息计算了公交车到时间这项结果,直接展示给了户。

这种法我们昨天的案例十分相似,都「设师多一,用户就可以少走一」式的设,通过已条件判断用户的目的,再根据已数据算出用户需的结果,帮用户节省了操作本时间。

于用户来说,这设计则不仅仅是节省操作成本问题,更要在于「惊喜感」和「预期」,这两感觉能够带来用户体验提升是十分巨大,用户情绪波动比较大时候也更容易用户留下更深刻品印象,在日后和其他品竞争时形有了优势。

丁香医生APP带给用户的惊喜

丁香生个案例背景如下:

用户可以在丁香医生APP中,使用在线问诊功能去询问一些不着急医进行诊断的病症。在进行问诊之前,用户需要填写一些息,例如症状和之前在医检查留下的病例,诊断图片等等。

果用户在填写信息的页面点击返回按钮。么次进到填写信息页面时,就出现下图所示的提示:

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

种设计方案者认为是经历一比复的判断才最终采用的方案。原因下:当我们为防止用户由误操而返回并丢失信息的时。我们通常采用的办法是用户点击返回按钮时给一个阻断的提示。例下面图样:

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

者自己在之前的司做名产品时也遇到类似的场。为防止用户由误操或其他原因中断名的流程。在用户点击返回时,我们对用户进行挽留。种方案最大的问题是用户生误操的情况只是极少数行为。但是我们每一次在用户点击返回时给出个提示,让用户中断流程的操变得更加复,付出更成,和用户的目的是不相符的。也是影响用户验的。(里要强的是影响验并不意味着业务数据目标变差)

除了这两种方案之外,还有一种作者曾经看到过的方案是这样:户返时没有示,当户再次进入时,直接保留户上次已经填写的全容。如图:

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

这种做法同样存在问题。如果户并是想继续上一次未成的流程。那么户需要手删除有已经填写的容,我们可看到这样户需要付的操作成本是极的。需要删除字,删除图片等等,并且有很多户的行为是:使「返 + 再次进入」这样的操作来清空页面中已经填写的容。(这种户行为来源于年做的一次真实户访谈)

思考了以两种设方案之后,再回看丁医中的方案就十分优秀了,当用户希望中断问诊流程时,一次点击就可以完目的。当用户误操作返回时也可以恢复已填写内,当用户希望行其他问诊/清空内时,也只增加了一次点击。

欢迎关注作者微信公众号:「设计威严」

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

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

相关文章

真正好的设计,总藏了一些你没注意到的细节。设计行业待久了就特别容易凭感觉做判断,「看上去好像很厉害的样子」、「觉得很...
App分析
平面设计被定义为:通过各种手段创造和结合图片、符号、文字、色彩(构成要素),借此做出用来传递信息的视觉表现。关于设计...
平面设计
很多人咨询了申请大厂的事,可是我发现有些人并不是能力不够去大厂,而是不适合。 大厂总的来说确实各方面都不错,薪资福利...
大厂设计
双11过去了,请问你剁手了吗? 这场购物盛会的预热先锋和用户收割机──「全民合伙人」,或许你有听过、玩过吧。作为阿里今年...
产品设计
王M争:关于提升用户体验的方法论非常多,其中一个比较常见的就是简化操作流程。我们对此非常熟悉,但是我很少看到有文章系统...
交互设计
讨论一个比较常见的问题。 读者: 呆呆,这个图的卡片列表里,标题用省略号合适吗? (因为原图涉及读者项目隐私,所以重画...
交互设计
在互联网快速发展的进程中,越来越多人将个人财产、隐私、数据,以及心理安全都存放在产品平台上。这么一来,想要产品获得用...
产品细节
「啊,要崩溃,这是个按钮吗?怎么点不动?」 「我要卸载这个难用的app!」 「啊,这个细节设计的太棒了吧!」 …… 相信你...
产品细节