“城市迷宮”下的設計思考

0 評論 3409 瀏覽 7 收藏 16 分鐘

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

一、前言

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

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

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

交通類產品具有普世化、工具化的特征,設計過程中我們不斷思考在出行場景下用戶的真實需求,尋找更優的設計解決方案,為用戶提供更高品質的出行服務選擇。同時,融入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)

【智慧交通】“城市迷宮”下的設計思考

輸出一致性:這也是可持續設計的前提,建立規范組件庫,會隨時間推移不斷迭代優化,便于同項目人員的復用?!拔覀內绾闻袛啻颂幨欠駪眠x項卡樣式?”諸如此類的問題。

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

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協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!