连续周五周六周日周一加班之后的周二，还算定时的放工回家，给自己炒了一盘混搭特色的菜。就着配饭视频，吃的肚皮圆滚滚，再来个饭后大苹果。这大概便是我的不加班日常。
饭后看到最美运用推举了——余音，一款音乐App，被它简洁的界面吸引，决定下载玩玩儿。主打功能是每期歌单，配上文艺唯美范儿的图片和一段文艺。
翻到一段感兴趣的笔墨，开始播放这期的歌曲，放下手机专注品着旋律、听着歌词，不知是被不算华美的声音还是那朴实的歌词冲动，就这样陷入久违的伤感情绪里。或许余音便是这样，每期歌单便是一种感情，而我们可以跟随它去开释或者说思念这种感情。
伤感究竟是一时的，抱着一些理性，连续分拆这款App的交互设计。
一、功能层级构造
余音，有两种视图——音（每期歌单）、乐（每期乐人），二者之间可相互跳转。
在音、乐的主界面，分别展示最新一期的歌单/乐人。顶部导航栏的右上角均有三个图标，个中前两个icon对应的都是已下载的歌单、播放界面。点击末了一个icon，可进入列表界面，分别对应往期歌单列表、往期乐人列表。层级构造如下图：
二、交互剖析1、音-每期歌单
每一期歌单包含的信息有：配图、与主题相应的一段笔墨、歌曲列表
交互细节：
1）首屏内容第一次打开余音，那一期的歌单首屏界面上 只显示了配图、与主题相应的一段笔墨，没看到歌曲列表。这个时候我有点蒙：不是音乐APP么，怎么没看到歌。不过界面上有个较弱的笔墨显现出来，提示我左滑可以看下一期，按着这个提示操作，创造下一期歌单首屏界面底部显示了带有序号1的歌曲，我才意识到可以上滑看这个歌单的更多内容。
为什么我没有第一韶光反应到可以上滑呢？可能有几个缘故原由：
– 配图和那段笔墨搭配排版恰好，界面上没有其他任何元素提醒我还有更多内容在界面下方；
– 左滑看上一期的提醒笔墨吸引了我的把稳力，无暇想其他
后来我想，这样的学习本钱须要降落一些么？如果能够每一期歌单的首屏，都能看到至少一首歌曲，或许能缓解这种问题，不过这样对文案的长度会有限定。
2）翻页手势前面提到，在第一次打开余音时，会有较弱的笔墨提示“左滑看上一期”。旁边滑动的翻页手势操作，较为常见，学习本钱不算高，不过在第一次利用时提示一下也很有必要。
3）歌曲列表播放中的歌曲，笔墨颜色和图标来标示
2、乐-每期乐人
采取图文、音乐混排的办法，来先容音乐人。他们做着原创的音乐、相对小众，通过这样的先容可以理解他们的故事，由此可以看出余音的情怀。
交互细节：
1）播放文章中的歌曲基本上每篇只配一首歌曲，可直接播放，播放完毕之后停滞，没有下一首接着播，这样在听歌的流畅性上不足好。
如何办理播放流畅性的问题呢？首先考虑用户播放文章先容歌曲的场景：
– 对新手用户，刚利用余音，看到有音乐人的先容，可能会按照顺序浏览、有可能挑选感兴趣的名字看他得先容。用户看到一篇文章中的A歌曲，点击播放；看完又去看另一篇文章，这个时候他可能想连续播放A歌曲，将另一篇文章中的B歌曲稍候播放；也可能想直接切换播放B歌曲。
– 对老用户，更关注最新的音乐人先容，可能只是播放这一首歌曲，播放歌曲时可能去坐别的事情，过了良久才意识到歌曲已停滞播放。
根据这两种场景，想到两种办理办法：
– 供应插入播放行列步队的功能，在当前播放歌曲的下一首（优先级低）
2）进入、离开此界面时的转场动效从音-每期歌单视图，切换至乐-每期乐人视图，采取顺时针翻迁徙改变效；离开乐视图、回到音视图，采取的是逆时针翻迁徙改变效，整体效果前后同等。
3、往期歌单列表、乐人列表
1）列表内容往期歌单、乐人的列表，包含了几个信息：序号、标题、内容的第一行笔墨，按倒叙排列
2）下拉刷新显示末了更新的韶光，这个韶光可以用来考虑是否连续刷新、也可以判断刚刚的刷新是否成功。
3）离开列表页点击顶部透明度更高的位置，可隐蔽列表界面。此时有一个舒缓的动效，是列表界面会向中央逐渐收拢消逝。
4、播放界面
1）封面唱片图片+留声机圆盘的搭配，显得挺有格调
2）播放、停息、播放进度在界面底部用最明显的圆形图标来表示播放、停息按钮，播放进度也展示在此按钮上，这种表示办法直接、明显、节约空间。
3）切换歌曲
办法1：点击向右的箭头（可见的操作办法）
办法2：旁边滑动切换下一首、上一首歌曲（不可见的操作办法，但是与主界面的切换一贯，学习起来也搞笑）
办法2的缺陷是，用户只是考试测验旁边滑动、没有完备切换至上一首/下一首歌曲，再自动回到当前歌曲时，仍旧会重新开始播放（纵然滑动幅度很小）。当用户只是在探索操作办法、或者偷瞄一眼理解下一首歌曲时什么时，这种灵敏的处理办法就太坑了。
4）切换播放模式默认随机播放，可依次切换至顺序播放、单曲播放。
5）单曲离线余音将单曲离线功能藏的比较深，点击icon “…”才能展示。或容许以拿出来更突出一些？还是说为了让界面简洁，不得不收起来？
6）分享支持微信好友、朋友圈两种办法。
7）离开播放界面与在往期列表界面一样，可以点击顶部透明度较高的矩形区域，来离开播放界面。
5、已下载的歌单
1）编辑歌单，目前只支持删除歌曲
办法1：
在歌曲所在行，左滑操作，即可在右侧显示“删除”按钮，再次点击即可删除。删除过程有一个平滑的动效，该歌单所在行从下向上逐渐消逝。
特点是操作高效，缺陷是交互操作办法不可见，如果用户对iOS较为熟习，通过摸索可创造。
办法2：
点击编辑icon，每个歌曲前面显示“-”icon，点击此icon，显示删除图标，点击即可删除。
这种办法，编辑icon处于较明显的位置，随意马虎吸引用户的把稳力去点击摸索其浸染。它的缺陷是操作步骤更多，不过可以与办法1形成互补。
三、设计模式和设计原则总结1、操作反馈提示
余音的反馈提示采取在顶部覆盖导航栏的办法。前几周分享了一篇《移动运用反馈提示的几种办法》，感兴趣的朋友可前往查看。
2、同等性的设计原则转场动效同等离开浮层界面的操作办法同等列表中当前播放歌曲/歌单/乐人的显示样式同等
四、末了简洁的设计，常日会增加学习本钱，如果做到平衡很难。见识更多精良的设计，才能获取更多的灵感，共勉之！
作者：青溪Joanna
来源：青溪 札记
原文地址:http://jinjuan.me/app-yuyin/?utm_source=tuicool
