“城市迷宫”下的设计思考（虚拟城市机场经理）

根据腾讯出行一期的用户反馈和数据分析，结合产品侧的功能迭代计划、提取核心问题进行优化，本文梳理和沉淀了腾讯出行的思考以及设计过程，便于项目后续在横向和纵向上复盘思考和凿山开路。

一、前言

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

这样一座追求“效率”和“发展”的城市迷宫里，交通无疑是核心基础，一切利益的建立都依赖交通的输送，交通的发展和城市的扩张紧密相连。与此同时，复杂的交通系统和不确定的出行环境中，也充斥着用户对未知出行或是陌生环境的不安全感、仓促感和焦虑感等情绪。

在万物互联打造大交通生态圈的趋势下，腾讯出行应运而生。腾讯出行通过实时公交/地铁播报、线路规划，提升用户出行效率，同时还能显示交通的通行情况。与乘车码、定制公交覆盖用户出行全场景服务，构建智慧出行生态服务。

交通类产品具有普世化、工具化的特征，设计过程中我们不断思考在出行场景下用户的真实需求，寻找更优的设计解决方案，为用户提供更高品质的出行服务选择。同时，融入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）

想象一下嘈杂的街道上没有红绿灯、斑马线和指示路牌会乱成什么样？所以，“符号设计”在许多公共场所的标牌设计中体现得尤为充分（如：倾倒垃圾、公厕标识等，不论男女老幼，文化深浅，都能够清楚分辨）。不论是生活还是设计上，每一个应用场景都需要找到一个大家能够记住的“符号”，就等同于在页面上把核心功能优先布局在层级最高的地方，提高辨识度。