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