tft每日頭條

 > 圖文

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

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

圖文 更新时间:2024-08-16 04:21:18

來人人都是産品經理【起點學院】,BAT實戰派産品總監手把手系統帶你學産品、學運營。

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

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

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

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

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

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

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

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

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

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

圖表:播放條信息整理

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

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

删除:Apple music

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

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

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

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

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

組織:You Tube music

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

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

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

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

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

隐藏:QQ音樂

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

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

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

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

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

轉移:酷狗音樂

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

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

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

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

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

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

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

本文由網易雲音樂交互設計師 @任轶(臭臉任的慢生活) 原創發布于人人都是産品經理 ,未經許可,禁止轉載。

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved