根據(jù)騰訊出行一期的用戶反饋和數(shù)據(jù)分析，結(jié)合產(chǎn)品側(cè)的功能迭代計劃、提取核心問題進行優(yōu)化，本文梳理和沉淀了騰訊出行的思考以及設(shè)計過程，便于項目后續(xù)在橫向和縱向上復盤思考和鑿山開路。

一、前言

隨著城市化進程的發(fā)展，越來越多的人遷居都市，如今的城市面積和人口規(guī)模比歷史上任何時候都大，人們在交錯縱橫的城市道路和此起彼伏的汽車鳴笛里穿行，儼如生活在一座“城市迷宮”。

這樣一座追求“效率”和“發(fā)展”的城市迷宮里，交通無疑是核心基礎(chǔ)，一切利益的建立都依賴交通的輸送，交通的發(fā)展和城市的擴張緊密相連。與此同時，復雜的交通系統(tǒng)和不確定的出行環(huán)境中，也充斥著用戶對未知出行或是陌生環(huán)境的不安全感、倉促感和焦慮感等情緒。

在萬物互聯(lián)打造大交通生態(tài)圈的趨勢下，騰訊出行應運而生。騰訊出行通過實時公交/地鐵播報、線路規(guī)劃，提升用戶出行效率，同時還能顯示交通的通行情況。與乘車碼、定制公交覆蓋用戶出行全場景服務(wù)，構(gòu)建智慧出行生態(tài)服務(wù)。

交通類產(chǎn)品具有普世化、工具化的特征，設(shè)計過程中我們不斷思考在出行場景下用戶的真實需求，尋找更優(yōu)的設(shè)計解決方案，為用戶提供更高品質(zhì)的出行服務(wù)選擇。同時，融入METRO設(shè)計語言，通過對產(chǎn)品設(shè)計的專注與克制，力求在橫跨不同業(yè)務(wù)的產(chǎn)品矩陣中，打造感知統(tǒng)一的體驗設(shè)計。

二、設(shè)計洞察

設(shè)計價值需要統(tǒng)籌考慮用戶、設(shè)計目標和場景，“拍腦袋”想一蹴而就的設(shè)計是脫離用戶實際使用場景的，基于場景化設(shè)計，我們認為最好的產(chǎn)品體驗是——讓用戶像走在熟悉的街道上一樣使用騰訊出行，基于此，產(chǎn)品才有可能粘住用戶。

在生活場景中，人們對街道、地鐵等地的公共交通標識是十分熟悉的，紅綠燈、斑馬線、路標等都是試圖在用標識來讓大家能夠清晰地去指引行動。

面對用戶出行場景，我們需要清楚：1）用戶是誰？ 2）用戶在什么環(huán)境下使用產(chǎn)品？公交？地鐵？3）用戶在什么時間使用產(chǎn)品？通勤？出游？亦或其他。

三、有的放矢

我們針對項目初期分析和目標，力求做出有理有據(jù)的設(shè)計方案，也便于在上下游溝通中達成一致，衍生出以下設(shè)計原則：

場景化：效率優(yōu)先，易用易懂。我們將公共交通系統(tǒng)的符號和導視當中——簡潔、直白、硬朗的特點抽離出來，融入到設(shè)計當中。同時結(jié)合用戶日常的出行習慣，從而減少用戶的認知學習成本。

情感化：以“人”為本的設(shè)計。唐納·A·諾曼的《設(shè)計心理學3-情感化設(shè)計》從認知心理學角度解釋，情感化設(shè)計是著眼于人的情感需求和精神需求的設(shè)計理念，目標是在人格層面與用戶建立關(guān)聯(lián)，使用戶在與產(chǎn)品互動的過程中產(chǎn)生積極正面的情緒。從用戶實際使用狀態(tài)出發(fā)，“情感化細節(jié)”是產(chǎn)品與用戶溝通的聲音。

專業(yè)化：體驗的一致性，建立和逐步完善有體系的設(shè)計語言，使之可復用可沉淀。通過真實的用戶場景去制定產(chǎn)品體驗流程，讓線下與線上場景有所關(guān)聯(lián)，在設(shè)計細節(jié)上增強代入感。并以此逐步建立與完善體系化的設(shè)計語言，使之在不同業(yè)務(wù)場景下都能復用，從而打造體驗的一致性。

方法化：方法是思考的總結(jié)，積沙成塔。方法化可以解決：1）獨立模塊與新增功能在不同的設(shè)計執(zhí)行中，沒有統(tǒng)一的設(shè)計理念或原則。2）騰訊出行涉及到的場景，針對不同城市相對應的功能模塊也有所不同。3）我們?nèi)绾屋p松地將規(guī)范轉(zhuǎn)移給新的團隊成員。

3.1 Metro設(shè)計語言（Improving focus when completely quick tasks）

1960 至 70 年代，崇尚簡約、理性、網(wǎng)格設(shè)計的瑞士國際主義設(shè)計風格（InternationalTypographic Desgin / Swiss Design）風靡全球，當時的設(shè)計成果在當下日常生活中也隨處可見。Metro設(shè)計語言，是基于Swissgraphic design導視設(shè)計，更多關(guān)注于內(nèi)容本身的設(shè)計語言。

色彩搭配：

我們在顏色的運用上意圖使用戶感到更加舒適：在用戶訪談過程中以及數(shù)據(jù)的顯示上，公共交通的乘坐過程是一個充滿了嘈雜及不確定的環(huán)境，綠色可以緩解用戶在出行環(huán)境中焦慮的情緒，所以色彩的使用上以兩種色調(diào)的綠作為主色調(diào)，輔助深灰色和白色作為文字顏色。

圖形元素：

奧地利哲學家和社會學家 Otto Neurath提出的sotype（國際文字圖像教育系統(tǒng)）目的是為了利用“語言似的”圖形設(shè)計，達到教育目的，對公共設(shè)計影響深遠，成為后來公共交通、國際活動、公共場所等圖形設(shè)計的基礎(chǔ)。

字體選擇：

騰訊出行使用DIN作為數(shù)字和英文字體。DIN 作為德國交通專用字體歷來已久，多應用于車牌、路標等。除了這款字體符合德國人的性格之外，最早的雛形是因為制做方便，DIN 基本型是采用網(wǎng)格系統(tǒng)來完成的，圍繞：清晰、統(tǒng)一、內(nèi)容優(yōu)先這幾個關(guān)鍵要素。

3.2 優(yōu)化信息結(jié)構(gòu)（Efficiency by progressive disclosure）

飛機駕駛和選項卡圖

飛機駕駛艙的操作非常復雜，飛行員需要快速反應操作，一名合格的飛行員需要長期的訓練和培養(yǎng)，所以飛行員的學習曲線長、學習成本高。如Hick’s law曲線所示：人面臨的信息和選擇越多，篩選有效信息所花的時間就越多。

用戶在多個頁面之間跳轉(zhuǎn)和作出選擇，這個過程往往會使用戶感到沮喪，所以通過梳理界面上的功能優(yōu)先級，把最常用的功能提取出來并前置可以減少用戶的學習成本。

在站點詳情頁應用的“選項卡”結(jié)構(gòu)能拉開信息，使信息呈現(xiàn)方式更加結(jié)構(gòu)化和精煉，人腦能更快、更容易地掃描和理解。

一個是信息的混合呈現(xiàn)方式松散無結(jié)構(gòu)的文字，另一個是經(jīng)過“加工”后信息結(jié)構(gòu)化的文字，顯而易見，經(jīng)過“加工”后的信息更容易使人獲取信息。

在地圖結(jié)構(gòu)的優(yōu)化上，我們考慮到使用地圖的用戶大致分為兩類：“方位感強用戶”和“路癡型用戶”。

第一類用戶習慣于通過地圖來找到目的地，但是他們對于點開地圖大致是1到2次的需求就能正確探尋路徑。

第二類用戶對于地圖的需求較弱，他們更傾向于直白地指示如何能抵達目的地。并且，通過數(shù)據(jù)來看地圖的點擊率僅占全頁面的5%，所以我們在出行首頁1.0的全地圖頁面結(jié)構(gòu)上進行優(yōu)化，在出行首頁2.0上相對弱化地圖的屏占比，同時突出顯示最近站點和推薦線路。

3.3 外顯核心入口（Spell out significant actions）

想象一下嘈雜的街道上沒有紅綠燈、斑馬線和指示路牌會亂成什么樣？所以，“符號設(shè)計”在許多公共場所的標牌設(shè)計中體現(xiàn)得尤為充分（如：傾倒垃圾、公廁標識等，不論男女老幼，文化深淺，都能夠清楚分辨）。不論是生活還是設(shè)計上，每一個應用場景都需要找到一個大家能夠記住的“符號”，就等同于在頁面上把核心功能優(yōu)先布局在層級最高的地方，提高辨識度。

乘車按鈕是在出行場景中承接乘車碼的大概率的目的操作，F(xiàn)AB（FloatingAction Button浮動操作按鈕）的形式，在“Z軸”上以更突出的顏色和異化于頁面其他元素的圓角突出操作。

目的地輸入框放在頁面上方更符合用戶的心理模型，從用戶角度思考，他們對于出行目的地應該是最先確定、可以第一時間聚焦的。

搜索框、掃碼乘車按鈕，加強關(guān)鍵操作和主要信息的展示面積，拉開模塊功能間的視覺關(guān)系，信息與信息之間的視覺對比度加強。

3.4 實時信息（Real time）

好的引導具有短時間效應（讓人盯著看很久的指示牌不是好指示牌）。

通過線上線下的用戶體驗場景融合，我們將出行過程中所需要展現(xiàn)的信息作為信息版的結(jié)構(gòu)呈現(xiàn)，模擬地鐵、機場的LED實時信息屏。

信息版內(nèi)的信息涉及到地鐵、公交、推薦信息、公告等，子集有乘車前、乘車中和下車后的狀態(tài)。我們窮舉出所有狀態(tài)，然后在信息的歸類和樣式的區(qū)分上我們制定了相對應的規(guī)范。

信息版圖

信息版用了卡片式設(shè)計，卡片式設(shè)計將實時信息作為一個獨立的“容器”，可以相對獨立地在內(nèi)容上進行布局組織。信息版上的內(nèi)容我們也做了全局梳理，將實時信息根據(jù)時間、地點、狀態(tài)等分塊，突出重點，讓用戶快速在繁雜的出行環(huán)境中快速獲取自己的出行狀態(tài)。

3.5 模塊化設(shè)計（Use a system for visual design）

輸出一致性：這也是可持續(xù)設(shè)計的前提，建立規(guī)范組件庫，會隨時間推移不斷迭代優(yōu)化，便于同項目人員的復用?！拔覀?nèi)绾闻袛啻颂幨欠駪眠x項卡樣式？”諸如此類的問題。

問題的答案不僅僅是“是”或“否”，需要深入了解：

1）為什么需要使用選項卡？

2）使用的規(guī)范是什么？

3）解決方案能否回饋我們的設(shè)計語言并使其他團隊受益？

設(shè)計效率的提升：在頁面狀態(tài)復雜、復用元素多、迭代頻繁的情況下，模塊化設(shè)計可以讓頁面狀態(tài)更完善，細節(jié)的狀態(tài)也更為統(tǒng)一。

維護的便利性：項目過程中，大大小小的版本迭代，不斷有新城市、新模塊的加入，時常會優(yōu)化體驗及修改的問題。例如：深圳無定制巴士而鄭州有，模塊化設(shè)計可以協(xié)同項目人員達成一致性規(guī)范，迅捷設(shè)計、開發(fā)、迭代。

四、道阻且長，行則將至

騰訊出行從0到1，作為設(shè)計師從剛拿到需求馬上進入“戰(zhàn)斗狀態(tài)”再一遍遍從不斷變化的產(chǎn)品中思考如何保持設(shè)計的延續(xù)性，同時又能夠有所突破，站在全局的角度思考問題，認真落實整個服務(wù)中每一個可感知到的點，這是一個長期的過程。

寫給每一位出行路上的你我，后續(xù)請期待更多的分享。

參考鏈接

https://thetype.com/category/people/

信息設(shè)計的起始：https://thetype.com/2010/10/2987/

DIN：https://www.behance.net/gallery/14883251/FF-DIN-Tribute-to-a-typeface

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

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

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