用户体验分析--echo回声

用户体验分析——echo回声

一、产品简介：

Echo回声是一款基于声音/音乐的的社交媒体型产品，独家首创3D音乐、弹幕评论和有声表情等特色功能，吸引大批年轻用户。

二、目标用户：

90/95后年轻人,学生，音乐爱好者，音乐制作人。

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

五、用户任务

 登录/注册任务

 寻找回声任务

 添加弹幕任务

 离线下载任务

 添加好友任务

 发布回声任务

 发布好友圈任务

 消费任务

1. 登录注册任务

点开echo进入登录界面，有社交账号登录和手机注册，最下面还有一行小字——“已有账号在此登录”，大概是echo的账号吧。我习惯上用微信登录，转到微信确认授权，进入主页。

2. 寻找回声任务

收听音乐当然是这款应用的主要功能，在首页中便是推荐，大概从

上到下浏览了一遍，然后点开一个感兴趣卡片后便能直接进入一个播放页面，并且有弹幕可以交流。之后想找一找乡村风格的音乐，点开放大镜到搜索页面，下面的今日热搜里没有我想要的，便在搜索框里输入，下方出来的有相关人、相关频道、相关专题、相关回声，在相关回声中选择一曲后，继续收听。

3. 添加弹幕任务

从echo介绍中了解到弹幕交流是特色，于是在回声播放页点击输入

弹幕，默认会显示我在几秒的时候输入评论，并且有弹幕的预览功能，加了几个特效之后很炫，点击确认发送，屏幕飘过我的弹幕。

4. 离线下载任务

对刚才的回声很感兴趣，决定下载下来晚上继续听，弹幕屏幕下面

有几个很小的字——“N次离线”，点击之后跳出页面，必须分享或者购买会员才能下载离线。我表示很无奈啊，还好微信里可以和自己发消息，分享给自己，我并不想转发每首歌给其他人，更不想因为一首歌还买个会员（个人想法）。分享后成功离线下载下来。

5. 添加好友任务

在发现好友页里，echo可以读取我的通讯录，里面有已经注册echo

的联系人并且可以邀请其他没注册的朋友来注册。通过完善个人资料，系统还会自动为我推荐可能认识的人。点击关注好友就能看到好友的日常动态。

6. 发布回声任务

在主页标签栏里有个logo，点开后显示两个操作，发布回声和发布

好友圈。点开发布回声，可以分享一首歌也可以现场录音上传，歌曲就在我的手机里，应该是直接分享吧。点开后有手机上传和电脑上传，点击手机上传，选取本地音乐上传。

7. 发布好友圈任务

点击发布好友圈，输入动态正文，添加了一首回声，一张图片，然

后点击发布。

8. 消费任务

由于发特效弹幕和离线下载都需要金币，我觉得买个会员。来到会

员中心，首先需要充值金币，又来到我的金币页面，点击充值，使用微信支付成功。

五、交互设计分析

1.登录界面

登录界面以简洁为主，从视觉上来看有三块区域：手机注册，社交

账号登录和echo账号登录，但是出乎意料的是echo账号登录的区域被作为最不重要的部分放在了页面底端且不引人瞩目。如果是应对第一次使用的用户，将用户注册着重点出并没有问题。但对于老用户，使用频率最高的应该是echo账号登录和社交账号登录，这两个区域应该着重点出。

点击屏幕其他任何区域，会直接免登录并进入主页，但并没有任何

暗示告诉我，这会是一个有效点击，用户会很困扰自己是怎么进入的，因为一般其他产品都是以一个明确的按钮提示用户直接进入，这与用户原有的习惯和心智模型不符合。而且这一设计容错率很低，我在十次登录界面的试验中，会有大概5次错点屏幕导致我进入主页，然后退出来继续登录。

注册页里点击不同的文本框，会弹出相应的键盘，很好地提高了用

户的输入效率。“发送验证码”按钮没有按钮样式，看起来更像是一句标签提醒，让用户必须去判断这几个字是不是可以点击，而不是一目了然地想去点击，增加了用户的学习压力。

注册不知道是不是存在bug，当我随便输入一个手机号（甚至随便一

串数字），然后点击发送验证码（成功了！），然后随便输入一个密码（1位数字！），然后点击注册（注册成功了！！我都没有输入验证码好吗！！）进入详细资料页面，只要写上一个未注册过的用户名便可以成功注册了。

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

没有手机号格式的检测，没有真实的验证码检测，没有密码的限制

保护（不一定是坏事，却不符合用户习惯）。

2.回声首页（推荐）

首页采用卡片分块式的布局，顶部导航栏和

内容区都添加了分段控件，适当地将导航扁平

化，减少用户达到目标所需要的点击数。页面

导航栏之下有两个回声推荐区域，一个是固定

的，一个是定时滚动的，两个相同类别的区块

应该合并，若出于重要性的考虑，在滚动区中

点出即可。

首页采用无限下拉刷新的形式，一直会舒刷

新推荐内容，能满足一部分喜欢刷的用户的需

求和无目标用户的需求。但是当使用这种模式

时，最好能设置一个悬浮的回到顶部按钮，当

用户想要重回顶部时可以不用再“无限上拉”。

标签栏相当的简洁，仅仅3个标签，左右各

为动态和回声，中间的logo点开后是发布功能

的集合。

推荐回声卡片的右上角标有该回声的热度，

用户可以从这一直观信息中找到目标。 这一页面的主要特色是利用了多级分段控件，将导航极度扁平化，减少了用户达到自己的点击次数，也由此简化了标签栏。 3.回声首页（发现） 该页的三个区块的分界并不是十分清晰，给人过于统一的感觉，缺少吸引眼球的元素。 Echo专题区块在该页面的最下部分，区块的显示内容为一张海报图，所以采取了无限下拉刷新的方式，同样没有回到顶部按钮。 4.回声主页（名人） 该页面一眼放去是密密麻麻的小字和圈圈圈，内容过于密集，且显示了 很多用户在寻找时并不需要的信息，导致页面满溢。 点击关注按钮，关注成功后颜色稍稍变浅，这与用户的心智模型不相符合。用户的理解为：当我不关注时，它的颜色应该不太引起我的注意；当我确认关注它之后，我希望我能一下子在众多信息中看到它。 5.动态页

该页条理很简单清晰，只由一条条动态从上到

下分布，动态里包含正文和回声播放功能。自己的

动态是可以删除的，但是删除按钮的却没有按钮样

式，与旁边的发布时间样式相同，是典型的注释样

式，用户很难意识到这是可以点击的区域，增加了

用户的思考。用户可能会试一试这个删除是否有

用，但由于字体相当小可能会造成用户没有点击到

有效区域，这样用户就认为这是个无效的按钮，增

加了用户的疑惑。

6.“我的”页面

导航栏的背景变为透明，配合虚化的照片背景。页

面中的条目以列表形式展开，并且进行了分组，但是

分组的内容有点不太理想。例如“关于我们”、“意见

反馈”、“版本说明”等不管是初级用户还是专家用户

都很少用到的选项没有和设置等较为常用的选项分

开。这样使用户会将这些本不重要的选项看得和设置

一样重要，因为用户会认为物理位置在旁边的选项是

同一类内容。（小bug：两个选项“订阅的频道”、“我

喜欢的”长按后颜色不会变深，而其他选项都会，缺

乏一致性。）

头像下方的是提醒功能分组控件，点击三个中的任

意一个都将进入提醒主页面，提醒主页面也有一个分

组控件，但是高亮动效都是从第一个分组转移到选中

的分组，让我觉得“我的”页面的分组控件是多余的，

两个分组控件来实现一个功能是浪费。完全可以将提醒作为一个选项，与设置选项同为列表的一项即可。

7.离线管理页

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

8.“我喜欢的“页面

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

9. 发现好友页

同“我喜欢的”页面相同，存在多余的区域，

不仅是在导航栏下方，正文的左右两侧都有小部分

的深色区域，搞不清楚是为了什么，不过和其他页

面也没有统一起来。

分组控件的图片通过彩色与黑白来有效地

告知用户当前的位置。底部一 个类似广告

的栏用于邀请微信好友，颜色鲜艳能吸引用户的注

意。

当选择向一位联系人发送邀请时，显示的是一

个白色背景的通知框且没有明显的边界，由于背景

本来就是白色的，在通知框下移时能很清楚地看到

两块白布之间的相互运动，原因是黑色透明保护纱

消失地太快，通知框还没有离开屏幕。

10. 发布回声页

页面很简洁，只由两个颜色深浅不同的按钮，用于分享和录音。通过视觉引导动效的左右，用户会感觉自己始终在同一个页面，如同操作一个flash程序一样。 选中的按钮出奇地被改变为灰白色。

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

录音功能很方便，一个按钮，高亮和非高亮表示开始和暂停。完成录音后继续完善相应资料即可发布。

11. 弹幕播放页

该页以弹幕屏为主，底部始终有弹幕输入文本

框，点击文本框后会显示发弹幕的时间点和弹幕预

览效果，让用户直观地看到自己的弹幕将会是什么

样子。这样的特色设计让弹幕功能更加容易被用户

记住和使用。

回声的进度条与回声的标题相结合，标题栏透明

的背景就是进度条的空间。标题不够醒目，因为回

声名是用户比较希望得到的信息，往往一进入这个

页面会先寻找标题（他们希望自己能掌控自己所做

的事情），所以标题应该放在弹幕屏上部且更加醒

目。

12. 正在播放页面

圆形的封面会在播放时旋转，暂停后重置为正常

角度，这里有个细节是用户重新点击播放是从原来

的地方继续下去，那么如果不将封面的角度重置，

让它保持与播放的一致性应该会让用户觉得更合理

一些。

点击分享出来的提示框周围有明显的阴影，增强

了拟物化，这与ios9的设计规范不相符合，而与

Material Design设计规范相符。

点击离线下载，如果不是会员的话需要分享之后

才能下载。购买会员的按钮被着重强调，鲜亮的颜

色背景和按钮样式，相反取消按钮无背景无样式，

这是一般商业需求，希望用户注意到的是购买项。

点击屏幕其他区域即可返回上一层，各个图标离开

屏幕的时机和速度有所不同，有一定的视觉效果。

切换播放模式时，没有告诉用户当前的模式名称，虽然有不同的图标，但是大多用户可能难于分清，能分清的用户也希望软件能快速告诉自己，那么就无需思考。

六、其他

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

2. 个人中心页面和我的页面大部分内容重合，可以合并为一个页面、

七、总结

也许是我第一次太爱挑毛病，或者是对一些设计没有很好的理解，感觉echo存在很多问题。我作为一个普通用户看到了一些存在的问题，觉得那都是会存在的问题。整体在功能上的实现和逻辑并没有问题（除了注册），而且确实音乐弹幕功能很有特色，尤其是现在网络直播行业的兴起，弹幕已经是一种非常成熟的技术和受人追捧的形式。