唱吧來到了2018年，已經(jīng)積累了大量的各年齡層的用戶。設(shè)計(jì)團(tuán)隊(duì)在之前的版本設(shè)計(jì)語言保持中性，以展示內(nèi)容和功能為主。

作為一款唱歌、聽歌、社交娛樂為一體的產(chǎn)品，2018年，設(shè)計(jì)團(tuán)隊(duì)希望在接下來的新版本UI中，在突出內(nèi)容和功能的基礎(chǔ)上，期待可以給用戶更加年輕活潑的設(shè)計(jì)的感受。

一. 前期用戶調(diào)研 —— 單人訪談與焦點(diǎn)小組

為了做好這次改版，我們UED團(tuán)隊(duì)調(diào)研了身邊的朋友使用唱吧的感受和對(duì)UI的建議，同時(shí)也在公司內(nèi)部進(jìn)行了一輪焦點(diǎn)小組和用戶訪談，雖然樣本有限，但是調(diào)研結(jié)果卻普遍一致。

1. 單人訪談

唱吧UED團(tuán)隊(duì)做的所謂單人訪談一般是不占用工作時(shí)間的，所以具體表現(xiàn)形式也并不像傳統(tǒng)的書本中那樣桎梏在條框里。

一般是團(tuán)隊(duì)成員通過和朋友閑聊的過程中有意識(shí)的進(jìn)行發(fā)問，發(fā)現(xiàn)用戶使用過程中的疑惑和問題，這樣的好處在于和朋友的普通聊天中暴露出的問題會(huì)比較真實(shí)有效，然后團(tuán)隊(duì)成員會(huì)把問題反饋到團(tuán)隊(duì)并集中整理到「用戶體驗(yàn)需求池」進(jìn)行評(píng)估和解決。

這部分內(nèi)容涉及到微信訪談截圖，避免暴露用戶隱私，所以暫時(shí)略過。但是這個(gè)方法在洞悉產(chǎn)品問題的過程中特別好用，在大家和朋友微信閑聊的時(shí)候不妨有意識(shí)的邀請(qǐng)朋友們進(jìn)行自家產(chǎn)品的使用體驗(yàn)，并有意識(shí)的對(duì)自己負(fù)責(zé)的產(chǎn)品進(jìn)行發(fā)問，沒準(zhǔn)會(huì)獲得意外驚喜。

2. 焦點(diǎn)小組

相比于單人訪談，有時(shí)候研究會(huì)需要多人同時(shí)訪談，「焦點(diǎn)小組」這個(gè)洋氣的詞其實(shí)是一個(gè)大家都聽說過的代替詞：“來，朋友們，我們開個(gè)座談會(huì)吧。”焦點(diǎn)小組其實(shí)本質(zhì)上就是一場(chǎng)座談會(huì)，核心功能是聚焦在一個(gè)事件或者一個(gè)主題上，用結(jié)構(gòu)化的方式揭示目標(biāo)用戶的經(jīng)驗(yàn)、感受、態(tài)度、愿望，并且努力客觀的呈現(xiàn)其背后的理由。

焦點(diǎn)小組的目的不是推斷，而是理解；主要不是輸出一個(gè)論斷，而是確定一個(gè)范圍；不是陳述，而是對(duì)人們?nèi)绾握J(rèn)知提供觀點(diǎn)。——《焦點(diǎn)小組》理查德·A·克魯格

既然已經(jīng)確定要進(jìn)行UI改版，那么在本次焦點(diǎn)小組中，我們針對(duì)：你對(duì)唱吧App第一印象是什么？ 你期待唱吧應(yīng)該是什么樣的？?jī)蓚€(gè)UI相關(guān)的問題發(fā)起討論，并進(jìn)行全程錄音，然后抽離出所有訪談?wù)邤⑹鰞?nèi)容里面的關(guān)鍵詞，再將得到的關(guān)鍵詞按不同維度進(jìn)行分類整理，從中得到目前唱吧UI中不滿足用戶期待的問題和用戶期待的關(guān)鍵定語。

因?yàn)榻裹c(diǎn)小組是奔著尋找問題范圍這一目的進(jìn)行的，所以當(dāng)訪問到缺點(diǎn)的時(shí)候，我們更加期待訪談對(duì)象口不擇言，甚至期待能夠聽到對(duì)產(chǎn)品的用心吐槽。我們整理了訪談中的槽點(diǎn)，最后歸納為以下四個(gè)維度。 因?yàn)橹暗脑O(shè)計(jì)語言和整體UI的組件和框架都維持中性，所以訪談和預(yù)期一致，用戶會(huì)表達(dá)說不精致和比較陳舊。

總而言之，目前唱吧UI中設(shè)計(jì)團(tuán)隊(duì)與用戶能夠達(dá)成共識(shí)的問題：

• 目前唱吧的工具屬性不夠突出。
• 目前UI中存在很多冗余區(qū)隔（線、面等）造成視覺壓力較大。
• 目前設(shè)計(jì)語言過于中性，不夠精致，缺乏青春和娛樂色彩。

而焦點(diǎn)小組訪談期間，我們就用戶描述自己心目中的唱吧形象的錄音進(jìn)行整理，抽象出了一些共性的關(guān)鍵詞，我們把關(guān)鍵詞按照不同維度進(jìn)行分類，從而找到了此次改版的方向。

自此，我們得到了這個(gè)版本的UI改版思路和目標(biāo)：就是從UI和交互上要打造一個(gè)簡(jiǎn)潔、精致、新潮、時(shí)尚且個(gè)性化的唱歌工具平臺(tái)。

這是我們?cè)O(shè)計(jì)團(tuán)隊(duì)這次8.6改版以及后續(xù)幾個(gè)版本迭代的核心目標(biāo)。

二. UI風(fēng)格定義與組件思考

1. UI風(fēng)格定義

8.6改版過程中，設(shè)計(jì)團(tuán)隊(duì)為了解決上述的不同問題，設(shè)計(jì)了三個(gè)方向上的方案思考:

• 第一個(gè)思路是強(qiáng)化唱吧品牌，在突出品牌色的基礎(chǔ)上滲入眾多唱吧元素、加強(qiáng)平臺(tái)識(shí)別度。
• 第二個(gè)思路是嘗試回歸真實(shí)的KTV和演唱會(huì)場(chǎng)景，提升氛圍代入感，從唱歌場(chǎng)景中提煉炫酷新潮的元素。
• 第三是以青春時(shí)尚的基調(diào)為主，簡(jiǎn)化UI層級(jí)，去掉UI中容易造成視覺冗余的元素。

設(shè)計(jì)團(tuán)隊(duì)根據(jù)這三種方案分別設(shè)計(jì)了三版一級(jí)頁進(jìn)行對(duì)比，這里由于后續(xù)需要用到迭代中，所以設(shè)計(jì)稿請(qǐng)恕不能放出。設(shè)計(jì)團(tuán)隊(duì)設(shè)計(jì)了三個(gè)方案之后進(jìn)行比對(duì)，發(fā)現(xiàn)前兩個(gè)方案雖各有優(yōu)勢(shì)，但卻都有各自的缺點(diǎn)。就第一種方案來看，視覺上是加強(qiáng)了唱吧的品牌，但是并沒有使得整體頁面更加多彩青春。第二種方案是滿足了潮流炫酷，但是目前唱吧各年齡層都有大量用戶，所以UI上風(fēng)格不宜太過先鋒，而且超酷的黑色界面雖然第一眼是給人比較酷的新潮感，但是久視之后反而容易疲勞。

最終，在三個(gè)方案中，我們秉持唱吧一慣突出內(nèi)容的原則，配合多彩和時(shí)尚制定了唱吧青春時(shí)尚版設(shè)計(jì)方案，我們希望這個(gè)版本的UI能夠緊跟設(shè)計(jì)趨勢(shì)，兼具青春張揚(yáng)和時(shí)尚精致的同時(shí)，保證各年齡層的用戶使用體驗(yàn)。

除了風(fēng)格定義以外，我們制定了關(guān)鍵詞對(duì)應(yīng)情緒版，嘗試鏈接在設(shè)計(jì)元素和設(shè)計(jì)細(xì)節(jié)能夠傳達(dá)給用戶的直觀感受：

下面來看最終呈現(xiàn)的v 8.6新版本一級(jí)頁和唱歌頁，我們希望通過多彩的緩動(dòng)漸變，能夠帶給用戶全新的沉浸娛樂體驗(yàn)。

△ 多彩的唱吧v8.6一級(jí)頁

另外，我們期待建立一個(gè)可擴(kuò)展的交互架構(gòu)，所以設(shè)計(jì)了一個(gè)Z軸方案，模擬底部有一個(gè)背景，在承載內(nèi)容的卡片上，以后可以有承載諸多擴(kuò)展方案。

△ 一級(jí)頁Z軸說明

2. 新的UI組件與思考

榜單展示組件優(yōu)化

長(zhǎng)久以來，唱吧一直在解決用戶UGC頭像導(dǎo)致的太過雜亂的問題。

設(shè)計(jì)的本質(zhì)是解決問題。

從唱吧7.0到8.6，我們對(duì)榜單頁的展示組件做了上圖兩次優(yōu)化，可能讀者一看上面這個(gè)原型頁會(huì)單純的認(rèn)為這不是優(yōu)化，甚至于還導(dǎo)致展示效率變低了（之前能展示7個(gè)現(xiàn)在只能展示5個(gè)）。但是由于唱吧覆蓋的年齡層比較廣，很多時(shí)候用戶UGC的圖片質(zhì)量無法控制，當(dāng)用戶UGC圖片質(zhì)量我們無法控制的時(shí)候，我們UED團(tuán)隊(duì)在設(shè)計(jì)展示組件的時(shí)候旨在通過兩個(gè)大版本的優(yōu)化，逐步的讓間隔變大，弱化圖片的同時(shí)不斷強(qiáng)調(diào)歌曲和用戶。使得再雜亂的用戶圖片也不至于太影響整體畫面調(diào)性。

在這里大家可能會(huì)說，如下圖所示，快手也是用戶UGC內(nèi)容不可控的，為什么人家就堅(jiān)持展示效率，用的是全屏展示呢？

分析一下為什么同是UGC不可控，唱吧和快手用了兩種不同UI框架的原因：

其實(shí)如果了解之后，大家會(huì)發(fā)現(xiàn)，快手和唱吧兩款產(chǎn)品的這個(gè)界面，各自承載的功能不同?？焓值倪@個(gè)UI組件承載的其實(shí)是「讓用戶快速找到感興趣的內(nèi)容」，快手這款產(chǎn)品的短視頻Feed中的每一個(gè)視頻都可以從首頁上看出它大概是什么內(nèi)容，比如第一張圖我可以看到是一個(gè)高爾夫游戲，第二張圖是一個(gè)工人，下面有一個(gè)手機(jī)游戲，再下一張是一個(gè)傳遞正能量大概是讓座……但是唱吧的榜單頁就不一樣，它主要承載的是「讓用戶選擇歌曲收聽」，這個(gè)UI組件中的圖片不像快手一樣是承載內(nèi)容的。比如唱吧這個(gè)UI，能看出的就是第一張圖是一個(gè)妹子，第二張圖是一個(gè)妹子，第三張還是一個(gè)妹子……發(fā)現(xiàn)了么，唱吧榜單頁UI組件中，承載內(nèi)容的其實(shí)更多的是歌曲名。

雖然快手和唱吧這兩個(gè)UI組件長(zhǎng)得不同，但是都很好的達(dá)到了突出內(nèi)容本身的目的。

動(dòng)態(tài)Feed組件整體去線簡(jiǎn)潔化

唱吧的動(dòng)態(tài)Feed中，用戶產(chǎn)生的Feeds按下圖分類：

之前的8.0版本，F(xiàn)eed各組件中有些冗余的視覺層級(jí)，這一次改版主要采用組件嵌套的方法，把之前的很多線去掉，將每一個(gè)轉(zhuǎn)發(fā)和發(fā)布行為變成獨(dú)立的組件，組件間支持嵌套，三層嵌套的組件第三層采用反白突出。加大字距和行距，使頁面信息更可讀，整體感覺也更加清爽。

多彩時(shí)尚的設(shè)計(jì)

為了營(yíng)造青春時(shí)尚的氛圍，突出唱吧娛樂屬性，唱吧8.6采用了全新的多彩設(shè)計(jì)，在原先的唱吧紅的HSB為原點(diǎn)，擴(kuò)展出一批顏色，運(yùn)用漸變和微投影等時(shí)尚設(shè)計(jì)元素進(jìn)行點(diǎn)綴，在整體一級(jí)頁的NavBar上采用一直緩動(dòng)的漸變彩條，整體給用戶多彩時(shí)尚的感覺：

沉浸輕奢的演唱氛圍

在8.6版本，主推的是我們獨(dú)立研發(fā)了一年多的「一鍵修音」這樣強(qiáng)勢(shì)的功能，為了更好的承載這個(gè)功能，我們重新設(shè)計(jì)了唱歌頁面的UI樣式，讓色調(diào)更暗、底部微弱霓光在時(shí)刻緩動(dòng)卻不妨礙演唱行為，整體從視覺上加強(qiáng)了唱歌的氛圍感和沉浸性。

3. 核心功能強(qiáng)化

關(guān)于核心功能強(qiáng)化這件事情，其實(shí)唱吧團(tuán)隊(duì)也思考過很久。

世面上的主流產(chǎn)品的tabbar上如果中間有一個(gè)核心操作按鈕，點(diǎn)擊之后進(jìn)入的新頁面一定底部tabbar會(huì)被隱藏，這樣其實(shí)是阻隔五個(gè)模塊切換體驗(yàn)的。

以我們的好朋友轉(zhuǎn)轉(zhuǎn)app為例給大家解釋一下，轉(zhuǎn)轉(zhuǎn)app核心業(yè)務(wù)是讓用戶發(fā)閑置，所以它的tabbar設(shè)計(jì)是中間一個(gè)大大的「+」，點(diǎn)擊之后其實(shí)是跳轉(zhuǎn)一個(gè)主線性業(yè)務(wù)場(chǎng)景。而唱吧的點(diǎn)擊「演唱」不是一個(gè)線性的業(yè)務(wù)場(chǎng)景，所以我們希望在突出演唱的時(shí)候，通過點(diǎn)擊后的彈性形變反饋的方式，保存住tabbar，降低用戶切換交互的成本：

4. 可復(fù)用的UI Kit和Sketch Library

在唱吧8.6的設(shè)計(jì)過程中，同步制定UI Kit組件和設(shè)計(jì)規(guī)范，制定Sketch Library設(shè)計(jì)團(tuán)隊(duì)組件復(fù)用：

三. 新穎有趣的交互方式

1. 全局的滑動(dòng)式交互

segment control組件是唱吧8.0的核心UI組件，在8.6組件定義時(shí)，我們?cè)俅畏糯罅诉@個(gè)組件在唱吧UI中的應(yīng)用范圍，重新定義了Segment組件通用規(guī)則，添加了一個(gè)全新的滑動(dòng)時(shí)指示器的彈動(dòng)效果，并且在8.6和之后的一兩次迭代中，使得iOS和Andriod中segment組件統(tǒng)一。

2. mini播放器的展示與收起

唱吧目前聽歌頁面返回時(shí)，歌曲默認(rèn)在后臺(tái)播放，因?yàn)槁曇暨€在，用戶很多時(shí)候沒有明顯感知到被收起到mini播放器，所以為此設(shè)計(jì)了一個(gè)唱歌頁下拉收起到mini播放器的手勢(shì)和動(dòng)效，期待能讓用戶對(duì)mini播放器的收起態(tài)有明顯感知。

3. 增加可玩性和趣味性

為了增添交互可玩性和趣味性，我們?cè)O(shè)計(jì)了一級(jí)系列的小交互。

△ banner滑動(dòng)效果

△ 五個(gè)一級(jí)頁切換效果

△ Loading漸變加速跑效果

另外為了滿足情景需要，我們以唱吧吉祥物小唱為原型繪制了一系列可愛的小動(dòng)畫。

△ 修音小唱

△ 聽歌小唱

△ 唱歌小唱

四. 結(jié)語

唱吧UED團(tuán)隊(duì)一直堅(jiān)信設(shè)計(jì)的力量和價(jià)值，在未來的唱吧版本中，我們將更多的面向唱歌，聽歌和社交場(chǎng)景，優(yōu)化用戶體驗(yàn)過程，并加入更多的情感化的設(shè)計(jì)驚喜。

歡迎關(guān)注作者的微信公眾號(hào)：SeanyDesign

「干貨超足的改版設(shè)計(jì)經(jīng)驗(yàn)總結(jié)」

• 《上億人使用的百度網(wǎng)盤，是這么做改版設(shè)計(jì)的》
• 《備受好評(píng)的百度網(wǎng)盤Web 新版，原來設(shè)計(jì)師下了這么多功夫！》
• 《國(guó)內(nèi)人氣最高的百度首頁，原來背后的設(shè)計(jì)過程是這樣的！》
• 《想做APP 改版練習(xí)，這兒有高手的15個(gè)經(jīng)驗(yàn)總結(jié)》
• 《微云使用效率大幅提高的背后，騰訊設(shè)計(jì)師這樣做改版！》
• 《用58同城的實(shí)戰(zhàn)案例，帶你認(rèn)識(shí)完整的改版流程！》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com