交互设计作品案例分析-交互设计分享01丨以网易云音乐、豆瓣等App为例

尴尬的是，写完这篇文章后，我发现网易云音乐最近更新了7.0.0版本卡通形象，改动相当大。 右上角的“声波符号”已经不存在了，变成了一个带有进度条显示的圆形轨道盖，虽然这个比较形象，但我还是更喜欢原来的。 网易云音乐近年来发生了很多变化。 为了适应短视频时代，增加了视频模块。 整个app内容多了，但是变得复杂了，重点也被误导了。 现在网易云音乐对我来说只是一个感伤的应用程序。

另外，QQ音乐和虾米音乐在体验上不如网易云音乐，但也不是没有优点。 他们还有一些明亮的互动设计。

QQ音乐/滑动切换歌曲/

与网易云音乐右上角的“正在播放”入口不同，QQ音乐的播放状态入口位于页面底部。 单击播放按钮，轨道盖开始旋转。 我要提的不是这个，而是它可以通过左右滑动直接切换曲目，无需进入详情页。

/“正在播放”的缩略图界面始终固定/

当我点击其他页面时，整个页面展开为一个新的部分，但“正在播放”的缩略图界面仅向下移动到底部。 当我返回主页时，它直接向上移动并将模块列表带到底部。 出来，这样上下，给人一种顺畅的感觉。

虾米音乐正在播放界面

与QQ音乐类似，当你在播放页面向左或向右滑动时，进度条、暂停按钮、切歌按钮等基本按钮会被压缩下移，但仍然存在。 当你返回主页时，它们会浮起出现，给人一种流畅的感觉。

虾米音乐在交互上的创新主要体现在拖动进度条上。 考虑到手指可能会遮挡歌曲时间，在进度条黑色移动光标上方采用红色光标同步放大时间信息交互设计作品案例分析，方便准确定位。 其次，红色光标具有渐变样式，像光束一样，随着进度条拖动方向的变化而变化，灵活生动，充满乐趣。

而且虾米音乐在音乐信息界面和评论界面都实现了拖动进度条的功能，非常方便。

/变换选择/

当更改“发现”模块和“音乐圈”模块中的选择时，选择名称下的音乐频率线会动态波动。 这种带有音乐特征的符号增强了用户在体验过程中的归属感。

特殊之处在于，当没有音乐播放时，音乐频率线仅在选择改变时才会波动； 当前播放音乐时，即使不切换选择，频率线也始终保持波动。 这也变成静音状态，除了封面图像。 除了旋转与否之外，还有一个依据来判断当前是否有歌曲在播放。

除了这三款音乐应用之外，我还选择了以下我在日常使用的应用中注意到的交互设计。

豆瓣/星级/

当您对观看或收听的内容进行评分时，不同的星级会呈现不同的动态效果。 四颗星及以下将显示闪亮的星星。 除了闪亮的星星之外，五颗星也将附送礼物！

/“查看”内容的日期提醒/

当重新搜索已标记为“已观看”的内容时，我们可以看到一个光标醒目地提醒您观看日期，方便用户回忆。 同时，长长的电影评论和讨论从屏幕下方出现，符合用户观看内容后再次搜索的心态。

/ 书籍、视频、音频文件的各类分析/

在查看书籍、视频、音频文件的各种分析时交互设计作品案例分析，右上角的统计数据呈现出“翻阅日历”的动态效果，逐渐增加直至数字定格，给人一种“豆瓣陪你走过这些”的感觉。电影之旅”。 页面底部的类型分析条形图也呈现出日益动态的效果。

/喜欢更新/

当我喜欢别人的文章时，页面中央会出现一个喜欢的动态手势图标。 这种动态效果给我一种莫名的“酥”感。

彭多

这是一个记录日程的应用程序。 它充满乐趣，主要体现在其个性化的交互语言上。 它的交互设计自然也不会太差。 我主要想谈以下三点。

/同步刷新/

在多终端同时操作的情况下，需要同步的操作方法与几乎所有App都是一样的，都是下拉刷新。

好吧，我们尝试向下滚动，会出现一个倒置的猫头。 释放后，就是一个疯狂旋转的猫头。 是不是很幽默呢？ 这只猫就是这个app的logo图形，和网易云音乐首页刷新时是一样的。 标志动态有不同的方法，但目的相同。

/误删除后提示/

当你向右滑动对应的笔记时，一个“×”符号会从屏幕左侧快速滑到右侧。 它会停留在中间，摇晃、摇晃、再摇晃。 这个过程相当可爱，但在日常生活中并不少见。 当我们删除笔记时，底部终端会弹出提示“误删？给你一次机会，点我”。 个性十足，牢牢把握提示的互动性。

当然，您也可以在设置栏中直接恢复最近删除的笔记。 恢复后，会再次出现相同的提示，告诉你“删除的笔记又回来了”。

/桌面工具/

这么有趣的应用程序如果没有桌面小部件那就太遗憾了。 我们可以直接在小部件中查看已完成的任务。 检查完后，很快就会出现删除线和“√”。 已完成的任务也会自动下降到最后的位置，以便用户始终可以先看到未完成的任务。 已完成任务。

微信阅读/“发现”模块页码显示/

就像大多数平台每天都有推荐消息一样，在“发现”模块中，微信书友会推送自己的活动或者推荐读物等，当有未读内容时，会在页面右下角显示未读数量。 当我们开始向左滑动阅读时，剩余页面也会同步在右下角，给用户心理预知。

/ 疯狂提示可以免费获得无限卡或者购买无限卡/

当你很久没有打开微信阅读时，它总会给你几天无限量的卡片。 这时候任意一个页面都可以看到提示，可以说是非常简单明了。

而当您没有无限卡时，进入会员页面，无限卡福利将自动向上转移，为您提供多种购买计划，其中特价排名第一。 说实话，我并不讨厌这种推销方式，因为它清楚地展示了无限卡带来的福利，而不是像大多数平台那样关注会员价格。

/未读消息提示/

当当前有未读消息时，在其他页面上，我们可以看到“我”模块上的红点和数字，但当我们真正点击“我”模块时，会出现一个电子邮件风格的小标签，这是一个细节。 有点惊喜的是，它引导用户点击小标签就可以直接进入未读消息列表，而无需寻找未读消息在哪里。

/添加书架并点击书籍/

当您将一本书添加到书架时，您不仅会看到右下角快速更改为添加的样式，而且您还会在页面中央看到横幅提示。

打开或退出书籍时，模拟翻阅书籍的状态，给人一种真实感。

当点击从未读过的书籍时，页面还会收到“向左滑动开始阅读”的指示横幅吉祥物，引导用户阅读。

当然，它仍然不放过任何一个机会让你免费获得无限卡。 页面底部会提示您这本书值多少钱。 如果你有无限卡，可以免费阅读！ 可以说是费了很大的功夫。

总结

在写这篇文章的过程中，为了选出“幸运观众”，我重新体验了我日常使用的移动应用程序。 有些小的交互设计很容易被忽视或者没有什么新意，但有些却可以做到。 即使你每天都使用这个应用程序，它总是让你感到快乐。 这种心态甚至显得有一种“情人眼里出西施”的“变态意识”。 网易云音乐就像我的“初恋”，但良好的交互设计确实是一个定心剂，它抓住你就不会放手。

我的分享就到此为止。 如果你有什么让你印象深刻的交互设计，请在评论里告诉我，让我看看。 也许有一款应用可以帮助我找回第一次使用网易云音乐时感受到的“刺激”。

/ 自我介绍/

大洋鱼头

我是女性，内心性感幽默，喜欢流行音乐、电影和日本娱乐。 新媒体运营商是新人，还在摸索中。 前面的路还很长，但成功很快就会到来。

/ 团队介绍/

我们是一家专注于信息数据研发和互联网应用研发的互联网公司。 我们的核心服务目标是帮助企业级实体利用互联网信息化模式提升企业效率和互联网云方式全面数字化企业，针对小程序和PC端应用开发与集成两大核心需求提供全面解决方案媒体运营。 规划、运营、开发、执行所有整体解决方案并提供反馈。

​

作者、排版/大野鱼头