駕校一點(diǎn)通作為移動(dòng)端教輔類(lèi)工具，一直深受廣大用戶(hù)的喜愛(ài)。隨著功能的豐富與強(qiáng)大，產(chǎn)品的結(jié)構(gòu)也越來(lái)越復(fù)雜，現(xiàn)有的信息架構(gòu)已不能承載產(chǎn)品未來(lái)的發(fā)展，設(shè)計(jì)改版勢(shì)在必行。
這次5.0改版主要將各種功能進(jìn)行結(jié)構(gòu)化整合、根據(jù)駕校一點(diǎn)通的調(diào)性重新定義產(chǎn)品視覺(jué)風(fēng)格，讓信息架構(gòu)和視覺(jué)展現(xiàn)更加合理，創(chuàng)造流暢生動(dòng)的用戶(hù)體驗(yàn)。改版不僅僅只是為了視覺(jué)感受上更具有設(shè)計(jì)感，而是希望能讓用戶(hù)有更好的體驗(yàn)，形成品牌的忠誠(chéng)度。
駕校一點(diǎn)通團(tuán)隊(duì)于2016年9月底啟動(dòng)了5.0版本的設(shè)計(jì)改版，到目前5.4版本，所有改版的內(nèi)容已悉數(shù)上線(xiàn)。在啟動(dòng)改版之前，設(shè)計(jì)團(tuán)隊(duì)調(diào)研了駕考同類(lèi)型產(chǎn)品，發(fā)現(xiàn)頁(yè)面結(jié)構(gòu)以及視覺(jué)設(shè)計(jì)都比較一致，且產(chǎn)品頁(yè)面多年都很少進(jìn)行視覺(jué)更新迭代。所以，這次5.0版本改版的使命不僅要整體提升駕校一點(diǎn)通App的用戶(hù)體驗(yàn)，也需要與行業(yè)內(nèi)的其他產(chǎn)品形成差異。在改版期間，駕校一點(diǎn)通從App、PC、Wap端到品牌logo做了一系列體驗(yàn)升級(jí)。這篇文章旨在針對(duì)此次App端改版過(guò)程，做完整的設(shè)計(jì)回顧。
圍繞問(wèn)題，設(shè)定設(shè)計(jì)目標(biāo)基于舊版的產(chǎn)品分析，用戶(hù)體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)發(fā)現(xiàn)如下幾個(gè)問(wèn)題：
用戶(hù)體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)的小伙伴們多次迭代，從用戶(hù)角度出發(fā)，針對(duì)問(wèn)題以及競(jìng)品分析的結(jié)果，不斷發(fā)散收斂，得到此次改版的設(shè)計(jì)方向：合理規(guī)劃信息架構(gòu)，確定駕校一點(diǎn)通產(chǎn)品設(shè)計(jì)調(diào)性，形成差異化的視覺(jué)語(yǔ)言，重新全面包裝，提升品牌認(rèn)知度，整體提升線(xiàn)上的用戶(hù)體驗(yàn)。
1、合理的信息架構(gòu)，引導(dǎo)用戶(hù)行為舊版首頁(yè)入口太多，主次信息不清晰，信息架構(gòu)不夠合理。基于產(chǎn)品用戶(hù)數(shù)據(jù)分析、用戶(hù)使用行為和產(chǎn)品功能需求等三個(gè)方面，交互同學(xué)對(duì)于首頁(yè)信息結(jié)構(gòu)重新進(jìn)行了調(diào)整。
新改版后的主要功能模塊有：考試、福利、社區(qū)、發(fā)現(xiàn)、購(gòu)車(chē)。首頁(yè)改版中，將考試練習(xí)、模擬考試和做題相關(guān)功能提煉出來(lái)，整合成首頁(yè)頭部卡片內(nèi)容，讓考試做題這塊核心功能更加突出。同時(shí)，在考題練習(xí)、模擬考試上面顯示用戶(hù)已完成題庫(kù)百分比和最高得分的數(shù)據(jù)，不僅對(duì)考題練習(xí)和模擬考試進(jìn)行解釋說(shuō)明，還能提醒用戶(hù)進(jìn)行下一步操作，增加產(chǎn)品與用戶(hù)之間的聯(lián)系。
在首頁(yè)的情感化設(shè)計(jì)中，我們也加入了“老司機(jī)”形象，讓老司機(jī)給用戶(hù)陪伴感，同時(shí)可以有效引導(dǎo)用戶(hù)更加快速直接的進(jìn)行操作。
駕校一點(diǎn)通V5.0首頁(yè)改版對(duì)比圖
2、確定駕校一點(diǎn)通產(chǎn)品視覺(jué)語(yǔ)言，制定設(shè)計(jì)規(guī)范通過(guò)設(shè)計(jì)團(tuán)隊(duì)多次討論和分析，在APP5.0設(shè)計(jì)改版中，產(chǎn)品需要回歸用戶(hù)剛性需求：強(qiáng)化考試做題頁(yè)。優(yōu)化科目一、科目四線(xiàn)上做題體驗(yàn)，重新梳理科目二、科目三展示內(nèi)容。增加福利頁(yè)面，優(yōu)化社區(qū)、購(gòu)車(chē)頁(yè)面，其他功能展示適當(dāng)弱化和規(guī)范化。
在駕校一點(diǎn)通App此次視覺(jué)改版中，我們得到調(diào)研反饋問(wèn)題，主要集中在缺乏設(shè)計(jì)感、風(fēng)格保守、土氣、粗糙不精致等。根據(jù)梳理后的的品牌視覺(jué)感受，整體采用扁平化風(fēng)格使體驗(yàn)更加輕量化。通過(guò)對(duì)內(nèi)容布局、顏色、圖標(biāo)、字體等細(xì)節(jié)元素上進(jìn)行了重新設(shè)計(jì)，使得頁(yè)面更加簡(jiǎn)潔，便于用戶(hù)聚焦產(chǎn)品功能及內(nèi)容本身。
（1）內(nèi)容布局
新版中去除所有多余元素，將同類(lèi)信息進(jìn)行系統(tǒng)性歸納，并整理到一張卡片內(nèi)做為獨(dú)立的單元進(jìn)行展示，使頁(yè)面干凈，清晰和美觀布局。歸納整合了功能模塊，降低用戶(hù)的理解成本，增加產(chǎn)品易用性。
目前線(xiàn)上考試首頁(yè)界面的截圖
（2）顏色
重新定義的產(chǎn)品品牌色——綠色，讓頁(yè)面整體顯得更干凈、更年輕、更專(zhuān)業(yè)，配合駕校一點(diǎn)通產(chǎn)品slogan：“學(xué)車(chē)更輕松”。讓用戶(hù)輕松產(chǎn)生信賴(lài)感，加深用戶(hù)對(duì)品牌的認(rèn)知，并給用戶(hù)一種綠色通道的感覺(jué)，選擇駕校一點(diǎn)通意味著一路綠燈。
改版后的引導(dǎo)頁(yè)截圖
（3）圖標(biāo)
此次圖標(biāo)的圖形及顏色也秉承輕量化設(shè)計(jì)，遵循品牌特征，化繁為簡(jiǎn)。采用了較為明快的色彩，使得圖標(biāo)充滿(mǎn)朝氣與活力，增加愉悅感以及辨識(shí)度。同時(shí)，我們也解決了舊版中頁(yè)面圖標(biāo)風(fēng)格不統(tǒng)一的問(wèn)題。
改版前后圖標(biāo)對(duì)比
（4）字體
改版中，我們也嚴(yán)格規(guī)范了字體色值和字號(hào)的使用，讓頁(yè)面有清晰的視覺(jué)層級(jí)關(guān)系。標(biāo)題加粗，讓用戶(hù)能直接快速的獲取信息。信息模塊之間的間距也比之前更大一些，從而區(qū)分層級(jí)關(guān)系，形成視覺(jué)的節(jié)奏感。
駕校一點(diǎn)通App作為一個(gè)成熟產(chǎn)品，從主功能頁(yè)面到二級(jí)三級(jí)頁(yè)面，有著上百個(gè)頁(yè)面。在我們前期視覺(jué)風(fēng)格成型后，為了團(tuán)隊(duì)設(shè)計(jì)能夠快速協(xié)作，并具有統(tǒng)一性，設(shè)計(jì)規(guī)范的制定也是必不可少。有了規(guī)范，后續(xù)迭代中也能保持設(shè)計(jì)初衷，遵循定制好設(shè)計(jì)規(guī)范，維護(hù)好品牌形象，能使產(chǎn)品在不斷更新迭代中保持品牌形象不走樣，保持產(chǎn)品特性，同時(shí)產(chǎn)品的規(guī)范統(tǒng)一增加了用戶(hù)使用認(rèn)知，有效提升用戶(hù)體驗(yàn)。
駕校一點(diǎn)通設(shè)計(jì)規(guī)范部分截圖
聯(lián)系客服
