根據騰訊出行一期的用戶反饋和數據分析，結合產品側的功能迭代計劃、提取核心問題進行優化，本文梳理和沉澱了騰訊出行的思考以及設計過程，便於項目後續在橫向和縱向上覆盤思考和鑿山開路。

一、前言

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

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

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

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

二、設計洞察

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

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

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

三、有的放矢

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

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

情感化：以“人”爲本的設計。唐納·A·諾曼的《設計心理學3-情感化設計》從認知心理學角度解釋，情感化設計是着眼於人的情感需求和精神需求的設計理念，目標是在人格層面與用戶建立關聯，使用戶在與產品互動的過程中產生積極正面的情緒。從用戶實際使用狀態出發，“情感化細節”是產品與用戶溝通的聲音。

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

方法化：方法是思考的總結，積沙成塔。方法化可以解決：1）獨立模塊與新增功能在不同的設計執行中，沒有統一的設計理念或原則。2）騰訊出行涉及到的場景，針對不同城市相對應的功能模塊也有所不同。3）我們如何輕鬆地將規範轉移給新的團隊成員。

3.1 Metro設計語言（Improving focus when completely quick tasks）

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

色彩搭配：

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

圖形元素：

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

字體選擇：

騰訊出行使用DIN作爲數字和英文字體。DIN 作爲德國交通專用字體歷來已久，多應用於車牌、路標等。除了這款字體符合德國人的性格之外，最早的雛形是因爲製做方便，DIN 基本型是採用網格系統來完成的，圍繞：清晰、統一、內容優先這幾個關鍵要素。

3.2 優化信息結構（Efficiency by progressive disclosure）

飛機駕駛和選項卡圖

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

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

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

一個是信息的混合呈現方式鬆散無結構的文字，另一個是經過“加工”後信息結構化的文字，顯而易見，經過“加工”後的信息更容易使人獲取信息。

在地圖結構的優化上，我們考慮到使用地圖的用戶大致分爲兩類：“方位感強用戶”和“路癡型用戶”。

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

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

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

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

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

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

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

3.4 實時信息（Real time）

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

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

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

信息版圖

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

3.5 模塊化設計（Use a system for visual design）

輸出一致性：這也是可持續設計的前提，建立規範組件庫，會隨時間推移不斷迭代優化，便於同項目人員的複用。“我們如何判斷此處是否應用選項卡樣式？”諸如此類的問題。

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

1）爲什麼需要使用選項卡？

2）使用的規範是什麼？

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

設計效率的提升：在頁面狀態複雜、複用元素多、迭代頻繁的情況下，模塊化設計可以讓頁面狀態更完善，細節的狀態也更爲統一。

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

四、道阻且長，行則將至

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

寫給每一位出行路上的你我，後續請期待更多的分享。

參考鏈接

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

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

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

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

本文來源於人人都是產品經理合作媒體@騰訊FITdesign，作者@騰訊FiTdesign

題圖來自Unsplash，基於CC0協議