Eveleen Zhou
中文EN

Omnichannel UX/UI

Nike 天猫618体验焕新

这是 Nike 面向 2022 年 618 大促的核心数字活动。项目任务是重新设计天猫旗舰店首页，让页面在销售高峰期更有效地承接流量并促进转化。

Nike Tmall 618 campaign hero visual.

战略问题

平衡个性化、商品发现与会员权益可见度。

成果

建立可根据不同人群调整商品、会员信息与活动内容的模块化首页系统。

影响

让用户从活动触达更清晰地进入商品发现与购买决策。

设计挑战

会员权益不够可见

会员权益与重点信息需要更强的呈现位置，同时不打断用户的 product browsing。

商品发现需要适配不同用户

首页需要 modular content，能够回应不同场景、兴趣与 campaign priorities。

活动声量需要更清晰的购物路径

视觉冲击力需要支持而不是干扰商品理解与 purchase journey decisions。

设计方法

项目以迭代方式推进，从研究与问题界定到界面设计与验证。

第 1 周

第 2-3 周

第 4-5 周

第 6-9 周

整合

Brief / 报告 /

竞品审核 / 数据

共情

消费者画像

差异点、参与主题、内容灵感

定义

人群策略

用户旅程流程

创新内容

对齐与确认

设计与原型

使用 Figma 设计线框

与视觉设计师讨论并指导可行性

按不同阶段持续升级模块

上线与更新

按阶段上线页面，

并协助持续更新

解决方案

以人群画像驱动结构

基于客户数据划分用户群，并为每类人群定义清晰销售目标；再通过兴趣、行为与使用场景拆解，指导有针对性的页面设计决策。

整合关键信息

通过互动与动态模块更高效地传达会员权益，在减少视觉拥挤的同时提升页面空间利用率。

设计新模块

围绕产品销售目标探索多种互动模式，让页面更贴近消费者行为，并形成区别于以往活动执行的新体验。

人群画像定义

用户群通过 Nike 内部消费者数据与策略团队分析共同划分，并为每一类人群明确销售目标。画像主要围绕以下维度展开：

Female

Male

HH Driven

MD Driven

It Girls 人群画像视觉。

It Girls

  • 高消费力
  • 趋势引领者
  • 视觉驱动
  • 关注新品与社交潮流
Sneakerheads 人群画像视觉。

Sneakerheads

  • 高消费 / 高频复购
  • 核心粉丝
  • 极客型 / 狂热型
  • 关注新品与进阶产品
  • 也会被折扣产品吸引
Well-Thoughts 人群画像视觉。

Well-Thoughts

  • 低消费 Gen Z / 复购及其他人群
  • 折扣优先
  • 视觉驱动
  • 会为孩子或家庭成员购买
Amateur Players 人群画像视觉。

Amateur Players

  • 低消费 Gen Z 或新客
  • 折扣优先
  • 重视价格价值
  • 功能驱动
  • 需要易导航体验

* HH 指 High Heat 高热度产品；MD 指 Mark Down 折扣产品。

个性化内容逻辑

首页策略将不同受众差异转化为模块规则：哪些产品优先出现、促销信息如何表达、UX 内容如何引导。页面不再采用一条通用购物路径，而是根据不同人群调整首屏信息、商品组合与决策线索。

Amateur Players

Amateur Players 人群缩略图。

鞋类、功能与清晰比较。

在大促期间，这类人群更关注鞋类品类、功能性卖点与清楚分隔的货架结构。因此首页优先呈现结构化商品区块、直接的利益点文案，以及更容易比较的商品路径。

FEMALE / Well-Thoughts

Well-Thoughts 人群缩略图。

整套造型、社交证明与辅助决策。

这类人群更容易被整套穿搭与 UGC 式线索打动。评论流互动强化了社交验证；同时露出男款与童款区域，因为她们也常为伴侣、家庭成员或孩子购买。

MALE / Sneakerheads

Sneakerheads 人群缩略图。

运动场景与身份感驱动的发现路径。

对于偏造型导向的男性受众，篮球、足球等运动场景更容易承载商品表达。基于场景的商品分组帮助 Nike 的运动性能形象与日常造型、购买意图建立连接。

FEMALE / It Girls

It Girls 人群缩略图。

色彩、造型组合与视觉化浏览。

针对 It Girls，体验更强调色彩搭配、具有表现力的活动视觉与趋势导向商品。后续旅程以这一人群为详细案例，说明画像逻辑如何影响流程、模块层级与 UX 内容。

用户旅程

基于优化后的旗舰店首页，我们重新梳理用户从到达、浏览、发现商品到转化的关键触点。更新后的旅程强调更清晰的权益可见度、更明确的商品优先级，以及能够高效引导购买的互动线索。

* 从用户旅程开始，以 It Girls 作为详细示例，展示一个细分人群的动机如何被转化为页面流程、模块层级与 UX 内容。

阶段
进入
解码
比较
互动
转化
用户行为
从活动流量进入
浏览会员权益
比较商品优先级
与动态模块互动
选择 offer 或商品路径
需求
快速理解活动时刻
判断权益是否相关
找到符合画像的商品
感到新鲜但不迷失
以低决策阻力行动
设计回应
活动 KV 锚定入口
提前露出会员信息
模块优先呈现画像相关商品
动画与评论创造节奏
CTA 路径保持可见并重复出现
情绪
好奇聚焦有信心

线框图

低保真线框用于梳理页面结构、模块逻辑与互动流程，并作为与策略、创意和客户团队对齐的蓝图。

Full low-fidelity homepage wireframe.Recommendation module low-fidelity wireframe.Product grid low-fidelity wireframe.Ranking module low-fidelity wireframe.Female product section low-fidelity wireframe.Male product section low-fidelity wireframe.Mix-and-match module low-fidelity wireframe.
Gen Z 男性线框模块草图。
Gen Z 女性线框模块草图。
商品推荐线框模块草图。
Nike 618 商品推荐与评论模块线框补充图。

关键页面、组件与互动模块。

最终首页呈现出视觉统一、冲击力明确的活动体验：结合动态会员模块、清晰的商品优先级，以及贴合用户行为的互动流程。执行重点在于建立灵活内容区块、促销模块与体验细节，让页面同时支持品牌表达、电商表现，以及不同人群的 offer、产品重点与 UX 内容适配。

最终 It Girls 首页 KV 与时间线页面。
KV 与时间线
动态会员信息模块。
通过动态元素呈现会员信息
引出热卖专区的动态评论流。
使用动态评论流引出热卖专区
用于交叉销售的高意图关键词模块。
露出高意图关键词，强化交叉销售机会
面向女性人群的推荐逻辑页面。
在视觉上弱化男款热卖内容，为女性人群建立更清晰的信息分区
男款与童款混搭推荐页面。
确保男款与童款混搭场景完整纳入推荐逻辑

关键反思

最终首页将动态会员信息、清晰商品优先级与创新互动流程结合，形成一个能够根据用户行为进行调整的高影响力页面体验。

尽早且充分沟通

项目初期与客户及内部团队进行充分沟通非常关键。尽早提出正确问题，能够减少返工、发现缺失信息，并加快洞察形成。

与策略团队紧密协作

UX 与策略的深度协作能强化对目标人群的理解，引入多角度判断，并确保策略思考被清晰转化为设计决策。

在限制中继续探索

即使存在约束，也需要探索多个设计方向。通过建立既适配现有内容又引入新互动的模块，可以带来更新鲜的体验并支持更强的商业结果。

提供清晰的端到端指导

UX 需要为相关团队制定明确规则，包括模块行为、动态逻辑与文案语气。前期规划越充分，后续执行越顺畅，也越能保持整体体验一致。