更新時(shí)間:2017-12-26 來(lái)源:黑馬程序員 瀏覽量:
不知道大家在遇到視覺(jué)改版的時(shí)候第一個(gè)想法是什么,是參考競(jìng)品?還是主觀猜測(cè)?還是問(wèn)問(wèn)用戶喜歡什么樣的?
其實(shí)都不正確,改版通常會(huì)分以下幾種情況:
1. 只改視覺(jué),不動(dòng)交互。
2. 視覺(jué)交互一起改。
3. 改交互不改視覺(jué)。
第3點(diǎn)的情況不多,主要是第1點(diǎn)和第2點(diǎn),如果視覺(jué)交互一起改,還相對(duì)更簡(jiǎn)單一些,但是交互的改動(dòng)往往伴隨著產(chǎn)品的整體規(guī)劃調(diào)整。如果只改視覺(jué)不改布局,那限制條件就更多了。那么,究竟視覺(jué)改版要如何開(kāi)始做我們一起來(lái)分析一下:
目標(biāo)
首先我們需要明確我們改版的目標(biāo)是什么?在確定改版目標(biāo)之前,我們先問(wèn)問(wèn)自己,目前的產(chǎn)品出現(xiàn)了什么問(wèn)題,也就是為什么要改版?改版是一件工程量非常巨大的事情,因?yàn)槭紫蕊L(fēng)格的推導(dǎo)過(guò)程不是一蹴而就的,不能說(shuō)你幾個(gè)人拍板,從自身經(jīng)驗(yàn)出發(fā)說(shuō):我們就要這樣改!這是不對(duì)的。其次改版之后的規(guī)范組件庫(kù)要相應(yīng)的更新,再次開(kāi)發(fā)資源的分配更捉襟見(jiàn)肘,需要在完成產(chǎn)品功能需求的開(kāi)發(fā)同時(shí)來(lái)完成改版需求的開(kāi)發(fā),最后改版的效果我們?nèi)绾蝸?lái)衡量?是否是一次成功的改版,如果不是,哪些地方需要重新調(diào)整?這是一整個(gè)改版需要做的閉環(huán)工作,從前到后都是需要感性發(fā)散,理性執(zhí)行的。
所以我們改版的原因是視覺(jué)和品牌定位不匹配,還是產(chǎn)品的用戶體驗(yàn)很差勁?亦或者是規(guī)范組件庫(kù)需要重新建立?原因可能是重疊的,他們并不是孤立的,那么這次改版我們將問(wèn)題定在視覺(jué)與品牌定位不匹配,并且需要一定程度上優(yōu)化用戶體驗(yàn)這個(gè)點(diǎn)上。所以我們的目標(biāo)是基于正確的品牌定位,從品牌,配色,排版,情感化,微交互,趨勢(shì)等維度出發(fā),重新定義視覺(jué)風(fēng)格,達(dá)到一種讓用戶一使用我們的產(chǎn)品就能感受到我們的品牌魅力和性格的目的,讓用戶從情感上達(dá)到共鳴的效果,并輸出DPL。
其實(shí)定義目標(biāo),是需要精準(zhǔn)化的,不夠精準(zhǔn)化的目標(biāo)會(huì)讓最后的產(chǎn)出流于形式,太廣泛的目標(biāo)并不好落地。
方案
說(shuō)起這個(gè)定義方案,其實(shí)是比較痛苦的一個(gè)過(guò)程,因?yàn)榇蠹叶紱](méi)有完整的做過(guò)一次改版,或者說(shuō)一次客觀的改版,但是通過(guò)這次的改版讓我們學(xué)習(xí)到了不少,也發(fā)生了一些比較有趣的事情。
首先我們會(huì)用到情緒板來(lái)定義一個(gè)風(fēng)格走向,其次用到了品牌沖刺,其實(shí)這些方法可能最后并不能切實(shí)標(biāo)準(zhǔn)化我們?nèi)プ鲆恍└陌嬖O(shè)計(jì),但是我們需要找到一些方向,以及一些參考,從而幫助指導(dǎo)我們?cè)O(shè)計(jì)。我們希望了解的是產(chǎn)品的核心價(jià)值,產(chǎn)品的性格態(tài)度,以及受眾的情感和動(dòng)機(jī),我們通過(guò)這些方法我們能夠獲取這些信息,對(duì)我們的幫助是巨大的,而不是馬上通過(guò)這些方法能得出一個(gè)按鈕的高度和寬度是多少。所以最后我們用到了3種方法:情緒板、品牌沖刺、定義腦暴
流程
方法一:情緒板
情緒板的原本流程是這樣的:
探索品牌感覺(jué)-發(fā)現(xiàn)提取關(guān)鍵詞-尋找對(duì)應(yīng)素材創(chuàng)建情緒板-指導(dǎo)設(shè)計(jì)
其實(shí)感覺(jué)是一種比較虛無(wú)飄渺的東西,即便你是產(chǎn)品的設(shè)計(jì)或者開(kāi)發(fā)人員,可能你所體會(huì)的感受和用戶體會(huì)的感受并不相同,所以第一步我們需要找準(zhǔn)品牌的定位以及用戶心中產(chǎn)品是個(gè)什么樣子,是優(yōu)雅的紳士還是花枝招展的少女?當(dāng)然最后你所成型的品牌風(fēng)格并不能滿足你所有用戶,但是只要滿足大部分用戶,你就成功了。
我們對(duì)情緒板步驟做了一次修改,因?yàn)槿绻凑涨榫w板常規(guī)的步驟來(lái)做的話,我們需要用戶二度參與,由于一些原因限制我們進(jìn)行了一次不一樣的嘗試,我們首先進(jìn)行了關(guān)鍵詞提煉。
所以我們這次的步驟有了一些改動(dòng),就變成了:
發(fā)現(xiàn)提取關(guān)鍵詞(我們自己)-尋找對(duì)應(yīng)素材創(chuàng)建情緒板-探索品牌感覺(jué)(讓用戶)-指導(dǎo)設(shè)計(jì)。
可能有些人會(huì)問(wèn)了,你這樣隨意改動(dòng)步驟最后的結(jié)果不準(zhǔn)確怎么辦?其實(shí)本來(lái)最后也不是一個(gè)很準(zhǔn)確的結(jié)果,而且我們使用一個(gè)方法并不需要按部就班的跟著做,否則我們很難從中取發(fā)現(xiàn)一些新的問(wèn)題。
第一步 腦暴提煉關(guān)鍵詞
在這之前我們需要用戶畫(huà)像、體驗(yàn)地圖、故事板等一些基礎(chǔ)用戶數(shù)據(jù)信息。同時(shí)因?yàn)槲覀冏约阂彩钱a(chǎn)品的用戶,所以關(guān)鍵詞也是有一定的準(zhǔn)確性的,這邊就是通過(guò)具象和抽象兩個(gè)維度去發(fā)散思維,盡可能多的想出一些和產(chǎn)品感覺(jué)靠近或者沒(méi)那么靠近的描述,基本上抽象的類的詞比較多,具象類的會(huì)比較少,當(dāng)然腦暴的分類方法肯定有很多中,這里只是舉個(gè)例子。
第二步 尋找對(duì)應(yīng)的素材及其圖像
腦暴出關(guān)鍵詞之后我們需要將他們對(duì)應(yīng)的找出不同的圖片圖像,為什么要找圖片,因?yàn)槲覀冊(cè)谠L談過(guò)程中,用戶很有可能無(wú)法將自己的直觀感受表達(dá)出來(lái),他們需要有圖像的輔助才能更直觀的表達(dá)。這邊注意一點(diǎn)盡量找出質(zhì)量高、種類全的圖片,舉個(gè)例子:有一個(gè)關(guān)鍵詞叫”女性”,那么我們需要在我們的用戶范圍內(nèi)找出不同標(biāo)準(zhǔn)的女性照片,可以有大學(xué)女生、新白領(lǐng)亦或者是全職媽媽等等,每一個(gè)種類的圖片也可以找不同的風(fēng)格色彩,這些圖像后面我們?cè)L談中需要用到。
第三步 探索品牌感覺(jué)(讓用戶)
產(chǎn)品靠誰(shuí)而活:當(dāng)然是用戶,有時(shí)候會(huì)發(fā)現(xiàn)一些很有趣的問(wèn)題,比如你將自己的產(chǎn)品定位高級(jí)、輕奢、有品位,但是你的視覺(jué)風(fēng)格讓用戶看起來(lái)只有單一、枯燥、性冷淡,所以你的感覺(jué)和用戶感覺(jué)可能并不是同一回事。所以這里我們需要向用戶以及一些利益相關(guān)者進(jìn)行一次訪談,來(lái)看看他們對(duì)我們的產(chǎn)品的感受是怎樣的。
在準(zhǔn)備第三步訪談之前我們也需要制定一個(gè)目標(biāo),我們需要通過(guò)這次訪談達(dá)到一個(gè)什么樣的目的?這次我們的目的是需要獲取用戶對(duì)我們產(chǎn)品引發(fā)出的一些明確的情感以及準(zhǔn)確的描述,例如色彩搭配、性格、圖標(biāo)風(fēng)格、排版方式等等。
當(dāng)然在訪談之前我們一定會(huì)準(zhǔn)備一個(gè)訪談提綱,這個(gè)提綱也是有一些門(mén)道,第一次提綱列的時(shí)候就坑了,因?yàn)槲以O(shè)置的問(wèn)題會(huì)比較術(shù)語(yǔ)化,比如:請(qǐng)問(wèn)您覺(jué)得目前我們產(chǎn)品的視覺(jué)風(fēng)格怎么樣?這個(gè)問(wèn)題犯了2個(gè)錯(cuò):第一:?jiǎn)柕奶辗海脩魺o(wú)法回答,他們只能說(shuō)還行,或者不錯(cuò)。第二點(diǎn):根據(jù)我們用戶接觸互聯(lián)網(wǎng)的水平及敏感度,她完全聽(tīng)不懂視覺(jué)風(fēng)格是什么意思。所以,我們將問(wèn)題進(jìn)行了修改,不再單一的向用戶詢問(wèn)問(wèn)題,而是通過(guò)對(duì)競(jìng)品圖片比較,以及有針對(duì)性的元素舉例來(lái)讓用戶表達(dá)她們內(nèi)心真實(shí)的想法。
我們?cè)诘诙街袑㈥P(guān)鍵詞對(duì)應(yīng)的照片分別放在每一個(gè)以關(guān)鍵詞命名的文件夾中,讓用戶去選擇符合她心中產(chǎn)品感覺(jué)的關(guān)鍵詞,這時(shí)候我們需要去追問(wèn)用戶為什么選擇這個(gè)關(guān)鍵詞,其中的原因我們要深入挖掘,舉個(gè)例子:用戶選擇了一個(gè)叫安全感的關(guān)鍵詞,那么讓用戶造成安全感的因素是很多的,我們不知道產(chǎn)品為什么能讓用戶產(chǎn)生安全感,所以我們會(huì)繼續(xù)提問(wèn),為什么選擇安全感,是產(chǎn)品的哪個(gè)地方、步驟、元素、或者別的一些什么因素讓你產(chǎn)生了安全感。直到用戶能夠準(zhǔn)確并確定這是根本原因的時(shí)候我們才能停止。
最后我們讓用戶來(lái)挑選該關(guān)鍵詞下的多類圖片,同樣的挑選圖片我們也要問(wèn)用戶,為什么是這張而不是那張。
第四步 指導(dǎo)設(shè)計(jì)
先等等,光靠情緒板我認(rèn)為還是不足以將這次改版做好,因?yàn)槲覀冞€是沒(méi)有能夠?qū)⑵放瓶紤]進(jìn)去,視覺(jué)風(fēng)格可能有一定的方向了,但是具有品牌化的視覺(jué)風(fēng)格我們還未能定義出來(lái),所以我們又找到了一種方法,叫做品牌沖刺。
方法二:品牌沖刺
如何開(kāi)始做品牌沖刺,品牌沖刺給我的第一印象差不多是類似于設(shè)計(jì)沖刺那樣的高效但是局限性很大的一種探索方法,但是我們會(huì)發(fā)現(xiàn),即便投入更多時(shí)間去做一些品牌的探索也并非百分百能產(chǎn)出更好的結(jié)果,所以品牌沖刺會(huì)是一個(gè)比較好的選擇。
品牌沖刺包含六項(xiàng)操作:
1. 二十年線路圖:可以幫助你把眼光放長(zhǎng)遠(yuǎn)。
2. 是什么、怎么做、為什么:幫助你思考公司/產(chǎn)品存在的理由。
3. 三大市場(chǎng)價(jià)值:讓你的為什么更具體。
4. 三大受眾:幫你為品牌目標(biāo)梳理輕重緩急。
5. 人格化塊:定義了你的品牌態(tài)度和風(fēng)格。
6. 競(jìng)品地圖:將你的品牌與競(jìng)品進(jìn)行對(duì)比。
參與人員:
決策者(老板、運(yùn)營(yíng)總監(jiān)、產(chǎn)品總監(jiān)、ued總監(jiān))
參與者(用戶、產(chǎn)品、運(yùn)營(yíng)、用研、交互、視覺(jué))
記錄者
這里會(huì)有一些很有意思的地方,那就是決策者的選擇可能不一致,主要是看看決策者和我們的方向是不是大致一致的,并非是讓決策者真的來(lái)拍板。
好了,這邊我們主要用了人格滑塊和競(jìng)品地圖,為什么不把所有的步驟都做一遍?因?yàn)榉椒ㄊ撬赖?,人是活的,這里用到兩個(gè)對(duì)我們性價(jià)比最高的步驟我認(rèn)為就足夠了,不過(guò)大家可以去整一個(gè)流程去嘗試一下,肯定獲益匪淺。
人格滑塊:
這個(gè)詞聽(tīng)起來(lái)是不是挺有趣的,其實(shí)它就是可以在白紙上完成的小case,在這步操作中我們需要將小滑塊畫(huà)在我們心中產(chǎn)品品牌對(duì)應(yīng)的定位位置,有一定的偏向或者極端選擇,都是有價(jià)值的選擇。這里的選項(xiàng)并不固定只有這四個(gè),你可以自己補(bǔ)充需要的對(duì)立極端定位。選擇完之后每一個(gè)人都需要將選擇的理由說(shuō)一下并由記錄者記錄。
競(jìng)品地圖:
其實(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ù)情況寫(xiě),但是最好不要重疊。
做了這么多探索性質(zhì)的工作,我們心中對(duì)產(chǎn)品,以及用戶對(duì)產(chǎn)品的感受有了一個(gè)比較清晰的概念,我們知道了她們偏好哪一種風(fēng)格,喜歡哪一類顏色,以及她們的一些建議,最終我們將通過(guò)腦暴來(lái)定義這些可以落地的具體方案。
在定義之前我們還做了一項(xiàng)工作那就是視覺(jué)競(jìng)品分析,有些人說(shuō)參考競(jìng)品就好比抄襲,其實(shí)不應(yīng)該這么說(shuō),我們能從競(jìng)品中獲得比較好的驚喜點(diǎn),我們可以加以改進(jìn)成為我們的東西這其實(shí)無(wú)可厚非,這也并不會(huì)最終造成兩個(gè)很像的的產(chǎn)品出來(lái),關(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)和方法,以及問(wèn)題的總結(jié)。最后能否達(dá)到一個(gè)成功的視覺(jué)改版是靠30%的探索流程+70%設(shè)計(jì)師水平。
UI綜合設(shè)計(jì):如何以開(kāi)發(fā)的視角做設(shè)計(jì)?
2017-12-26UI設(shè)計(jì):如何在Axure中,用動(dòng)態(tài)面板實(shí)現(xiàn)banner的輪播效果
2017-11-29Photoshop快捷鍵大全
2017-11-29UI設(shè)計(jì):3分鐘利用Photoshop制作五彩星軌
2017-11-29設(shè)計(jì)必備技能:3分鐘讓模糊圖片更清晰
2017-11-29UI設(shè)計(jì):關(guān)于平面設(shè)計(jì)鑒賞思路總結(jié)
2017-11-21