放松睡眠ASMR应用设计过程分享

你有听过ASMR 吗？

ASMR是Autonomous Sensory Meridian Response 的简称，中文翻译「颅内高潮」，听起来很浮夸，但我觉得就跟白噪音差不多啦，就是可以让人专心跟放松的声音。

会接触到ASMR 是因为我很容易失眠，常常躺在床上要度过「睡着」这个阶段，总是觉得很无聊就开始想事情，或者看Youtube 直到昏睡。刚接触ASMR 的时候很有效，找到自己喜欢的Trigger 可以很快睡死，隔天早上有许久没有感受到的充分休息的感觉，对我蛮有效的。

专有名词解释：

ASMRist：就是Artist，创作ASMR 的人。

Trigger：对你有感的声音。

Love ASMR重新设计前

Love ASMR 是我从刚接触ASMR 就持续使用到现在的App，提供很基本但够用的功能、完全免费，App 内有自己的社群论坛让大家讨论、请求新的Artist 的功能，开发者会亲自回复大家的疑问和请求，是很用心的开发者！但也许是没有时间维护了吧，最后一次更新是2016 年。

一直以来最希望新增的功能是「睡眠定时器」，因为影片常常都1 个小时以上，可能中间我就睡着了，不需要全部播完，除了省电最重要的是希望能保护耳朵，毕竟ASMR 要戴着耳机听才有效果。

所以在一个又失眠的夜晚，想着这个需求就更睡不着了，于是有了这个Redesign 小练习，当练练手感，也作为纪念这个很棒的App 吧！

定义目标

1、主要是重新设计播放器页面，加上睡眠定时器功能。

2、重新设计界面，因为原本只支持Android，这次想用苹果的HIG规范来设计，给自己一个读HIG 的理由。

3、想练习许久没用的Principle！

4、杀时间。（硬要找事情做）

附带条件：原始App 是嵌入Youtube ，开发者当初做这个选择应该是为了省钱，不想花钱买空间存影片吧，希望Redesign 可以更贴近现实条件，所以会保留这项限制。

设计流程

前期研究

一、产品特性

想一下产品「在什么情况被使用？」、「目的是什么？」之类的，例如是在黑暗中使用，色系就不要太白会刺眼之类的。

经常是在黑暗中使用的，睡前、需要放松的时候听

使用者通常会戴耳机，耳机比较能听出来自3Dio 麦克风的效果

使用者对于追随的Artist 忠诚度高，因为内容风格通常不会差太多

影片内容有时会长达1~2 小时，中间有不同的Trigger 片段

二、使用者评价

使用App Annie 免费版查看近90 天内的评价，但大多是可能年久失修的播放问题，最下面的评价有提到「睡眠定时器」，但评价数量太少没有很大帮助。

可能是没有维护的关系，近期的评价几乎都是在说连线问题，最后一个有提到Sleep Timer。

还好在有内建社群论坛，里面也有不少关于功能上的讨论。

三、相似产品

来看看有没有其他产品已经做到我想要的功能了呢，在搜寻的时候我不只是搜寻“ASMR App”，也用“Sound”、”Podcast”、”Music” 等声音相关的关键字搜寻App，一来是ASMR 专门App 很少，这样可以得到更多结果，二来是可以借镜类似经验。

以下是我觉得还不错的参考对象：

Tingles

TED

潮汐

Headspace

StreetVoice

Spotify

Tingles

在搜寻ASMR App 时就找到了这个，是目前看过最棒的ASMR 专门App，也有我想要的睡眠定时器，界面设计也很棒，首页和Spotify 很像，帮助使用者发掘新内容、追踪Artist 。

优点：

1.最漂亮的ASMR app。

2.很完整的艺术家回馈机制，粉丝可以订阅方式赞助艺术家来取得独家内容、聊天室权限。

3.提供很完整的播放器功能，有睡眠定时器、离线下载、建立多个播放清单（Love ASMR 只能建立一个）。

这个App 对我有一点贵，要取得完整功能需订阅一个月和Spotfiy 差不多的钱，免费版就可以使用到睡眠定时器了，更进阶的功能我不需要，但也许重度听众会喜欢吧。

TED

我记得TED App 有一个很棒的功能，你只要输入你想听什么、有多少时间，5 分钟还是半小时，App 就会帮你安排符合主题和时间长度的内容！这超酷的，可是最新版本中找不到这样的功能了，不知道为什么?

Spotify / StreetVoice / Castbox

音乐串流产品其实和ASMR 产品蛮像的，听众会有特别关注的歌手（艺术家），偶尔也会想看看新人创作；会有特别喜好的乐风（Trigger）；在播放器的设计，StreetVoice 和Spotify 都有提供睡眠定时器。

ASMR 影片通常会有影片介绍文字，用心的创作者或者热心粉丝还会标记时间戳记方便大家跳到喜欢的部份，这些是必要存在但很占宝贵的版面空间，Spotify 的Behind the Lyrics 功能可以作为参考。

心得整理：

内容大于功能

Tingle是很完整的ASMR App，免费版就有Sleep Timer功能，这点就让我差点跳槽，但缺少许多我有在追踪的艺术家，没有想看的内容就很难让使用者转移平台，在Tingle的Play Store评价也看到有人反应「没有喜欢的艺术家」这点，但我想它提供的艺术家＆粉丝互惠机制也许未来会慢慢吸引更多艺术家进驻吧。

用熟悉内容发掘新内容

ASMR的「追踪艺术家」功能很重要，因为通常艺术家自己的影片风格不会差太多，产出的内容风格有高机率是有追踪的使用者喜欢的，我希望让使用者快速找到自己喜欢的内容（在半夜盯着发光的萤幕找不到想看的内容很痛苦），也鼓励他去发掘新内容，更深入的使用服务，因此Spotify、StreetVoice首页设计是挺不错的参考对象。

播放器的设计

除了考虑基本控制元件的布局，像是StreetVoice需要提供歌词、歌曲简介，它们的做法是用Tabs的方式，但是如果要用Youtube的话，不太确定能不能做到，会不会滑到别的Tab就会中断播放？技术层面不是很理解，似乎Spotify的延伸页面作法更好，在Castbox也看到用Overlay方式来放影片描述文字，不看的时候滑掉就不会占用播放元件的空间！这点挺好的。

功能想法与流程规划

一、草稿

用纸笔做简单发想是我觉得前期最轻松无障碍的方式，用软件会觉得卡卡的，用纸笔想到什么就画下来写下来。

丑丑的纸笔发散思维阶段，写上每个想到的功能和需求，并思考可行性。

二、Mindmap

发想好功能以后我用MindNode 排出每个页面和功能。

Mindmap

三、Functional Map

跟上面的Mindmap 很像但是可以大概排练一下每个功能点下去连到哪里。

四、Wireframe

用灰阶色系来确认画面的「重点」是什么，画面上较显眼的元件是希望使用者容易注意到的东西，例如播放器页面是影片最重要，但使用者启用了Get Stream 功能后，弹出来的播放控制元件的重量又会比标题文字重。

设计阶段

流程、功能规划好，终于能碰设计的部分啦。

一、制定设计规范

Style Guideline

色彩计画：定义主色、副色、两种辅助色，沿用了Love ASMR的黄色保留产品辨识度，而深色适合在黑暗的环境中观看，因此也保留。

字体：借这个项目想更加熟悉iOS设计规范，字体设定基本上都参考HIG。

二、界面设计

前面的Wireframe其实把界面都差不多画完了，在设计阶段除了玩填色游戏以外，过程中也发现一些互动上的Bug或者缺画面、资料而做了一些界面上的更动，有可能是我偷懒没画Flow Chart才漏一堆画面吧！

不想跟这个人一样请读：

1. Flow Chart和UI Flow

2. UI设计流程

「如果你没有放倾斜45° 的Mockup，你的设计就不算完成。」（没有这回事）

这个配色越看越觉得很像某知名线上影音服务耶…（误）

三、原型制作

本来说想要练Principle 的，结果我的试用期刚好到期了Orz，就先用Marvel 做个简单的Prototype 吧！

首页介绍

时间戳记

结语

写这篇文章除了纪录练习过程，也希望通过分享流程让还没有作品不知道怎么下手的初学者有个参考依据，我不太鼓励做DailyUI，因为产品不会是单个画面而已，要考虑每个画面前后会出现什么、产品目标是什么、目标群众是谁等各种因素都会让即使同样是影音产品却有不太一样的流程和外观，很推荐去Redesign你最常用的App、网站当练习，因为你常用势必会更了解产品脉络，在设计界面也会比单纯一个题目给你更有心得，如果当下真的没有想法，我会推荐去做UpLab Challenge，它给的题目比较完整而且会提供参考给你，可以跟其他设计师一起比较，还有机会得奖呢！

原创：JasonCK

原文链接：https://medium.com/as-a-product-designer/loveasmr-redesign-c42226e5a3d1