關閉

產品體驗日記/案例解讀丨04期

今天為大家帶來的是MOO音樂中播放頁面的設計解析。MOO音樂這個產品不知道大家有沒有使用過,它是騰訊在18年末推出的一款音樂app,主要面向喜歡流行音樂與小眾音樂的潮流年輕人。與主流音樂app不同,他沒有過多復雜的功能模塊,旨在打造沉浸感的聽歌體驗。

16:解讀MOO音樂的極簡設計

今天的內容由小良同學投稿,我們一起討論并編輯完成,MOO音樂中的案例,場景如下:

今天為大家帶來的是MOO音樂中播放頁面的設計解析。MOO音樂這個產品不知道大家有沒有使用過,它是騰訊在18年末推出的一款音樂app,主要面向喜歡流行音樂與小眾音樂的潮流年輕人。與主流音樂app不同,他沒有過多復雜的功能模塊,旨在打造沉浸感的聽歌體驗。我們今天就通過其播放頁面的設計來看看:

進入MOO音樂的播放頁面,最直觀的感受就是簡潔。對比QQ音樂,MOO音樂在此頁面中的各種元素與文字都非常少,控件數量也是屈指可數。接下來就讓我們一起看看它是如何處理播放頁面的各個功能來實現極簡設計的。

圖為MOO音樂與QQ音樂的播放頁面對比

1. 首先看MOO音樂對進度條這個功能的設計,在主流音樂app中,用戶需要拖動進度條的小圓點或點擊進度條相應位置來改變播放進度,而在MOO音樂中,用戶可直接在頁面下方約四分之一的區域進行拖動來改變播放進度。這個設計相比傳統播放進度條,大大提高了熱區面積;熱區的位置也位于用戶單手持機時大拇指很容易觸達的區域,用戶拖動時無需盯著頁面控件進行操作。但它也存在一個問題,用戶在正常播放狀態下無法看到播放進度,我想也有可能是設計師為了打造沉浸感有意而為之的。

圖為MOO音樂進度條操作熱區展示

2. 在暫停/播放功能的設計上,不同于其他主流app需要通過點擊按鈕來暫停和播放,在MOO音樂中用戶可以單擊屏幕任意位置(除其他按鈕熱區)來暫停或播放。這一操作多見于視頻/短視頻應用中,符合絕大部分用戶對于播放/暫停的操作習慣。

圖為 單擊屏幕任意位置進行暫停

3.在切換上一首/下一首的功能上,不同于其他主流app需要通過點擊按鈕來切換上上一首或下一首歌曲,在MOO音樂中用戶可以通過在屏幕任意位置上劃或下劃來切換。這一操作也很符合用戶在瀏覽短視頻時養成的操作習慣。

圖為上劃下劃切換歌曲

以上幾個的功能的設計都是通過用符合用戶操作習慣的手勢交互代替用戶對頁面控件的操作,從而達到頁面的布局的極簡狀態。

這種設計的優點十分顯著,不僅幫用戶在操作的過程中省去了視線聚焦的時間和精力,而且大大增加的熱區面積降低了用戶的操作成本。拖動改變播放進度、單擊暫停或播放、上下劃動切換歌曲的手勢操作符合用戶在以往使用其他產品時養成的操作習慣。極簡的頁面布局也增加了用戶聽歌的沉浸感。

但這個設計也存在一些缺點,首先為了打造極簡的頁面與沉浸感,MOO音樂將評論功能放在了二級頁面,這必然會帶來社交屬性的降低,再加上它很有限的的用戶規模與小眾的音樂類型,用戶使用時的感受到孤獨感就尤為明顯。其次,由于它與主流音樂app的操作方式差異很大,用戶的認知成本高,新用戶很有可能因為不愿學習或不適應這種交互方式也而無法留存。最后,雖然手勢操作的熱區面積大、操作靈活,但也增大用戶誤操作的可能性。

結語:MOO音樂剛剛面世的時候小火了一段時間,當時有很多用戶被它優秀的設計吸引,它也曾收獲了很多贊譽。但是隨著用戶的新鮮感逐漸減少,MOO音樂一直處于用戶流失的狀態,我能查到最近的數據只有艾瑞研究院顯示的MOO音樂今年三月的月活只有兩萬左右。但我覺得就算是新鮮感過去了,還是會有一部分人用戶會堅守在這里。因為是它陪伴著他們的獨處時光,陪伴著他們度過了一個又一個個充滿感性的夜晚。

17:解讀石墨文檔的非主流設計

今天的內容由康乃馨同學投稿,石墨文檔中的一個案例場景如下:進入后,石墨文檔的“默認頁”定位到了第二個標簽——桌面。這與常規的做法不太一樣。


在常規APP中,進入后通常默認定位在第一個標簽下。同時第一個標簽也往往是APP最重要的頁面,包含了產品中最常用的功能或是最主推的業務。無論是文檔筆記類APP,還是國民級應用APP幾乎都是這樣。例如下面的這些:



有道云筆記——最新(默認)、文件夾、新增、云筆、我的



騰訊文檔——首頁(默認)、新增、文檔



支付寶——首頁(默認)、理財、口碑、朋友、我的



微信——微信(默認)、通訊錄、發現、我


比較之下,石墨文檔顯得有些“非主流”。——通知、桌面(默認)、新增、最近、收藏。對于這樣的特殊設計,我有兩種猜想:


猜想1:

石墨文檔主打協作概念,團隊成員的行為、文檔的變化是需要強傳達給用戶的“通知”;所以石墨文檔把通知放在第一個標簽中,是為了凸顯產品的協作功能。而桌面標簽是用戶操作和查找文件的主要入口。更多的用戶進入APP是希望能夠快速觸達目標。出于此需求石墨文檔才把默認標簽定位到了“桌面”,起到了縮短用戶操作路徑的作用。


即第一個標簽很重要,第二個標簽更常用,因此采用了這樣的布局與默認定位。達到“突出功能”與“用戶目的”平衡。


猜想2:

第二、第三、第四標簽屬于高頻操作,且頁面內容非常重要。用戶在使用過程中可能頻繁切換。那么設計者有意將這3者位置靠近,且位于tab欄的中央位置。讓用戶在使用過程中減少手指的移動,聚焦于頁面中央的3個入口。


發散來看,這種“定位不在第一個標簽”的設計,還在其他產品中出現過嗎?答案是肯定的。


例如keep和微信讀書:

微信讀書的標簽定位邏輯是在“上一次退出時的標簽”,這是由于讀書類app的戶的使用具有一定的“連續性”。再次打開app時,希望能夠快速繼續上次的任務。因而微信讀書app默認標簽定位到上次使用的位置,意在提高用戶使用效率。


而keep——首頁、計劃、運動(默認)、商城、我的的設計邏輯與石墨文檔的比較相似,首頁承載的是app的主打/商業功能,即運動社交,用戶可在首頁看到關注、推薦、熱門的運動達人動態,也可以自己上傳動態,形成良好的社區氛圍。


而默認的tab“運動”,更符合用戶的使用場景——在運動時快速打開app開始記錄。是用戶高頻操作的入口。


在作者看來,這種設計其實是商業目標和體驗目標的互相妥協,產品放為了拓展新業務、或是更好的給投資人講故事所以把一些內容放到了最重要的第一個標簽,但是又不希望影響一些【需求純粹】的用戶的使用體驗,所以默認定位還是在核心功能所在頁面。


這里作者對石墨文檔的這種設計還有一個猜想是;由于石墨文檔目標的功能十分單一(也可以叫純粹),所以其實是沒有什么東西可放的。才給了通知內容這么高的地位,否則如果只是為了提高通知強度的話其實還是有不少其他做法的。當石墨文檔的功能和業務越來越多,這種設計會有比較大的概率被改掉。





18:QQ音樂,設計師多想一步,用戶就可以少走一步


QQ音樂中的一個案例場景如下:用戶在QQ音樂中查看推薦視頻時,視頻播放5秒后,頁面中除視頻外的其他元素就會【變暗】,如下圖:

其他元素變暗后用戶的注意力就可以集中在視頻本身,從體驗目標上來說可以讓用戶更舒適的觀看視頻,通過減少信噪的方式避免干擾。從業務目標上來說不被干擾就意味著用戶觀看視頻的時間可能會得到延長,提高了【用戶使用時間】這一關鍵性的數據。

其實類似的設計甚至在十年前就已經有了,例如我們在使用優酷網站觀看視頻時,鼠標在屏幕中間點擊一下就可以隱藏底部的播放進度條,再后來這種設計都被優化成了根據時間判斷是否隱藏的方式。本質上就是通過設計師對用戶使用場景的思考得到了優化點,設計師多想一步,用戶就可以少走一步(俺覺得這句話就值一個轉發)。



19:百度地圖咋我沒搜索就顯示結果了???


百度地圖中的一個案例場景如下:某天作者下班的時候隨手打開了百度地圖,剛想搜索一下最近的公交還有多久能到我這一站,結果還沒搜索就出現了下面的圖片:


我想要的搜索結果居然已經顯示在屏幕上了!!!,這時候作為一個用戶當然是非常驚喜的,看完信息就隨后回到了手機桌面,但是作為一個設計師還可以想到更多的東西。

為什么它能知道我要搜索的內容

1)第一點前提是我已經在這個產品中完善了自己的信息,包括居住地點、公司地點等等。


2)第二項基礎是作者每天的運動軌跡比較固定,基本是家里和公司來回往返的路線。


3)第三點條件是當時作者打開軟件的時間是【下班時間范圍】


所以百度地圖就可以根據作者當時的定位、當時的時間,判斷出了這一用戶打開軟件的目的是什么,再根據已經存在的居住地點信息計算出了公交車到站時間這項結果,直接展示給了用戶。


這種做法和我們昨天說的案例十分相似,都是【設計師多想一步,用戶就可以少走一步】式的設計,通過已有條件判斷用戶的目的,再根據已有數據計算出用戶需要的結果,幫助用戶節省了操作成本和時間。


對于用戶來說,這種設計則不僅僅是節省操作成本的問題,更重要的在于【驚喜感】和【超預期】,這兩種感覺能夠帶來的用戶體驗提升是十分巨大的,當用戶情緒波動比較大的時候也更容易給用戶留下更深刻的產品印象,在日后和其他產品的競爭時無形就有了優勢。


對類似案例感興趣的朋友可以點擊下面的鏈接查看昨天的案例,本案例中除了判斷用戶的目的之外,預先收集的信息也起到了十分重要的作用,明天將會給大家帶來一個收集信息的優秀案例。感興趣的朋友可以關注公眾號明天查看。

20:丁香醫生APP帶給用戶的驚喜

丁香醫生中的一個案例背景如下:

用戶可以在丁香醫生APP中,使用在線問診功能去詢問一些不著急到醫院進行診斷的病癥。在進行問診之前,用戶需要填寫一些信息,例如癥狀和之前在醫院檢查時留下的病例,診斷圖片等等。

如果用戶在填寫這些信息的頁面點擊了返回按鈕。那么再次進入到填寫信息頁面時,就會出現如下圖所示的提示:

這種設計方案作者認為是經歷了一些比較復雜的判斷才最終采用的方案。原因如下:當我們為了防止用戶由于誤操作而返回并丟失信息的時候。我們通常采用的辦法是用戶點擊返回按鈕時給一個阻斷性的提示。例如下面這張圖這樣:

作者自己在之前的公司做名片產品時也遇到過類似的場景。為了防止用戶由于誤操作或其他原因中斷制作名片的流程。在用戶點擊返回時,我們都會對用戶進行挽留。這種方案最大的問題是用戶發生誤操作的情況只是極少數行為。但是我們每一次都會在用戶點擊返回時給出這個提示,讓用戶中斷流程的操作變得更加復雜,付出了更多成本,這和用戶的目的是不相符的。也是影響用戶體驗的。(這里要強調的是影響體驗并不意味著業務數據目標變差)

除了這兩種方案之外,還有一種作者曾經看到過的方案是這樣:用戶返回時沒有提示,當用戶再次進入時,直接保留用戶上次已經填寫的全部內容。如下圖:

這種做法同樣存在問題。如果用戶并不是想繼續上一次未完成的流程。那么用戶需要手動刪除所有已經填寫的內容,我們可以看到這樣用戶需要付出的操作成本是極高的。需要刪除文字,刪除圖片等等,并且有很多用戶的行為是:使用【返回 + 再次進入】這樣的操作來清空頁面中已經填寫的內容。(這種用戶行為來源于去年做的一次真實用戶訪談)

思考了以上兩種設計方案之后,再回來看丁香醫生中的方案就十分優秀了,當用戶希望中斷問診流程時,一次點擊就可以完成目的。當用戶是誤操作返回時也可以恢復已填寫內容,當用戶希望進行其他問診/清空內容時,也只增加了一次點擊。

對于用戶來說,這種設計則不僅僅是節省操作成本的問題,更重要的在于【驚喜感】和【超預期】,這兩種感覺能夠帶來的用戶體驗提升是十分巨大的,當用戶情緒波動比較大的時候也更容易給用戶留下更深刻的產品印象,在日后和其他產品的競爭時無形就有了優勢。

對類似案例感興趣的朋友可以點擊下面的鏈接查看更多案例,未來80天我每天都會分享一個優秀的設計案例并帶有我的解讀。感興趣的朋友可以關注公眾號到時查看。

以上是5個產品案例解讀,歡迎大家關注我的公眾號“設計的威嚴”,一起交流討論!

0條評論 添加新討論

登錄后參與討論
Ctrl+Enter 發表