對于所有的設計師來說項目要進行大型視覺改版都是很重視很頭疼的一件大事。有幸我在2018年年初完整的跟進推動了全民K歌5.0的大改版。此次改版是k歌項目成立以來最大的一次改版，獲得了較好的業(yè)界口碑。而我自己全程參與，收獲很多。
我在鵝廠工作數(shù)年，經(jīng)歷過QQ音樂到全民K歌再到音兔項目大大小小數(shù)次視覺大改版。我覺得能駕馭好大型視覺改版需要的知識、流程、套路是可復制可學習的。它就像是數(shù)學是一種工具。所以我將我的感悟，我的經(jīng)驗所想寫下來形成文字。因為我覺得知識只有付諸于文字或是語言，才是最大發(fā)揮它的價值。同時也希望我的這些經(jīng)驗能給那些正在進行著視覺改版或即將進行視覺改版的設計師們一些啟發(fā)，一些幫助。
項目背景
為什么要做5.0視覺大改版
至2018年年初全民k歌已經(jīng)三年了。經(jīng)歷了3年的全民K歌逐漸暴露了以下問題：
-
交互方面，框架拓展性不足，優(yōu)質(zhì)內(nèi)容缺少曝光
-
基礎體驗方面，功能堆疊較多，急需梳理簡化
-
UI方面，樣式陳舊，缺乏一致性
而作為年終的大版本，我們想借此機會對全民K歌的視覺做一次大的升級改造。
前期規(guī)劃
我們要做哪些，如何進行？
萬事開頭難，對于一個大的改版，制定規(guī)劃尤為重要，我在這里是這么做的。
（1）確定改版內(nèi)容
產(chǎn)品方的主要訴求是對appUI的升級。但是我覺得作為一個大的、關鍵性的改版，僅僅UI升級是不夠的，是還欠缺一些什么的。于是我想將5.0的改版拔高一個高度，不僅限于UI，而是一個整體的全面的改版。我將改版內(nèi)容分為三部分：UI升級、品牌升級、VIP升級。后兩者是設計主動提出推動的。品牌升級是因為全民K歌往期都沒有健全的品牌KV體系，外部宣傳時候設計隨意性太大，想這次改版完善品牌體系。VIP升級是因為之前K歌的VIP沒有獨立的視覺體系，隨著增值營收業(yè)務的增長，這部分訴求逐漸增長，現(xiàn)有的視覺樣式最貴感不夠。
（2）確定時間規(guī)劃、以及老板匯報規(guī)劃
大改版一大不確定因素就是前期發(fā)散方向上的不確定，這部分不確定會使得項目的時間不可控。這種不可控往往使得改版進度一落再拖，陷入改版泥沼。
這我看來這里的進程也是有規(guī)律可循的。
這里的規(guī)律是發(fā)散—收緊—發(fā)散—收緊的過程
從最初的啟動項目到最終的定稿普遍要經(jīng)歷兩至三輪發(fā)散—收緊的過程。
而這里面一般至少會有兩輪老板匯報的過程。在初期設計發(fā)散的時候往往是交互還沒有定型的時候，這時候視覺的束縛可以小一些，任由設計自己的理解自由發(fā)揮。這里的嘗試可以是更大膽的方向性的探索，到第二輪第三輪的產(chǎn)出就需要回歸到交互，依托于交互進行發(fā)揮。
進度上通常我會定制一個大致的時間規(guī)劃。每周一次小會議碰進度，約兩輪碰面后積累足夠的產(chǎn)出再找老板匯報收攏方向。
（2）臨時組隊戰(zhàn)副本
一個人的能力再強，效率再高，精力也是有限的。不可能憑借一個人去完成這樣一個大的改版。必須要團隊合作，要協(xié)調(diào)大家一起去完成任務。在我的理解中5.0改版就像是一個大的游戲副本，而面對這樣的一個副本我們就需要拉起一支隊伍去應對這樣一個副本，就必須要有分工規(guī)劃。
在初期所有人一起出探索方案，大致方向確定之后，我們就分了3組人來應對UI升級、品牌升級、VIP升級這3部分任務。
方案探索
多方探索，集思廣益
前期我和我的小伙伴們出了眾多的視覺探索方向稿設計稿。具體內(nèi)容如下。
方案1:
方案2:
方案3:
在此方案地基礎上我們對BOSS進行了匯報，得到了批示反饋，再此基礎上延展出了后續(xù)定稿的。
歸納收攏
經(jīng)過幾輪探索，最終方向收攏為以下方案
將品牌調(diào)性定義為：豐富多彩、活力、情感、樂趣。
解決思路是：年輕化、簡潔性、一致性。并非只有年輕人才喜歡年輕化。
設計的理念因子是：活力、簡潔、高效、自然。
設計迭代的思路本質(zhì)上是要解決下述兩個問題：
1.框架面臨擴展性不足、優(yōu)質(zhì)內(nèi)容缺少曝光
2.基礎體驗需要優(yōu)化、點歌體驗、聽歌體驗、社交體驗等
改版的整體風格
整體框架做了這樣一個改動。依然保留品牌識別性較高的紅色標題欄，但是采用了跟新品牌相同的漸變色處理。底部導航采用面性圖標更簡潔也更能壓得住。
動態(tài)的改版
動態(tài)的改版著重需要滿足的是對視頻內(nèi)容的更好支持。原有樣式字段雜亂，需要對展示信息作梳理，簡化字段。
K歌的feed類型非常復雜，將它梳理成2大類，8小類，共26種。
動態(tài)的整體視覺：
原來的推薦直達區(qū)模塊用顏色去區(qū)分類型，對普通用戶效果視覺感知很弱，且效果不可控，故此做了優(yōu)化
簡化了feed結構，梳理了展示字段。
去掉了之前的卡片間隔，給人一種連續(xù)不斷使人下翻的感覺。
因為5.0新增了POPUP持續(xù)瀏覽的功能，不需要在當前界面播放視頻，所以視頻feed也不用占用整屏寬度的空間。
新MVfeed相對原來的會更高效。
短視頻feed對它的展示尺寸做了優(yōu)化。短視頻本身有1:1；16:9；9:16 三種比例，直接用該比例顯示的話在feed流里會顯得16:9的feed特別小，9:16的feed特別大。故此做了部分裁剪，16：9裁成4:3。9:16裁成3:4。裁剪區(qū)域不多不影響完整性，也能識別橫屏豎屏。
將歌房和直播也梳理成跟mv一致的尺寸。減少Feed流中不同規(guī)格的feed帶來的界面混亂，提升一致性。
發(fā)現(xiàn)的改版
如果說「動態(tài)」承載的是熟人社交，那么「發(fā)現(xiàn)」承載的就是提升內(nèi)容的分發(fā)，促進優(yōu)質(zhì)的內(nèi)容能得到足夠的曝光。
滿足想發(fā)現(xiàn)優(yōu)質(zhì)內(nèi)容的用戶，讓他們在這里能持續(xù)的消費優(yōu)質(zhì)內(nèi)容。
發(fā)現(xiàn)頁的整體視覺
詳情頁的改版
詳情頁承載的是作品的播放以及社交互動的頁面。所以這次優(yōu)化一方面要梳理信息統(tǒng)一體驗，另一方面要給到更多的相關內(nèi)容推薦，形成瀏覽的體驗的閉環(huán)。
個人主頁的改版
原來的個人主頁既要承載主人態(tài)的管理訴求，又要承擔個人信息展示的訴求，內(nèi)容非常繁多信息非常復雜。然而主人態(tài)和客人態(tài)他們的訴求是完全不同的，所以個人主頁的改動點就是住客態(tài)分離，針對主客們的不同訴求做不同展示。
這一部分由于開發(fā)資源有限5.0改版的時候并沒有上線個人主頁的改版。但是這一部分作為儲備依然會對后續(xù)的個人主頁改版產(chǎn)生影響。
規(guī)范拓展
統(tǒng)一的視覺風格是由一系列詳盡的規(guī)則取舍組成的
風格稿確定雖然是改版中最重要的環(huán)節(jié)但并不是全部，風格稿確定的只是關鍵界面。K歌的功能界面紛繁復雜，將關鍵界面的設計延展到所有界面并保證其一致性需要一套簡介明確的規(guī)則。而規(guī)則就是一系列判斷取舍的集合體。好的規(guī)則應該是簡潔自洽的，是為美。
K歌的規(guī)范我準備從以下幾點著手優(yōu)化。
文字
將字號收攏為四種。默認字體選用了蘋方的light字重，標題以及操作文案采用medium字重。拉開粗細差距，來做信息層級區(qū)分。
圖標
我們規(guī)范了所有圖標的切圖尺寸，將所有圖標切圖都收攏為方形的六個尺寸。這樣以后維護替換圖標會更加方便。并且出了一套詳細的圖標設計指引，來統(tǒng)一同一APP里的多名設計師的輸出的一致性。
圖片
收攏減少了圖片規(guī)格，統(tǒng)一了圖片的圓角處理。并且考慮到k歌的用戶作品封面經(jīng)常會遇到白色的圖片跟UI相融，為了解決這一情況我們將所有圖片都加了一層3%的黑。
列表
減少了橫向列表中間的間距，讓區(qū)塊化更明顯，統(tǒng)一了圖文列表的展示規(guī)則，字段限制。例如圖片上盡量不壓文字保持保持圖片簡潔；圖文列表的用戶展示盡量用頭像代替用戶名規(guī)避emoji帶來的界面雜亂；圖片下的文字字段不超過兩個等… 。
這里限于篇幅就不對規(guī)范一一詳述。
完整的體系
好的視覺改版應該是從UI到品牌的一個完整的體系
前面面說到過，在我的規(guī)劃中，全民k歌的大改版，由三部分組成，UI的改版、品牌的改版、VIP體系的改版3部分組成。在這三部分里我參與較多的是UI的改版。品牌的改版和VIP的改版我只是少量的參與意見。但是組內(nèi)的小伙伴們他們都完成的都非常出色。小伙伴們的努力一起構建了完整的心的全民K歌視覺體系。
全民K歌新品牌
全民K歌新VIP體系
結束感悟
掌控大型視覺改版的秘訣：
前期規(guī)劃+節(jié)奏推動+協(xié)調(diào)合作+方案落地+規(guī)范拓展+完整體系
一路跟完整個5.0的改版，在改版過程中我用我前面文中的方法，一路把控整個改版節(jié)奏以及輸出質(zhì)量，應用起來得心應手。這些方式方法以前仿佛就像河邊的一粒粒珍珠。這次總結的這個過程就是收集這些珍珠的過程，最終形成漂亮的首飾。所以寫下這些我的知識經(jīng)驗與大家分享。希望我的這些經(jīng)驗能給那些正在進行著視覺改版或即將進行視覺改版的設計師們一些啟發(fā)，一些幫助。
