QQ音樂(lè)5.0全新設(shè)計(jì)過(guò)程要點(diǎn)解析
不久前，QQ音樂(lè)推出了5.0版本。新版的視覺(jué)設(shè)計(jì)更突出音樂(lè)元素的表達(dá)，在品牌感上有了新的突破。 為了分析本次改版過(guò)程，騰訊ISUX發(fā)布了《QQ音樂(lè)V5 : 星設(shè)定》一文， 從框架、UI、圖文品質(zhì)和動(dòng)畫(huà)幾個(gè)方面，分享了QQ5.0設(shè)計(jì)過(guò)程和他們的思考。全文如下：
悄然間，QQ音樂(lè)已陪伴大家十個(gè)年頭，從PC互聯(lián)網(wǎng)時(shí)代走到了移動(dòng)互聯(lián)網(wǎng)時(shí)代QQ音樂(lè)一直探索和堅(jiān)持著簡(jiǎn)約時(shí)尚的設(shè)計(jì)語(yǔ)言。幾經(jīng)迭代，重慶多媒體公司以內(nèi)容為導(dǎo)向的頁(yè)面排版略顯保守，新版的視覺(jué)在品牌元素加入，突出音樂(lè)元素的表達(dá)，嘗試從新的角度詮釋簡(jiǎn)約時(shí)尚的設(shè)計(jì)語(yǔ)言。
如今的移動(dòng)應(yīng)用軟件設(shè)計(jì)已經(jīng)不再是簡(jiǎn)單跟隨手機(jī)系統(tǒng)設(shè)計(jì)，有個(gè)性有品牌感的產(chǎn)品會(huì)更加受到用戶喜歡。我們通過(guò)用戶調(diào)研，也了解到用戶對(duì)個(gè)性化界面的訴求，比如酷炫的皮膚，大圖模式和動(dòng)畫(huà)的設(shè)計(jì)。產(chǎn)品和設(shè)計(jì)希望新版視覺(jué)在個(gè)性化和品牌感上有所突破，一方面滿足用戶訴求，另一方面也能全面考慮一體化設(shè)計(jì)，解決多終端適配問(wèn)題。
接下來(lái)，我們將從框架、UI、圖文品質(zhì)和動(dòng)畫(huà)幾個(gè)方面，分享5.0設(shè)計(jì)過(guò)程和我們的思考。
以往版本更多是以內(nèi)容為導(dǎo)向的排版缺乏音樂(lè)元素的表現(xiàn)，在新版本里，不僅在內(nèi)容上，我們更希望在視覺(jué)上給用戶帶來(lái)更沉靜的音樂(lè)感受，在播放頁(yè)里我們還原了傳統(tǒng)“唱片”的表現(xiàn)形式，以及真實(shí)唱片的旋轉(zhuǎn)及切換動(dòng)畫(huà)，給予界面更多生命力，用戶不再覺(jué)得它是一排播放按鈕，而是點(diǎn)唱機(jī)。
那么如何讓唱片表現(xiàn)得更多真實(shí)生動(dòng)？結(jié)合通透封面模糊背景+扁平化唱片+平滑動(dòng)效。既給用戶保持一慣的簡(jiǎn)潔時(shí)尚風(fēng)格，也不需擔(dān)心增加擬物化的厚重質(zhì)感而過(guò)時(shí)。
沉浸享受音樂(lè)應(yīng)該是怎樣的場(chǎng)景？ —— 咖啡廳 / 酒吧 / 演唱會(huì) / 夜空 / ……
經(jīng)過(guò)多種場(chǎng)景探索，夜空更能給用戶營(yíng)造享受音樂(lè)的氛圍，也結(jié)合眾多用戶對(duì)夜間模式的需求，重慶影視公司新版QQ音樂(lè)首次推出「炫黑模式」，為了更好地搭配品牌綠色，我們選擇了深青藍(lán)色做主色調(diào)，用暖色做為輕微輔助光影，再經(jīng)過(guò)扁平化處理成主背景，讓界面顯得通透而不厚重。
我們?cè)O(shè)計(jì)了夜空為主題的預(yù)熱頁(yè)面和歡迎頁(yè)面。在預(yù)熱的階段，使用了星光組合的QQ音樂(lè)LOGO，星光由弱變亮，最后達(dá)到上線時(shí)群星閃耀的歡迎頁(yè)面。幽藍(lán)的星空、閃耀的星光、兩個(gè)正在分享音樂(lè)的人，讓用戶在打開(kāi)歡迎頁(yè)的時(shí)候產(chǎn)生夜空氛圍的情感代入。
當(dāng)然我們還考慮在某些場(chǎng)景不適合炫黑模式或是用戶的喜好，我們依然保留了傳統(tǒng)的「簡(jiǎn)約模式」，并支持一鍵切換。也為后續(xù)個(gè)性化自定義皮膚正式跨出了第一步。
隨著iPhone 6 / 6 plus的出現(xiàn), 及Android 720/1080p等大屏幕逐漸成為主流時(shí)，我們更多考慮了屏幕空間利用的相關(guān)問(wèn)題。UI上我們精減了大部份cell的樣式及多余的線條，減化了排版結(jié)構(gòu)，全局的詳情頁(yè)統(tǒng)一打通了導(dǎo)航欄，減少頁(yè)面割裂感，讓畫(huà)面更沉浸。音樂(lè)本應(yīng)時(shí)尚個(gè)性，新版本的歌手頁(yè)為歌手圖預(yù)留了更大的展示區(qū)域，盡可能展示歌手的個(gè)性化表現(xiàn)。
細(xì)節(jié)打磨
新版QQ音樂(lè)不斷為視覺(jué)細(xì)節(jié)體驗(yàn)進(jìn)一步打磨，我們首次嘗試使用更纖細(xì)時(shí)尚的字體 – 蘭亭細(xì)黑體。相比于系統(tǒng)字體會(huì)讓界面顯得更工整簡(jiǎn)潔，閱讀更為舒心。另外在圖標(biāo)方面，也延續(xù)了原來(lái)的線型設(shè)計(jì)進(jìn)行精雕細(xì)琢，部份圖標(biāo)更是重新繪制，化繁為簡(jiǎn)，力求每個(gè)圖標(biāo)簡(jiǎn)潔，易懂。
動(dòng)效設(shè)計(jì)
如今玲瑯滿目的App中，如何在設(shè)計(jì)中脫穎而出是需要設(shè)計(jì)師考慮的，不僅是合理的展示產(chǎn)品結(jié)構(gòu)與功能，更重要的是思考App是否能做到簡(jiǎn)潔易懂的同時(shí)，又給用戶新穎感？
動(dòng)效設(shè)計(jì)正成為移動(dòng)端設(shè)計(jì)中一個(gè)極為重要、非常必要的組成要素。
QQ音樂(lè)5.0在原先單一枯燥毫無(wú)生氣的操作模式上，增加靈動(dòng)而真實(shí)的動(dòng)效。
1.MiniPlayer快速切歌
Miniplayer在新版框架中作為常駐模塊，用戶在任何頁(yè)面內(nèi)都可以通過(guò)滑動(dòng)底部進(jìn)行操作。而左右切歌利用手勢(shì)和動(dòng)畫(huà)，減少外置切換icon的同時(shí)，使操作便捷，大大減少以往需進(jìn)入播放頁(yè)切歌的時(shí)間。
2.模擬真實(shí)唱片
即要保持簡(jiǎn)潔扁平的視覺(jué)風(fēng)格，又不希望加入擬物質(zhì)感與界面格格不入，那怎樣才能讓唱片的表現(xiàn)更真實(shí)？只有通過(guò)動(dòng)效細(xì)膩的表現(xiàn)來(lái)解決。但有個(gè)細(xì)節(jié)可能大家還沒(méi)能注意到–播放頁(yè)的唱片比MiniPlayer的唱片轉(zhuǎn)速約慢一倍左右。為了在視覺(jué)上唱片轉(zhuǎn)動(dòng)同步，通過(guò)調(diào)整角速度同步以保證唱片轉(zhuǎn)動(dòng)的線速度一致，所以大唱片的感觀轉(zhuǎn)速更為緩和。
QQ音樂(lè)V5 : 星設(shè)定 QQ音樂(lè)V5 : 星設(shè)定
3.MiniPlayer切換至播放頁(yè)
為了使得Miniplayer和播放頁(yè)來(lái)回切換的流程度，設(shè)計(jì)采用了分成動(dòng)畫(huà)的形式。底層、信息層和唱片封面層用不同的軌跡和動(dòng)畫(huà)原理，通過(guò)物理學(xué)動(dòng)力原理，設(shè)計(jì)師和開(kāi)發(fā)同事，通過(guò)對(duì)模擬物體運(yùn)動(dòng)軌跡研究和速度不斷的調(diào)整，模擬出舒服真實(shí)的動(dòng)畫(huà)感受。
QQ音樂(lè)V5 : 星設(shè)定
4.全局切換
用戶不僅可以通過(guò)點(diǎn)擊頂部導(dǎo)航進(jìn)行頁(yè)面切換，新增左右滑動(dòng)手勢(shì)，可以在頁(yè)面可控區(qū)域進(jìn)行頁(yè)面之間的轉(zhuǎn)換，大大減少使用效率，快速便捷。
響應(yīng)式的互動(dòng)，充滿意味的過(guò)度，令人愉悅的細(xì)節(jié)。掌握好這些特征之后，會(huì)起到錦上添花的作用。
精心編排的動(dòng)效設(shè)計(jì)能更為有效地吸引用戶的注意力，并讓用戶專(zhuān)注于操作不同的步驟，經(jīng)歷不同的流程；有意味的動(dòng)效設(shè)計(jì)能在界面變化、元素重新排列過(guò)程中，讓整體體驗(yàn)更加舒適。
QQ音樂(lè)V5 : 星設(shè)定 QQ音樂(lè)V5 : 星設(shè)定
總結(jié)
QQ音樂(lè)5.0全新設(shè)計(jì)來(lái)了，開(kāi)啟頁(yè)面繁星璀璨的夜空中，期待新版會(huì)給您耳目一新的感受。以上是項(xiàng)目中的一些過(guò)程和體會(huì)，為用戶帶來(lái)更酷炫更易用的聽(tīng)歌軟件QQ音樂(lè)的設(shè)計(jì)師一直努力著。
