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