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

一、前言

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

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

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

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

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

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

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

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

三、有的放矢

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

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

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

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

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

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

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

色彩搭配：

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

圖形元素：

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

字體選擇：

騰訊出行使用DIN作為數(shù)字和英文字體。DIN 作為德國(guó)交通專(zhuān)用字體歷來(lái)已久，多應(yīng)用于車(chē)牌、路標(biāo)等。除了這款字體符合德國(guó)人的性格之外，最早的雛形是因?yàn)橹谱龇奖?，DIN 基本型是采用網(wǎng)格系統(tǒng)來(lái)完成的，圍繞：清晰、統(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)操作，一名合格的飛行員需要長(zhǎng)期的訓(xùn)練和培養(yǎng)，所以飛行員的學(xué)習(xí)曲線長(zhǎng)、學(xué)習(xí)成本高。如Hick’s law曲線所示：人面臨的信息和選擇越多，篩選有效信息所花的時(shí)間就越多。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

信息版圖

信息版用了卡片式設(shè)計(jì)，卡片式設(shè)計(jì)將實(shí)時(shí)信息作為一個(gè)獨(dú)立的“容器”，可以相對(duì)獨(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ī)范組件庫(kù)，會(huì)隨時(shí)間推移不斷迭代優(yōu)化，便于同項(xiàng)目人員的復(fù)用?！拔覀?nèi)绾闻袛啻颂幨欠駪?yīng)用選項(xiàng)卡樣式？”諸如此類(lèi)的問(wèn)題。

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

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

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

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

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

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

四、道阻且長(zhǎng)，行則將至

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

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

參考鏈接

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

作者：夏夏，公眾號(hào)：騰訊FiTdesign（ID：FiTdesign2017）

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

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