交互設計四策略在音樂播放條上的運用

11 評論 16523 瀏覽 54 收藏 9 分鐘

追求簡單易用是人類的本性,《簡約至上》中提出了合理刪除、分層組織、適時隱藏和巧妙轉移這四個達成簡約的終極策略。對于功能性單一的產品做到簡潔化比較容易,但對于功能性較強的產品如要做到簡潔就是一個復雜的課題。

簡約不是一件簡單的事兒。真正的簡約是在保證和突出特征和個性情況下的簡約。是建立在一定情境下,對相應對象而言的簡約。不同角色的用戶對產品的需求不同,相同角色的用戶在不同時期的需求也不同。但總體而言,他們想要的是“不要讓我想、不要讓我煩、不要讓我等”的產品。

來說說此次內容的主體:音樂播放條。這里所指代的是在音樂APP上播放音樂時底部出現的矩形操作入口,用來“吊起”當前正在播放的音樂,從而實現聽音樂的同時不影響瀏覽其他頁面,又可以隨時對音樂進行控制。

0

通常他們具備這樣的特性:

  1. 全局性:貫通整個APP幾乎所有的頁面中,無論你處在哪個層級,都可以隨時進行歌曲操作。
  2. 固定性:位置固定、樣式固定,不會受到頁面內容的影響而改變。

0

形式上他們都是一個位于頁面底部的長條矩形;內容上可以分為信息展示、功能操作兩個部分。

我選擇了5個常用的音樂APP,將他們包含的信息整理如下

0 (1)

圖表:播放條信息整理

整理后發現,平時習以為常使用的小模塊中間竟然包含了這么多內容。所以說簡潔的產品不是本身有多簡單,而是要把設計做的簡單,讓用戶覺得簡單。

播放條雖是音樂APP千萬功能中不起眼的標配模塊,但依然承載著產品的特性與戰略;因為少有迭代的機會,設計過程才更需謹慎。接下來就讓我們一起看看小小的播放條又是如何貫徹設計四策略的。

刪除:Apple music

“去掉所有不必要的按鈕,直到減到不能夠再減為止”。

linshizhanyong

當頁面/模塊面積有限,卻有大量候選功能時,我們要考慮的不是如何絞盡腦汁把它們硬塞進去,而是想想:這些功能真的有必要嗎?用戶最期待的是那些功能?如果砍掉這個功能會影響產品使用嗎?

Apple music的主導航是位于底部的菜單欄,選擇播放條的形式就意味著頁面下方會被兩條矩形所占據,小屏幕時更是將用來顯示信息的區域擠壓到可憐。盡可能壓縮播放條的面積更像是一個不得已之舉。

刪除法的關鍵在于要刪什么,這就牽涉到如何確定核心功能。可以看到Apple music沒有展示任何圖片相關的信息,只保留了針對當前媒體的基本功能操作,其他統統被舍棄。

組織:You Tube music

“按照有意義的標準將功能進行整合劃分”

0 (2)

YT Music采用音/視頻切換的播放模式,將圖像信息與播放條完美的組織在了一起,播放條更像是一個縮略版的播放界面。與其他家的放置封面圖片相比,算的上眼前一亮的突破。

在對播放條畫面的截取上YT Music也做了細心的處理。通常構圖時人的視覺重心會在畫紙物理中心偏上的地方,因為這樣更符合人在觀察事物時視覺中心的平衡點。從拍攝畫面來說,這個區域也最有可能出現頭部、臉部或重點要素。YT Music選擇中間偏上的區域用來顯示在播放條上,能最大程度的展示關鍵信息。

格式塔原則中指出:當構圖中各個視覺單元具有共同的特征時,它們就顯示出一種視覺歸類的趨向,這種視覺簡化法也稱為相似歸類。在界面設計時此原則依然受用,將存在共同特性的功能、信息組合在一起,選擇合適的方法將它們打包,從而實現簡化使用操作的效果。

隱藏:QQ音樂

“將那些不是最重要的功能放在舞臺之下,避免分散用戶注意力?”

0 (1)

QQ音樂的播放條看起來很簡潔,除了左邊的音樂信息外,右側就放了兩個按鈕,但他卻是五個APP中唯一擁有“上一首”功能的。針對此操作QQ音樂并沒有給以實際的按鈕,而是將它們隱藏,通過左右滑動實現歌曲前后切換。

隱藏不等于不可見,QQ音樂選擇了動效這一常見的方法來引導用戶。當音樂播放完畢進入下一首時,播放條上音樂的信息就會向左滑動并由新的音樂所替代。以此來傳達播放條在X軸維度上依然存在操作,整個引導過程簡單流暢。

隱藏在常用功能之下,利用提示和線索讓功能容易被找到。隱藏法保證了產品的簡潔,而又不會使功能有所缺失,每個功能都如同被隱藏的寶石,等待你慢慢的發現體會。

轉移:酷狗音樂

“保留基本信息,將剩余轉移到其他地方”

0 (2)

將一些不常用或者信息量很大的元素轉移到其他地方顯示。

酷狗的特點是可以在播放條上調整歌曲進度,如果只是單單在進度條上多了個手柄當然沒啥好講的,模糊調整對歌曲而言并沒有太大的意義。酷狗的做法是,拖動手柄過程中會在播放條的上方出現對應的歌詞模塊。通過將臨時信息轉移擴展到主體以外的區域,實現了用戶精細操作,又保證了播放條的簡潔。

 

其實做設計就像是整理房間,閑置多余的扔掉、相同類型的放在一起、不常用的儲藏起來、放不下的轉移到其他地方……

對于功能性單一的產品做到簡潔化比較容易,但對于功能性較強的產品如要做到簡潔就是一個復雜的課題。

清晰的設計邏輯是簡潔的前提,只有產品的設計簡潔、清爽了,用戶才會用、愛用。

 

本文由網易云音樂交互設計師 @任軼(微信公眾號:臭臉任的慢生活) 原創發布于人人都是產品經理?,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 學到很多 ??

    來自四川 回復
  2. 期待網易云音樂的分析,對我來說,我喜歡的理由是有質感的外觀、精準精品的歌單。它和QQ音樂一大顯著區別是音樂資源庫的不同,當然這就屬于產品定位、運營策略了

    來自天津 回復
    1. 謝謝回復,很感謝對云音樂的喜愛,我會繼續努力。
      其實社交也是云音樂一直想嘗試的方向,最近我一直在思考這方面的問題,多交流哈~

      來自浙江 回復
    2. 音樂和社交結合有難度,音樂對于大部分人來說不屬于高頻需求,期待你們的社交方向!再加一句,云音樂的資源庫和歌單、每日推薦真的是太出彩了。

      來自天津 回復
  3. 我是先用的qq,后面嘗試著用了一下網易的,不知道是不是受先入為主的思想,我又用回了QQ,總覺得網易在“我的音樂”那塊兒,沒QQ做得大氣,好用,順手,基本我一進去,在“我的音樂”那里找功能,特別快,求大神分析一下,我并非高頻用戶,聽在線音樂也不多,畢竟能聽歌的時間都是碎片化的,沒有無線網絡的場景居多!

    來自廣東 回復
    1. 謝謝回復,很感謝親的耐心留言
      親說的問題我也有同感,我認為可能是布局形式的不同?
      QQ將六個功能柵格排布首先擴展性差,比如多一個或少一個的時候就會顯得不整齊;柵格的入口是常駐的,當次模塊不具備內容時依然占位存在,對頁面來說也是種空間損失;云音樂起初也嘗試過柵格,不過音樂功能架構太復雜后來還是選擇了列表入口,根據用戶自身的使用狀態來有機的顯示入口(譬如沒有下載/收藏過MV,MV的入口就不會顯示)。
      很開心與您的交流~

      來自浙江 回復
  4. 求大神有機會了分析下網易云音樂~ ??

    來自廣東 回復
    1. 謝謝留言,會多嘗試的~多多交流哈

      來自浙江 回復
  5. 為什么不分析下網易的交互??

    回復
    1. :mrgreen: :mrgreen: :mrgreen: 確實,我也蠻喜歡網易云音樂。

      來自廣東 回復
    2. 謝謝留言,會的會的~

      來自浙江 回復