遠(yuǎn)光用戶體驗(yàn)中心今年迎接了一個(gè)有趣的任務(wù)，就是對(duì)智慧商旅APP進(jìn)行視覺(jué)改版。在過(guò)程中，遇到了許多問(wèn)題，也學(xué)會(huì)運(yùn)用了許多方法，在這里與大家分享。

改版一般分為以下幾種情況：1. 只改交互，不改視覺(jué)。2. 只改視覺(jué)，不改交互。3. 視覺(jué)交互一起改。

通常第1點(diǎn)的情況不多見(jiàn)，主要是第2和3點(diǎn)，第3點(diǎn)視覺(jué)交互一起改是相對(duì)比較容易的，但交互改動(dòng)是跟業(yè)務(wù)需求的變動(dòng)掛鉤，有可能伴隨整體策略規(guī)劃方向發(fā)生變化。第2點(diǎn)只改視覺(jué)不改交互，那限制條件就更多了。

那么本次改版我們是屬于第3種情況，視覺(jué)交互一起改，在交互合理體現(xiàn)功能需求的同時(shí)，利用視覺(jué)設(shè)計(jì)引導(dǎo)用戶高效使用產(chǎn)品，并產(chǎn)生友好的用戶體驗(yàn)。

視覺(jué)改版如何開展今天小編就來(lái)分析一下：

目標(biāo)

首先在確定改版目標(biāo)之前，先來(lái)看看產(chǎn)品出現(xiàn)的問(wèn)題有哪些：

1. 整體配色方案——缺乏品牌特征。色相，飽和度，亮度（HSB）沒(méi)有規(guī)律，看起來(lái)不像同一款產(chǎn)品。

（改版前）從左到右依次是首頁(yè)、申請(qǐng)單、機(jī)票預(yù)訂、酒店預(yù)訂

2.首頁(yè)——產(chǎn)品設(shè)計(jì)營(yíng)銷痕跡過(guò)于明顯。大篇幅的廣告，但并不是用戶使用中所需要的信息或功能，甚至對(duì)功能入口和使用造成干擾。

3.首頁(yè)——引導(dǎo)不夠直觀。預(yù)訂機(jī)票的引導(dǎo)不明顯，已預(yù)訂的機(jī)票無(wú)法查看。

4.申請(qǐng)單——表單信息繁重，對(duì)用戶不夠友好。

通過(guò)界面的幾個(gè)問(wèn)題，反映出我們改版的原因是視覺(jué)沒(méi)有很好匹配品牌定位，在用戶體驗(yàn)方面受到一定的影響。所以我們的目標(biāo)是基于正確的品牌定位，從品牌，配色，排版，情感化，微交互等維度出發(fā)，重新定義視覺(jué)風(fēng)格，達(dá)到一種讓用戶一使用我們的產(chǎn)品就能感受到我們的品牌魅力和性格的目的，讓用戶從情感上達(dá)到共鳴的效果。

方案

1.品牌定位——用數(shù)學(xué)方法駕馭色彩

首先我們是做的企業(yè)商務(wù)旅行解決方案，沿用了我們遠(yuǎn)光一貫的b2b路線。因此在整體配色方案選用上，我們結(jié)合了遠(yuǎn)光品牌標(biāo)識(shí)色彩，運(yùn)用了同色系中更加鮮艷的商務(wù)藍(lán)，既能體現(xiàn)出遠(yuǎn)光的品牌特征家族化，又不失表現(xiàn)智慧商旅這一互聯(lián)網(wǎng)消費(fèi)產(chǎn)品的活潑溫度。

（改版后）從左到右依次是首頁(yè)、機(jī)票預(yù)訂、酒店預(yù)訂

利用一個(gè)主色，烘托品牌定位清晰化，色彩搭配還看起來(lái)非常和諧，是出自一個(gè)系列。其實(shí)，只要掌握一些技巧，就可以輕松理解色彩。（這里要敲黑板了）

在色相，飽和度，亮度（HSB）上做簡(jiǎn)單的關(guān)聯(lián)性。可以看到商旅的色彩方案中，以主色藍(lán)色的HSB為基準(zhǔn)，輔助色保留了亮度（B）一致，調(diào)出預(yù)訂酒店的主色，在藍(lán)色和紫色兩個(gè)顏色的基礎(chǔ)上，保持色相（H）一致，又調(diào)出了相應(yīng)的淺色系。其它色彩應(yīng)用面積小，我們?cè)谥魃牧炼龋˙）數(shù)值上做了加減法，統(tǒng)一+20并保持一致。掌握這樣的技巧，小編可以說(shuō)每做一個(gè)設(shè)計(jì)都像是完成了一幅畢加索的作品一樣。

2.首頁(yè)——整體化，提升任務(wù)完成感

首頁(yè)的改版大膽采用了圖片平鋪?zhàn)鰹楸尘埃贸鞘信c高架橋、水為素材，烘托出商務(wù)出行的節(jié)奏感與大氣正式的儀式感，以活潑的其它色作為功能入口的圖標(biāo)底色，搭配穩(wěn)重的主色，形成了強(qiáng)烈的視覺(jué)沖擊，讓用戶的關(guān)注力聚焦在重要的功能入口，高效的進(jìn)行操作，大大提高頁(yè)面響應(yīng)率、轉(zhuǎn)化率。

（改版后）從左到右依次是首頁(yè)（無(wú)行程）、首頁(yè)（有行程）

用戶初次使用商旅時(shí)，是沒(méi)有任何行程和訂單的，通常第一步就是申請(qǐng)出差，因此在頁(yè)面中心位置設(shè)計(jì)了大大的“+”圖標(biāo)，通過(guò)視覺(jué)對(duì)用戶的操作進(jìn)行了強(qiáng)烈的引導(dǎo)。

當(dāng)有了行程和訂單時(shí)，用戶的使用關(guān)注點(diǎn)改變，以卡片式設(shè)計(jì)的申請(qǐng)單出現(xiàn)，代替了原有位置的“+”申請(qǐng)出差圖標(biāo)，“+”常駐在頁(yè)面底部菜單欄，隨時(shí)可以使用。

利用卡片設(shè)計(jì)，將每個(gè)申請(qǐng)單以擬物化的形式呈現(xiàn)在背景上，好像每次用戶都在真實(shí)的查閱自己的待辦便利貼并進(jìn)行下一步操作，符合用戶打開APP時(shí)刻的心情，去開始，去完成他的行程。通過(guò)情感化設(shè)計(jì)，提升了用戶的任務(wù)完成感。

新版首頁(yè)增加了同一申請(qǐng)單多人同行的功能與設(shè)計(jì)，并將已經(jīng)預(yù)訂的機(jī)票、酒店信息展示在卡片中，為每個(gè)人單獨(dú)設(shè)計(jì)預(yù)訂按鈕。

通過(guò)色彩反差的運(yùn)用及情感化的卡片設(shè)計(jì)，首頁(yè)的改版很好的解決了舊版首頁(yè)的2大問(wèn)題：浪費(fèi)頁(yè)面一樓黃金位置，弱化了功能入口，操作引導(dǎo)性差。

3.申請(qǐng)單——利用色塊分區(qū)，利用隱藏簡(jiǎn)化流程

當(dāng)表單內(nèi)容過(guò)多，頁(yè)面過(guò)長(zhǎng)時(shí)，對(duì)急于完成訂票訂酒店任務(wù)的用戶來(lái)說(shuō)，是一種負(fù)擔(dān)。但根據(jù)企業(yè)的差旅規(guī)定，出差必須要填寫申請(qǐng)單，必須要包含費(fèi)用成本中心。我們?cè)谶@次改版中，通過(guò)對(duì)不同用戶的需求分析，進(jìn)行了分角色分場(chǎng)景設(shè)計(jì)。

當(dāng)角色為企業(yè)員工時(shí)，填寫出差申請(qǐng)單，默認(rèn)展開所有的表單信息；當(dāng)填寫預(yù)訂機(jī)票、酒店等訂單時(shí)，系統(tǒng)自動(dòng)填寫關(guān)聯(lián)申請(qǐng)單的表單信息，免去二次填寫的煩惱。

當(dāng)角色為企業(yè)高層領(lǐng)導(dǎo)時(shí)，填寫出差行程單，默認(rèn)收起費(fèi)用歸屬表單，系統(tǒng)自動(dòng)填寫費(fèi)用歸屬表單信息。

除了利用隱藏和系統(tǒng)自動(dòng)填寫兩個(gè)方法簡(jiǎn)化表單過(guò)長(zhǎng)問(wèn)題，還通過(guò)視覺(jué)的色塊分區(qū)法，將表單中的內(nèi)容歸類。如下圖：

（改版后）出差申請(qǐng)單

利用主色與白色搭配作兩個(gè)分區(qū)，將出差事由、目的地、時(shí)間三個(gè)出差信息與其他信息劃分開，視覺(jué)心理會(huì)將兩個(gè)分區(qū)想象成兩步操作完成填單，從而整體化。

總結(jié)

現(xiàn)在迭代還在繼續(xù)，改版也在持續(xù)中。我們做了很多探索，用了很多方法，在逐步的形成一個(gè)設(shè)計(jì)流程，這可以幫助我們積累經(jīng)驗(yàn)。要達(dá)到一個(gè)成功的視覺(jué)改版是要靠30%的探索流程+70%設(shè)計(jì)師水平。