悄然間,，QQ音樂已陪伴大家十個年頭,，從PC互聯(lián)網(wǎng)時代走到了移動互聯(lián)網(wǎng)時代QQ音樂一直探索和堅持著簡約時尚的設(shè)計語言。幾經(jīng)迭代,，以內(nèi)容為導(dǎo)向的頁面排版略顯保守,，新版的視覺在品牌元素加入，突出音樂元素的表達,，嘗試從新的角度詮釋簡約時尚的設(shè)計語言,。

如今的移動應(yīng)用軟件設(shè)計已經(jīng)不再是簡單跟隨手機系統(tǒng)設(shè)計,，有個性有品牌感的產(chǎn)品會更加受到用戶喜歡。我們通過用戶調(diào)研,，也了解到用戶對個性化界面的訴求,，比如酷炫的皮膚，大圖模式和動畫的設(shè)計,。產(chǎn)品和設(shè)計希望新版視覺在個性化和品牌感上有所突破,，一方面滿足用戶訴求，另一方面也能全面考慮一體化設(shè)計,，解決多終端適配問題,。

接下來，我們將從框架,、UI,、圖文品質(zhì)和動畫幾個方面，分享5.0設(shè)計過程和我們的思考,。

以往版本更多是以內(nèi)容為導(dǎo)向的排版缺乏音樂元素的表現(xiàn),，在新版本里，不僅在內(nèi)容上,，我們更希望在視覺上給用戶帶來更沉靜的音樂感受,，在播放頁里我們還原了傳統(tǒng)[唱片]的表現(xiàn)形式，以及真實唱片的旋轉(zhuǎn)及切換動畫,，給予界面更多生命力,，用戶不再覺得它是一排播放按鈕，而是點唱機,。

那么如何讓唱片表現(xiàn)得更多真實生動,？結(jié)合通透封面模糊背景+扁平化唱片+平滑動效。既給用戶保持一慣的簡潔時尚風(fēng)格,，也不需擔(dān)心增加擬物化的厚重質(zhì)感而過時,。

沉浸享受音樂應(yīng)該是怎樣的場景？  —— 咖啡廳 / 酒吧 / 演唱會 / 夜空 / ……

經(jīng)過多種場景探索,，夜空更能給用戶營造享受音樂的氛圍,，也結(jié)合眾多用戶對夜間模式的需求，新版QQ音樂首次推出「炫黑模式」,，為了更好地搭配品牌綠色,，我們選擇了深青藍色做主色調(diào)，用暖色做為輕微輔助光影,，再經(jīng)過扁平化處理成主背景,，讓界面顯得通透而不厚重。

我們設(shè)計了夜空為主題的預(yù)熱頁面和歡迎頁面,。在預(yù)熱的階段,，使用了星光組合的QQ音樂LOGO，星光由弱變亮,，最后達到上線時群星閃耀的歡迎頁面,。幽藍的星空、閃耀的星光,、兩個正在分享音樂的人,，讓用戶在打開歡迎頁的時候產(chǎn)生夜空氛圍的情感代入。

當(dāng)然我們還考慮在某些場景不適合炫黑模式或是用戶的喜好,，我們依然保留了傳統(tǒng)的「簡約模式」,，并支持一鍵切換。也為后續(xù)個性化自定義皮膚正式跨出了第一步,。

隨著iPhone 6 / 6 plus的出現(xiàn), 及Android 720/1080p等大屏幕逐漸成為主流時,，我們更多考慮了屏幕空間利用的相關(guān)問題。UI上我們精減了大部份cell的樣式及多余的線條,，減化了排版結(jié)構(gòu),，全局的詳情頁統(tǒng)一打通了導(dǎo)航欄，減少頁面割裂感,，讓畫面更沉浸,。音樂本應(yīng)時尚個性，新版本的歌手頁為歌手圖預(yù)留了更大的展示區(qū)域,，盡可能展示歌手的個性化表現(xiàn),。

細節(jié)打磨

新版QQ音樂不斷為視覺細節(jié)體驗進一步打磨，我們首次嘗試使用更纖細時尚的字體 – 蘭亭細黑體,。相比于系統(tǒng)字體會讓界面顯得更工整簡潔,，閱讀更為舒心。另外在圖標(biāo)方面,，也延續(xù)了原來的線型設(shè)計進行精雕細琢,，部份圖標(biāo)更是重新繪制，化繁為簡,，力求每個圖標(biāo)簡潔,，易懂。

動效設(shè)計

如今玲瑯滿目的App中,，如何在設(shè)計中脫穎而出是需要設(shè)計師考慮的,，不僅是合理的展示產(chǎn)品結(jié)構(gòu)與功能，更重要的是思考App是否能做到簡潔易懂的同時,，又給用戶新穎感,？

動效設(shè)計正成為移動端設(shè)計中一個極為重要、非常必要的組成要素,。

QQ音樂5.0在原先單一枯燥毫無生氣的操作模式上,，增加靈動而真實的動效,。

1.MiniPlayer快速切歌

Miniplayer在新版框架中作為常駐模塊，用戶在任何頁面內(nèi)都可以通過滑動底部進行操作,。而左右切歌利用手勢和動畫,，減少外置切換icon的同時，使操作便捷,，大大減少以往需進入播放頁切歌的時間,。

2.模擬真實唱片

即要保持簡潔扁平的視覺風(fēng)格，又不希望加入擬物質(zhì)感與界面格格不入,，那怎樣才能讓唱片的表現(xiàn)更真實,？只有通過動效細膩的表現(xiàn)來解決。但有個細節(jié)可能大家還沒能注意到–播放頁的唱片比MiniPlayer的唱片轉(zhuǎn)速約慢一倍左右,。為了在視覺上唱片轉(zhuǎn)動同步,，通過調(diào)整角速度同步以保證唱片轉(zhuǎn)動的線速度一致，所以大唱片的感觀轉(zhuǎn)速更為緩和,。

3.MiniPlayer切換至播放頁

為了使得Miniplayer和播放頁來回切換的流程度,，設(shè)計采用了分成動畫的形式。底層,、信息層和唱片封面層用不同的軌跡和動畫原理,，通過物理學(xué)動力原理，設(shè)計師和開發(fā)同事,，通過對模擬物體運動軌跡研究和速度不斷的調(diào)整,，模擬出舒服真實的動畫感受。

4.全局切換

用戶不僅可以通過點擊頂部導(dǎo)航進行頁面切換,，新增左右滑動手勢,，可以在頁面可控區(qū)域進行頁面之間的轉(zhuǎn)換，大大減少使用效率,，快速便捷,。

響應(yīng)式的互動，充滿意味的過度,，令人愉悅的細節(jié),。掌握好這些特征之后，會起到錦上添花的作用,。

精心編排的動效設(shè)計能更為有效地吸引用戶的注意力,，并讓用戶專注于操作不同的步驟，經(jīng)歷不同的流程,；有意味的動效設(shè)計能在界面變化,、元素重新排列過程中，讓整體體驗更加舒適,。

總結(jié)

QQ音樂5.0全新設(shè)計來了,，開啟頁面繁星璀璨的夜空中,，期待新版會給您耳目一新的感受。以上是項目中的一些過程和體會,，為用戶帶來更酷炫更易用的聽歌軟件QQ音樂的設(shè)計師一直努力著,。