這是25學堂轉(zhuǎn)載亞松Asong ?的一篇關(guān)于淺談酷狗APP產(chǎn)品設(shè)計和改進的博文。25學堂覺得這是一篇非常不錯的APP產(chǎn)品設(shè)計教程。顧轉(zhuǎn)載過來跟25學堂的粉絲一起學習進步。

一、APP產(chǎn)品設(shè)計的背景分析：

酷狗早期作為一款PC端的音樂播放器，積累了廣泛的用戶基礎(chǔ)。這對于其移動端的APP，用戶是一個先天優(yōu)勢，單從豌豆莢這個平臺的數(shù)據(jù)來看，同類APP的下載量，酷狗穩(wěn)居第一。對比下載量較高的幾款競品（QQ音樂、網(wǎng)易云音樂、天天動聽），酷狗的產(chǎn)品路線顯然不僅是做一個單純的音樂交流社區(qū)，酷狗通過APP，以用戶基礎(chǔ)厚實的音樂社區(qū)帶動旗下另外兩個平臺—-“直播社區(qū)”、“唱K社區(qū)”，企圖打造一個多維的音樂平臺。

“一APP多平臺”的設(shè)計，固然有其公司的業(yè)務訴求和戰(zhàn)略目標，但是從用戶的角度來看，捆綁多余的功能板塊可能會影響部分用戶的使用體驗，畢竟部分的用戶需求僅僅是純粹的音樂播放。酷狗APP顯然不是一個純粹的音樂播放器了，在我看來，這是一把“雙刃劍”，為另外兩個平臺拓展用戶的同時，也會損失部分追求純粹播放體驗的用戶。今天借此，與諸位探討交流一下酷狗APP的設(shè)計和產(chǎn)品體驗。

二、酷狗APP產(chǎn)品的結(jié)構(gòu)圖

多平臺整合在一個APP，產(chǎn)品架構(gòu)顯得臃腫，在所難免了。上圖（圖1）為酷狗簡略的大體層級架構(gòu)圖，從圖中可以看出，架構(gòu)橫向三個板塊并列，并具有一定的縱深，部分內(nèi)容需要經(jīng)過5個層級才能到達最終頁面。怎樣從最底層的頁面回到一級導航，快速切換到其他平臺去，是個問題。針對這個情況，酷狗的解決方案就是在右側(cè)的抽屜菜單里（圖4），提供一個“返回首頁”的按鈕，可以一鍵快速切換到一級導航頁。這個設(shè)計，給用戶操作帶來便捷，還是挺不錯的設(shè)計的。以“樂庫為例”（圖2）。

二級菜單采用卡片式平鋪在頁面內(nèi)（圖3），

以“聽”的二級頁面為例，不規(guī)則的卡片排布顯得有些雜亂，且卡片板塊也沒有功能優(yōu)先的設(shè)計。在一般的使用場景，最常使用的功能就是【本地音樂】、【搜索】、【樂庫】，如將【本地音樂】相關(guān)的板塊以宮格式布局，而【收音機】那一欄可以再進行架構(gòu)歸納和整合，而底部的【廣告】和【建議】則完全可以歸納在菜單欄里，或整合在其他低層級的頁面去?；本秃?，突出常需功能，讓“聽”音樂變得更加純粹，界面更友好。

◆ 手勢交互比點擊交互更有效率

在使用過程中，發(fā)現(xiàn)雖然“聽看唱”三個并列位于頂部的TAB式菜單導航，但是它們并不支持手勢切換，僅能點擊切換。在“聽”這個頁面上（圖3），當我習慣性的左滑切換菜單時，出現(xiàn)的卻是抽屜菜單（圖4）。然而仔細觀察抽屜菜單里的功能，并不是強需求的功能點，除了“返回首頁”。但是此時的頁面已經(jīng)處在一級導航的首頁狀態(tài)，“返回首頁”也不是一個強需求。那為什么始終要將抽屜菜單放在這么優(yōu)先的級別呢，通過便捷的手勢交互就能調(diào)出，而導航菜單卻只能通過點擊來切換？這個是讓我有點不解的地方，也是我覺得可以優(yōu)化的地方。

在提出我的看法前，依然以“聽”的板塊和任務流為例，先大致說明下該板塊下有關(guān)“切換”的交互行為。

1.“聽看唱”菜單導航，僅能點擊切換

2.首頁狀態(tài)下，點擊圖標或左滑出現(xiàn)抽屜菜單

3.各子頁面下，點擊圖標或左滑出現(xiàn)抽屜菜單；點擊圖標或右滑返回上一頁；

首先，子頁面（圖6即為子頁面類）下的手勢交互是要保留的。左滑出抽屜菜單，“返回首頁”可以快速回到首頁導航；右滑則返回上一層頁面，“從哪兒來回到哪兒去”，符合用戶習慣和心里預期。兩種切換方案，讓用戶的操作有了更多選擇和便捷性。

因此，需要優(yōu)化的就是首頁狀態(tài)下導航和抽屜菜單的?交互設(shè)計?。

在移動端，一般需要“切換”的情況下，手勢交互比點擊交互的操作效率更高。參考下圖圖示（圖5），無論男性還是女性，其大拇指的操作區(qū)域均難觸及到手機屏幕的頂部，尤其現(xiàn)在屏幕5寸以上的手機是時下主流。在這種情況下，要想單手操作，精準點擊屏幕上方的按鈕來進行菜單切換，是一件很費功夫的事情，操作效率很低。

酷狗APP中的“聽看唱”位于頂部的菜單，僅支持點擊切換，顯然是不便用戶操作的。改進方案—–整合原來的交互設(shè)計，“聽看唱”支持點擊切換，并增加左右滑動切換菜單的交互行為。同時首頁狀態(tài)下左滑調(diào)出菜單的交互保留，但其交互級別是位于“聽看唱”之后。即首頁左滑時，依次切換順序為：“聽”->“看”->“唱”->抽屜菜單；右滑時則從抽屜菜單反之依次切換。這樣的交互調(diào)整，結(jié)合子頁面的左右滑動交互，就有了一個比較一致性的手勢交互行為。不至于在首頁狀態(tài)滑動時，始終出現(xiàn)一個需求較弱的抽屜菜單，讓人感覺莫名其妙。

◆ 雜亂的歌單界面

當進入“歌曲列表”這個子頁面時（圖6），給人第一感觀還是有點雜亂的，瀏覽體驗比較一般。UI設(shè)計是其中一個因素，比如圖標線條粗大，模塊視覺區(qū)別較低等。這里主要是討論一下，其布局方面。

由于遵循“子頁面下，左滑菜單右滑返回”的設(shè)計，【菜單】的圖標始終占據(jù)了頂部導航欄最右側(cè)的位置。那樣，此頁面的相關(guān)功能按鈕的布局設(shè)計就受到了影響。

可以看到在TAB的分類菜單下，還有一列功能的菜單欄，（下文統(tǒng)稱功能欄），分布【播放模式】、【搜索】、【多選】的功能按鈕。這個功能欄和TAB菜單視為一個模塊，始終固定位于歌曲列表的最上層的。

首先，該頁面的歌單列表提供了以首字母分列的輔助設(shè)計（圖6紅箭頭）。由于導航欄、TAB標簽欄、功能欄三者固定在上方，已經(jīng)壓榨了一定的歌單展示空間。而首字母分列只是一個輔助瀏覽的設(shè)計，采用大字母和粗藍線來分割，并占用將近一列的空間。這樣設(shè)計，讓原本受損的歌單展示空間顯得更加擁擠了。再者，每個歌曲名稱間的分割線較粗顏色較深，小圖標線條較粗，干擾瀏覽，加劇了“界面雜亂”的問題。（圖7，特意截了一張只有5首歌的界面圖，這個問題突顯）

我認為，歌單列表頁面的首要任務就是傳達清晰明朗的歌曲信息。輔助瀏覽的設(shè)計，可以讓用戶更好的瀏覽，但是不能喧賓奪主。在這個界面上（圖6），首字母分列的設(shè)計，并不是用戶必須獲取的信息，不應該將其與歌曲信息同分為“列”的級別，占用同等空間。因此，先對界面UI布局進行改進：

1.統(tǒng)一分割線為1px細線，縮小字母的字號，并將兩者整合在一起，起到輔助展示即可；

2.優(yōu)化調(diào)整小圖標等UI元素，調(diào)整其大小和粗細，要以突顯歌曲信息為主；

3.調(diào)整部分圖標的位置，將原先位于歌曲前的【+】插播圖標移至【…】圖標旁邊左側(cè)，

【MV】圖標則放至歌曲名稱后面。

改進理由：

上文已提到，優(yōu)化界面的UI元素，是為了減少對主信息的干擾。在這里，我主要說說幾個功能圖標位置調(diào)整的出發(fā)點。其中，【MV】圖標并不是一個常規(guī)的圖標，而它是根據(jù)歌曲的屬性來出現(xiàn)的，將其緊隨歌曲后面，用戶可以更直觀獲知該歌曲是否存在MV資源；

【+】和【…】圖標都是對歌曲進行操作的功能類按鈕，將其放在同一個附近區(qū)域，方便用戶記憶和操作，同時也利于整潔界面布局。

清晰的信息展現(xiàn)，整潔有序的界面，是良好瀏覽體驗的基礎(chǔ)。我做個了個大致效果圖，請參看圖8。用戶在瀏覽歌曲時，只需專注左側(cè)區(qū)域的信息即可，再無諸多繁雜干擾。

改進界面的大致布局設(shè)計后，還有一個需要考慮的問題，就是原本固定的功能欄要怎么處理？在此，我想了三個方案（圖9）：

一、保留原本上方固定功能欄的設(shè)計，因為對界面布局優(yōu)化后，瀏覽體驗已得到提升。

二、將功能欄并入歌單，列于歌單首部。隨著歌單滾動出當前可視頁面外，相當于隱藏。

三、在方案二的基礎(chǔ)上，將【搜索】圖標移出至導航欄，放在【…】左側(cè)或并入【…】。

三個方案的關(guān)鍵是其中的【搜索】按鈕怎么處理。

方案三中為何將其移到導航欄，是基于讓【搜索】功能始終可見的考慮，因為在此頁面下，搜索是個不可忽略的需求。將放在【…】左邊，直觀方便操作，但此時導航右側(cè)存在三個圖標，擁擠之外也可能影響酷狗的整體設(shè)計風格，是個待定方案；若將【搜索】并入【…】，會不會太過隱蔽？而方案一，保留原本固定位置的設(shè)計，【搜索】功能直觀，但是會有損歌單的展示空間，不是很好。因此，我認為方案二相當妥當些。因為，在打開此頁面時，歌單是處在列表首部位置的，而功能欄也是處在列首，用戶是可以獲知【搜索】按鈕的存在的，即便隨后滾動消失了；并且字母分割線和右側(cè)小字母等輔助查找歌曲的設(shè)計也可以分擔【搜索】的需求操作；重要一點，隱藏著功能欄有利于界面廣闊整潔，提升瀏覽體驗。

所以，首選方案二，次選方案三。其實，【搜索】按鈕怎樣放置，還需基于用戶研究去出發(fā)，若能有相關(guān)的用戶需要調(diào)研數(shù)據(jù)，相信更容易在其中找到一個平衡，去據(jù)需設(shè)計，能直觀可見或隱藏在較深層級，我覺得都是可取的?？傊芙o用戶提供更好的體驗，就是好的設(shè)計。

◆ 保持操作一致性

一款音樂軟件，提供【播放模式】選擇的功能，必不可少。在酷狗里，這個功能主要存在其中兩個地方：歌單頁面、播放歌曲頁面。這兩個頁面里有兩種狀態(tài)界面，即默認界面和“播放隊列”界面，都提供【播放模式】選擇的功能。但是，它們的操作方式卻是不同的。

這兩種操作方式分別是：

一、點擊出現(xiàn)下拉懸浮菜單，選擇對應模式，完成操作。該方式出現(xiàn)在默認界面。

二、點擊圖標即切換模式，出現(xiàn)懸浮層提示對應的模式狀態(tài)。該方式出現(xiàn)在“播放隊列”

界面里。

（圖10，為了對比，將兩個狀態(tài)界面整合在一起了，實際上不是同時出現(xiàn)的。播放隊列只有點擊后才會出現(xiàn)，然后可以對【播放模式】操作。）

通過圖片可以看出，交互方式上的不同。尤其在“播放歌曲頁面”中，當“播放隊列”中的【播放模式】點擊里邊的【播放模式】圖標，隨即出現(xiàn)懸浮層提示操作狀態(tài)，即點即切換。而退出“播放隊列”后，點擊默認界面下的【播放模式】圖標，出現(xiàn)的卻是和“播放隊列”一樣的懸浮菜單，然后進行下一步選擇！雖然是同一個功能，但是無論從操作反饋還是操作步驟來看，顯然都不符合用戶的心里預期的。

盡管說，這種小差別用戶慢慢就可以適應。但是為何不將兩個圖標按鈕的交互方式統(tǒng)一，保持一致性呢？

保持產(chǎn)品交互的一致性，符合用戶的心里預期的操作，更便于學習和使用。

酷狗APP的架構(gòu)龐大稍顯臃腫的情況下，有必要讓子頁面盡可能顯得簡潔和輕巧。同一個功能卻存在兩種交互方式，只會顯得更復雜。因此，需將【播放模式】的交互方式統(tǒng)一起來，在此之前先看下兩種交互方式的情況：

兩種設(shè)計各有優(yōu)劣。

第一種，采用點擊出現(xiàn)下拉菜單的方式，用戶只需兩步操作即可完成模式的切換，操作精確直觀且更容易掌控。但結(jié)合酷狗的界面，“播放隊列”是和下拉菜單類似的彈出懸浮層，若在此上面再出現(xiàn)下拉菜單懸浮層，體驗比較糟糕。就如同圖10，我硬將兩種懸浮層PS拼在一起，界面顯得繁瑣混亂，容易讓用戶迷茫當前哪個浮層是可以控制的，影響用戶的操作焦點。因此，這種交互方式放在“播放隊列”里，有一定沖突的。

而第二種交互方式，相對而言缺點則有：不能直觀操作，用戶一時無法獲知下一個的操作結(jié)果；有固定的排列順序，用戶不能隨意控制，必須逐次點擊逐個切換到自己想要的模式。

好在模式不多，切換操作成本的不算高，還可以接受。這種方式，操作反饋和呈現(xiàn)較輕，不會強干擾用戶，相對更容易保持界面的一致性。

那兩種交互方式如何取舍？我傾向采用第二種，原因有三：

1.放在哪個界面都可以比較好的融合，比第一種方式適用性強

2.不會給界面造成雜亂，構(gòu)造輕巧簡潔的界面，改善APP笨重繁雜的感觀

3.許多類似APP都采用此方式，有一定的用戶習慣基礎(chǔ)

總結(jié):

在使用過程中，該版本的個別頁面偶爾還會出現(xiàn)小卡頓的情況。作為一個融合多平臺的APP，在大框架的限制下，如何讓產(chǎn)品顯得更輕巧，我認為是酷狗APP優(yōu)化改善的方向。

以上內(nèi)容來自產(chǎn)品100. 感謝產(chǎn)品100的分享和學習。