UI設(shè)計(jì)：簡單學(xué)會(huì)視覺改版的幾種方法

不知道大家在遇到視覺改版的時(shí)候第一個(gè)想法是什么，是參考競品？還是主觀猜測？還是問問用戶喜歡什么樣的？

其實(shí)都不正確，改版通常會(huì)分以下幾種情況：

1. 只改視覺，不動(dòng)交互。

2. 視覺交互一起改。

3. 改交互不改視覺。

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

目標(biāo)

首先我們需要明確我們改版的目標(biāo)是什么？在確定改版目標(biāo)之前，我們先問問自己，目前的產(chǎn)品出現(xiàn)了什么問題，也就是為什么要改版？改版是一件工程量非常巨大的事情，因?yàn)槭紫蕊L(fēng)格的推導(dǎo)過程不是一蹴而就的，不能說你幾個(gè)人拍板，從自身經(jīng)驗(yàn)出發(fā)說：我們就要這樣改!這是不對(duì)的。其次改版之后的規(guī)范組件庫要相應(yīng)的更新，再次開發(fā)資源的分配更捉襟見肘，需要在完成產(chǎn)品功能需求的開發(fā)同時(shí)來完成改版需求的開發(fā)，最后改版的效果我們?nèi)绾蝸砗饬?？是否是一次成功的改版，如果不是，哪些地方需要重新調(diào)整？這是一整個(gè)改版需要做的閉環(huán)工作，從前到后都是需要感性發(fā)散，理性執(zhí)行的。

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

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

方案

說起這個(gè)定義方案，其實(shí)是比較痛苦的一個(gè)過程，因?yàn)榇蠹叶紱]有完整的做過一次改版，或者說一次客觀的改版，但是通過這次的改版讓我們學(xué)習(xí)到了不少，也發(fā)生了一些比較有趣的事情。

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

流程

方法一：情緒板

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

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

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

我們對(duì)情緒板步驟做了一次修改，因?yàn)槿绻凑涨榫w板常規(guī)的步驟來做的話，我們需要用戶二度參與，由于一些原因限制我們進(jìn)行了一次不一樣的嘗試，我們首先進(jìn)行了關(guān)鍵詞提煉。

所以我們這次的步驟有了一些改動(dòng)，就變成了：

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

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

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

在這之前我們需要用戶畫像、體驗(yàn)地圖、故事板等一些基礎(chǔ)用戶數(shù)據(jù)信息。同時(shí)因?yàn)槲覀冏约阂彩钱a(chǎn)品的用戶，所以關(guān)鍵詞也是有一定的準(zhǔn)確性的，這邊就是通過具象和抽象兩個(gè)維度去發(fā)散思維，盡可能多的想出一些和產(chǎn)品感覺靠近或者沒那么靠近的描述，基本上抽象的類的詞比較多，具象類的會(huì)比較少，當(dāng)然腦暴的分類方法肯定有很多中，這里只是舉個(gè)例子。

第二步 尋找對(duì)應(yīng)的素材及其圖像

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

第三步 探索品牌感覺(讓用戶)

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

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

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

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

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

第四步 指導(dǎo)設(shè)計(jì)

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

方法二：品牌沖刺

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

品牌沖刺包含六項(xiàng)操作：

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

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

3. 三大市場價(jià)值：讓你的為什么更具體。

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

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

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

參與人員：

決策者(老板、運(yùn)營總監(jiān)、產(chǎn)品總監(jiān)、ued總監(jiān))

參與者(用戶、產(chǎn)品、運(yùn)營、用研、交互、視覺)

記錄者

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

好了，這邊我們主要用了人格滑塊和競品地圖，為什么不把所有的步驟都做一遍？因?yàn)榉椒ㄊ撬赖模耸腔畹?，這里用到兩個(gè)對(duì)我們性價(jià)比最高的步驟我認(rèn)為就足夠了，不過大家可以去整一個(gè)流程去嘗試一下，肯定獲益匪淺。

人格滑塊：

這個(gè)詞聽起來是不是挺有趣的，其實(shí)它就是可以在白紙上完成的小case，在這步操作中我們需要將小滑塊畫在我們心中產(chǎn)品品牌對(duì)應(yīng)的定位位置，有一定的偏向或者極端選擇，都是有價(jià)值的選擇。這里的選項(xiàng)并不固定只有這四個(gè)，你可以自己補(bǔ)充需要的對(duì)立極端定位。選擇完之后每一個(gè)人都需要將選擇的理由說一下并由記錄者記錄。

競品地圖：

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

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

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

總結(jié)

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