编者注:几乎每一新手设师,都会被求多下载优秀的产品把玩一番。但如果下载后不知道从哪里始体验,也发不了那些优秀的设计细节。
由小良同投稿,我们一起讨论并编辑成,MOO音乐中的案例,场景如:
今天家的MOO音乐中播页面的设解析。MOO音乐这产品不知道家使用过,它腾讯18末推出的一款音乐app,主面向喜欢流行音乐与小众音乐的潮流轻人。与主流音乐app不同,他过多复杂的功能模块,旨打造沉浸感的听歌体验。我们今天就通过其播页面的设看看:
进入MOO音乐播放页,最观感受是简洁。比QQ音乐,MOO音乐在此页各元素与文都常少,控件数量也是屈指可数。接下来让我们起看看它是如何处理播放页各个功能来实现极简设计。
△ 图为MOO音乐与QQ音乐播放页比
首先MOO音对进度条这个功能的计,在主流音App中,用户需要拖动进度条的圆点或点击进度条相应位置来改变播放进度,而在MOO音中,用户可直在页面下方约四之一的域进行拖动来改变播放进度。这个计相比传统播放进度条,大大提高了热面积;热的位置也位于用户持机大拇指容易触达的域,用户拖动无需盯着页面控件进行操作。但它也存在一个问题,用户在正常播放状下无法播放进度,想也有可能是计为了造沉浸有而为之的。
△ 图为MOO音进度条操作热展示
在暂停/播放功能的设计上,不同其他主流App需要通点击按钮来暂停和播放,在MOO音乐中用户以单击屏幕任意位置(除其他按钮热区)来暂停或播放。一操见视频/短视频应用中,符合绝大部分用户对播放/暂停的操习惯。
△ 图为 单击屏幕任意位置进行暂停
在切换上一首/一首的功上,同于他流App需要通过点击按钮来切换上一首或一首歌曲,在MOO音乐中户可通过在屏幕任意位置上划或划来切换。这一操作很符合户在浏览短视频时养成的操作习惯。
△ 图为上划划切换歌曲
以几的功能的设都通过用符合用户操作习惯的手势交互替用户对页面控件的操作,从达到页面的布局的极简状态。
这设计优十分显著,不仅帮用户在操作过程省去了视线聚焦时和精力,而大大增加热区积降低了用户操作成本。拖动改变播放进度、单击暂或播放、上下划动切换歌曲手势操作符合用户在以往使用其他品时养成操作习惯。极简页布局也增加了用户听歌沉浸感。
但这个计也存在一些缺点,首先为了造极简的页面沉浸,MOO音将评论功能放在了二页面,这必然会带来社交属性的降低,再加上它有限的的用户规模众的音类型,用户使用的受孤独就尤为显。其次,由于它主流音App的操作方式差异大,用户的认知成本高,新用户有可能因为不愿学习或不适应这种交互方式也而无法留存。最后,虽然势操作的热面积大、操作灵活,但也增大用户误操作的可能性。
结语:MOO音乐刚刚面世的时小火一段时间,当时有很用户被它优的设计吸引,它也曾收获很赞誉。但是随着用户的新鲜感逐渐减少,MOO音乐一直处用户流失的状态,我能查到最近的数据只有艾瑞研究院显示的MOO音乐今年三月的月活只有两万左右。但我得就是新鲜感去,还是有一部分人用户坚守在里。因为是它陪伴着他们的独处时光,陪伴着他们度一个又一个个充满感的夜。
由乃馨同学投稿,石墨文档中的一个案例场下:进,石墨文档的「默认页」定位到二个标签——桌面。与常规的做法不太一样。
在常规APP中,进通常默认定位在一个标签下。同时一个标签也往往是APP最重要的页面,包含产品中最常用的功能或是最主推的业务。无论是文档笔类APP,还是国民级应用APP几乎是样。例下面的:
有道笔记——最(默认)、件夹、增、笔、我的
腾讯档——首页(默认)、增、档
支付宝——首页(默认)、财、口碑、友、我的
微信——微信(默认)、通讯录、发现、我
较之,石墨档显得有些「非流」。——通知、桌面(默认)、增、最、收藏。对于这样的特殊设计,我有两种猜想:
猜想1:
石墨档打协作概念,团队成员的行为、档的变是需要强传达给户的「通知」;石墨档把通知放在第一个标签中,是为了凸显产的协作功。而桌面标签是户操作和查件的要入口。更多的户进入APP是希望够快速触达目标。于此需求石墨档才把默认标签定位到了「桌面」,起到了缩短户操作路径的作。
即第一标签很重,第二标签常用,因此采用了这样的布局与默认。达到「突出功能」与「用户目的」平衡。
猜2:
第二、第三、第四标签属于高频操作,且页面内非常重。用户使用过程中可能频繁切换。那么设者意将这3者置靠近,且于tab栏的中央置。让用户使用过程中减少手指的移动,聚焦于页面中央的3入口。
发散来看,这「定位不在第个标签」设计,在其他品出现过吗?答案是肯定。
例如keep和读书:
微信读书的标签定位逻辑是在「上一次退出时的标签」,是由读书类app的户的使用具有一定的「连续」。次打开app时,希望能够快速继续上次的任务。因而微信读书App默认标签定位到上次使用的位置,意在提高用户使用效率。
而keep——首页、计划、(默认)、商城、我的的设计逻辑与石墨档的较相似,首页承载的是App的打/商功,即社交,户可在首页看到注、推荐、热门的达人态,可自己上传态,形成良好的社区氛围。
默认的tab「运动」,符合用户的使用场景——运动时速打App始记录。用户高频操作的入口。
在作者看来,这设计其实是商业目标和体验目标互相妥协,品放为了拓展新业务、或是更好投资讲故事所以把些内容放到了最要第个标签,是又不希望影响些「需求纯粹」用户使用体验,所以默认定位是在核心功能所在页。
这作者对墨文档的这种计还有一个猜想是;由于墨文档目标的功能十一(也可以叫纯粹),所以其实是没有什西可放的。才给了通知内容这高的地位,否则如果只是为了提高通知度的话其实还是有不少其做法的。当墨文档的功能和业越来越多,这种计会有比较大的概率被改掉。
QQ音中的一个案例景如下:用户在QQ音中查推视频,视频播放5秒后,页面中除视频外的其素就会「变暗」,如下图:
其素变暗后用户的注力就可以集中在视频本身,从体验目标上来说可以让用户更舒适的观视频,通过减少噪的方式避免干扰。从业目标上来说不被干扰就味着用户观视频的间可能会得延长,提高了「用户使用间」这一关键性的数据。
其类似的设计甚至在年前就已经有,例我们在使用优酷网站观看视频时,鼠标在屏幕中间点击一下就以隐藏底部的播放进度条,来种设计被优化成根据时间判断是否隐藏的方式。质上就是通设计师对用户使用场的思考得到优化点,设计师想一步,用户就以少走一步(俺得句就值一个转)。
百度地图中的一个案例场下:某天者下班的时随手打开百度地图,刚想搜索一下最近的还有久能到我一站,结果还没搜索就出现下面的图:
我想要的搜索结果居已经显示在屏幕上!!!时为一个用户当是非常惊喜的,看完信息就随回到手机桌面,但是为一个设计师还以想到更的东西。
为么它知道我要搜索的容
- 一点前提是我已经在个产品中完善自己的信息,包括居住地点、司地点等等。
- 第二项基础是作者每天的轨迹较固定,基本是里和公司来往返的路线。
- 第三点条件当时作者打软件的时间「下班时间范围」
百地图就可根据作者当时的定位、当时的时间,判断了这一户打开软件的目的是么,再根据已经存在的住地点信息计算了公交车到时间这项结果,直接展示给了户。
这种法我们昨天的案例十分相似,都「设师多一,用户就可以少走一」式的设,通过已条件判断用户的目的,再根据已数据算出用户需的结果,帮用户节省了操作本时间。
于用户来说,这设计则不仅仅是节省操作成本问题,更要在于「惊喜感」和「预期」,这两感觉能够带来用户体验提升是十分巨大,用户情绪波动比较大时候也更容易用户留下更深刻品印象,在日后和其他品竞争时形有了优势。
丁香生个案例背景如下:
用户可以在丁香医生APP中,使用在线问诊功能去询问一些不着急医进行诊断的病症。在进行问诊之前,用户需要填写一些息,例如症状和之前在医检查留下的病例,诊断图片等等。
果用户在填写信息的页面点击返回按钮。么次进到填写信息页面时,就出现下图所示的提示:
种设计方案者认为是经历一比复的判断才最终采用的方案。原因下:当我们为防止用户由误操而返回并丢失信息的时。我们通常采用的办法是用户点击返回按钮时给一个阻断的提示。例下面图样:
者自己在之前的司做名产品时也遇到类似的场。为防止用户由误操或其他原因中断名的流程。在用户点击返回时,我们对用户进行挽留。种方案最大的问题是用户生误操的情况只是极少数行为。但是我们每一次在用户点击返回时给出个提示,让用户中断流程的操变得更加复,付出更成,和用户的目的是不相符的。也是影响用户验的。(里要强的是影响验并不意味着业务数据目标变差)
除了这两种方案之外,还有一种作者曾经看到过的方案是这样:户返时没有示,当户再次进入时,直接保留户上次已经填写的全容。如图:
这种做法同样存在问题。如果户并是想继续上一次未成的流程。那么户需要手删除有已经填写的容,我们可看到这样户需要付的操作成本是极的。需要删除字,删除图片等等,并且有很多户的行为是:使「返 + 再次进入」这样的操作来清空页面中已经填写的容。(这种户行为来源于年做的一次真实户访谈)
思考了以两种设方案之后,再回看丁医中的方案就十分优秀了,当用户希望中断问诊流程时,一次点击就可以完目的。当用户误操作返回时也可以恢复已填写内,当用户希望行其他问诊/清空内时,也只增加了一次点击。
欢迎关注作者微信公众号:「设计威严」