唱吧來到了2018年，已經積累了大量的各年齡層的用戶。設計團隊在之前的版本設計語言保持中性，以展示內容和功能為主。

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

一. 前期用戶調研 —— 單人訪談與焦點小組

為了做好這次改版，我們UED團隊調研了身邊的朋友使用唱吧的感受和對UI的建議，同時也在公司內部進行了一輪焦點小組和用戶訪談，雖然樣本有限，但是調研結果卻普遍一致。

1. 單人訪談

唱吧UED團隊做的所謂單人訪談一般是不占用工作時間的，所以具體表現形式也并不像傳統的書本中那樣桎梏在條框里。

一般是團隊成員通過和朋友閑聊的過程中有意識的進行發問，發現用戶使用過程中的疑惑和問題，這樣的好處在于和朋友的普通聊天中暴露出的問題會比較真實有效，然后團隊成員會把問題反饋到團隊并集中整理到「用戶體驗需求池」進行評估和解決。

這部分內容涉及到微信訪談截圖，避免暴露用戶隱私，所以暫時略過。但是這個方法在洞悉產品問題的過程中特別好用，在大家和朋友微信閑聊的時候不妨有意識的邀請朋友們進行自家產品的使用體驗，并有意識的對自己負責的產品進行發問，沒準會獲得意外驚喜。

2. 焦點小組

相比于單人訪談，有時候研究會需要多人同時訪談，「焦點小組」這個洋氣的詞其實是一個大家都聽說過的代替詞：“來，朋友們，我們開個座談會吧。”焦點小組其實本質上就是一場座談會，核心功能是聚焦在一個事件或者一個主題上，用結構化的方式揭示目標用戶的經驗、感受、態度、愿望，并且努力客觀的呈現其背后的理由。

焦點小組的目的不是推斷，而是理解；主要不是輸出一個論斷，而是確定一個范圍；不是陳述，而是對人們如何認知提供觀點。——《焦點小組》理查德·A·克魯格

既然已經確定要進行UI改版，那么在本次焦點小組中，我們針對：你對唱吧App第一印象是什么？ 你期待唱吧應該是什么樣的？兩個UI相關的問題發起討論，并進行全程錄音，然后抽離出所有訪談者敘述內容里面的關鍵詞，再將得到的關鍵詞按不同維度進行分類整理，從中得到目前唱吧UI中不滿足用戶期待的問題和用戶期待的關鍵定語。

因為焦點小組是奔著尋找問題范圍這一目的進行的，所以當訪問到缺點的時候，我們更加期待訪談對象口不擇言，甚至期待能夠聽到對產品的用心吐槽。我們整理了訪談中的槽點，最后歸納為以下四個維度。 因為之前的設計語言和整體UI的組件和框架都維持中性，所以訪談和預期一致，用戶會表達說不精致和比較陳舊。

總而言之，目前唱吧UI中設計團隊與用戶能夠達成共識的問題：

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

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

自此，我們得到了這個版本的UI改版思路和目標：就是從UI和交互上要打造一個簡潔、精致、新潮、時尚且個性化的唱歌工具平臺。

這是我們設計團隊這次8.6改版以及后續幾個版本迭代的核心目標。

二. UI風格定義與組件思考

1. UI風格定義

8.6改版過程中，設計團隊為了解決上述的不同問題，設計了三個方向上的方案思考:

• 第一個思路是強化唱吧品牌，在突出品牌色的基礎上滲入眾多唱吧元素、加強平臺識別度。
• 第二個思路是嘗試回歸真實的KTV和演唱會場景，提升氛圍代入感，從唱歌場景中提煉炫酷新潮的元素。
• 第三是以青春時尚的基調為主，簡化UI層級，去掉UI中容易造成視覺冗余的元素。

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

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

除了風格定義以外，我們制定了關鍵詞對應情緒版，嘗試鏈接在設計元素和設計細節能夠傳達給用戶的直觀感受：

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

△ 多彩的唱吧v8.6一級頁

另外，我們期待建立一個可擴展的交互架構，所以設計了一個Z軸方案，模擬底部有一個背景，在承載內容的卡片上，以后可以有承載諸多擴展方案。

△ 一級頁Z軸說明

2. 新的UI組件與思考

榜單展示組件優化

長久以來，唱吧一直在解決用戶UGC頭像導致的太過雜亂的問題。

設計的本質是解決問題。

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

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

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

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

雖然快手和唱吧這兩個UI組件長得不同，但是都很好的達到了突出內容本身的目的。

動態Feed組件整體去線簡潔化

唱吧的動態Feed中，用戶產生的Feeds按下圖分類：

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

多彩時尚的設計

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

沉浸輕奢的演唱氛圍

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

3. 核心功能強化

關于核心功能強化這件事情，其實唱吧團隊也思考過很久。

世面上的主流產品的tabbar上如果中間有一個核心操作按鈕，點擊之后進入的新頁面一定底部tabbar會被隱藏，這樣其實是阻隔五個模塊切換體驗的。

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

4. 可復用的UI Kit和Sketch Library

在唱吧8.6的設計過程中，同步制定UI Kit組件和設計規范，制定Sketch Library設計團隊組件復用：

三. 新穎有趣的交互方式

1. 全局的滑動式交互

segment control組件是唱吧8.0的核心UI組件，在8.6組件定義時，我們再次放大了這個組件在唱吧UI中的應用范圍，重新定義了Segment組件通用規則，添加了一個全新的滑動時指示器的彈動效果，并且在8.6和之后的一兩次迭代中，使得iOS和Andriod中segment組件統一。

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

唱吧目前聽歌頁面返回時，歌曲默認在后臺播放，因為聲音還在，用戶很多時候沒有明顯感知到被收起到mini播放器，所以為此設計了一個唱歌頁下拉收起到mini播放器的手勢和動效，期待能讓用戶對mini播放器的收起態有明顯感知。

3. 增加可玩性和趣味性

為了增添交互可玩性和趣味性，我們設計了一級系列的小交互。

△ banner滑動效果

△ 五個一級頁切換效果

△ Loading漸變加速跑效果

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

△ 修音小唱

△ 聽歌小唱

△ 唱歌小唱

四. 結語

唱吧UED團隊一直堅信設計的力量和價值，在未來的唱吧版本中，我們將更多的面向唱歌，聽歌和社交場景，優化用戶體驗過程，并加入更多的情感化的設計驚喜。

歡迎關注作者的微信公眾號：SeanyDesign

「干貨超足的改版設計經驗總結」

• 《上億人使用的百度網盤，是這么做改版設計的》
• 《備受好評的百度網盤Web 新版，原來設計師下了這么多功夫！》
• 《國內人氣最高的百度首頁，原來背后的設計過程是這樣的！》
• 《想做APP 改版練習，這兒有高手的15個經驗總結》
• 《微云使用效率大幅提高的背后，騰訊設計師這樣做改版！》
• 《用58同城的實戰案例，帶你認識完整的改版流程！》

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

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com