【實戰】從音樂App看移動端的設計趨勢

2021-02-24 5PLUS設計師平臺
5PLUS是專注於職業設計師能力提高的專業平臺。只要您正在對設計、職業方面有任何的疑問，我們都隨時歡迎您與我們溝通交流。

作為 QQ音樂的深度用戶（因為懶所以不想做歌單轉移），在最近發布的新版本 5.0 上線後馬上開始了日常使用。不談產品和運營，在設計方面，這次的新版本主要在界面風格、交互方式上有了較大變動。而這些變動，個人認為恰好是當下主流移動端 apps 設計趨勢的代表，因此拿出來進行分析和總結。


QQ音樂 5.0

隨著 iOS 7 的推出，蘋果把主流設計風格帶進了大量運用扁平化、毛玻璃效果的趨勢。移動端 QQ音樂算是在音樂播放器中率先採用毛玻璃效果的，在舊版本中播放界面已經採用了毛玻璃效果——將專輯封面放大至佔滿屏幕，並進行較高程度的毛玻璃效果處理。這樣帶來的好處是播放界面不再千遍一律，背景顏色隨專輯封面的改變而改變。

而在 5.0 版本中這種效果更加被運用到整個應用當中。QQ音樂的官方說法把這個暗色主題稱作「炫黑主題」，一方面使得整個應用顯得更「潮流」和現代，另一方面也解決了夜間模式的缺失。一款用戶量達到一定程度的應用，對夜間場景的優化不可避免；而暗色調和毛玻璃效果並不是存在於我們生活中的事物，它是屬於這個虛擬世界的，因此風格自然也顯得更為現代。

當然，QQ音樂也給那些適應不過來或者不喜歡暗色主題的用戶提供了選擇，將界面設置為「簡約模式」，就可以回到舊版本白色背景風格的主題。


簡約模式

但這種風格的缺點也是顯而易見的。對於 QQ音樂這些注重運營的產品來說，運營位是不可缺的。但相比之下，暗色主題和運營位顯得格格不入，這些圖片甚至還搶走了不少對功能的注意力。

在播放界面中向下拖拽專輯封面，界面就會回到之前正在瀏覽的頁面。或許在專輯列表開始播放歌曲，或許在用「猜你喜歡」播放歌曲，總之執行這個下滑動作，界面就會返回，而且在任意界面點擊屏幕下方的播放窗口，就可以進入播放界面。而且在播放窗口中，左右滑動可以切換歌曲。


播放界面和播放窗口

在舊版本中，由於在播放界面左右滑動是切換到歌單和歌詞頁，返回上級頁面只能點擊左上角的返回按鈕。這顯然不適合大屏手機，而且 iPhone 的機身下方並沒有返回按鍵。

針對大屏的優化，QQ音樂給出這樣一套方案，我覺得是十分不錯的。播放界面和其它列表、搜索、運營頁面被徹底分開，兩者可以通過滑動的交互動作隨時切換，類似的例子還可以看看 Darkroom 這款應用。隨著屏幕增大，傳統點按的效率已經變得十分低，而從屏幕左側邊緣右劃返回也不能很好地滿足一些功能繁雜的應用。正是普遍屏幕尺寸的增大、用戶對智慧型手機經已熟悉，使得交互方式得以更多創新。


舊版安卓端 QQ音樂

實際上，播放窗口的概念在舊版的安卓客戶端已經形成，而 5.0 版本中不僅把安卓和 iOS 端統一，以專輯封面作為交互載體的概念也得到體現——交互動作不僅僅是簡單的動作，而是對專輯封面這個物體的操作。

雖然新增的這個交互形式我認為非常實用，但仍有很大的改進空間。在安卓客戶端上專輯封面沒有從播放界面的大封面縮小到播放窗口的小封面的切換動畫，而 iOS 客戶端上播放界面的消現也顯得很奇怪——從播放窗口切換到播放界面，上方的元素從頂端出現，下方的元素從底部出現，看起來播放窗口只是一個打開播放界面的按鈕，而不是播放界面的一個縮小窗口。

除了音樂播放器外，我們還會經常使用到支付寶、微信錢包，甚至淘寶、美團這些應用。它們有的分類繁多，有的功能繁多，但共同點都是把功能以跳板的形式體現。QQ音樂也是一個有代表性的例子，「全部歌曲」、「下載歌曲」、「最近播放」等等這些功能入口，以一個個 line icon 跳板放在首頁。

首先，對於這些分類繁雜或功能繁雜的產品，這種跳板的形式確實已經成為一種常用的設計形式。對於用戶來說，一開始可能還是眼花繚亂，但隨著使用時間增加，常用的入口便形成習慣，打開應用就能憑習慣點擊按鈕。

QQ音樂 5.0 主界面

按鈕的風格也各異，有的會用顏色區分，有的使用 solid icon，有的使用扁平化插畫，QQ音樂則使用了 line icon——但這個決定實在不太妙。雖然採用按鈕跳板能把同級的功能歸納好，但 QQ音樂的這些功能並不算多。採用 2*3 的跳板未嘗不可，line icon 在 iOS 7 發布後變得常見許多，但兩者配合起來就使得整個主界面顯得很粗糙、不夠精緻。

由於中文字體的體積普遍偏大，動輒 10M、20M，對於新上架的應用來著龐大的體積或許會影響到用戶的下載欲望，沒有足夠資金的獨立開發者也難以承擔版權費用。而第三方字體的引入確實能給應用添色，改善用戶體驗的同時也能進一步建立品牌/應用形象。這需要對用戶量、設計費用的投入等多方面的權衡，QQ音樂在這方面又是一個代表，但關於第三方字體就此帶過不多展開。

總體來說，QQ音樂這次 5.0 版本的更新，能體現出很多當今移動端 apps 設計趨勢，也反映了 QQ音樂對設計的重視至少不會在產品團隊裡不受待見。新穎的交互方式、率先全局運用的毛玻璃效果等嘗試是值得稱讚的。

雖然如此，在最終效果上還是顯得不夠精緻，在不少頁面中明顯犯錯。iOS 端的播放界面毛玻璃效果的程度偏低、且與安卓端不統一，暗色主題的搜索頁中採用了普通鍵盤樣式顯得突兀，這些都讓最終效果打上折扣。


如果您對以上內容有任何的問題，歡迎您關注「5PLUS」與我們交流，期待您的關注。

【內容來源於網絡，作者 劉英滕】

微信：uedplus

媒體轉載、投稿、合作請聯繫郵箱

710903388@qq.com


相關焦點

  • 各大移動端應用市場APP排行的情況
    本文作者翻閱了2015年到2020年移動應用市場app前十的變化情況，粗淺的可以看出移動app在應用市場中，隨著人們的需求變化而變化，最終將整理的內容留個備份，也分享給有需要小夥伴。2020年是一個考驗每個人、每個公司，甚至每個國家非常特殊的一年，就如同創業公司起步只想著怎麼先活下去的一樣感覺。
  • 西數推全新My Cloud Home及自動備份充電座 挖掘移動端市場
    隨著移動端應用的崛起和滲透，越來越多的應用場景由web端逐漸轉移至移動端。基於移動端的崛起和網民們生活方式的改變，不少存儲廠商也開始大力挖掘移動端市場。威騰電子作為存儲技術和解決方案知名廠商，基於當下市場趨勢，重磅推出旗下品牌閃迪欣享自動備份充電座及My CloudHome兩款產品。閃迪欣享自動備份充電座 愜意生活隨心享據介紹， 自動備份充電座主要適用於iPhone，可以將iPhone照片、視頻和聯繫人資料輕鬆備份。
  • 2021設計趨勢:UI/UX篇
    時間似乎停在了這樣一個特殊的年份，2020年的設計趨勢沒有主要變化，仍然會持續到2021年；事實上一些設計趨勢被疫情大流行所影響，並且它所創造的需求幾乎涉及每一個領域。 儘管2020年的設計趨勢會繼續影響接下來的一年，我們會嘗試保持哪些在2021年的主要趨勢。
  • 移動端網站設計:它是什麼及其重要性
    除非您最近幾年一直呆在家裡，否則您將知道移動端網站設計已成為許多企業的關鍵任務。您需要投資於新的網站建設和設計嗎？還是只是移動端網站的更新？ 你甚至需要擔心嗎？---成都雲思禾網絡運營 浪知潮團隊多年來一直在設計適合行動裝置訪問的網站，我們很高興分享對移動所有事物的見解。讓我們從基礎開始：移動設計和常規Web設計有什麼區別，它對您的業務有何影響？ 什麼是移動端網站設計？
  • 設計實戰!稱職又好用的電影購票APP應該如何設計?
    今天的文章，我們來聊一聊，如何為一個電影購票APP設計頁面UI和體驗、功能。電影詳情頁的UI設計並不複雜。電影海報+名稱+詳細信息構成了其中主要的內容，移動端排版也可以在視覺上做到非常突出，確保清晰的同時，為用戶提供愉悅的瀏覽體驗。除此之外，電影的評分也是幫助用戶判斷的重要元素。諸如爛番茄和IMDB 這樣的權威電影評分網站，能夠幫助用戶對於電影有更好的評估，在評分的參考下決定要不要購票。當然，最好是能添加書籤功能。
  • B端移動設計|臺卡
    本文轉載自【微信公眾號：俊馳，ID:hbjunchi】來自專輯B端移動設計產品設計不只有設計，還可在設計中進行盈利--這是第313篇原創臺卡：放在櫃檯上的卡片。03 心得產品設計不只有設計，還可以在設計中進行盈利。本文轉載自【微信公眾號：俊馳，ID:hbjunchi】
  • Behance 2020 設計趨勢
    關於2019 年末 Behance 上的知名作品，包含了 UI、動效、插畫，並給出關於 2020 的設計趨勢。儘管大多數趨勢都是去年延續至今的變化，但到2020年，仍然有些新的趨勢值得設計師追求。 最關鍵的設計趨勢，必定與科技發展和技術趨勢緊密結合，以及和它們如何影響設計領域相關。 讓我們開始探索2020年最複雜的設計趨勢指南。
  • 優衣庫、MUJI等品牌app創新設計案例五大要點
    越來越多的傳統企業擁抱移動網際網路，以補充完善原有渠道的目標推出自有企業的品牌app，比如傳統雜誌社設計一款電子雜誌app、傳統實體店商家推出電子商城app。這些傳統的做法已經司空見慣，讓我們看看品牌大牛們有哪些不務正業的新玩法。　　本文不談趨勢、不談技術，也不涉及廣告營銷思路。
  • 對啊網設計學院:學習移動端設計語言
    新年伊始，收到很多同學的私信，對於移動端的設計語言及規範還是有些混亂，不知道有沒有什麼好的借鑑？我們作為設計師，最主要的就是學習，當然，就是向優秀的人學習。關於借鑑也肯定是向優秀的公司借鑑，前沿的設計理念和完善的設計語言就是我們該掌握的了。下面是小編推薦的一些優秀公司的設計語言，希望對大家有所幫助。
  • 淺析移動音樂競品:網易雲音樂 VS QQ音樂
    （2）行業內的主流趨勢：版權的互相授權、互通和共享。1.2.3 社會環境（1）移動音樂發展的用戶基礎：龐大的移動網民規模。因此，建議在移動音樂產品設計和優化中，可重點關注此年齡段用戶，針對此年齡段的特點進行優化和設計，以爭取到最大量用戶的認同。
  • 樂視移動端播放量破億 獨播綜藝成殺器
    在移動端播放量創記錄的同時，樂視網全屏的播放量也突破2.5億大關，垂直整合的樂視生態正在逐漸發力，初步顯現出聚合效應的威力。視頻移動化：大趨勢不可擋隨著智慧型手機、平板電腦的不斷普及，以及數據資費的不斷下調，視頻正在成為行動裝置的主流應用之一。人們在茶餘飯後、公共運輸工具上，用移動客戶端看一段視頻，正在成為新的日常生活場景。
  • APP啟動圖標設計方法!
    設計師需要始終以用戶的角度來審視啟動圖標的設計，只有這樣才能達到精確的信息傳達與和諧的視覺效果共存。①了解設計趨勢。在設計領域視覺風格的變化是實時的，使用者們更能接受新的視覺潮流，也願意在自己的行動裝置中看到最流行的視覺元素。
  • 騰訊移動端APP閃屏聯投,助力愛善天使俏妃玩出新風範
    在眼下5G發展迅猛的時代，快速觸達、海量曝光、精準投放、最大化覆蓋等等，移動端的跨界成為眾多品牌的重點關注對象。近日，愛善天使集團俏妃攜手騰訊跨界合作，以騰訊移動端多款APP為陣地，雙方憑藉自身優質內容聯動吸引了眾多消費者注意力和好感度。
  • 第三季度針對PC端和移動端的攻擊趨勢分析(上)
    本報告是Recorded Future網絡安全公司發布的報告，報告根據的是第三季度所涉及到的主流網絡安全新聞、安全供應商報告、關於惡意軟體、安全漏洞以及2020年7月1日至9月30日的暗網和地下論壇，綜合這些信息就是為了更準確地研究影響桌面系統和行動裝置的惡意軟體的主要趨勢。
  • 到底哪個音樂APP最好使?丨蘑菇APP親測安利
    此外音質來說，普通用戶無需付款即可享受320kbit/s的歌曲，實測也的確是這個質量，比QQ音樂蝦米音樂良心太多。歌詞質量高，外文歌翻譯數量多，用著就是倆字——安逸~（無損音質也有，但是需要買音樂包） UI設計很漂亮簡潔，記得還獲過獎。
  • 百度音樂打造「體驗+資源」一站式「好音樂」
    百度音樂中國好聲音第二季專題在好聲音播出期間，為了進一步提高用戶體驗，此次藉助中國好聲音的獨家音頻版權，百度音樂建立起貫通PC端、移動APP端、webAPP端的推廣矩陣，而進入8月後，ios和安卓4.0版本的震撼升級更是讓移動端用戶大呼過癮。
  • 在線音樂發展趨勢洞察
    整合期-企業合併和版權合作蝦米音樂與天天動聽組合成阿里音樂，QQ音樂業務和酷我、酷狗音樂合併，網易雲音樂和騰訊音樂、阿里音樂達成版權授權合作。4. 現階段-存量時代在線音樂行業步入存量紅利時代，各大音樂平臺進入「後版權時代」，深耕用戶、提高用戶粘性成為重心，包括但不僅限於社區化的內容拓展形式變成趨勢。
  • 蘋果公布 App Store 2020年度精選 App 獲獎名單
    現任 Apple Fellow 的 Phil Schiller說：「比起往年，我們今年有許多最具創意、最彼此相連的時刻，都是在 app 上發生的。是開發者的精彩工作讓這一切成為可能，在這一年中為我們帶來新鮮、有助益的 app 體驗，我們在全球範圍內看到了眾多開發者的不懈努力，而 2020 年度精選獲獎者只是這種創新精神的幾個傑出表率。
  • OTT 及移動端的巨大潛力
    但無論是居家還是出行，移動端都是 OTT 領域的重要組成部分。eMarketer 發布的一份報告顯示，63% 的美國消費者最常用的 OTT 媒體設備是電視。移動端位居第二，佔 11.6%。然而我們發現，用戶在移動端訪問流媒體 OTT 內容的時長几乎佔總觀看時長的四分之一。也就是說，行動裝置用戶觀看 OTT 內容的時長高於平均值。
  • 2017三季度中國APP排行榜:快手依舊霸榜短視頻
    跟上半年排名相比，有幾個上榜的短視頻app值得關注：排名12、13的快視頻和想看視頻，都是小米系的app，由此可見小米在做了小米直播之後，仍然有進軍泛娛樂社交的決心。排名16的奶糖短視頻，今年6月剛上線，是除了抖音之外的另一個音樂短視頻app。