半夜睡不著覺,把痛點化成 UI — Love ASMR iOS Revamped

之「我想當 UI/UX 設計師,但我沒有作品怎麼辦?」

JasonCK
JasonCK
Jun 1 · 10 min read
閱讀時間:文章架構:
前言
定義目標
設計過程
-前期研究(產品特性、使用者評價、相似品分析)
-功能發想(Mindmap、Wireframe)
-介面設計(色彩、文字規範)
-原型製作(Prototype!)
結語

你有聽過 ASMR 嗎?

是 Autonomous Sensory Meridian Response 的簡稱,中文翻譯「顱內高潮」,聽起來很浮誇,但我覺得就跟白噪音差不多啦,就是可以讓人專心跟放鬆的聲音。

  1. Trigger:對你有感的聲音。
主人翁改造前

沒作品的話,從生活中尋找可以改善的地方!

定義目標

  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 很少,這樣可以得到更多結果,二來是可以借鏡類似經驗。

  1. TED
  2. 潮汐
  3. Headspace
  4. StreetVoice
  5. Spotify

Tingles

  1. 很完整的藝術家回饋機制,粉絲可以訂閱方式贊助藝術家來取得獨家內容、聊天室權限。
  2. 提供很完整的播放器功能,有睡眠定時器、離線下載、建立多個播放清單(Love ASMR 只能建立一個)。

TED

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

Spotify / StreetVoice / Castbox

心得整理:內容大於功能
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

二、介面設計

前面的 Wireframe 其實把介面都差不多畫完了,在設計階段除了玩填色遊戲以外,過程中也發現一些互動上的 Bug 或者缺畫面、資料而做了一些介面上的更動,有可能是我偷懶沒畫 Flow Chart 才漏一堆畫面吧!

不想跟這個人一樣請讀:
1. Flow Chart 和 UI Flow
2. UI 設計流程

「如果你沒有放傾斜 45° 的 Mockup,你的設計就不算完成。」(沒有這回事)
這個配色越看越覺得很像某知名線上影音服務耶…(誤)

三、原型製作

本來說想要練 Principle 的,結果我的試用期剛好到期了 Orz,就先用 Marvel 做個簡單的 Prototype 吧!

首頁介紹
時間戳記

結語

寫這篇文章除了紀錄練習過程,也希望透過分享流程讓還沒有作品不知道怎麼下手的初學者有個參考依據,我不太鼓勵做 DailyUI,因為產品不會是單個畫面而已,要考慮每個畫面前後會出現什麼、產品目標是什麼、目標群眾是誰等各種因素都會讓即使同樣是影音產品卻有不太一樣的流程和外觀,很推薦去 Redesign 你最常用的 App、網站當練習,因為你常用勢必會更了解產品脈絡,在設計介面也會比單純一個題目給你更有心得,如果當下真的沒有想法,我會推薦去做 UpLab Challenge,它給的題目比較完整而且會提供參考給你,可以跟其他設計師一起比較,還有機會得獎呢!

成品可以改進的地方還很多,如果你有想到什麼問題或者建議很歡迎留言討論,或者幫我拍拍手吧~

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

JasonCK

Written by

JasonCK

新手 UI/UX 設計人,喜愛設計、打電動、看美劇。在這裡可以見證一個新手設計師成為大師的成長路程(是夢想啦!)

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com