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

一、項目背景

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

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

二、基礎(chǔ)沉淀

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

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

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

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

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

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

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

四、設(shè)計拆解

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

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

再結(jié)合實際場景與時間線去分析（明確用戶行為目標）：

1. 流程中，用戶需要達成的目標是什么？
2. 頁面中，當下對用戶最重要的信息是什么？將來對用戶重要的信息是什么？

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

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

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

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

（1）大關(guān)系

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

（2）分重點

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

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

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

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

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

（3）小提示

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

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

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

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

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

七、焦點指引

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

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

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

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

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

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

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

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

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

積極的與用戶保持溝通，建立核心用戶群，培養(yǎng)種子用戶等。用戶也非常積極的反饋自己的想法，同時給出許多珍貴的意見與思路幫助我們優(yōu)化產(chǎn)品。熱心的用戶甚至會主動自發(fā)宣傳我們的產(chǎn)品，接觸到的每一個用戶都那么鮮活與真實。

九、寫在最后

對于公共交通出行，我們在探索更合適的設(shè)計解決方案，持續(xù)沉淀更多的設(shè)計思考。

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

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

參考資料：

《認知與設(shè)計——理解UI設(shè)計準則》——Jeff Johnson

作者： susanpeng，公眾號：騰訊FiTdesign（ID：FiTdesign2017）

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

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