AI 赋能与设计系统思维：滴滴代驾会员中心详情页视觉升级实践

CHAPTER 01

先用视觉
把身份说清楚。

Expression · 等级化视觉表达

在进入详情页升级之前，先看一个同业务下的早期项目——试用会员业务。围绕 4 种会员等级，通过色彩温度、材质语言、徽章造型的差异化设计，让用户第一眼就"看见"自己的身份层级。

02 · Tier-Based Atmosphere 围绕 4 种会员等级，构建差异化的视觉氛围

Slide 02 / 18

02 / 18 · Tier-Based Visual Atmosphere Click to expand ↗

03 · Immersive Experience 从弹窗到会员中心首页，沉浸式延续身份氛围

Slide 03 / 18

03 / 18 · Immersive Member Experience Click to expand ↗

等级化视觉解决了"身份感"的问题。但当用户点进具体权益页，又会发现另一组新的问题——这正是接下来主项目要回答的。

CHAPTER 02

任何设计都始于
一个具体的不满。

Diagnosis · 诊断

会员中心详情页头部的权益"瓷片区"，长期存在风格混乱、语义模糊、质感缺失的问题。在动手之前，先把这些模糊的不满，拆成可被设计回应的具体断点。

04 · Project Background 旧版瓷片区存在三个显而易见的问题

Slide 04 / 18

04 / 18 · Project Background Click to expand ↗

05 · Member Value 视觉升级的真正价值，是对产品与用户的双向赋能

Slide 05 / 18

05 / 18 · Member Value Click to expand ↗

问题已经清晰：风格、语义、质感。但仅有诊断不够——还需要一组明确的目标和策略，来回答"我们要去哪、怎么去"。

06 · Core Question 回到最初的问题：如何重构会员视觉语言

Slide 06 / 18

06 / 18 · Core Question Click to expand ↗

07 · Goals & Strategies 三组目标对应三条策略——这是设计的可追溯性

Slide 07 / 18

07 / 18 · Design Goals & Strategies Click to expand ↗

CHAPTER 03

让 AI 成为
设计师的副驾。

Method · 方法

把策略翻译成可执行的方法。围绕"模块化设计语言、图形语义转译、情感化价值分层"三条主线， AI 在不同节点上承担不同角色——但设计师始终是策略与品质的主导。

08 · AI in Process AI 介入设计流程的四个关键节点

Slide 08 / 18

08 / 18 · AI Involvement in Process Click to expand ↗

09 · Strategy 1 策略一：构建模块化的设计语言系统

Slide 09 / 18

09 / 18 · Modular Design Language System Click to expand ↗

容器规范建立之后，下一步是填充其"内涵"——让每一个图标都不是装饰，而是能精准传达权益价值的视觉语言。

10 · Strategy 2 策略二：推行图形语义的转译法则

Slide 10 / 18

10 / 18 · Translation Principles of Graphic Semantics Click to expand ↗

11 · Step 1 第一步：文本解构——提炼核心语义

Slide 11 / 18

11 / 18 · Text Deconstruction Click to expand ↗

12 · Step 2 第二步：符号映射——调用通用视觉词汇

Slide 12 / 18

12 / 18 · Symbol Mapping Click to expand ↗

13 · Step 3 第三步：视觉合成——组合成精准的视觉词谱

Slide 13 / 18

13 / 18 · Visual Composition Click to expand ↗

到这里，AI 提升了出图效率，但常常缺失伦理意义与价值内涵——冷冰冰的信息准确，不等于有温度的情感连接。下一步，是最关键的一步。

14 · Strategy 3 策略三：实施情感化的价值分层

Slide 14 / 18

14 / 18 · Emotional Value Stratification Click to expand ↗

CHAPTER 04

策略不落到像素，
就只是 PPT。

Delivery · 落地与价值

通过 14 个权益图标的系统化构建，完成代驾会员视觉语言的重塑—— 让每一个图标都成为功能与情感的复合载体，最终实现从信息传递到价值感知的体验升级。

15 · Icon System 14 个权益图标，清晰、可信、富有吸引力

Slide 15 / 18

15 / 18 · Complete Icon System Click to expand ↗

16 · Landing Display 14 个权益详情页的真机落地展示

Slide 16 / 18

16 / 18 · Landing Display Click to expand ↗

17 · Close-up 近景特写：细节里的品质感

Slide 17 / 18

17 / 18 · Detail Showcase Click to expand ↗

一个设计项目的价值，不止于"它好看"。它最终要回答的是：用户真的"感受"到这些权益的价值了吗。

18 · Data Performance 上线一个月后，用户用数据给出了答案

Slide 18 / 18

18 / 18 · Data Performance Click to expand ↗

先用视觉把身份说清楚。

任何设计都始于一个具体的不满。

让 AI 成为设计师的副驾。

策略不落到像素，就只是 PPT。

先用视觉
把身份说清楚。

任何设计都始于
一个具体的不满。

让 AI 成为
设计师的副驾。

策略不落到像素，
就只是 PPT。