818全球超级网上车展设计回顾

导语 ：《汽车之家网上车展》，随着运营活动的不断堆积，原有UI界面已经不能很好地承载日益增加的内容，为了在UI/UX层面有所突破，针对目标人群、产品调性分析、从各个细节深入我们做了一次快速的体验迭代并称之为【科技风为导向的UI视觉呈现】。

今年年初，汽车之家网上车展迎来了一次大的产品迭代，UI界面全新升级，制定了页面结构、色彩系统、全新的模块组件，升级了产品的使用体验。同时对界面进行了极致降噪，突出用户关心的内容，呈现出简单、专业、可信赖的视觉调性。尝试探索818网上车展设计的新可能。

产品背景

通过技术打破地域限制构建360°全景多维可视步进式场景，风格各异的品牌展馆、丰富多样的活动玩法，真实还原近百家重量级国内外汽车品牌和线下车展氛围。为提升用户线上逛展体验，在展馆的设计形式上做创新，提升为“逛、看、选、买、秀”五个维度。

我们将从以下模块来回顾这次的设计过程：

1、车展大厅（个人中心）的视觉刷新——去繁就简，优化展示空间

2、主流程优化——优化整体的留资弹层

3**、UI改版设计中带来的启发**

以上为改版前确认产品的改版方向

一、车展大厅的视觉刷新

以下为设计首页的前后对比

主体和背景的区别可以从以下两个方面来控制：

1 场景大小：我们倾向于将处于大场景中的中间小区域部分视为主体，大场景视为背景；

2 层级关系：在同一个平面中，倾向于将处于视觉第一层级的物体视为主体。

设计目标：通过大厅视觉的刷新，直观、快速明确的让用户知道入口

以上为原有大厅的布局，分割感较重

改版后的大厅设计

1、从本质上来说，设计体系是由“多个层面的规范”组合而成的。因此，由设计师推动的体系化建设，往往最初都是从设计规范这一“单层规范”开始。但是，设计体系的建设需要将单层的规范，通过不同的方式，转化为不同层面的规范，最终由面到体，形成体系化。

2、信息布局方面**上：**将重要的活动入口信息聚焦于顶部的导航上。目的强化信息架构，精选模块突出品牌价值等，从而形成更优质的场景化看车模式。

设计拆解下的细节实施

首先，我们从日常经常玩儿的游戏中提炼出了【轻科技】这一基本设计要素，并基于这一要素对玩法入口的UI进行设计优化和调整。同时，我们希望将【轻科技】的设计要素延展到整个大厅的UI设计中，所以对原有大厅图标进行了【科技风】方向的调整和优化。

游戏风设计元素提取：从中萃取灵感，并尝试将这些设计中的细节融入到我们产品中，提升用户在使用产品中最直观的心智感受。

以上为车顶信息牌的视觉展示；以呈现多维度、多方立体式表现层级。

加入蜂窝的轻投影效果

以上为车展大厅设计的图标优化

1、对于UI设计而言，图标可以说是整个产品的点睛之笔，甚至可以直接影响着一款产品的调性和气质。在UI 界面中，图标几乎是这个页面的核心支撑体。

2、采用权重较高的填充型图标，通俗易懂，高辨识度的理念进行轻量化设计，呈现多维度、立体化的结构呈现满足了多种场景化设计需求。

关于字体

新增蓝灰色系字体，提升内容品质。iOS的「苹方」还是Android的「微软雅黑」，都拥有强大的字重系统，可以应用在不同触点中，满足页面中大部分信息层级的排版和信息可读性，在中文系统的设计升级中我们保留了这一标准，在此基础上通过加大字号维度和Light字重，来提升图文排版中的阅读效果。

因上线时为减少开发成本，在价格、促销等内容更换使用了系统自带的DIN字体，该字体更为清秀，精致，对于客户端整体气质的提升有很大帮助。

关于颜色

• 主色：应用的核心色彩，品牌色

• 辅色：丰富页面视觉和传达效果的次要颜色

• 中性：没有色相的文字、背景用色

首页大厅模块化主要使用黑白灰配色，突出简约感；随着年轻用户对色彩的接受度逐渐升高，目前的留资颜色体系色相偏冷，饱和度亮度略低，以此来突出整个产品沉浸感的需要，当然过于平缓的颜色性格并不能勾起用户的视觉记忆，在我们颜色体系的基础上，基于现有的品牌色（蓝绿色），提升了主色的亮度，用微渐变增加页面动感。同时新增暖色系辅助配色，以提升丰富、年轻、现代感的基调。

个人中心

1、个人中心818活动重要的一环，完成集8的活动。在页面上，要突出游戏化运营的氛围需求。为了使展示空间最大化采用了模块化设计，因此，在此次设计改版中，设计师为了提升整体的空间感、突出数字的展示效果。

2、简化/删除页面中多余的视觉噪音，保证信息的快速感知。

以上为集8活动页面展示

二、留资表单流程优化

突出安全感属性

安全感就是渴望稳定、安全感的心理需求。安全感主要表现为用户的可控感和确定感的设计。

（有效传达安全策略、产品设计的品质感、品牌效应、信息安全、为用户着想、预先告知用户操作结果等方面）来做设计，以此来传达给用户安全感。

1、以下为留资表单的前后改版对比，对于信息传达效率而言，卡片化模块设计拥有的层级属性能帮助用户在使用中更快、更高效地识别操作；卡片使信息更加聚焦，模块感更强；设计的圆角亲和力强，更显活泼，也符合越来越年轻的用户属性。

2、卡片层仍需要有渐变，注意光影的角度与背景渐变的角度保持一致。

以下为心仪价格模块的界面展示

以下为818部分页面的静态展示

三、UI改版设计带来的启发

 1、标准化设计突出品质感，提升内容传达更好为业务赋能。

2、熟知「少就是多」的理念，在设计中简化边框，简化分隔，仅仅运用线条、留白来表现层级能让我们的界面更加简约，设计更显（逼格）高级。但是对于信息传达效率而言，卡片化设计拥有的层级属性能帮助用户在使用中的更快、更高效地识别操作；使信息更加聚焦，模块感更强。

3、组件化

1. 明确组件化设计的内容。

2. 场景设计走查。

3. 组件化设计验证效果。

把单独的元素做一个简单的组合，是我们做界面设计的一种方法，组合的方式简单且可复用性很好，作为开发者可以根据规则进行编写代码，提升产品的迭代效率和产品的一致性。

1、设计规范不仅存在于纸面的意义，它可能会随着项目的发展逐渐混乱。**因为不同职能间的思考方式存在差别，设计规范对于其他职能来说经常难以理解与运用，无法与其他职能形成有效联动。**而设计体系则是贯穿于产品的每个层面的、与产品深度结合的完整体系，它是“立体”的“有机生命体”。

结语