飛線巴士小程序與2019年1月18日在鄭州正式上線運(yùn)營。近期保持小步快跑，逐步優(yōu)化迭代，強(qiáng)化產(chǎn)品功能，優(yōu)化體驗(yàn)流程，目前1.4版本已上線。本文復(fù)盤在設(shè)計(jì)過程中遇到的問題與思考，闡述智慧交通設(shè)計(jì)語言的應(yīng)用與實(shí)施。

一、項(xiàng)目背景

公共交通作為國人主要的出行方式，在高峰時(shí)段，仍會(huì)面臨擁擠、等待時(shí)間長、需要換乘等一系列問題。定制巴士產(chǎn)品希望能幫助用戶實(shí)現(xiàn)點(diǎn)對(duì)點(diǎn)的個(gè)性化公交出行需求，專車專線，提升出行乘車體驗(yàn)。做個(gè)有趣的比喻就是“打低調(diào)百萬豪車不是夢(mèng)”。

同時(shí)，定制巴士也可以幫助公交集團(tuán)實(shí)現(xiàn)科學(xué)配車，充分調(diào)動(dòng)閑置運(yùn)力資源，滿足市民出行需求，雙向協(xié)作，力求達(dá)到解決城市擁堵問題，建設(shè)智慧城市的目標(biāo)。

二、基礎(chǔ)沉淀

隨著乘車碼業(yè)務(wù)的不斷發(fā)展，持續(xù)深挖公共交通出行領(lǐng)域潛在價(jià)值，衍生出公交、地鐵出行助手、定制巴士等系列產(chǎn)品，經(jīng)歷2年的探索與沉淀，智慧交通設(shè)計(jì)語言逐步建立。

對(duì)外，統(tǒng)一的視覺語言幫助用戶加深產(chǎn)品的印象，提高用戶體驗(yàn)的完整性和一致性。對(duì)內(nèi)，統(tǒng)一的設(shè)計(jì)原則，可提升設(shè)計(jì)與研發(fā)流程的工作效率，降低重復(fù)溝通確認(rèn)與試錯(cuò)成本。同時(shí)讓設(shè)計(jì)師形成統(tǒng)一共識(shí)，產(chǎn)品需要傳遞給用戶的體驗(yàn)感受，以及整個(gè)系統(tǒng)的設(shè)計(jì)約束是什么。

關(guān)于推導(dǎo)過程可點(diǎn)擊閱讀【智慧交通】用“腳”思考的設(shè)計(jì)語言一文。我們歸納整理出“模塊化、信息聚焦、設(shè)計(jì)降噪、導(dǎo)向清晰”等原則，初步形成Smart Metro 設(shè)計(jì)語言的雛形。這些基礎(chǔ)原則指導(dǎo)我們進(jìn)行體驗(yàn)一致化的產(chǎn)品設(shè)計(jì)，不斷發(fā)展的業(yè)務(wù)與產(chǎn)品設(shè)計(jì)迭代中，持續(xù)沉淀與驗(yàn)證設(shè)計(jì)原則的準(zhǔn)確性。同時(shí)也在此基礎(chǔ)上探索出行細(xì)分領(lǐng)域中的個(gè)性化解決方案。

三、設(shè)計(jì)挑戰(zhàn)

通過前期調(diào)研發(fā)現(xiàn)大部分競(jìng)品的定制線路多是公司或小區(qū)等集團(tuán)合作的路線，對(duì)于個(gè)人用戶而言，響應(yīng)效率低、機(jī)動(dòng)性差。而我們希望打造的產(chǎn)品正是要補(bǔ)齊這一點(diǎn)不足，降低門檻，無論是由企業(yè)還是個(gè)人都可發(fā)起線路，在出行前一定時(shí)間內(nèi)拼夠最低的成團(tuán)人數(shù)，線路將自動(dòng)生成并由系統(tǒng)派車，這樣才算真正做到智慧定制巴士產(chǎn)品的核心——定制。

正是由于線路運(yùn)營的性質(zhì)變化，隨機(jī)變動(dòng)的線路比固定線路的信息量多出許多，信息量級(jí)增大，復(fù)雜性也更高。而用戶在短時(shí)間接受的信息量有限，因此信息量過載帶來的肯定是信息模糊的問題。

那么如何讓用戶在信息感知上從模糊轉(zhuǎn)向清晰？關(guān)鍵信息如何聚焦？輔助信息如何協(xié)助用戶做決策？這些都是我們需要重點(diǎn)思考與解決的問題。

四、設(shè)計(jì)拆解

實(shí)際工作中，我們將問題打散拆解，重新梳理歸納。整個(gè)產(chǎn)品服務(wù)流程主要拆分為兩部分：（理清體驗(yàn)流程觸點(diǎn)）

• 線上：發(fā)起拼車，拼車流程
• 線下：找車、乘車

再結(jié)合實(shí)際場(chǎng)景與時(shí)間線去分析（明確用戶行為目標(biāo)）：

1. 流程中，用戶需要達(dá)成的目標(biāo)是什么？
2. 頁面中，當(dāng)下對(duì)用戶最重要的信息是什么？將來對(duì)用戶重要的信息是什么？

對(duì)流程進(jìn)行有效的拆解之后，再在流程中對(duì)單個(gè)頁面信息進(jìn)行梳理與歸納，從而構(gòu)建合理舒適的視覺模型。

五、構(gòu)建視覺模型

學(xué)美術(shù)的同學(xué)都畫過素描，一般畫素描會(huì)先打框架，找大關(guān)系（當(dāng)然也有很多一上來就畫重點(diǎn)的天才畫手），再找關(guān)鍵點(diǎn)，找準(zhǔn)明暗交界線，進(jìn)一步重點(diǎn)刻畫，最后再做細(xì)節(jié)的點(diǎn)綴修飾，正確表現(xiàn)對(duì)象的形體、空間和質(zhì)感。構(gòu)建頁面的視覺模型其實(shí)和畫畫非常類似。

以飛線巴士首頁為例，可以概括為：大關(guān)系，分重點(diǎn)，小提示3個(gè)關(guān)鍵點(diǎn)來構(gòu)建整個(gè)頁面的視覺模型。

（1）大關(guān)系

可以理解為對(duì)整體內(nèi)容信息的分類，為了緩解大量信息對(duì)用戶帶來的視覺模糊，首先梳理信息之間大的邏輯關(guān)系，飛線巴士首頁中搜索、我的行程、推薦線路作為不同類型內(nèi)容的入口而存在，將三個(gè)內(nèi)容通過模塊化的設(shè)計(jì)，建立頁面結(jié)構(gòu)。

（2）分重點(diǎn)

在分清大的邏輯關(guān)系之后，通過關(guān)鍵信息的提煉與強(qiáng)化來增強(qiáng)模塊之間的差異性。

如：搜索模塊在頁面中的最頂層，起終點(diǎn)圓點(diǎn)圖形標(biāo)識(shí)、文案提示讓用戶能快速感知自己的位置并搜索想去的地點(diǎn)。

我的行程是用戶正在參與的行程，重點(diǎn)提示用戶關(guān)注時(shí)間與狀態(tài)變化，票據(jù)樣式增強(qiáng)用戶參與感，提示用戶去關(guān)注狀態(tài)以及去使用。

推薦線路則是將線路信息重點(diǎn)展示，價(jià)格信息和指引信息一起引導(dǎo)用戶操作，形成特定的信息組合方式。

找到模塊內(nèi)的重點(diǎn)信息，再針對(duì)不同的重點(diǎn)信息來進(jìn)行視覺結(jié)構(gòu)設(shè)計(jì)，增強(qiáng)模塊之間的差異性，同時(shí)提升用戶識(shí)別信息的效率。

（3）小提示

最后再將信息的關(guān)鍵要點(diǎn)進(jìn)行概括，由少量文字組成，形成一個(gè)小標(biāo)簽來做信息大關(guān)系的一個(gè)小提示，幫助用戶更好的類比信息，理解信息。

六、信息結(jié)構(gòu)化

信息以簡(jiǎn)潔和結(jié)構(gòu)化的方式呈現(xiàn)，幫助用戶更易于接收和消化信息內(nèi)容。視覺層次的構(gòu)建很大程度上依賴排版。我們必須圍繞內(nèi)容進(jìn)行設(shè)計(jì)，有效的傳遞信息，賦予內(nèi)容形式，為內(nèi)容服務(wù)。

Jeff Johnson《認(rèn)知與設(shè)計(jì)—理解UI設(shè)計(jì)準(zhǔn)則》中提到利用格式塔原理對(duì)信息進(jìn)行排版，是視覺識(shí)別模型的其中一種，也是在視覺設(shè)計(jì)中應(yīng)用得最多的。例如將相關(guān)內(nèi)容組織到一起，使他們的物理位置接近，相關(guān)的內(nèi)容被看成一個(gè)信息組，這就是接近性原則。如果多個(gè)信息組放在一起我們就會(huì)將他們歸成一個(gè)大類，這就是相似性原理。這些原理在工作中不是獨(dú)立存在的，而是綜合運(yùn)用的。

我們對(duì)所有流程中的信息進(jìn)行梳理，提取共性，同時(shí)根據(jù)不同的使用場(chǎng)景差異化的展示，將信息以特定的組合方式有規(guī)律排列，形成結(jié)構(gòu)化的信息模型，增強(qiáng)視覺識(shí)別性與體驗(yàn)記憶點(diǎn)。幫助用戶高效獲取他們想要的內(nèi)容，并達(dá)成目標(biāo)。

七、焦點(diǎn)指引

在用戶使用我們的定制產(chǎn)品時(shí)，我們需要幫助用戶明確每一步需要做什么事情，強(qiáng)調(diào)突出指示信息，從視覺的角度來說，大致可以歸納為：大小、粗細(xì)、多少，以此來控制一個(gè)頁面的節(jié)奏感。

大小也就是字體的大小、粗細(xì)就是字體重量的區(qū)別，多少也就是間距疏密關(guān)系的把握。我們通過強(qiáng)化的頁面標(biāo)題，以通俗簡(jiǎn)短的語句，清晰明確此頁面的操作指引，明確用戶所需要做的事情，幫組用戶做出每一步的選擇完成出行目標(biāo)。

通過間距來劃分，運(yùn)用更大的空間來間隔，構(gòu)建更加清晰干凈的界面，易于閱讀同時(shí)也讓閱讀得到休息，形成閱讀的節(jié)奏感。拉長距離引導(dǎo)關(guān)注，可以通過增加元素周圍的空間使元素更顯著，只要確保留白的頁面空間能通過內(nèi)容去引導(dǎo)視線，同樣起到焦點(diǎn)指引的作用。

如在乘車憑證的設(shè)計(jì)，將乘車口令信息以夸張的大的加粗字體放置在頁面中同時(shí)增加上下左右的空間，形成一個(gè)強(qiáng)烈的視覺引導(dǎo)，讓乘客與司機(jī)都能非常清晰的看到口令信息，驗(yàn)票上車。把更多的傳達(dá)融合在更少的元素中，設(shè)計(jì)降噪，我們需要減少不必要的干擾信息，盡量簡(jiǎn)化精確內(nèi)容，形成焦點(diǎn)指引，讓用戶降低疑慮與抉擇的時(shí)間。

八、服務(wù)設(shè)計(jì)

在定制巴士這個(gè)項(xiàng)目中給我最大的感受，就是更加近距離的深入接觸到了用戶。對(duì)于定制巴士產(chǎn)品而言，除了在線上產(chǎn)品做到好的用戶體驗(yàn)之外，更重要的還有線下服務(wù)體驗(yàn)這一環(huán)是否能夠給用戶提供良好的乘車感受。所以我們要在線上產(chǎn)品設(shè)計(jì)中做好拼車流程指引，線下流程也需要做好找車乘車的服務(wù)指引。

因此在產(chǎn)品上線前我們做了1輪用戶調(diào)研，通過眾測(cè)與跟訪去發(fā)現(xiàn)在產(chǎn)品服務(wù)流程中存在的問題，也是根據(jù)用研中發(fā)現(xiàn)的問題持續(xù)優(yōu)化迭代。

對(duì)于拼車出行流程中線下找車?yán)щy的問題，我們加入了同站名導(dǎo)航提醒的指引，優(yōu)化地圖信息樣式等方面幫助用戶更好的使用產(chǎn)品。對(duì)于線下服務(wù)流程，我們多次跟訪用戶，觀察用戶的行為與體驗(yàn)，優(yōu)化了司機(jī)的行為規(guī)范給到合作方，如司機(jī)停車必須打雙閃方便用戶找車，司機(jī)必須佩戴工作袖章，優(yōu)化司機(jī)驗(yàn)票流程等等。

我們關(guān)注著數(shù)據(jù)上的變化，關(guān)注著用戶的每一次出行，在促成拼團(tuán)成功率方面我們還在與產(chǎn)品做進(jìn)一步流程與功能優(yōu)化迭代，希望有越來越多的用戶得到更好的出行體驗(yàn)。

積極的與用戶保持溝通，建立核心用戶群，培養(yǎng)種子用戶等。用戶也非常積極的反饋?zhàn)约旱南敕ǎ瑫r(shí)給出許多珍貴的意見與思路幫助我們優(yōu)化產(chǎn)品。熱心的用戶甚至?xí)鲃?dòng)自發(fā)宣傳我們的產(chǎn)品，接觸到的每一個(gè)用戶都那么鮮活與真實(shí)。

九、寫在最后

對(duì)于公共交通出行，我們?cè)谔剿鞲线m的設(shè)計(jì)解決方案，持續(xù)沉淀更多的設(shè)計(jì)思考。

在當(dāng)下的產(chǎn)業(yè)互聯(lián)網(wǎng)趨勢(shì)下，定制業(yè)務(wù)也將不斷接入更多的城市，不同的城市業(yè)主方都存在不同的地域特色與商業(yè)訴求。作為設(shè)計(jì)師能做的還有很多很多，我們不再只關(guān)注產(chǎn)品視覺設(shè)計(jì)層面，需要更多的走出辦公室，走到順流不息的城市中間，走到真實(shí)的用戶身旁，悉心觀察、用心感受，站在更全面的角度去思考關(guān)于整個(gè)產(chǎn)品服務(wù)設(shè)計(jì)的方方面面。

設(shè)計(jì)語言也不再只是簡(jiǎn)單的規(guī)范文檔，或者一組研發(fā)組件，而應(yīng)該是一個(gè)不斷摸索，隨著業(yè)務(wù)發(fā)展而動(dòng)態(tài)調(diào)整的設(shè)計(jì)系統(tǒng)工程。我們將會(huì)持續(xù)驗(yàn)證與完善我們的智慧交通設(shè)計(jì)語言，努力做好不同業(yè)務(wù)需求的設(shè)計(jì)支撐。后續(xù)智慧交通設(shè)計(jì)團(tuán)隊(duì)將在不同業(yè)務(wù)中，為大家分享更多不同城市、不同出行細(xì)分領(lǐng)域下的個(gè)性化解決方案，敬請(qǐng)期待。

參考資料：

《認(rèn)知與設(shè)計(jì)——理解UI設(shè)計(jì)準(zhǔn)則》——Jeff Johnson

作者： susanpeng，公眾號(hào)：騰訊FiTdesign（ID：FiTdesign2017）

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@ 騰訊FITdesign，作者@ susanpeng

題圖來自Unsplash，基于CC0協(xié)議