助眠的音乐

⽤户体验分析——echo回声

⼀、产品简介：

Echo回声是⼀款基于声⾳/⾳乐的的社交媒体型产品，独家⾸创3D⾳乐、弹幕评论和有声表情等特⾊功能，吸引⼤批年轻⽤户。

⼆、⽬标⽤户：

90/95后年轻⼈,学⽣，⾳乐爱好者，⾳乐制作⼈。

三、场景（情况，关键词）

1.听着这⾸歌的⼼情好想和别⼈分享⼀下，其他⼈听到这⾸歌会是什么⼼情呢？

关键词：实时交流

2.睡觉之前想听点能助眠的⾳乐

关键词：分类推荐,夜间

3.平时的流⾏⾳乐听得多了，好想听⼀些新奇⼀点的⾳乐

关键词：新奇

4.我精⼼制作的⾳乐怎么让⼤家可以⼀起来听⼀听，给我建议呢

关键词：发布⾳乐，评论

5.特别地喜欢听⼤⾃然的声⾳，能让⼈很舒适，⽐如下⾬的声⾳，热带⾬林的声⾳，还有海的声⾳……最好能有⾝临其境的感觉

关键词：⾝临其境

6.没办法去现场看ARASHI演唱会，看录像完全没有现场的感觉呀

关键词：现场感

7.⼀直以来都在听爵⼠风的⾳乐，想换个曲风但不知道哪些好，想和朋友好好交流⼀下

关键词：交友

8.好喜欢这⾸歌，好东西想和好朋友分享⼀下，转发给他最好

关键词：分享

四、⽤户需求

1.分享听歌时候的感想，实时交流

2.个性化定制⾳乐类型

3.特⾊、新奇⾳乐探索

4.制作、发布⾳乐，并且与⼈交流想法

5.⾝临其境地听⾳乐，3D⾳效

6.通过⾳乐社交，分享⾃⼰喜欢的⾳乐

五、⽤户任务

l登录/注册任务

l寻找回声任务

l添加弹幕任务

l离线下载任务

l添加好友任务

l发布回声任务

l发布好友圈任务

l消费任务

1.登录注册任务

点开echo进⼊登录界⾯，有社交账号登录和⼿机注册，最下⾯还有⼀⾏⼩字——“已有账号在此登录”，⼤概是echo的账号吧。我习惯上⽤微信

登录，转到微信确认授权，进⼊主页。

2.寻找回声任务

收听⾳乐当然是这款应⽤的主要功能，在⾸页中便是推荐，⼤概从上到下浏览了⼀遍，然后点开⼀个感兴趣卡⽚后便能直接进⼊⼀个播放页⾯，并

且有弹幕可以交流。之后想找⼀找乡村风格的⾳乐，点开放⼤镜到搜索页⾯，下⾯的今⽇热搜⾥没有我想要的，便在搜索框⾥输⼊，下⽅出来的有

相关⼈、相关频道、相关专题、相关回声，在相关回声中选择⼀曲后，继续收听。

3.添加弹幕任务

从echo介绍中了解到弹幕交流是特⾊，于是在回声播放页点击输⼊弹幕，默认会显⽰我在⼏秒的时候输⼊评论，并且有弹幕的预览功能，加了⼏

个特效之后很炫，点击确认发送，屏幕飘过我的弹幕。

4.离线下载任务

对刚才的回声很感兴趣，决定下载下来晚上继续听，弹幕屏幕下⾯有⼏个很⼩的字——“N次离线”，点击之后跳出页⾯，必须分享或者购买会员

才能下载离线。我表⽰很⽆奈啊，还好微信⾥可以和⾃⼰发消息，分享给⾃⼰，我并不想转发每⾸歌给其他⼈，更不想因为⼀⾸歌还买个会员（个

⼈想法）。分享后成功离线下载下来。

5.添加好友任务

在发现好友页⾥，echo可以读取我的通讯录，⾥⾯有已经注册echo的联系⼈并且可以邀请其他没注册的朋友来注册。通过完善个⼈资料，系统还

会⾃动为我推荐可能认识的⼈。点击关注好友就能看到好友的⽇常动态。

6.发布回声任务

在主页标签栏⾥有个logo，点开后显⽰两个操作，发布回声和发布好友圈。点开发布回声，可以分享⼀⾸歌也可以现场录⾳上传，歌曲就在我的

⼿机⾥，应该是直接分享吧。点开后有⼿机上传和电脑上传，点击⼿机上传，选取本地⾳乐上传。

7.发布好友圈任务

点击发布好友圈，输⼊动态正⽂，添加了⼀⾸回声，⼀张图⽚，然后点击发布。

8.消费任务

由于发特效弹幕和离线下载都需要⾦币，我觉得买个会员。来到会员中⼼，⾸先需要充值⾦币，⼜来到我的⾦币页⾯，点击充值，使⽤微信⽀付成

功。

六、交互设计分析

1.登录界⾯

图⽚发⾃简书App

登录界⾯以简洁为主，从视觉上来看有三块区域：⼿机注册，社交账号登录和echo账号登录，但是出乎意料的是echo账号登录的区域被作为最不

重要的部分放在了页⾯底端且不引⼈瞩⽬。如果是应对第⼀次使⽤的⽤户，将⽤户注册着重点出并没有问题。但对于⽼⽤户，使⽤频率最⾼的应该

是echo账号登录和社交账号登录，这两个区域应该着重点出。

点击屏幕其他任何区域，会直接免登录并进⼊主页，但并没有任何暗⽰告诉我，这会是⼀个有效点击，⽤户会很困扰⾃⼰是怎么进⼊的，因为⼀般

其他产品都是以⼀个明确的按钮提⽰⽤户直接进⼊，这与⽤户原有的习惯和⼼智模型不符合。⽽且这⼀设计容错率很低，我在⼗次登录界⾯的试验

中，会有⼤概5次错点屏幕导致我进⼊主页，然后退出来继续登录。

注册页⾥点击不同的⽂本框，会弹出相应的键盘，很好地提⾼了⽤户的输⼊效率。“发送验证码”按钮没有按钮样式，看起来更像是⼀句标签提

醒，让⽤户必须去判断这⼏个字是不是可以点击，⽽不是⼀⽬了然地想去点击，增加了⽤户的学习压⼒。

注册不知道是不是存在bug，当我随便输⼊⼀个⼿机号（甚⾄随便⼀串数字），然后点击发送验证码（成功了！），然后随便输⼊⼀个密码（1位

数字！），然后点击注册（注册成功了！！我都没有输⼊验证码好吗！！）进⼊详细资料页⾯，只要写上⼀个未注册过的⽤户名便可以成功注册

了。

（实在忍不住要吐槽，第⼀次写分析，遇到如此奇特的产品）

没有⼿机号格式的检测，没有真实的验证码检测，没有密码的限制保护（不⼀定是坏事，却不符合⽤户习惯）。

2.回声⾸页（推荐）

⾸页采⽤卡⽚分块式的布局，顶部导航栏和内容区都添加了分段控件，适当地将导航扁平化，减少⽤户达到⽬标所需要的点击数。页⾯导航栏之下

有两个回声推荐区域，⼀个是固定的，⼀个是定时滚动的，两个相同类别的区块应该合并，若出于重要性的考虑，在滚动区中点出即可。

⾸页采⽤⽆限下拉刷新的形式，⼀直会舒刷新推荐内容，能满⾜⼀部分喜欢刷的⽤户的需求和⽆⽬标⽤户的需求。但是当使⽤这种模式时，最好能

设置⼀个悬浮的回到顶部按钮，当⽤户想要重回顶部时可以不⽤再“⽆限上拉”。

标签栏相当的简洁，仅仅3个标签，左右各为动态和回声，中间的logo点开后是发布功能的集合。

推荐回声卡⽚的右上⾓标有该回声的热度，⽤户可以从这⼀直观信息中找到⽬标。

这⼀页⾯的主要特⾊是利⽤了多级分段控件，将导航极度扁平化，减少了⽤户达到⾃⼰的点击次数，也由此简化了标签栏。

3.回声⾸页（发现）

该页的三个区块的分界并不是⼗分清晰，给⼈过于统⼀的感觉，缺少吸引眼球的元素。

Echo专题区块在该页⾯的最下部分，区块的显⽰内容为⼀张海报图，所以采取了⽆限下拉刷新的⽅式，同样没有回到顶部按钮。

4.回声主页（名⼈）

该页⾯⼀眼放去是密密⿇⿇的⼩字和圈圈圈，内容过于密集，且显⽰了很多⽤户在寻找时并不需要的信息，导致页⾯满溢。

点击关注按钮，关注成功后颜⾊稍稍变浅，这与⽤户的⼼智模型不相符合。⽤户的理解为：当我不关注时，它的颜⾊应该不太引起我的注意；当我

确认关注它之后，我希望我能⼀下⼦在众多信息中看到它。

5.动态页

该页条理很简单清晰，只由⼀条条动态从上到下分布，动态⾥包含正⽂和回声播放功能。⾃⼰的动态是可以删除的，但是删除按钮的却没有按钮样

式，与旁边的发布时间样式相同，是典型的注释样式，⽤户很难意识到这是可以点击的区域，增加了⽤户的思考。⽤户可能会试⼀试这个删除是否

有⽤，但由于字体相当⼩可能会造成⽤户没有点击到有效区域，这样⽤户就认为这是个⽆效的按钮，增加了⽤户的疑惑。

6.“我的”页⾯

导航栏的背景变为透明，配合虚化的照⽚背景。页⾯中的条⽬以列表形式展开，并且进⾏了分组，但是分组的内容有点不太理想。例如“关于我

们”、“意见反馈”、“版本说明”等不管是初级⽤户还是专家⽤户都很少⽤到的选项没有和设置等较为常⽤的选项分开。这样使⽤户会将这些本

不重要的选项看得和设置⼀样重要，因为⽤户会认为物理位置在旁边的选项是同⼀类内容。（⼩bug：两个选项“订阅的频道”、“我喜欢的”长

按后颜⾊不会变深，⽽其他选项都会，缺乏⼀致性。）

头像下⽅的是提醒功能分组控件，点击三个中的任意⼀个都将进⼊提醒主页⾯，提醒主页⾯也有⼀个分组控件，但是⾼亮动效都是从第⼀个分组转

移到选中的分组，让我觉得“我的”页⾯的分组控件是多余的，两个分组控件来实现⼀个功能是浪费。完全可以将提醒作为⼀个选项，与设置选项

同为列表的⼀项即可。

7.离线管理页

导航栏下部有⼀深⾊操作按钮集合区域，其中有⼀个或两个按钮，按钮排列没有与上⽅分组控件对齐。

8.“我喜欢的“页⾯

导航栏和分组控件之间有多余的深⾊区域，可能是为了区分，但是看起来并不是很习惯。

9.发现好友页

同“我喜欢的”页⾯相同，存在多余的区域，不仅是在导航栏下⽅，正⽂的左右两侧都有⼩部分的深⾊区域，搞不清楚是为了什么，不过和其他页

⾯也没有统⼀起来。

分组控件的图⽚通过彩⾊与⿊⽩来有效地告知⽤户当前的位置。底部⼀个类似⼴告的栏⽤于邀请微信好友，颜⾊鲜艳能吸引⽤户的注意。

当选择向⼀位联系⼈发送邀请时，显⽰的是⼀个⽩⾊背景的通知框且没有明显的边界，由于背景本来就是⽩⾊的，在通知框下移时能很清楚地看到

两块⽩布之间的相互运动，原因是⿊⾊透明保护纱消失地太快，通知框还没有离开屏幕。

10.发布回声页

页⾯很简洁，只由两个颜⾊深浅不同的按钮，⽤于分享和录⾳。通过视觉引导动效的左右，⽤户会感觉⾃⼰始终在同⼀个页⾯，如同操作⼀个

flash程序⼀样。

选中的按钮出奇地被改变为灰⽩⾊。

在⼿机上，电脑上传按钮是没有什么作⽤的，只提供教程，但是样式和⼿机上传⼀样，会有错误的引导。

录⾳功能很⽅便，⼀个按钮，⾼亮和⾮⾼亮表⽰开始和暂停。完成录⾳后继续完善相应资料即可发布。

11.弹幕播放页

该页以弹幕屏为主，底部始终有弹幕输⼊⽂本框，点击⽂本框后会显⽰发弹幕的时间点和弹幕预览效果，让⽤户直观地看到⾃⼰的弹幕将会是什么

样⼦。这样的特⾊设计让弹幕功能更加容易被⽤户记住和使⽤。

回声的进度条与回声的标题相结合，标题栏透明的背景就是进度条的空间。标题不够醒⽬，因为回声名是⽤户⽐较希望得到的信息，往往⼀进⼊这

个页⾯会先寻找标题（他们希望⾃⼰能掌控⾃⼰所做的事情），所以标题应该放在弹幕屏上部且更加醒⽬。

12.正在播放页⾯

圆形的封⾯会在播放时旋转，暂停后重置为正常⾓度，这⾥有个细节是⽤户重新点击播放是从原来的地⽅继续下去，那么如果不将封⾯的⾓度重

置，让它保持与播放的⼀致性应该会让⽤户觉得更合理⼀些。

点击分享出来的提⽰框周围有明显的阴影，增强了拟物化，这与ios9的设计规范不相符合，⽽与MaterialDesign设计规范相符。

点击离线下载，如果不是会员的话需要分享之后才能下载。购买会员的按钮被着重强调，鲜亮的颜⾊背景和按钮样式，相反取消按钮⽆背景⽆样

式，这是⼀般商业需求，希望⽤户注意到的是购买项。点击屏幕其他区域即可返回上⼀层，各个图标离开屏幕的时机和速度有所不同，有⼀定的视

觉效果。

切换播放模式时，没有告诉⽤户当前的模式名称，虽然有不同的图标，但是⼤多⽤户可能难于分清，能分清的⽤户也希望软件能快速告诉⾃⼰，那

么就⽆需思考。

七、其他

1.未考虑到有不少⽤户在晚上使⽤echo的场景，如睡觉前、熄灯后等，不能设置夜间模式，浅⾊的背景会给夜间使⽤的⽤户带来疲劳感。

2.个⼈中⼼页⾯和我的页⾯⼤部分内容重合，可以合并为⼀个页⾯、

⼋、总结

也许是我第⼀次太爱挑⽑病，或者是对⼀些设计没有很好的理解，感觉echo存在很多问题。我作为⼀个普通⽤户看到了⼀些存在的问题，觉得那

都是会存在的问题。整体在功能上的实现和逻辑并没有问题（除了注册），⽽且确实⾳乐弹幕功能很有特⾊，尤其是现在⽹络直播⾏业的兴起，弹

幕已经是⼀种⾮常成熟的技术和受⼈追捧的形式。

第⼀次发布图⽚没有经过调整，真的是太⼤了。。。。