你有聽過ASMR 嗎？

ASMR是Autonomous Sensory Meridian Response 的簡稱，中文翻譯「顱內(nèi)高潮」，聽起來很浮夸，但我覺得就跟白噪音差不多啦，就是可以讓人專心跟放松的聲音。

會接觸到ASMR 是因為我很容易失眠，常常躺在床上要度過「睡著」這個階段，總是覺得很無聊就開始想事情，或者看Youtube 直到昏睡。剛接觸ASMR 的時候很有效，找到自己喜歡的Trigger 可以很快睡死，隔天早上有許久沒有感受到的充分休息的感覺，對我蠻有效的。

專有名詞解釋：

ASMRist：就是Artist，創(chuàng)作ASMR 的人。

Trigger：對你有感的聲音。

Love ASMR重新設(shè)計前

Love ASMR 是我從剛接觸ASMR 就持續(xù)使用到現(xiàn)在的App，提供很基本但夠用的功能、完全免費，App 內(nèi)有自己的社群論壇讓大家討論、請求新的Artist 的功能，開發(fā)者會親自回復(fù)大家的疑問和請求，是很用心的開發(fā)者！但也許是沒有時間維護了吧，最后一次更新是2016 年。

一直以來最希望新增的功能是「睡眠定時器」，因為影片常常都1 個小時以上，可能中間我就睡著了，不需要全部播完，除了省電最重要的是希望能保護耳朵，畢竟ASMR 要戴著耳機聽才有效果。

所以在一個又失眠的夜晚，想著這個需求就更睡不著了，于是有了這個Redesign 小練習(xí)，當(dāng)練練手感，也作為紀(jì)念這個很棒的App 吧！

定義目標(biāo)

1、主要是重新設(shè)計播放器頁面，加上睡眠定時器功能。

2、重新設(shè)計界面，因為原本只支持Android，這次想用蘋果的HIG規(guī)范來設(shè)計，給自己一個讀HIG 的理由。

3、想練習(xí)許久沒用的Principle！

4、殺時間。（硬要找事情做）

附帶條件：原始App 是嵌入Youtube ，開發(fā)者當(dāng)初做這個選擇應(yīng)該是為了省錢，不想花錢買空間存影片吧，希望Redesign 可以更貼近現(xiàn)實條件，所以會保留這項限制。

設(shè)計流程

前期研究

一、產(chǎn)品特性

想一下產(chǎn)品「在什么情況被使用？」、「目的是什么？」之類的，例如是在黑暗中使用，色系就不要太白會刺眼之類的。

經(jīng)常是在黑暗中使用的，睡前、需要放松的時候聽

使用者通常會戴耳機，耳機比較能聽出來自3Dio 麥克風(fēng)的效果

使用者對于追隨的Artist 忠誠度高，因為內(nèi)容風(fēng)格通常不會差太多

影片內(nèi)容有時會長達(dá)1~2 小時，中間有不同的Trigger 片段

二、使用者評價

使用App Annie 免費版查看近90 天內(nèi)的評價，但大多是可能年久失修的播放問題，最下面的評價有提到「睡眠定時器」，但評價數(shù)量太少沒有很大幫助。

可能是沒有維護的關(guān)系，近期的評價幾乎都是在說連線問題，最后一個有提到Sleep Timer。

還好在有內(nèi)建社群論壇，里面也有不少關(guān)于功能上的討論。

三、相似產(chǎn)品

來看看有沒有其他產(chǎn)品已經(jīng)做到我想要的功能了呢，在搜尋的時候我不只是搜尋“ASMR App”，也用“Sound”、”Podcast”、”Music” 等聲音相關(guān)的關(guān)鍵字搜尋App，一來是ASMR 專門App 很少，這樣可以得到更多結(jié)果，二來是可以借鏡類似經(jīng)驗。

以下是我覺得還不錯的參考對象：

Tingles

TED

潮汐

Headspace

StreetVoice

Spotify

Tingles

在搜尋ASMR App 時就找到了這個，是目前看過最棒的ASMR 專門App，也有我想要的睡眠定時器，界面設(shè)計也很棒，首頁和Spotify 很像，幫助使用者發(fā)掘新內(nèi)容、追蹤Artist 。

優(yōu)點：

1.最漂亮的ASMR app。

2.很完整的藝術(shù)家回饋機制，粉絲可以訂閱方式贊助藝術(shù)家來取得獨家內(nèi)容、聊天室權(quán)限。

3.提供很完整的播放器功能，有睡眠定時器、離線下載、建立多個播放清單（Love ASMR 只能建立一個）。

這個App 對我有一點貴，要取得完整功能需訂閱一個月和Spotfiy 差不多的錢，免費版就可以使用到睡眠定時器了，更進(jìn)階的功能我不需要，但也許重度聽眾會喜歡吧。

TED

我記得TED App 有一個很棒的功能，你只要輸入你想聽什么、有多少時間，5 分鐘還是半小時，App 就會幫你安排符合主題和時間長度的內(nèi)容！這超酷的，可是最新版本中找不到這樣的功能了，不知道為什么?

Spotify / StreetVoice / Castbox

音樂串流產(chǎn)品其實和ASMR 產(chǎn)品蠻像的，聽眾會有特別關(guān)注的歌手（藝術(shù)家），偶爾也會想看看新人創(chuàng)作；會有特別喜好的樂風(fēng)（Trigger）；在播放器的設(shè)計，StreetVoice 和Spotify 都有提供睡眠定時器。

ASMR 影片通常會有影片介紹文字，用心的創(chuàng)作者或者熱心粉絲還會標(biāo)記時間戳記方便大家跳到喜歡的部份，這些是必要存在但很占寶貴的版面空間，Spotify 的Behind the Lyrics 功能可以作為參考。

心得整理：

內(nèi)容大于功能

Tingle是很完整的ASMR App，免費版就有Sleep Timer功能，這點就讓我差點跳槽，但缺少許多我有在追蹤的藝術(shù)家，沒有想看的內(nèi)容就很難讓使用者轉(zhuǎn)移平臺，在Tingle的Play Store評價也看到有人反應(yīng)「沒有喜歡的藝術(shù)家」這點，但我想它提供的藝術(shù)家＆粉絲互惠機制也許未來會慢慢吸引更多藝術(shù)家進(jìn)駐吧。

用熟悉內(nèi)容發(fā)掘新內(nèi)容

ASMR的「追蹤藝術(shù)家」功能很重要，因為通常藝術(shù)家自己的影片風(fēng)格不會差太多，產(chǎn)出的內(nèi)容風(fēng)格有高機率是有追蹤的使用者喜歡的，我希望讓使用者快速找到自己喜歡的內(nèi)容（在半夜盯著發(fā)光的螢?zāi)徽也坏较肟吹膬?nèi)容很痛苦），也鼓勵他去發(fā)掘新內(nèi)容，更深入的使用服務(wù)，因此Spotify、StreetVoice首頁設(shè)計是挺不錯的參考對象。

播放器的設(shè)計

除了考慮基本控制元件的布局，像是StreetVoice需要提供歌詞、歌曲簡介，它們的做法是用Tabs的方式，但是如果要用Youtube的話，不太確定能不能做到，會不會滑到別的Tab就會中斷播放？技術(shù)層面不是很理解，似乎Spotify的延伸頁面作法更好，在Castbox也看到用Overlay方式來放影片描述文字，不看的時候滑掉就不會占用播放元件的空間！這點挺好的。

功能想法與流程規(guī)劃

一、草稿

用紙筆做簡單發(fā)想是我覺得前期最輕松無障礙的方式，用軟件會覺得卡卡的，用紙筆想到什么就畫下來寫下來。

丑丑的紙筆發(fā)散思維階段，寫上每個想到的功能和需求，并思考可行性。

二、Mindmap

發(fā)想好功能以后我用MindNode 排出每個頁面和功能。

Mindmap

三、Functional Map

跟上面的Mindmap 很像但是可以大概排練一下每個功能點下去連到哪里。

四、Wireframe

用灰階色系來確認(rèn)畫面的「重點」是什么，畫面上較顯眼的元件是希望使用者容易注意到的東西，例如播放器頁面是影片最重要，但使用者啟用了Get Stream 功能后，彈出來的播放控制元件的重量又會比標(biāo)題文字重。

設(shè)計階段

流程、功能規(guī)劃好，終于能碰設(shè)計的部分啦。

一、制定設(shè)計規(guī)范

Style Guideline

色彩計畫：定義主色、副色、兩種輔助色，沿用了Love ASMR的黃色保留產(chǎn)品辨識度，而深色適合在黑暗的環(huán)境中觀看，因此也保留。

字體：借這個項目想更加熟悉iOS設(shè)計規(guī)范，字體設(shè)定基本上都參考HIG。

二、界面設(shè)計

前面的Wireframe其實把界面都差不多畫完了，在設(shè)計階段除了玩填色游戲以外，過程中也發(fā)現(xiàn)一些互動上的Bug或者缺畫面、資料而做了一些界面上的更動，有可能是我偷懶沒畫Flow Chart才漏一堆畫面吧！

不想跟這個人一樣請讀：

1. Flow Chart和UI Flow

2. UI設(shè)計流程

「如果你沒有放傾斜45° 的Mockup，你的設(shè)計就不算完成。」（沒有這回事）

這個配色越看越覺得很像某知名線上影音服務(wù)耶…（誤）

三、原型制作

本來說想要練Principle 的，結(jié)果我的試用期剛好到期了Orz，就先用Marvel 做個簡單的Prototype 吧！

首頁介紹

時間戳記

結(jié)語

寫這篇文章除了紀(jì)錄練習(xí)過程，也希望通過分享流程讓還沒有作品不知道怎么下手的初學(xué)者有個參考依據(jù)，我不太鼓勵做DailyUI，因為產(chǎn)品不會是單個畫面而已，要考慮每個畫面前后會出現(xiàn)什么、產(chǎn)品目標(biāo)是什么、目標(biāo)群眾是誰等各種因素都會讓即使同樣是影音產(chǎn)品卻有不太一樣的流程和外觀，很推薦去Redesign你最常用的App、網(wǎng)站當(dāng)練習(xí)，因為你常用勢必會更了解產(chǎn)品脈絡(luò)，在設(shè)計界面也會比單純一個題目給你更有心得，如果當(dāng)下真的沒有想法，我會推薦去做UpLab Challenge，它給的題目比較完整而且會提供參考給你，可以跟其他設(shè)計師一起比較，還有機會得獎呢！

原創(chuàng)：JasonCK

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