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

一、前言

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

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

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

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

二、設(shè)計(jì)洞察

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

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

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

三、有的放矢

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

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

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

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

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

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

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

色彩搭配：

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

圖形元素：

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

字體選擇：

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

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

飛機(jī)駕駛和選項(xiàng)卡圖

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

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

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

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

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

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

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

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

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

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

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

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

3.4 實(shí)時(shí)信息（Real time）

好的引導(dǎo)具有短時(shí)間效應(yīng)（讓人盯著看很久的指示牌不是好指示牌）。

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

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

信息版圖

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

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

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

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

1）為什么需要使用選項(xiàng)卡？

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

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

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

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

四、道阻且長，行則將至

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

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

參考鏈接

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

信息設(shè)計(jì)的起始：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é)議