騰訊實戰(zhàn)！從0到1復盤「騰訊出行」的產品設計全過程

本文梳理和沉淀了騰訊出行的思考以及設計過程，便于項目后續(xù)在橫向和縱向上復盤思考和鑿山開路。建議初入職場的設計師多看看類似案例，才能知道高手是如何做設計的。

前言

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

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

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

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

設計洞察

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

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

面對用戶出行場景，我們需要清楚：

• 用戶是誰？
• 用戶在什么環(huán)境下使用產品？公交？地鐵？
• 用戶在什么時間使用產品？通勤？出游？亦或其他。

有的放矢

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

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

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

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

方法化：方法是思考的總結，積沙成塔。

方法化可以解決：

• 獨立模塊與新增功能在不同的設計執(zhí)行中，沒有統(tǒng)一的設計理念或原則。
• 騰訊出行涉及到的場景，針對不同城市相對應的功能模塊也有所不同。
• 我們如何輕松地將規(guī)范轉移給新的團隊成員。

? 1. Metro設計語言（Improving focus when completely quick tasks）

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

色彩搭配

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

圖形元素

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

字體選擇

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

? 2. 優(yōu)化信息結構（Efficiency by progressive disclosure）

△ 飛機駕駛和選項卡圖

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

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

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

一個是信息的混合呈現(xiàn)方式松散無結構的文字，另一個是經過「加工」后信息結構化的文字，顯而易見，經過「加工」后的信息更容易使人獲取。

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

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

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

? 3. 外顯核心入口（Spell out significant actions）

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

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

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

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

? 4. 實時信息（Real time）

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

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

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

△ 信息版圖

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

? 5. 模塊化設計（Use a system for visual design）

輸出一致性：這也是可持續(xù)設計的前提，建立規(guī)范組件庫，會隨時間推移不斷迭代優(yōu)化，便于同項目人員的復用。「我們如何判斷此處是否應用選項卡樣式？」諸如此類的問題。

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

• 為什么需要使用選項卡？
• 使用的規(guī)范是什么？
• 解決方案能否回饋我們的設計語言并使其他團隊受益？

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

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

道阻且長，行則將至

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

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

歡迎關注「騰訊FITdesign」的微信公眾號：