上海APP開發(fā)公司——海淘科技為你推出《怎樣做APP界面視覺改版》。

我們在進行APP改版通常會分以下幾種情況：

1. 只改視覺，不動交互。
2. 視覺交互一起改。
3. 改交互不改視覺。

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

目標

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

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

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

方案

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

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

流程

方法一：情緒板

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

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

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

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

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

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

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

第一步

腦暴提煉關鍵詞

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

第二步

尋找對應的素材及其圖像

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

第三步

探索品牌感覺(讓用戶)

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

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

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

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

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

第四步

指導設計

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

方法二：品牌沖刺

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

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

品牌沖刺包含六項操作：

1. 二十年線路圖：可以幫助你把眼光放長遠。
2. 是什么、怎么做、為什么：幫助你思考公司/產(chǎn)品存在的理由。
3. 三大市場價值：讓你的為什么更具體。
4. 三大受眾：幫你為品牌目標梳理輕重緩急。
5. 人格化塊：定義了你的品牌態(tài)度和風格。
6. 競品地圖：將你的品牌與競品進行對比。

參與人員：

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

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

記錄者

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

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

人格滑塊：

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

競品地圖：

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

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

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

總結

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