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

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

 

項目背景

為什么要做5.0視覺大改版

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

• 交互方面，框架拓展性不足，優(yōu)質(zhì)內(nèi)容缺少曝光

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

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

 

 

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

 

前期規(guī)劃

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

 

萬事開頭難，對于一個大的改版，制定規(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ā)散方向上的不確定，這部分不確定會使得項目的時間不可控。這種不可控往往使得改版進度一落再拖，陷入改版泥沼。

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

 

 

這里的規(guī)律是發(fā)散—收緊—發(fā)散—收緊的過程

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

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

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

 

（2）臨時組隊戰(zhà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進行了匯報，得到了批示反饋，再此基礎(chǔ)上延展出了后續(xù)定稿的。

 

歸納收攏

經(jīng)過幾輪探索，最終方向收攏為以下方案

 

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

 

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

 

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

 

設(shè)計迭代的思路本質(zhì)上是要解決下述兩個問題：

1.框架面臨擴展性不足、優(yōu)質(zhì)內(nèi)容缺少曝光

2.基礎(chǔ)體驗需要優(yōu)化、點歌體驗、聽歌體驗、社交體驗等

 

 

改版的整體風(fēng)格

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

 

 

動態(tài)的改版

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

 

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

動態(tài)的整體視覺：

 

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

 

簡化了feed結(jié)構(gòu)，梳理了展示字段。

 

去掉了之前的卡片間隔，給人一種連續(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)一體驗，另一方面要給到更多的相關(guān)內(nèi)容推薦，形成瀏覽的體驗的閉環(huán)。 

 

個人主頁的改版

原來的個人主頁既要承載主人態(tài)的管理訴求，又要承擔個人信息展示的訴求，內(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ī)范我準備從以下幾點著手優(yōu)化。

 

文字

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

 

圖標

我們規(guī)范了所有圖標的切圖尺寸，將所有圖標切圖都收攏為方形的六個尺寸。這樣以后維護替換圖標會更加方便。并且出了一套詳細的圖標設(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那些正在進行著視覺改版或即將進行視覺改版的設(shè)計師們一些啟發(fā)，一些幫助。