音樂鎖屏設計過程與反思

文章為作者根據自身工作經驗所做的總結分享，希望可以給你帶來啟發，

設計背景

使用者在使用第三方應用聽音樂時，第三方的音樂鎖屏會覆蓋在手機的鎖屏之上，導致使用者需要兩次滑動才能進入解鎖介面，操作繁複。作為一家手機公司，為了解決這個問題，產品希望：

將第三方音樂鎖屏嵌入到我們自己的鎖屏當中，解決兩次解鎖的問題；

統一第三方音樂的鎖屏樣式，讓我們鎖屏介面一致性高。

方案設計

1。競品分析和第三方音樂鎖屏分析

在設計方案前，筆者對競品的音樂鎖屏介面進行了分析：

透過競品分析發現，蘋果，小米，魅族等手機廠商已經對第三方音樂鎖屏進行了適配。

在功能方面，音樂鎖屏的基礎功能包括：播放/暫停，上一首，下一首，其餘的，小米和蘋果做了收藏功能，蘋果做了調節進度和調節音量的功能。

在資訊顯示方面，適配第三方的音樂鎖屏會顯示歌曲名，歌手名，專輯名稱，專輯封面，歌詞資訊，未做適配的音樂鎖屏只顯示了歌曲名，歌手名和專輯名稱。

接著，筆者對主流的第三方音樂軟體的鎖屏進行了分析：

第三方音樂鎖屏包含的功能與手機音樂鎖屏的功能基本類似，其餘的，QQ音樂將迴圈播放功能放在了鎖屏上，顯示方面，第三方音樂鎖屏顯示了全屏的專輯封面，時間，歌曲名，歌手名，專輯名稱和歌詞。

根據競品的情況和第三方鎖屏音樂的顯示內容，產品經理，互動，研發進行了一輪功能討論，產品希望在鎖屏上提供給使用者儘可能全面的功能，形成我們產品的特色，研發方面，根據我們現有的技術能力，只能夠將第三方音樂鎖屏上的資訊進行提取和整合，最終，我們決定做的功能和顯示的資訊包括：

功能：播放/暫停，上一首，下一首

資訊顯示：歌曲名，歌手名，專輯名稱，專輯封面，歌詞

2。介面佈局

根據資訊的類別，我們將介面元素進行了分類，在進行介面佈局設計時，筆者思考了這樣幾個問題：

（1）專輯封面設計成圓形還是方形？

圓形在視覺效果方面會比較美觀，但與研發進行討論，目前我們能做到的只能講第三方鎖屏音樂的背景圖片和裡面的歌詞進行縮放，然後顯示在我們規定的窗口裡，顯示成圓形會導致圖片和歌詞顯示不全的問題。

（2）按鈕是放在專輯封面的上方還是下方？

考慮到使用者使用音樂鎖屏的場景，公交車上，跑步時，走路時等等，在這些場景下，使用者有單手使用手機的需求，為了方便使用者能夠便捷的使用這些按鍵，我們最終將控制按鈕設計在了下方。

3.操作規則

包括常規操作，解鎖規則，暫停機制，絲印鍵操作規則，通知中心和控制中心在此時的操作；

特殊狀態：無封面狀態/無歌詞狀態/無歌曲名/無歌手/無專輯名稱狀態/無網路狀態等特殊情況的處理機制；

併發情況：來通知，來電，來鬧鐘，來紅包時的併發規則

設計跟進

在設計方案實現的過程中，遇到了一系列原來沒有考慮到的問題，包括

1。專輯封面顯示不全的問題

在我們的實現過程中，發現很多專輯封面顯示的是人物，而在我們的顯示框中，很多人物臉部被切割，非常影響視覺效果，我們對現象和實現方案進行了研究，大多數的第三方音樂人物顯示的位置相似，但是我們的實現方案是隻顯示專輯封面在我們框中位置的部分，而這個位置正好將人臉進行了切割，最終我們將專輯封面進行了下移處理。

2。歌詞位置的顯示問題

由於第三方音樂的歌詞顯示方式各不相同，很難用一種方式將鎖屏歌詞顯示完美，最終我們根據第三方鎖屏音樂各自的歌詞顯示方式，設定了每個應用各自的歌詞出現高度。

3。第三方應用升級問題

我們透過一套演算法將第三方音樂鎖屏上的元素進行了提取，但是當第三方音樂鎖屏上元素位置發生改變，元素內容發生改變時，我們的演算法就會存在適配失效的問題，最終，我們評估了版本維護的工作量，並且加入了後臺維護的演算法。產品最終效果出來以後，我們根據使用者反饋，制定了下一期的相關的迭代最佳化方案。

透過這一次的設計，我的收穫是：1。在接到全新的需求時，要與軟體進行密切溝通，瞭解軟體預研的結果能夠避免輸出無法實現的方案；2。設計方案輸出只是設計的前期，後期的設計跟進也是設計中一個非常重要的環節，設計跟進中，要與軟體視效一起，及時調整和補充方案，這樣才能保證最後方案的效果。

補充

我們重新審視這個專案，發現這個專案有兩個非常嚴重的問題：

作為平臺，需要對每個適配的第三方單獨進行精細調整，可拓展性和維護成本非常差；

第三方一升級就會導致我們適配方案的失效。在專案開發完成後，我們就面臨著維護成本的問題。如果在初期就詳細評估維護成本，大家會重新考慮是否使用這個方案。

本文由 @ 張宇希 原創釋出於人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基於CC0協議