最近和小組成員一起在做咪咕閱讀的改版工作，從初期的競品分析到現(xiàn)在開始做高保真，大家交流的時候有時會不太順暢辈毯，只好多讀文章仑氛，吸取經(jīng)驗乙埃，按部就班來開展工作吧～

本文轉(zhuǎn)自UI中國設(shè)計師Yjjj的文章闸英，以后會根據(jù)自己的項目經(jīng)歷做修改。原文鏈接：http://www.ui.cn/detail/229721.html

不知道大家在遇到視覺改版的時候第一個想法是什么介袜，是參考競品甫何？還是主觀猜測？還是問問用戶喜歡什么樣的遇伞？

其實都不正確沛豌，改版通常會分以下幾種情況：

1.只改視覺，不動交互赃额。

2.視覺交互一起改加派。

3.改交互不改視覺。

第3點的情況不多跳芳，主要是第1點和第2點芍锦，如果視覺交互一起改，還相對更簡單一些飞盆，但是交互的改動往往伴隨著產(chǎn)品的整體規(guī)劃調(diào)整娄琉。如果只改視覺不改布局，那限制條件就更多了吓歇。那么孽水，究竟視覺改版要如何開始做我們一起來分析一下：

目標(biāo)

首先我們需要明確我們改版的目標(biāo)是什么？在確定改版目標(biāo)之前城看，我們先問問自己女气，目前的產(chǎn)品出現(xiàn)了什么問題，也就是為什么要改版测柠？改版是一件工程量非常巨大的事情炼鞠，因為首先風(fēng)格的推導(dǎo)過程不是一蹴而就的，不能說你幾個人拍板轰胁，從自身經(jīng)驗出發(fā)說：我們就要這樣改谒主！這是不對的。其次改版之后的規(guī)范組件庫要相應(yīng)的更新赃阀，再次開發(fā)資源的分配更捉襟見肘霎肯，需要在完成產(chǎn)品功能需求的開發(fā)同時來完成改版需求的開發(fā)，最后改版的效果我們?nèi)绾蝸砗饬块凰梗渴欠袷且淮纬晒Φ母陌婀塾危绻皇牵男┑胤叫枰匦抡{(diào)整肖抱？這是一整個改版需要做的閉環(huán)工作备典，從前到后都是需要感性發(fā)散，理性執(zhí)行的意述。

所以我們改版的原因是視覺和品牌定位不匹配提佣，還是產(chǎn)品的用戶體驗很差勁吮蛹？亦或者是規(guī)范組件庫需要重新建立？原因可能是重疊的拌屏，他們并不是孤立的潮针，那么這次改版我們將問題定在視覺與品牌定位不匹配，并且需要一定程度上優(yōu)化用戶體驗這個點上倚喂。所以我們的目標(biāo)是基于正確的品牌定位每篷，從品牌，配色端圈，排版焦读，情感化，微交互舱权，趨勢等維度出發(fā)矗晃，重新定義視覺風(fēng)格，達(dá)到一種讓用戶一使用我們的產(chǎn)品就能感受到我們的品牌魅力和性格的目的宴倍，讓用戶從情感上達(dá)到共鳴的效果张症，并輸出DPL。

其實定義目標(biāo)鸵贬，是需要精準(zhǔn)化的俗他，不夠精準(zhǔn)化的目標(biāo)會讓最后的產(chǎn)出流于形式，太廣泛的目標(biāo)并不好落地阔逼。

方案

說起這個定義方案兆衅，其實是比較痛苦的一個過程，因為大家都沒有完整的做過一次改版颜价，或者說一次客觀的改版涯保，但是通過這次的改版讓我們學(xué)習(xí)到了不少，也發(fā)生了一些比較有趣的事情周伦。

首先我們會用到情緒板來定義一個風(fēng)格走向，其次用到了品牌沖刺未荒，其實這些方法可能最后并不能切實標(biāo)準(zhǔn)化我們?nèi)プ鲆恍└陌嬖O(shè)計专挪，但是我們需要找到一些方向，以及一些參考片排，從而幫助指導(dǎo)我們設(shè)計寨腔。我們希望了解的是產(chǎn)品的核心價值，產(chǎn)品的性格態(tài)度率寡，以及受眾的情感和動機迫卢，我們通過這些方法我們能夠獲取這些信息，對我們的幫助是巨大的冶共，而不是馬上通過這些方法能得出一個按鈕的高度和寬度是多少乾蛤。所以最后我們用到了3種方法：情緒板每界、品牌沖刺、定義腦暴

流程

方法一：情緒板

情緒板的原本流程是這樣的：

探索品牌感覺-發(fā)現(xiàn)提取關(guān)鍵詞-尋找對應(yīng)素材創(chuàng)建情緒板-指導(dǎo)設(shè)計

其實感覺是一種比較虛無飄渺的東西家卖，即便你是產(chǎn)品的設(shè)計或者開發(fā)人員眨层，可能你所體會的感受和用戶體會的感受并不相同，所以第一步我們需要找準(zhǔn)品牌的定位以及用戶心中產(chǎn)品是個什么樣子上荡，是優(yōu)雅的紳士還是花枝招展的少女趴樱？當(dāng)然最后你所成型的品牌風(fēng)格并不能滿足你所有用戶，但是只要滿足大部分用戶酪捡，你就成功了叁征。

我們對情緒板步驟做了一次修改，因為如果按照情緒板常規(guī)的步驟來做的話逛薇，我們需要用戶二度參與捺疼，由于一些原因限制我們進(jìn)行了一次不一樣的嘗試，我們首先進(jìn)行了關(guān)鍵詞提煉金刁。

所以我們這次的步驟有了一些改動帅涂，就變成了：

發(fā)現(xiàn)提取關(guān)鍵詞(我們自己)-尋找對應(yīng)素材創(chuàng)建情緒板-探索品牌感覺(讓用戶)-指導(dǎo)設(shè)計

可能有些人會問了，你這樣隨意改動步驟最后的結(jié)果不準(zhǔn)確怎么辦尤蛮？其實本來最后也不是一個很準(zhǔn)確的結(jié)果媳友，而且我們使用一個方法并不需要按部就班的跟著做，否則我們很難從中取發(fā)現(xiàn)一些新的問題产捞。

第一步

腦暴提煉關(guān)鍵詞

在這之前我們需要用戶畫像醇锚、體驗地圖、故事板等一些基礎(chǔ)用戶數(shù)據(jù)信息坯临。同時因為我們自己也是產(chǎn)品的用戶焊唬，所以關(guān)鍵詞也是有一定的準(zhǔn)確性的，這邊就是通過具象和抽象兩個維度去發(fā)散思維看靠，盡可能多的想出一些和產(chǎn)品感覺靠近或者沒那么靠近的描述赶促，基本上抽象的類的詞比較多，具象類的會比較少挟炬，當(dāng)然腦暴的分類方法肯定有很多中鸥滨，這里只是舉個例子。

第二步

尋找對應(yīng)的素材及其圖像

腦暴出關(guān)鍵詞之后我們需要將他們對應(yīng)的找出不同的圖片圖像谤祖，為什么要找圖片婿滓，因為我們在訪談過程中，用戶很有可能無法將自己的直觀感受表達(dá)出來粥喜，他們需要有圖像的輔助才能更直觀的表達(dá)凸主。這邊注意一點盡量找出質(zhì)量高、種類全的圖片额湘，舉個例子：有一個關(guān)鍵詞叫”女性”卿吐，那么我們需要在我們的用戶范圍內(nèi)找出不同標(biāo)準(zhǔn)的女性照片旁舰，可以有大學(xué)女生、新白領(lǐng)亦或者是全職媽媽等等但两，每一個種類的圖片也可以找不同的風(fēng)格色彩鬓梅，這些圖像后面我們訪談中需要用到。

第三步

探索品牌感覺(讓用戶)

產(chǎn)品靠誰而活：當(dāng)然是用戶谨湘，有時候會發(fā)現(xiàn)一些很有趣的問題绽快，比如你將自己的產(chǎn)品定位高級、輕奢紧阔、有品位坊罢，但是你的視覺風(fēng)格讓用戶看起來只有單一、枯燥擅耽、性冷淡活孩，所以你的感覺和用戶感覺可能并不是同一回事。所以這里我們需要向用戶以及一些利益相關(guān)者進(jìn)行一次訪談乖仇，來看看他們對我們的產(chǎn)品的感受是怎樣的憾儒。

在準(zhǔn)備第三步訪談之前我們也需要制定一個目標(biāo)，我們需要通過這次訪談達(dá)到一個什么樣的目的乃沙？這次我們的目的是需要獲取用戶對我們產(chǎn)品引發(fā)出的一些明確的情感以及準(zhǔn)確的描述起趾，例如色彩搭配、性格警儒、圖標(biāo)風(fēng)格训裆、排版方式等等。

當(dāng)然在訪談之前我們一定會準(zhǔn)備一個訪談提綱蜀铲，這個提綱也是有一些門道边琉，第一次提綱列的時候就坑了，因為我設(shè)置的問題會比較術(shù)語化记劝，比如：請問您覺得目前我們產(chǎn)品的視覺風(fēng)格怎么樣变姨？這個問題犯了2個錯：第一：問的太空泛，用戶無法回答厌丑，他們只能說還行钳恕，或者不錯。第二點：根據(jù)我們用戶接觸互聯(lián)網(wǎng)的水平及敏感度蹄衷，她完全聽不懂視覺風(fēng)格是什么意思。所以厘肮，我們將問題進(jìn)行了修改愧口，不再單一的向用戶詢問問題，而是通過對競品圖片比較类茂，以及有針對性的元素舉例來讓用戶表達(dá)她們內(nèi)心真實的想法掰伸。

我們在第二步中將關(guān)鍵詞對應(yīng)的照片分別放在每一個以關(guān)鍵詞命名的文件夾中摇邦，讓用戶去選擇符合她心中產(chǎn)品感覺的關(guān)鍵詞崖面，這時候我們需要去追問用戶為什么選擇這個關(guān)鍵詞，其中的原因我們要深入挖掘示启，舉個例子：用戶選擇了一個叫安全感的關(guān)鍵詞，那么讓用戶造成安全感的因素是很多的领舰，我們不知道產(chǎn)品為什么能讓用戶產(chǎn)生安全感夫嗓，所以我們會繼續(xù)提問，為什么選擇安全感冲秽，是產(chǎn)品的哪個地方舍咖、步驟、元素锉桑、或者別的一些什么因素讓你產(chǎn)生了安全感排霉。直到用戶能夠準(zhǔn)確并確定這是根本原因的時候我們才能停止。

最后我們讓用戶來挑選該關(guān)鍵詞下的多類圖片民轴，同樣的挑選圖片我們也要問用戶攻柠，為什么是這張而不是那張。

第四步

指導(dǎo)設(shè)計

先等等后裸，光靠情緒板我認(rèn)為還是不足以將這次改版做好瑰钮，因為我們還是沒有能夠?qū)⑵放瓶紤]進(jìn)去，視覺風(fēng)格可能有一定的方向了轻抱，但是具有品牌化的視覺風(fēng)格我們還未能定義出來飞涂，所以我們又找到了一種方法，叫做品牌沖刺祈搜。

方法二：品牌沖刺

這里要感謝珂珂同學(xué)當(dāng)時分享給我的一篇文章较店，所以后面我們也是嘗試性的做了一下其中的幾個環(huán)節(jié)。具體的品牌沖刺步驟大家可以去知乎搜一下 ONES Piece

好容燕，那么如何開始做品牌沖刺梁呈，品牌沖刺給我的第一印象差不多是類似于設(shè)計沖刺那樣的高效但是局限性很大的一種探索方法，但是我們會發(fā)現(xiàn)蘸秘，即便投入更多時間去做一些品牌的探索也并非百分百能產(chǎn)出更好的結(jié)果官卡，所以品牌沖刺會是一個比較好的選擇。

品牌沖刺包含六項操作：

1.二十年線路圖：可以幫助你把眼光放長遠(yuǎn)醋虏。

?2.是什么寻咒、怎么做、為什么：幫助你思考公司/產(chǎn)品存在的理由颈嚼。?

3.三大市場價值：讓你的為什么更具體毛秘。

4.三大受眾：幫你為品牌目標(biāo)梳理輕重緩急。

5.人格化塊：定義了你的品牌態(tài)度和風(fēng)格。

6.競品地圖：將你的品牌與競品進(jìn)行對比叫挟。

參與人員：

決策者（老板艰匙、運營總監(jiān)、產(chǎn)品總監(jiān)抹恳、ued總監(jiān)）

參與者（用戶员凝、產(chǎn)品、運營奋献、用研健霹、交互、視覺）

記錄者

這里會有一些很有意思的地方秽荞，那就是決策者的選擇可能不一致骤公，主要是看看決策者和我們的方向是不是大致一致的，并非是讓決策者真的來拍板扬跋。

好了阶捆，這邊我們主要用了人格滑塊和競品地圖，為什么不把所有的步驟都做一遍钦听？因為方法是死的洒试，人是活的，這里用到兩個對我們性價比最高的步驟我認(rèn)為就足夠了朴上，不過大家可以去整一個流程去嘗試一下垒棋，肯定獲益匪淺。

人格滑塊：

這個詞聽起來是不是挺有趣的痪宰，其實它就是可以在白紙上完成的小case叼架，在這步操作中我們需要將小滑塊畫在我們心中產(chǎn)品品牌對應(yīng)的定位位置，有一定的偏向或者極端選擇衣撬，都是有價值的選擇乖订。這里的選項并不固定只有這四個，你可以自己補充需要的對立極端定位具练。選擇完之后每一個人都需要將選擇的理由說一下并由記錄者記錄乍构。

競品地圖：

其實就是一個四象限矩陣，x軸標(biāo)記為從傳統(tǒng)經(jīng)典道現(xiàn)代前衛(wèi)扛点，y軸標(biāo)記為從生動活潑到保守嚴(yán)謹(jǐn)哥遮，當(dāng)然你還可以做第二個矩陣第三個矩陣，xy軸標(biāo)記可以自己根據(jù)情況寫陵究，但是最好不要重疊眠饮。

做了這么多探索性質(zhì)的工作，我們心中對產(chǎn)品铜邮，以及用戶對產(chǎn)品的感受有了一個比較清晰的概念君仆，我們知道了她們偏好哪一種風(fēng)格，喜歡哪一類顏色，以及她們的一些建議返咱，最終我們將通過腦暴來定義這些可以落地的具體方案。

在定義之前我們還做了一項工作那就是視覺競品分析牍鞠，有些人說參考競品就好比抄襲咖摹，其實不應(yīng)該這么說，我們能從競品中獲得比較好的驚喜點难述，我們可以加以改進(jìn)成為我們的東西這其實無可厚非萤晴，這也并不會最終造成兩個很像的的產(chǎn)品出來，關(guān)鍵的地方在于在參考別人優(yōu)點的同時能否將自己的創(chuàng)意點胁后、品牌個性融合進(jìn)去店读。

總結(jié)

目前正在做改版，所有的方法可能都只是參考攀芯，做那么多探索屯断，其實就是為了提高正確率而已，即使錯了也不會離譜侣诺。但是你不去做殖演，可能會錯得很離譜，所以我們?yōu)槭裁匆v究一個設(shè)計流程年鸳，一個原因是能夠獲得支持你提案的論據(jù)趴久，第二個原因是能幫助你準(zhǔn)確定位用戶及產(chǎn)品的情感方向，最后一個原因是能夠幫助你積累一定的設(shè)計經(jīng)驗和方法搔确，以及問題的總結(jié)彼棍。最后能否達(dá)到一個成功的視覺改版是靠30%的探索流程+70%設(shè)計師水平。