對于所有的設計師來說項目要進行大型視覺改版都是很重視很頭疼的一件大事。有幸我在2018年年初完整的跟進推動了全民K歌5.0的大改版。此次改版是k歌項目成立以來最大的一次改版，獲得了較好的業界口碑。而我自己全程參與，收獲很多。

我在鵝廠工作數年，經歷過QQ音樂到全民K歌再到音兔項目大大小小數次視覺大改版。我覺得能駕馭好大型視覺改版需要的知識、流程、套路是可復制可學習的。它就像是數學是一種工具。所以我將我的感悟，我的經驗所想寫下來形成文字。因為我覺得知識只有付諸于文字或是語言，才是最大發揮它的價值。同時也希望我的這些經驗能給那些正在進行著視覺改版或即將進行視覺改版的設計師們一些啟發，一些幫助。

 

項目背景

為什么要做5.0視覺大改版

至2018年年初全民k歌已經三年了。經歷了3年的全民K歌逐漸暴露了以下問題：

• 交互方面，框架拓展性不足，優質內容缺少曝光

• 基礎體驗方面，功能堆疊較多，急需梳理簡化

• UI方面，樣式陳舊，缺乏一致性

 

 

而作為年終的大版本，我們想借此機會對全民K歌的視覺做一次大的升級改造。

 

前期規劃

我們要做哪些，如何進行？

 

萬事開頭難，對于一個大的改版，制定規劃尤為重要，我在這里是這么做的。

（1）確定改版內容

產品方的主要訴求是對appUI的升級。但是我覺得作為一個大的、關鍵性的改版，僅僅UI升級是不夠的，是還欠缺一些什么的。于是我想將5.0的改版拔高一個高度，不僅限于UI，而是一個整體的全面的改版。我將改版內容分為三部分：UI升級、品牌升級、VIP升級。后兩者是設計主動提出推動的。品牌升級是因為全民K歌往期都沒有健全的品牌KV體系，外部宣傳時候設計隨意性太大，想這次改版完善品牌體系。VIP升級是因為之前K歌的VIP沒有獨立的視覺體系，隨著增值營收業務的增長，這部分訴求逐漸增長，現有的視覺樣式最貴感不夠。

 

 

（2）確定時間規劃、以及老板匯報規劃

大改版一大不確定因素就是前期發散方向上的不確定，這部分不確定會使得項目的時間不可控。這種不可控往往使得改版進度一落再拖，陷入改版泥沼。

這我看來這里的進程也是有規律可循的。

 

 

這里的規律是發散—收緊—發散—收緊的過程

從最初的啟動項目到最終的定稿普遍要經歷兩至三輪發散—收緊的過程。

而這里面一般至少會有兩輪老板匯報的過程。在初期設計發散的時候往往是交互還沒有定型的時候，這時候視覺的束縛可以小一些，任由設計自己的理解自由發揮。這里的嘗試可以是更大膽的方向性的探索，到第二輪第三輪的產出就需要回歸到交互，依托于交互進行發揮。

進度上通常我會定制一個大致的時間規劃。每周一次小會議碰進度，約兩輪碰面后積累足夠的產出再找老板匯報收攏方向。

 

（2）臨時組隊戰副本

一個人的能力再強，效率再高，精力也是有限的。不可能憑借一個人去完成這樣一個大的改版。必須要團隊合作，要協調大家一起去完成任務。在我的理解中5.0改版就像是一個大的游戲副本，而面對這樣的一個副本我們就需要拉起一支隊伍去應對這樣一個副本，就必須要有分工規劃。

在初期所有人一起出探索方案，大致方向確定之后，我們就分了3組人來應對UI升級、品牌升級、VIP升級這3部分任務。

 

方案探索

多方探索，集思廣益

前期我和我的小伙伴們出了眾多的視覺探索方向稿設計稿。具體內容如下。

方案1:

方案2:

方案3:

 

在此方案地基礎上我們對BOSS進行了匯報，得到了批示反饋，再此基礎上延展出了后續定稿的。

 

歸納收攏

經過幾輪探索，最終方向收攏為以下方案

 

將品牌調性定義為：豐富多彩、活力、情感、樂趣。

 

解決思路是：年輕化、簡潔性、一致性。并非只有年輕人才喜歡年輕化。

 

設計的理念因子是：活力、簡潔、高效、自然。

 

設計迭代的思路本質上是要解決下述兩個問題：

1.框架面臨擴展性不足、優質內容缺少曝光

2.基礎體驗需要優化、點歌體驗、聽歌體驗、社交體驗等

 

 

改版的整體風格

整體框架做了這樣一個改動。依然保留品牌識別性較高的紅色標題欄，但是采用了跟新品牌相同的漸變色處理。底部導航采用面性圖標更簡潔也更能壓得住。

 

 

動態的改版

動態的改版著重需要滿足的是對視頻內容的更好支持。原有樣式字段雜亂，需要對展示信息作梳理，簡化字段。

 

K歌的feed類型非常復雜，將它梳理成2大類，8小類，共26種。

動態的整體視覺：

 

原來的推薦直達區模塊用顏色去區分類型，對普通用戶效果視覺感知很弱，且效果不可控，故此做了優化

 

簡化了feed結構，梳理了展示字段。

 

去掉了之前的卡片間隔，給人一種連續不斷使人下翻的感覺。

 

因為5.0新增了POPUP持續瀏覽的功能，不需要在當前界面播放視頻，所以視頻feed也不用占用整屏寬度的空間。

新MVfeed相對原來的會更高效。

 

短視頻feed對它的展示尺寸做了優化。短視頻本身有1:1；16:9；9:16 三種比例，直接用該比例顯示的話在feed流里會顯得16:9的feed特別小，9:16的feed特別大。故此做了部分裁剪，16：9裁成4:3。9:16裁成3:4。裁剪區域不多不影響完整性，也能識別橫屏豎屏。

 

將歌房和直播也梳理成跟mv一致的尺寸。減少Feed流中不同規格的feed帶來的界面混亂，提升一致性。

 

發現的改版

如果說「動態」承載的是熟人社交，那么「發現」承載的就是提升內容的分發，促進優質的內容能得到足夠的曝光。

滿足想發現優質內容的用戶，讓他們在這里能持續的消費優質內容。

 

 

發現頁的整體視覺

 

 

詳情頁的改版

詳情頁承載的是作品的播放以及社交互動的頁面。所以這次優化一方面要梳理信息統一體驗，另一方面要給到更多的相關內容推薦，形成瀏覽的體驗的閉環。 

 

個人主頁的改版

原來的個人主頁既要承載主人態的管理訴求，又要承擔個人信息展示的訴求，內容非常繁多信息非常復雜。然而主人態和客人態他們的訴求是完全不同的，所以個人主頁的改動點就是住客態分離，針對主客們的不同訴求做不同展示。

 

這一部分由于開發資源有限5.0改版的時候并沒有上線個人主頁的改版。但是這一部分作為儲備依然會對后續的個人主頁改版產生影響。

 

規范拓展

統一的視覺風格是由一系列詳盡的規則取舍組成的

 

風格稿確定雖然是改版中最重要的環節但并不是全部，風格稿確定的只是關鍵界面。K歌的功能界面紛繁復雜，將關鍵界面的設計延展到所有界面并保證其一致性需要一套簡介明確的規則。而規則就是一系列判斷取舍的集合體。好的規則應該是簡潔自洽的，是為美。

 

K歌的規范我準備從以下幾點著手優化。

 

文字

將字號收攏為四種。默認字體選用了蘋方的light字重，標題以及操作文案采用medium字重。拉開粗細差距，來做信息層級區分。

 

圖標

我們規范了所有圖標的切圖尺寸，將所有圖標切圖都收攏為方形的六個尺寸。這樣以后維護替換圖標會更加方便。并且出了一套詳細的圖標設計指引，來統一同一APP里的多名設計師的輸出的一致性。

 

圖片

收攏減少了圖片規格，統一了圖片的圓角處理。并且考慮到k歌的用戶作品封面經常會遇到白色的圖片跟UI相融，為了解決這一情況我們將所有圖片都加了一層3%的黑。

 

列表

減少了橫向列表中間的間距，讓區塊化更明顯，統一了圖文列表的展示規則，字段限制。例如圖片上盡量不壓文字保持保持圖片簡潔；圖文列表的用戶展示盡量用頭像代替用戶名規避emoji帶來的界面雜亂；圖片下的文字字段不超過兩個等… 。

這里限于篇幅就不對規范一一詳述。

 

完整的體系

好的視覺改版應該是從UI到品牌的一個完整的體系

前面面說到過，在我的規劃中，全民k歌的大改版，由三部分組成，UI的改版、品牌的改版、VIP體系的改版3部分組成。在這三部分里我參與較多的是UI的改版。品牌的改版和VIP的改版我只是少量的參與意見。但是組內的小伙伴們他們都完成的都非常出色。小伙伴們的努力一起構建了完整的心的全民K歌視覺體系。

 

全民K歌新品牌

 

 

全民K歌新VIP體系

 

 

 

結束感悟

掌控大型視覺改版的秘訣：

前期規劃+節奏推動+協調合作+方案落地+規范拓展+完整體系

 

一路跟完整個5.0的改版，在改版過程中我用我前面文中的方法，一路把控整個改版節奏以及輸出質量，應用起來得心應手。這些方式方法以前仿佛就像河邊的一粒粒珍珠。這次總結的這個過程就是收集這些珍珠的過程，最終形成漂亮的首飾。所以寫下這些我的知識經驗與大家分享。希望我的這些經驗能給那些正在進行著視覺改版或即將進行視覺改版的設計師們一些啟發，一些幫助。