由小良同學(xué)投稿，我們一起討論并編輯完成，MOO音樂(lè)中的案例，場(chǎng)景如下：
今天為大家?guī)?lái)的是MOO音樂(lè)中播放頁(yè)面的設(shè)計(jì)解析。MOO音樂(lè)這個(gè)產(chǎn)品不知道大家有沒(méi)有使用過(guò)，它是騰訊在18年末推出的一款音樂(lè)app，主要面向喜歡流行音樂(lè)與小眾音樂(lè)的潮流年輕人。與主流音樂(lè)app不同，他沒(méi)有過(guò)多復(fù)雜的功能模塊，旨在打造沉浸感的聽(tīng)歌體驗(yàn)。我們今天就通過(guò)其播放頁(yè)面的設(shè)計(jì)來(lái)看看：
進(jìn)入MOO音樂(lè)的播放頁(yè)面，最直觀的感受就是簡(jiǎn)潔。對(duì)比QQ音樂(lè)，MOO音樂(lè)在此頁(yè)面中的各種元素與文字都非常少，控件數(shù)量也是屈指可數(shù)。接下來(lái)就讓我們一起看看它是如何處理播放頁(yè)面的各個(gè)功能來(lái)實(shí)現(xiàn)極簡(jiǎn)設(shè)計(jì)的。
△ 圖為MOO音樂(lè)與QQ音樂(lè)的播放頁(yè)面對(duì)比
首先看MOO音樂(lè)對(duì)進(jìn)度條這個(gè)功能的設(shè)計(jì)，在主流音樂(lè)App中，用戶需要拖動(dòng)進(jìn)度條的小圓點(diǎn)或點(diǎn)擊進(jìn)度條相應(yīng)位置來(lái)改變播放進(jìn)度，而在MOO音樂(lè)中，用戶可直接在頁(yè)面下方約四分之一的區(qū)域進(jìn)行拖動(dòng)來(lái)改變播放進(jìn)度。這個(gè)設(shè)計(jì)相比傳統(tǒng)播放進(jìn)度條，大大提高了熱區(qū)面積；熱區(qū)的位置也位于用戶單手持機(jī)時(shí)大拇指很容易觸達(dá)的區(qū)域，用戶拖動(dòng)時(shí)無(wú)需盯著頁(yè)面控件進(jìn)行操作。但它也存在一個(gè)問(wèn)題，用戶在正常播放狀態(tài)下無(wú)法看到播放進(jìn)度，我想也有可能是設(shè)計(jì)師為了打造沉浸感有意而為之的。
△ 圖為MOO音樂(lè)進(jìn)度條操作熱區(qū)展示
在暫停/播放功能的設(shè)計(jì)上，不同于其他主流App需要通過(guò)點(diǎn)擊按鈕來(lái)暫停和播放，在MOO音樂(lè)中用戶可以單擊屏幕任意位置（除其他按鈕熱區(qū)）來(lái)暫；虿シ拧＿@一操作多見(jiàn)于視頻/短視頻應(yīng)用中，符合絕大部分用戶對(duì)于播放/暫停的操作習(xí)慣。
△ 圖為 單擊屏幕任意位置進(jìn)行暫停
在切換上一首/下一首的功能上，不同于其他主流App需要通過(guò)點(diǎn)擊按鈕來(lái)切換上一首或下一首歌曲，在MOO音樂(lè)中用戶可以通過(guò)在屏幕任意位置上劃或下劃來(lái)切換。這一操作也很符合用戶在瀏覽短視頻時(shí)養(yǎng)成的操作習(xí)慣。
△ 圖為上劃下劃切換歌曲
以上幾個(gè)的功能的設(shè)計(jì)都是通過(guò)用符合用戶操作習(xí)慣的手勢(shì)交互代替用戶對(duì)頁(yè)面控件的操作，從而達(dá)到頁(yè)面的布局的極簡(jiǎn)狀態(tài)。
這種設(shè)計(jì)的優(yōu)點(diǎn)十分顯著，不僅幫用戶在操作的過(guò)程中省去了視線聚焦的時(shí)間和精力，而且大大增加的熱區(qū)面積降低了用戶的操作成本。拖動(dòng)改變播放進(jìn)度、單擊暫停或播放、上下劃動(dòng)切換歌曲的手勢(shì)操作符合用戶在以往使用其他產(chǎn)品時(shí)養(yǎng)成的操作習(xí)慣。極簡(jiǎn)的頁(yè)面布局也增加了用戶聽(tīng)歌的沉浸感。
但這個(gè)設(shè)計(jì)也存在一些缺點(diǎn)，首先為了打造極簡(jiǎn)的頁(yè)面與沉浸感，MOO音樂(lè)將評(píng)論功能放在了二級(jí)頁(yè)面，這必然會(huì)帶來(lái)社交屬性的降低，再加上它很有限的的用戶規(guī)模與小眾的音樂(lè)類型，用戶使用時(shí)的感受到孤獨(dú)感就尤為明顯。其次，由于它與主流音樂(lè)App的操作方式差異很大，用戶的認(rèn)知成本高，新用戶很有可能因?yàn)椴辉笇W(xué)習(xí)或不適應(yīng)這種交互方式也而無(wú)法留存。最后，雖然手勢(shì)操作的熱區(qū)面積大、操作靈活，但也增大用戶誤操作的可能性。
結(jié)語(yǔ)：MOO音樂(lè)剛剛面世的時(shí)候小火了一段時(shí)間，當(dāng)時(shí)有很多用戶被它優(yōu)秀的設(shè)計(jì)吸引，它也曾收獲了很多贊譽(yù)。但是隨著用戶的新鮮感逐漸減少，MOO音樂(lè)一直處于用戶流失的狀態(tài)，我能查到最近的數(shù)據(jù)只有艾瑞研究院顯示的MOO音樂(lè)今年三月的月活只有兩萬(wàn)左右。但我覺(jué)得就算是新鮮感過(guò)去了，還是會(huì)有一部分人用戶會(huì)堅(jiān)守在這里。因?yàn)槭撬惆橹麄兊莫?dú)處時(shí)光，陪伴著他們度過(guò)了一個(gè)又一個(gè)個(gè)充滿感性的夜晚。
由康乃馨同學(xué)投稿，石墨文檔中的一個(gè)案例場(chǎng)景如下：進(jìn)入后，石墨文檔的「默認(rèn)頁(yè)」定位到了第二個(gè)標(biāo)簽——桌面。這與常規(guī)的做法不太一樣。
在常規(guī)APP中，進(jìn)入后通常默認(rèn)定位在第一個(gè)標(biāo)簽下。同時(shí)第一個(gè)標(biāo)簽也往往是APP最重要的頁(yè)面，包含了產(chǎn)品中最常用的功能或是最主推的業(yè)務(wù)。無(wú)論是文檔筆記類APP，還是國(guó)民級(jí)應(yīng)用APP幾乎都是這樣。例如下面的這些：
有道云筆記——最新（默認(rèn)）、文件夾、新增、云筆、我的
騰訊文檔——首頁(yè)（默認(rèn)）、新增、文檔
支付寶——首頁(yè)（默認(rèn)）、理財(cái)、口碑、朋友、我的
微信——微信（默認(rèn)）、通訊錄、發(fā)現(xiàn)、我
比較之下，石墨文檔顯得有些「非主流」。——通知、桌面（默認(rèn)）、新增、最近、收藏。對(duì)于這樣的特殊設(shè)計(jì)，我有兩種猜想：
猜想1:
石墨文檔主打協(xié)作概念，團(tuán)隊(duì)成員的行為、文檔的變化是需要強(qiáng)傳達(dá)給用戶的「通知」；所以石墨文檔把通知放在第一個(gè)標(biāo)簽中，是為了凸顯產(chǎn)品的協(xié)作功能。而桌面標(biāo)簽是用戶操作和查找文件的主要入口。更多的用戶進(jìn)入APP是希望能夠快速觸達(dá)目標(biāo)。出于此需求石墨文檔才把默認(rèn)標(biāo)簽定位到了「桌面」，起到了縮短用戶操作路徑的作用。
即第一個(gè)標(biāo)簽很重要，第二個(gè)標(biāo)簽更常用，因此采用了這樣的布局與默認(rèn)定位。達(dá)到「突出功能」與「用戶目的」平衡。
猜想2：
第二、第三、第四標(biāo)簽屬于高頻操作，且頁(yè)面內(nèi)容非常重要。用戶在使用過(guò)程中可能頻繁切換。那么設(shè)計(jì)者有意將這3者位置靠近，且位于tab欄的中央位置。讓用戶在使用過(guò)程中減少手指的移動(dòng)，聚焦于頁(yè)面中央的3個(gè)入口。
發(fā)散來(lái)看，這種「定位不在第一個(gè)標(biāo)簽」的設(shè)計(jì)，還在其他產(chǎn)品中出現(xiàn)過(guò)嗎？答案是肯定的。
例如keep和微信讀書(shū)：
微信讀書(shū)的標(biāo)簽定位邏輯是在「上一次退出時(shí)的標(biāo)簽」，這是由于讀書(shū)類app的戶的使用具有一定的「連續(xù)性」。再次打開(kāi)app時(shí)，希望能夠快速繼續(xù)上次的任務(wù)。因而微信讀書(shū)App默認(rèn)標(biāo)簽定位到上次使用的位置，意在提高用戶使用效率。
而keep——首頁(yè)、計(jì)劃、運(yùn)動(dòng)（默認(rèn)）、商城、我的的設(shè)計(jì)邏輯與石墨文檔的比較相似，首頁(yè)承載的是App的主打/商業(yè)功能，即運(yùn)動(dòng)社交，用戶可在首頁(yè)看到關(guān)注、推薦、熱門(mén)的運(yùn)動(dòng)達(dá)人動(dòng)態(tài)，也可以自己上傳動(dòng)態(tài)，形成良好的社區(qū)氛圍。
而默認(rèn)的tab「運(yùn)動(dòng)」，更符合用戶的使用場(chǎng)景——在運(yùn)動(dòng)時(shí)快速打開(kāi)App開(kāi)始記錄。是用戶高頻操作的入口。
在作者看來(lái)，這種設(shè)計(jì)其實(shí)是商業(yè)目標(biāo)和體驗(yàn)?zāi)繕?biāo)的互相妥協(xié)，產(chǎn)品放為了拓展新業(yè)務(wù)、或是更好的給投資人講故事所以把一些內(nèi)容放到了最重要的第一個(gè)標(biāo)簽，但是又不希望影響一些「需求純粹」的用戶的使用體驗(yàn)，所以默認(rèn)定位還是在核心功能所在頁(yè)面。
這里作者對(duì)石墨文檔的這種設(shè)計(jì)還有一個(gè)猜想是；由于石墨文檔目標(biāo)的功能十分單一（也可以叫純粹），所以其實(shí)是沒(méi)有什么東西可放的。才給了通知內(nèi)容這么高的地位，否則如果只是為了提高通知強(qiáng)度的話其實(shí)還是有不少其他做法的。當(dāng)石墨文檔的功能和業(yè)務(wù)越來(lái)越多，這種設(shè)計(jì)會(huì)有比較大的概率被改掉。
QQ音樂(lè)中的一個(gè)案例場(chǎng)景如下：用戶在QQ音樂(lè)中查看推薦視頻時(shí)，視頻播放5秒后，頁(yè)面中除視頻外的其他元素就會(huì)「變暗」，如下圖：
其他元素變暗后用戶的注意力就可以集中在視頻本身，從體驗(yàn)?zāi)繕?biāo)上來(lái)說(shuō)可以讓用戶更舒適的觀看視頻，通過(guò)減少信噪的方式避免干擾。從業(yè)務(wù)目標(biāo)上來(lái)說(shuō)不被干擾就意味著用戶觀看視頻的時(shí)間可能會(huì)得到延長(zhǎng)，提高了「用戶使用時(shí)間」這一關(guān)鍵性的數(shù)據(jù)。
其實(shí)類似的設(shè)計(jì)甚至在十年前就已經(jīng)有了，例如我們?cè)谑褂脙?yōu)酷網(wǎng)站觀看視頻時(shí)，鼠標(biāo)在屏幕中間點(diǎn)擊一下就可以隱藏底部的播放進(jìn)度條，再后來(lái)這種設(shè)計(jì)都被優(yōu)化成了根據(jù)時(shí)間判斷是否隱藏的方式。本質(zhì)上就是通過(guò)設(shè)計(jì)師對(duì)用戶使用場(chǎng)景的思考得到了優(yōu)化點(diǎn)，設(shè)計(jì)師多想一步，用戶就可以少走一步（俺覺(jué)得這句話就值一個(gè)轉(zhuǎn)發(fā)）。
百度地圖中的一個(gè)案例場(chǎng)景如下：某天作者下班的時(shí)候隨手打開(kāi)了百度地圖，剛想搜索一下最近的公交還有多久能到我這一站，結(jié)果還沒(méi)搜索就出現(xiàn)了下面的圖片：
我想要的搜索結(jié)果居然已經(jīng)顯示在屏幕上了。！這時(shí)候作為一個(gè)用戶當(dāng)然是非常驚喜的，看完信息就隨后回到了手機(jī)桌面，但是作為一個(gè)設(shè)計(jì)師還可以想到更多的東西。
為什么它能知道我要搜索的內(nèi)容
- 第一點(diǎn)前提是我已經(jīng)在這個(gè)產(chǎn)品中完善了自己的信息，包括居住地點(diǎn)、公司地點(diǎn)等等。
- 第二項(xiàng)基礎(chǔ)是作者每天的運(yùn)動(dòng)軌跡比較固定，基本是家里和公司來(lái)回往返的路線。
- 第三點(diǎn)條件是當(dāng)時(shí)作者打開(kāi)軟件的時(shí)間是「下班時(shí)間范圍」
所以百度地圖就可以根據(jù)作者當(dāng)時(shí)的定位、當(dāng)時(shí)的時(shí)間，判斷出了這一用戶打開(kāi)軟件的目的是什么，再根據(jù)已經(jīng)存在的居住地點(diǎn)信息計(jì)算出了公交車到站時(shí)間這項(xiàng)結(jié)果，直接展示給了用戶。
這種做法和我們昨天說(shuō)的案例十分相似，都是「設(shè)計(jì)師多想一步，用戶就可以少走一步」式的設(shè)計(jì)，通過(guò)已有條件判斷用戶的目的，再根據(jù)已有數(shù)據(jù)計(jì)算出用戶需要的結(jié)果，幫助用戶節(jié)省了操作成本和時(shí)間。
對(duì)于用戶來(lái)說(shuō)，這種設(shè)計(jì)則不僅僅是節(jié)省操作成本的問(wèn)題，更重要的在于「驚喜感」和「超預(yù)期」，這兩種感覺(jué)能夠帶來(lái)的用戶體驗(yàn)提升是十分巨大的，當(dāng)用戶情緒波動(dòng)比較大的時(shí)候也更容易給用戶留下更深刻的產(chǎn)品印象，在日后和其他產(chǎn)品的競(jìng)爭(zhēng)時(shí)無(wú)形就有了優(yōu)勢(shì)。
丁香醫(yī)生中的一個(gè)案例背景如下：
用戶可以在丁香醫(yī)生APP中，使用在線問(wèn)診功能去詢問(wèn)一些不著急到醫(yī)院進(jìn)行診斷的病癥。在進(jìn)行問(wèn)診之前，用戶需要填寫(xiě)一些信息，例如癥狀和之前在醫(yī)院檢查時(shí)留下的病例，診斷圖片等等。
如果用戶在填寫(xiě)這些信息的頁(yè)面點(diǎn)擊了返回按鈕。那么再次進(jìn)入到填寫(xiě)信息頁(yè)面時(shí)，就會(huì)出現(xiàn)如下圖所示的提示：
這種設(shè)計(jì)方案作者認(rèn)為是經(jīng)歷了一些比較復(fù)雜的判斷才最終采用的方案。原因如下：當(dāng)我們?yōu)榱朔乐褂脩粲捎谡`操作而返回并丟失信息的時(shí)候。我們通常采用的辦法是用戶點(diǎn)擊返回按鈕時(shí)給一個(gè)阻斷性的提示。例如下面這張圖這樣：
作者自己在之前的公司做名片產(chǎn)品時(shí)也遇到過(guò)類似的場(chǎng)景。為了防止用戶由于誤操作或其他原因中斷制作名片的流程。在用戶點(diǎn)擊返回時(shí)，我們都會(huì)對(duì)用戶進(jìn)行挽留。這種方案最大的問(wèn)題是用戶發(fā)生誤操作的情況只是極少數(shù)行為。但是我們每一次都會(huì)在用戶點(diǎn)擊返回時(shí)給出這個(gè)提示，讓用戶中斷流程的操作變得更加復(fù)雜，付出了更多成本，這和用戶的目的是不相符的。也是影響用戶體驗(yàn)的。（這里要強(qiáng)調(diào)的是影響體驗(yàn)并不意味著業(yè)務(wù)數(shù)據(jù)目標(biāo)變差）
除了這兩種方案之外，還有一種作者曾經(jīng)看到過(guò)的方案是這樣：用戶返回時(shí)沒(méi)有提示，當(dāng)用戶再次進(jìn)入時(shí)，直接保留用戶上次已經(jīng)填寫(xiě)的全部?jī)?nèi)容。如下圖：
這種做法同樣存在問(wèn)題。如果用戶并不是想繼續(xù)上一次未完成的流程。那么用戶需要手動(dòng)刪除所有已經(jīng)填寫(xiě)的內(nèi)容，我們可以看到這樣用戶需要付出的操作成本是極高的。需要?jiǎng)h除文字，刪除圖片等等，并且有很多用戶的行為是：使用「返回 + 再次進(jìn)入」這樣的操作來(lái)清空頁(yè)面中已經(jīng)填寫(xiě)的內(nèi)容。（這種用戶行為來(lái)源于去年做的一次真實(shí)用戶訪談）
思考了以上兩種設(shè)計(jì)方案之后，再回來(lái)看丁香醫(yī)生中的方案就十分優(yōu)秀了，當(dāng)用戶希望中斷問(wèn)診流程時(shí)，一次點(diǎn)擊就可以完成目的。當(dāng)用戶是誤操作返回時(shí)也可以恢復(fù)已填寫(xiě)內(nèi)容，當(dāng)用戶希望進(jìn)行其他問(wèn)診/清空內(nèi)容時(shí)，也只增加了一次點(diǎn)擊。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。