腾讯实战！从0到1复盘「腾讯出行」的产品设计全过程

本文梳理沉淀了腾讯出行的思考及设计过程，于项目后续在横向和纵向上复盘思考和凿山开路。建议初入职场的设计师多看看类似案例，才知道手是如何做设计的。

前言

随着城进程的发展，越来越多的人迁都，如今的城面积和人口规模历史上任何时候都大，人们在交错纵横的城道路和此起彼伏的汽车鸣笛里穿行，俨如生在一座「城迷宫」。

这样一追求「效率」「发展」的城市迷宫里，交通无疑核基础，一切利益的建立都依赖交通的输送，交通的发展城市的扩张紧密相连。与此同时，复杂的交通系统不确的出行环境中，也充斥用户对未知出行或陌环境的不安全感、仓促感焦虑感绪。

在物互联打造大交生态圈趋势下，腾讯出应运而生。腾讯出过实时公交/地铁播报、线路规划，提升用户出效率，时能显示交情况。与乘码、定制公交覆盖用户出全场景服务，构智慧出生态服务。

交通类产品有普化、工化的征，计过程中不断思考在出行景下用户的真实需求，寻找更优的计解决方案，为用户提供更高品质的出行服选择。同，融入 METRO 计语言，通过对产品设计专注与克制，力求在跨不业务品矩阵，打造感知统体验设计。

设计洞察

设价需统筹考虑用户、设目标场景，「拍脑袋」一蹴就的设脱离用户实际使用场景的，基于场景化设，我们认好的产品体验——让用户走熟悉的街道一样使用腾讯出行，基于此，产品可能粘住用户。

在生活场景，们街、地铁等地公共交标识是十分熟悉，红绿灯、斑线、路标等都是试图在用标识来让大家能够晰地去指引动。

面对用户出行景，需要清楚：

• 用户是谁？
• 用户在什环下使用产品？公交？地铁？
• 用户在什么时间使用产品？通勤？出游？亦或其他。

有的放矢

我们针项目初期分析和目标，力求做出有理有据设计案，也便于在上下游沟成致，衍生出以下设计原则。

景化：效率优先，易用易懂。将公共交通系统的符号和导视当中——简洁、直、硬朗的点抽离出来，融入计中。同结用户日常的出行习惯，从而减少用户的认知学习成本。

情感化：以「人」为的设计。唐纳·A·诺曼的《设计心理学3-情感化设计》从认心理学角度释，情感化设计是着眼人的情感需求和精神需求的设计理念，目标是在人面与用户建立关联，使用户在与产品互动的程中产生积极正面的情绪。从用户际使用状态出，「情感化细节」是产品与用户沟通的声音。

专：体验的一致性，建立和逐步善有体系的设计语言，使之可复可沉淀。通过真实的户场景制定产体验流程，线与线上场景有联，在设计细节上增强代入感。并此逐步建立与善体系的设计语言，使之在同务场景都复，从而打体验的一致性。

方法化：方法思考的总结，积沙。

法化可以解决：

• 独立模块与新增功能不同的设执行中，统一的设理念或原则。
• 腾讯出涉及到场景，针不城市相应功能模块也有所不。
• 如何轻地将规范转移给新的队成员。

  1. Metro设计语言（Improving focus when completely quick tasks）

1960至70，崇简约、理性、网格设的瑞士际主义设风格（International Typographic Desgin / Swiss Design）风靡全球，当时的设果当下日常活中也随处可见。Metro设语言，基于 Swissgraphic design 导视设，多关注于内本身的设语言。

色彩搭配

我们在颜色的上意图使户感到更舒适：在户访谈过程中及数据的显示上，公共交通的乘坐过程是一个充满了嘈杂及确定的环境，绿色可缓解户在行环境中焦虑的情绪，色彩的使上两种色调的绿作为色调，辅助深灰色和白色作为字颜色。

图形元素

奥地哲学家和学家 Otto Neurath 提出的 sotype（国际文字图像教育系统）目的是为用「语言似的」图形设计，达到教育目的，对共设计影响深远，成为来共通、国际活动、共场所等图形设计的基础。

字选择

腾讯出行使用 DIN 作为数字和英文字体。DIN 作为德国交通专用字体历来已久，多应用于车牌、路标等。除了这款字体符德国人的性格之外，最早的雏形是因为制做方便，DIN 基本型是采用网格系统来完成的，围绕：清晰、统一、内容优先这个关键要素。

  2. 优化信息结构（Efficiency by progressive disclosure）

△ 飞驾驶和选项卡图

飞机驾驶舱的操作非常复杂，飞行员需要快速反应操作，一名格的飞行员需要长期的训练和培养，所以飞行员的学习曲线长、学习成本高。如 Hick’s law曲线所示：人面临的息和选择越多，筛选有效息所花的间就越多。

用户在个页面之间跳转和出选择，个程往往使用户感到沮丧，所以通梳理界面上的功能优先级，把最常用的功能提取出来并前置以减少用户的学习成。

在站点详情页应用的「选项卡」结构能拉开信息，使信息呈现方式更加结构化和精炼，人脑能更快、更容易地扫描和理。

一个是信息的混合呈现方式松散无结构的字，另一个是经过「工」后信息结构的字，显而易见，经过「工」后的信息更容易使人获取。

在地图结构的优上，我们考虑到使地图的户大致分为两类：「方位感强户」和「路痴户」。

第一类用户习惯于通过图找到目的，但他们对于点图致1到2次的需求就能确探寻径。

第类用户于地图需求较弱，他们更倾于白地指示如何能抵目地。并，过数据来看地图击率仅占全页5%，所以我们在出首页1.0全地图页结构上进优化，在出首页2.0上相弱化地图屏占比，时突出显示最近站和荐线路。

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

想象下嘈杂街上没有红绿灯、斑线和指示路会乱成什么样？所以，「符号设计」在许多公共场所标设计体现尤为充分（如：倾倒垃圾、公厕标识等，不论男女幼，文化深浅，都能够楚分辨）。不论是生活是设计上，个应用场景都需要找到个大家能够记住「符号」，等于在页上把核心功能优先布局在层级最高地，提高辨识度。

乘按钮是在出场景承接乘码大概率目操作，FAB（FloatingAction Button浮动操作按钮）形，在「Z轴」上以更突出颜色和异化于页其他元素圆突出操作。

目的地输入框放在页面上方更符用户的心理模型，从用户角度思考，对于出行目的地应该是最先确定、可以第一间聚焦的。

搜索框、扫码乘车按钮，加强关键操和主要信息的展示面积，拉开模块功能间的视关系，信息与信息之间的视对比度加强。

  4. 实时信息（Real time）

好的引导有短间效应（让人盯着久的指示牌不是好指示牌）。

通上下的用户验场融合，我们将出行程中所需要展现的信息为信息版的结构呈现，模拟地、机场的 LED时信息屏。

信息版内的信息涉及到地、、推荐信息、告等，子集有乘车前、乘车中和下车的状态。我们穷举出所有状态，在信息的归类和样式的区分上我们定相对应的规范。

△ 信息版图

信息版了卡片式设计，卡片式设计将实时信息作为一个独立的「容器」，可相对独立地在容上进行布组织。信息版上的容我们做了全梳，将实时信息根据时间、地点、状态等分，突重点，户快速在繁杂的行环境中快速获取自己的行状态。

  5. 模块化设计（Use a system for visual design）

输出一致：也是持续设计的前提，建立规范组件库，随时间推移不断迭代优化，便同项目人的复用。「我们何判断此处是否应用选项卡样式？」诸此类的问题。

问题的答案仅仅是「是」或「否」，需要深入了解：

• 为什么需要使用选项卡？
• 使的规范是么？
• 解决方案能否回馈我们的设语言并使其他团队受益？

设计效率的升：在页面状态复杂、复元素多、迭代频繁的情况，模设计可页面状态更善，细节的状态更为统一。

维护的便利性：项目过程中，小小的版本迭，不断新城市、新模块的加入，时常会优化体验及修改的问题。例如：深圳无制巴士郑州，模块化设可以协同项目人员达一致性规范，迅捷设、发、迭。

道阻且长，行则将至

腾讯出行从0到1，作设师从刚拿到需求马入「战斗状态」再一遍遍从不断变化的产品中思考如何保持设的延续性，同时又能够所突破，站全局的角度思考问题，认真落实整服务中每一可感知到的点，这一的过程。

写位出路上你我，后续请期待更多分享。

欢迎关注「腾讯FITdesign」微信公众号：