连续周五周六周日周一加班之后的周二，还算准时的下班回家，给自己炒了一盘混搭特色的菜。就着配饭视频，吃的肚皮圆滚滚，再来个饭后大苹果。这大概就是我的不加班日常。

饭后看到最美应用推荐了——余音，一款音乐App，被它简洁的界面吸引，决定下载玩玩儿。主打功能是每期歌单，配上文艺唯美范儿的图片和一段文艺。

翻到一段感兴趣的文字，开始播放这期的歌曲，放下手机专注品着旋律、听着歌词，不知是被不算华丽的声音还是那质朴的歌词感动，就这样陷入久违的伤感情绪里。或许余音就是这样，每期歌单就是一种情绪，而我们可以跟随它去释放或者说缅怀这种情绪。

伤感终究是一时的，抱着一些理性，继续分拆这款App的交互设计。

一、功能层级结构

余音，有两种视图——音（每期歌单）、乐（每期乐人），二者之间可相互跳转。

在音、乐的主界面，分别展示最新一期的歌单/乐人。顶部导航栏的右上角均有三个图标，其中前两个icon对应的都是已下载的歌单、播放界面。点击最后一个icon，可进入列表界面，分别对应往期歌单列表、往期乐人列表。层级结构如下图：

二、交互分析

1、音-每期歌单

每一期歌单包含的信息有：配图、与主题相应的一段文字、歌曲列表

交互细节：

1）首屏内容第一次打开余音，那一期的歌单首屏界面上 只显示了配图、与主题相应的一段文字，没看到歌曲列表。这个时候我有点蒙：不是音乐APP么，怎么没看到歌。不过界面上有个较弱的文字显现出来，提示我左滑可以看下一期，按着这个提示操作，发现下一期歌单首屏界面底部显示了带有序号1的歌曲，我才意识到可以上滑看这个歌单的更多内容。

后来我想，这样的学习成本需要降低一些么？如果能够每一期歌单的首屏，都能看到至少一首歌曲，或许能缓解这种问题，不过这样对文案的长度会有限制。

2）翻页手势前面提到，在第一次打开余音时，会有较弱的文字提示“左滑看上一期”。左右滑动的翻页手势操作，较为常见，学习成本不算高，不过在第一次使用时提示一下也很有必要。

3）歌曲列表播放中的歌曲，文字颜色和图标来标示

2、乐-每期乐人

采用图文、音乐混排的方式，来介绍音乐人。他们做着原创的音乐、相对小众，通过这样的介绍可以了解他们的故事，由此可以看出余音的情怀。

交互细节：

1）播放文章中的歌曲基本上每篇只配一首歌曲，可直接播放，播放完毕之后停止，没有下一首接着播，这样在听歌的流畅性上不够好。

2）进入、离开此界面时的转场动效从音-每期歌单视图，切换至乐-每期乐人视图，采用顺时针翻转动效；离开乐视图、回到音视图，采用的是逆时针翻转动效，整体效果前后一致。

3、往期歌单列表、乐人列表

1. 列表内容往期歌单、乐人的列表，包含了几个信息：序号、标题、内容的第一行文字，按倒叙排列
2. 下拉刷新显示最后更新的时间，这个时间可以用来考虑是否继续刷新、也可以判断刚刚的刷新是否成功。
3. 离开列表页点击顶部透明度更高的位置，可隐藏列表界面。此时有一个舒缓的动效，是列表界面会向中心逐渐收拢消失。

4、播放界面

1）封面唱片图片+留声机圆盘的搭配，显得挺有格调

2）播放、暂停、播放进度在界面底部用最明显的圆形图标来表示播放、暂停按钮，播放进度也展示在此按钮上，这种表示方式直接、明显、节约空间。

方式2的缺点是，用户只是尝试左右滑动、没有完全切换至上一首/下一首歌曲，再自动回到当前歌曲时，仍然会重新开始播放（即使滑动幅度很小）。当用户只是在探索操作方式、或者偷瞄一眼了解下一首歌曲时什么时，这种灵敏的处理方式就太坑了。

4）切换播放模式默认随机播放，可依次切换至顺序播放、单曲播放。

5）单曲离线余音将单曲离线功能藏的比较深，点击icon “…”才能展示。或许可以拿出来更突出一些？还是说为了让界面简洁，不得不收起来？

6）分享支持微信好友、朋友圈两种方式。

7）离开播放界面与在往期列表界面一样，可以点击顶部透明度较高的矩形区域，来离开播放界面。

5、已下载的歌单

1）编辑歌单，目前只支持删除歌曲

三、设计模式和设计原则总结

1、操作反馈提示

余音的反馈提示采用在顶部覆盖导航栏的方式。前几周分享了一篇《移动应用反馈提示的几种方式》，感兴趣的朋友可前往查看。

2、一致性的设计原则

• 转场动效一致
• 离开浮层界面的操作方式一致
• 列表中当前播放歌曲/歌单/乐人的显示样式一致

四、最后

简洁的设计，通常会增加学习成本，如果做到平衡很难。见识更多优秀的设计，才能获取更多的灵感，共勉之！

#专栏作家#

青溪Joanna，微信公众号-青溪札记（qingxizhaji），交互设计师一枚，喜欢体验各种App，关注社交、在线旅游、O2O、工具类产品；擅长需求分析、交互设计，有一定前端开发经验；业余时间喜欢网球、ukulele、简笔画，正在努力攒技能。

本文原创发布于人人都是产品经理，未经许可，不得转载。