我是产品设计师

徐启柽 (chēng)

Hi, Workstream Team

三年字节-头条热榜

两年独立设计

Web3 工具设计探索

经验

亿万用户量级设计实践

前置理解业务和用户

专长

多用户场景洞察

复杂信息的结构化设计

理念

商业前瞻的设计追求

开放心态与钻研韧性

提升头条推送授权率

平衡用户和业务视角,以数据分析洞察场景

业务前瞻:为什么头条要做热榜

前置理解行业赛道和业务策略

重设计币安个人资产页

结构化处理复杂信息和流程

构建清晰高效的移动端工具体验

AI 重构新手用户交易工作流

紧贴用户场景构思 AI 应用

我从作品集中挑选了四个关键部分

在字节的前瞻理解与实战项目

近期和工具设计关联的设计探索

为什么头条要做热榜

业务前瞻

只看要点

详细版本

内容资讯赛道的 DAU 接近 8 亿(排除微信),每年的涨跌基本平稳,竞争主要是同类资讯产品之间相互抢占份额,今日头条在其中占约 20% 的份额,近年来面临增长瓶颈。

泛资讯赛道已接近饱和

头条面临短视频对时长的冲击

在供给和分发上,头条以图文生态为主,尽管视频供给量少,却占据了大部分消费时长。用户研究显示,新用户流失多转向抖音、快手等短视频平台,因其轻松、沉浸且成瘾的观看体验,视频已成内容消费主流。

外部竞品面临同样困境,缺乏应对手段

以图文为主,弱关注关系的直接竞品

同样缺乏有效的手段,近几年陷入增长停滞

间接竞品尽管缺乏突破

但因差异优势保持了一定的份额

腾讯新闻

QQ 浏览器

新浪微博

百度

强关注关系和娱乐内容

搜索工具属性

面对挑战,回到头条定位

发掘图文有差异优势的用户场景

尽管视频凭借沉浸成瘾的消费体验占据了大量时长,若一味强化视频分发,短期内或许能提升时长和商业化收益,长期却会使头条和抖音趋同,偏离产品定位导致用户流失。更合适的方式是回到产品定位,聚焦图文体裁不可替代的优势场景。

图文体裁的优势场景

该场景下头条面临的竞争对手和挑战

看新闻热点

图文内容支持快速更新和多角度呈现,方便用户及时掌握新闻全貌和事件动态

占有大量市场份额的微博热搜以年轻女性和娱乐新闻为主;而头条用户以男性为主,偏好严肃时政新闻,有一定的用户和内容差异优势

看和发 UGC 短内容

短图文发布成本低,可以有效降低创作门槛,并形成轻松的内容画风和阅读体验

小红书占据了UGC短图文赛道的主要份额,而头条发文生态以PGC为主,普通用户的发文意愿较低,需要投入大量的运营工作搭建对应的发文生态

搜索

图文体裁便于关键词索引和快速浏览,允许用户跳读寻找目标内容,方便高效查询

百度已垄断搜索多年,而头条用户搜索渗透低;头条长期以推荐作为分发方式,用户普遍习惯被动接受算法的内容推送,主动搜索的使用频率较低

互动讨论

静态的图文便于展开详细的逻辑推演和观点交流,形成深度的社区互动。

知乎曾拥有活跃的社区氛围,但随着商业化和内容水化,高价值用户快速流失,他们对社区内容质量极为看重,头条内容质量容易劝退高价值用户,切入难度较大

看深度内容

图文允许用户按需停留阅读,逐步吸收复杂信息,长时间阅读而不易疲惫

相较微信读书等阅读产品,头条在用户认知中和读书的关联性较弱,这一场景相对边缘,更适合外部宣发,打造头条优质内容的品牌形象。

我的工作

从用户视角出发

维持并放大热榜的 DAU 拉活趋势

推送

提升推送授权率

推送新闻内容直接促活

深入各类选题,将复杂信息以用户视角清晰呈现,放大拉活趋势

打造有差异特色的消费体验

培养日常看热榜的习惯

热点专题策划

常规消费场景

看新闻热点是头条在图文领域突围的最佳选择

横向对比各个场景,新闻热点机会最大,UGC、搜索、深度阅读和互动社区等场景要么已被竞品占据,要么和头条定位相差较远,而头条相比微博则有用户和内容差异

新闻热点最贴合用户对头条的认知,今日头条的产品名称和新闻热点强绑定,且站内用户阅读新闻的渗透较高

预期收益最明确,从历史经验看,重大热点能显著带动头条日活的增长,但这部分用户经常随着事件热度的消退而流失

提升头条推送授权率

平衡用户和业务视角,以数据分析洞察场景

详细版本

只看要点

为什么做推送授权

业务有收益:显著促活 DAU

用户有需求:提前知晓重要内容

阶段一:挖掘授权引导场景

从全局视角平衡用户和业务

阶段二:优化转化短板

以数据分析洞察用户

历时一年,提升双端授权率 4%

SaaS 语境下寻找 PMF

深入 ICP,以数据校验设计

挖掘授权引导场景

从全局视角平衡用户和业务

发文后

评论后

关注作者后

阅读多条热点内容后

稳健试水

从互动场景开始引导

触发互动行为的用户,对于收到反馈可能是有诉求的。

实验上线后对授权率和用户留存有正向影响。

扩大收益

冷启动场景引导开启推送可行吗?

用户打开头条无任何操作下,出推送授权引导弹窗

平衡用户和业务视角的冲突

用户视角

业务视角

降低引导的打扰

DAU 维稳止跌

优先考虑业务视角:止跌 DAU

用户视角:保证其他核心指标不负,严格频控

关系到核心指标,解决 DAU 燃眉之急

通过递推公式

实现引导间隔天数,随用户拒绝增加而边际增加

引导间隔天数

关闭次数

动态增量,控制增长加速度

初始增量,控制起始增速

首次拒绝后,次日挽回

引导频率的下限,保证量级

引导间隔天数

15

20

25

30

0

5

5

10

10

15

拒绝次数

二次函数增长(令a=2, b=2)

常规一次函数增长 T(n)=2n

随用户多次拒绝,间隔拉长

对低开启意愿的用户降低打扰。

一次函数递增速度慢,

用户多次拒绝才能扩大引导间隔

打扰程度较大

前期间隔较短,引导相对高频

尽可能覆盖有开启意愿的用户

二次函数式的增长,贴近频控设计思路

频控参数:根据用户反馈灵活调整

前期缺乏用户数据,根据用户场景敲定参数

参数/场景

冷启动

消费

关注

发布

初始增量 a

5

4

2

2

动态增量 b

间隔天数数列 T(n)

5

1, 6, 16, 30

4

1, 5, 13, 25, 30

3

1, 3, 8, 16, 27, 30

2

1, 3, 7, 13, 21, 30

互动程度

频控策略

严格

宽松

上线后敏捷调参

引导策略对核心指标正向,激进策略效果最好,冷启动成为开启增量最大场景

参数/场景

冷启动

消费

关注

发布

初始增量 a

2

2

2

2

动态增量 b

间隔天数数列 T(x)

1

1, 3, 6, 10, 15, 21, 28, 30

2

1, 3, 7, 13, 21, 30

2

1, 3, 7, 13, 21, 30

0

1, 3, 5, 7, 9, 11,

13, 15, 17... 30

优化转化短板

以数据分析洞察用户

以小见大,推进规范更新

iOS 推送授权率业界普遍较低

新用户场景折损严重

新用户场景,iOS 系统强制下发推送权限询问弹窗,用户的关闭率过高(约50%)

授权率的最大短板

通过静默推送可以挽回 iOS 用户吗?

静默推送:无声音、红点、横幅,只会出现在通知中心,

允许应用自定义系统推送权限弹窗的出现时机。

新用户场景,系统强制下发弹窗询问用户是否开推送权限

静默推送能力上线后

左图弹窗的下发时机交给应用自己决定

应用下发该弹窗之前,可以给用户发静默推送

静默推送能力上线前

新用户打开应用后

优先下发「应用的授权弹窗」

若用户点击「暂不开启」

则应用给用户发送静默推送

若用户点击开启后

再下发「系统的授权弹窗」

用头条弹窗拦截系统授权弹窗

实验效果

复盘

头条样式弹窗点击率反而更低,静默推送提醒能力有限

新用户场景下,用户有连续点选多个系统弹窗的习惯

相较于头条样式弹窗,新用户更信任系统弹窗

明确说明推送类型,强化开启利益点

老用户场景

用户同样更信任仿系统弹窗吗?

对照组:头条原生样式

实验组:仿系统样式

弹窗当前点击率更高

跳转后打开率显著更高,相对提升超 100%

整体授权率更高

仿系统弹窗贴合跳转预期,整体效果更好

用户在头条内点击开启后,需要跳转到系统设置进一步开启。

在安卓各端实验并推广

遵照厂商设计规范增加带图样式

iOS

小米

华为

Vivo

Oppo

既贴合用户跳转预期,又强化开启推送利益点,清晰模拟推送场景。

后续更新设计规范

用户关闭推送时,询问原因

通过推送次数挽留

通过推送类型挽留

当前弹窗可完成的操作,使用头条样式

需跳转到系统设置的弹窗,使用仿系统样式

一些设计细节与思考

业务视角-弹窗不得不发

设计上-以更贴近用户价值的方式发

对照组

默认推送文案

实验组

模型取 24 小时内热榜标题

点击率相对提升~20%

衡量设计好坏的尺度是用户的感知
设计规范是工具而非目的

对照组:原有设计规范

上文下图-适合说明类弹窗

实验组:新排布方式

上图下文-适合操作类弹窗

点击率相对提升 5%

是什么

要干嘛

Just do it

对设计规范的思考

Saas 语境下寻找 PMF

深入 ICP,以数据校验设计

总结一下

平衡用户与业务视角

通过数据分析洞察用户

重设计币安个人资产页

结构化处理复杂信息

构建清晰高效的移动端工具体验

详细版本

只看要点

流于表层的资产分析

生硬的策略建议

低效的信息排布

Web3 尚在起步

主流产品体验仍未成熟

以币安专业版的个人资产页为例

为专业用户重设计

以结构化重新组织复杂信息

清晰的布局

结构化的视图与解读

场景化的建议

专业用户显著贡献营收,他们的持有资产复杂,对深度分析有较大需求

资产首页:更清晰的布局和交互

Before

After

更清晰的动线,折叠次要信息

无效信息多,视觉动线混乱

更流畅的多币种浏览交互

同类信息散乱分布

用户难以形成连贯系统的分析

整体表现

盈亏分析

交易细节

持有资产细节

用户画像

资产分析

总资产趋势

交易分析

交易盈亏趋势,交易盈亏日历

各账户的交易次数与盈亏

币种分布

币种分布

盈亏前三名的币种

流入与流出分析

流入与流出数额

风险评估

用户风险画像

资产风险占比

主要信息大类

信息架构

旧版信息架构:侧重内容视角

更结构化的盈亏报告

从信息架构开始

以递进结构

串起完整的盈亏因果链条

新的信息架构:回归用户视角

资产总览:更精准,更立体

Before

After

折线图展示单日收益

引发歧义

首个模块展示资产总额
违背点击预期

整合「盈亏、行情、交易」

开门见山的总览

结果层

精简的图例设计

使用图形区分,合并同类信息,平衡视觉简洁与可读性

拆解盈亏结果:更精确,更直观

Before

After

以账户/币种单一维度归因

分布在不同模块

以「币种+账户」维度精准拆解盈亏

相同方向柱状图,方便直观对比

下钻信息辅助归因,衔接调仓操作

直接拆解盈亏结果|间接复盘交易行为

分析层

复盘交易行为

用户自己的交易错题本和案例集

精简的交易洞察,侧重分析

完整的交易历史,侧重检索

按「最大数额、最大盈利、最大亏损」挑重点

指标选取:兼顾短期和长期视角

买入和持有之外,卖出行为同样纳入复盘

短期交易时期:交易后 24 小时的涨跌和图表

长期交易质量:盈亏率和盈亏数值

使用「假设收益」帮助用户评估卖出时机,即是否成功止盈或错失时机。

颜色标识的细节

红绿色直接反映结果,用户一眼即可辨认交易是否有利

红绿色表示价格涨跌,容易引发歧义

仅支持单一维度查看

黑盒式的风险分析,难以针对性调仓

Before

After

新增「币种+账户」维度

风险占比下展示详情

静态的资产画像

静态的资产画像|动态的交易画像

根基层

多维度呈现

提供详细的下钻分析,无缝衔接调仓

动态的交易画像

缺乏上下文,割裂而空泛的建议

Before

After

先建立共情,再给出建议


连接用户交易行为和策略建议

四个维度勾勒用户交易性格

以中立客观、模糊但细腻的形式呈现

风险承受度、交易节奏、情绪反应、决策稳定性

Deskless Workers 和店主操作移动端为主

小屏幕空间下清晰高效的工具体验

深入垂直场景

结构化处理复杂信息

总结一下

紧贴用户场景构思 AI 应用

AI 重构新手交易工作流

AI 降低工具门槛

在交易场景克制应用

平台合规:避免任何直接或间接的投资建议

用户信任:AI 一旦犯错,需要承担直接的经济损失

新手用户的交易链路

交易环节 AI 介入最具张力

发现

AI 日报: 将散落在不同平台/平台内不同模块的信息聚合呈现

AI 洞察: 将多视角的复杂信号

以结构化的方式清晰呈现

交易助手:AI 弱介入,逐步引导,并降低术语障碍

AI 不介入

避免投资引导和建议

判断

交易

复盘

AI 的设计边界

最阻断的场景-选择交易类型

复杂的交易类型:各平台的名称和机制不一

新手用户的谨慎心理:只能通读天书一样的说明

AI 不介入

以问卷降低工具门槛

弹窗上方展示问卷入口

按交易意愿填写问卷

展示类型结果

引导回交易界面继续操作

避免投资建议,降低用户的阅读压力,辅助上手工具

最多四个问题,覆盖主流交易类型

AI 用自然语言解释术语

对话直接带入上下文

提供潜在提问选项

场景化的入口

严格避免投资建议

功能基础,体验就不基础

灵活的 AI 语言风格设置

适应各认知层次用户

Web 3 用户的认知层次差异大,实时的预览帮助直观判断。

Design for All in one

围绕具体的操作链路重塑工作流

紧贴用户场景构思 AI 应用

功能基础,体验就不基础

总结一下

更多设计案例

对大热点事件:更结构化、多视角的聚合页

专题详情页-人工精细运营

什么是热点专题

普通事件详情页-算法自动聚合

活动入口

大热点事件

常规专题

首屏扫视即可知今日大事

更便捷查看多个专题-头条的优势品类

培养用户日常来看热榜的习惯

频道默认选中总榜

大热点专题

阶段一

阶段二

阶段三

阶段四

在推荐分发获得最大曝光

但用户容易随着热点消退而流失

针对重大热点事件

频道头部海报入口制造更稳定的预期

针对时间跨度较大的热点事件

结构化、动态更新的入口

以专题作为热榜频道卖点

用优质内容作日常拉活

动态更新的入口刺激了用户回访,对频道渗透有微弱的提升

分阶段推演界面结构

世界杯项目,以头部动效渲染赛事氛围

四套基础模版动效,覆盖完整赛事阶段

开赛

两两对决

明星球员登场

夺冠

简单替换图片即可上线,有效节约设计、运营和研发人效,

保证第一时间以定制化的动效牵引用户关注。

频道头部:重要比赛

频道头部:夺冠

频道头部:开赛

频道头部:明星球员出场

组件化的设计思路

原运营工作流

将封面图导入到 Photoshop

根据球队选择对应颜色模版

输入标题

从 Photoshop 导出海报

将海报上传到运营后台,完成

将海报工具写入运营后台后

上传封面图到运营后台

输入标题

自动匹配颜色并生成海报,完成

将定制的字体包写入客户端会导致体积过大;而让运营在作图软件手动修改则流程冗长;

通过灵活调用内部工具解决,保证设计还原和上线效率。

世界杯战报页头部:根据球衣颜色区分赛事,传递激烈赛事气氛

内部工具的灵活调用:平衡实现难度和运营效率

协调上下游优化工作流

以「火星打卡指南」包装天问一号着陆事件,配合新华社的宣发,低门槛、趣味性的小游戏可以在站外取得广泛的传播,是提升热榜品牌影响力的有效手段。

游戏化的新闻阅读体验

重头播放

总结设计方法

通用玩法 = 小游戏内容策划

关键词

在通用的小游戏玩法上入手,结合关键词更换游戏剧情

既能保证受众广泛,同时能赋予用户新的游戏体验,能在有限时间内产出大量的方案

总结设计方法,提效设计策划

常见问题:拿到选题后无从下手

按五要素发散关键词

结合搜索调研,初步发散

围绕用户特征和平台目标

收敛关键词

关键词是否贴合头条用户画像?

是否面向足够广泛的受众?

是否有充分可发散和落地的空间?

储备通用玩法

用关键词更换游戏剧情

通用玩法面向广泛受众

新的剧情带来新鲜感

以愤怒的小鸟为灵感

打卡的趣味化表述

将日常行为和太空旅行绑定

弥补用户被疫情压抑的出行需求

UI 风格定义

世界杯 UI 风格确定

从用户入手:延续纸媒杂志的视觉情怀

从拟物到扁平,平衡视觉情怀和风格一致性

从内容入手:赛场上的一抹亮色

以球衣颜色作为视觉语言

战报页背景色点缀:区分赛事,渲染激烈气氛

80后头条男性用户:纸媒杂志有张力的版式构成一代人的回忆

早期交互探索方案

通过拟物化模拟杂志观看体验

最终扁平 UI 方案

通过图形和色彩打造视觉张力

保留拟物化细节点缀

品牌设计

从品牌形象延伸到插画、交互和视觉体验,

通过系统的设计语言,构建用户对于钱包应用的信任。

探索性重构 Metamask

构建更具安全感的 Web3 新手体验

原品牌色

新的 UI 和品牌色

原 UI 色

柠檬黄介于原品牌橙色与原 UI 蓝色之间,延续了原来品牌的暖色调,轻微贴近绿色唤起安全感,也使得品牌与界面在色彩上更协调统一。

旧版本插画风格各异,装饰性为主,影响核心内容的呈现。

统一以轻拟物风格呈现,借用日常可感的图形,帮助用户理解晦涩的 Web3 术语

更协调统一的颜色:连结品牌一致性与安全感

更统一,更具说明意味的插画

灵感源于守护神像

富有安全感的新品牌符号

新的品牌形象承袭狮子神像的符号精神,

寓意警觉与守护,传达出可靠与安心。

从空洞无神到怒目警觉

惊鸿一瞥只为守护

新的品牌形象以极简单色呈现,抛弃陈旧的 low-poly 风格,传递新鲜感并增强辨识度。借鉴盾牌的形态特征,硬朗的轮廓勾勒出狐狸姿态,目光传递出警惕与守护。

Ⓒ Qichenghsu All Right Reserved