我是产品设计师
徐启柽 (chēng)
Hi PAO Bank 团队
三年字节-头条热榜
两年独立设计
Web3 工具设计探索
能力
前置理解业务和用户
全栈设计能力
专长
多用户场景洞察
复杂信息与流程
理念
清晰高效
长期主义



提升头条推送授权率
前置推演业务,深入洞察用户
重设计币安资产页
复杂信息和流程的设计
AI 重构新手交易工作流
功能基础,体验就不基础
本轮面试准备了以下三个项目

提升头条推送授权率
前置推演业务,深入洞察用户
我对热榜业务的前置理解
业务定位、框架、我的角色
新闻热点
以百万级别直接促活 DAU
头条为什么要做新闻热点
五个图文有差异化优势的场景
头条图文生态为主
但视频占据主要时长
内忧
外患
资讯赛道饱和
同类竞品相互抢占份额
回归图文平台定位
发掘图文的优势场景
应对措施
深度内容
短图文
搜索
互动讨论
新闻热点
我的工作
从用户视角出发
维持并放大热榜的 DAU 拉活趋势



推送
提升推送授权率
推送新闻内容直接促活
深入各类选题,将复杂信息以用户视角清晰呈现,放大拉活趋势
打造有差异特色的消费体验
培养日常看热榜的习惯
热点专题策划
常规消费场景
前期需求推演:从模糊到明晰
为什么做推送授权
业务有收益:显著促活 DAU
用户有需求:提前知晓重要内容

阶段一:挖掘授权引导场景
从全局视角平衡用户和业务

阶段二:优化转化短板
以数据分析洞察用户
历时一年,提升双端授权率 4%

挖掘授权引导场景
从全局视角平衡用户和业务
发文后
评论后
关注作者后
阅读多条热点内容后




稳健试水
从互动场景开始引导
触发互动行为的用户,对于收到反馈可能是有诉求的。
业务侧期望扩大收益
冷启动场景引导开启推送可行吗?


如何平衡用户和业务视角的冲突
用户视角
业务视角
降低引导的打扰
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


设计规范的目的是为了让用户形成统一的感知,是工具而非标尺。

挖掘授权引导场景
前置推演需求
从全局视角平衡用户和业务

优化转化短板
以数据分析洞察用户
以小见大,推动规范更新
总结一下
从信息到系统
重设计币安资产页
洞察垂直场景,结构化处理复杂信息和流程







流于表层的资产分析
生硬的策略建议
低效的信息排布
Web3 尚在起步
主流产品体验仍未成熟
以币安专业版的个人资产页为例子
为专业用户重设计
以结构化重新组织复杂信息
清晰的布局
结构化的视图与解读
场景化的建议






专业用户显著贡献营收,他们的持有资产复杂,对深度分析有较大需求
资产首页:更清晰的布局和交互




Before
After
更清晰的动线,折叠次要信息
无效信息多,视觉动线混乱
更流畅的多币种浏览交互
同类信息散乱分布
用户难以形成连贯系统的分析

整体表现
盈亏分析
交易细节
持有资产细节
用户画像
资产分析
总资产趋势
交易分析
交易盈亏趋势,交易盈亏日历
各账户的交易次数与盈亏
币种分布
币种分布
盈亏前三名的币种
流入与流出分析
流入与流出数额
风险评估
用户风险画像
资产风险占比
主要信息大类
信息架构
旧版信息架构:侧重内容视角
更结构化的盈亏报告
从信息架构开始
以递进结构
串起完整的盈亏因果链条


新的信息架构:回归用户视角
资产总览:更精准,更立体





Before
After
折线图展示单日收益
引发歧义
首个模块展示资产总额
违背点击预期
整合「盈亏、行情、交易」
开门见山的总览
结果层
精简的图例设计



使用图形区分,合并同类信息,平衡视觉简洁与可读性
拆解盈亏结果:更精确,更直观




Before
After
以账户/币种单一维度归因
分布在不同模块
以「币种+账户」维度精准拆解盈亏
相同方向柱状图,方便直观对比
下钻信息辅助归因,衔接调仓操作
直接拆解盈亏结果|间接复盘交易行为
分析层
复盘交易行为
用户自己的交易错题本和案例集


精简的交易洞察,侧重分析
完整的交易历史,侧重检索



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

指标选取:兼顾短期和长期视角
买入和持有之外,卖出行为同样纳入复盘
短期交易时期:交易后 24 小时的涨跌和图表
长期交易质量:盈亏率和盈亏数值
使用「假设收益」帮助用户评估卖出时机,即是否成功止盈或错失时机。
颜色标识的细节


红绿色直接反映结果,用户一眼即可辨认交易是否有利
红绿色表示价格涨跌,容易引发歧义
仅支持单一维度查看
黑盒式的风险分析,难以针对性调仓
Before
After
新增「币种+账户」维度
风险占比下展示详情



静态的资产画像




静态的资产画像|动态的交易画像
根基层
多维度呈现
提供详细的下钻分析,无缝衔接调仓
动态的交易画像




缺乏上下文
割裂而空泛的建议
Before
After
先建立共情,再给出建议
统计用户行为,以交易心理学视角呈现
模糊但细腻的语言与视图
连接用户交易行为和策略建议
深入垂直场景
结构化处理复杂信息
总结一下
深入用户链路构思 AI 应用,功能基础,体验就不基础
AI 重构新手交易工作流

AI 降低工具门槛
在交易场景克制应用
平台合规:避免任何直接或间接的投资建议
用户信任:AI 一旦犯错,需要承担直接的经济损失


新手用户的交易链路
交易环节 AI 介入最具张力







发现
AI 日报: 将散落在不同平台/平台内不同模块的信息聚合呈现
AI 洞察: 将多视角的复杂信号
以结构化的方式清晰呈现
AI 弱介入,逐步引导
并降低术语障碍
AI 不介入
避免投资引导和建议
判断
交易
复盘
AI 的设计边界
最阻断的场景-选择交易类型







复杂的交易类型:各平台的名称和机制不一
新手用户的谨慎心理:只能通读天书一样的说明
AI 不介入
以问卷降低工具门槛







弹窗上方展示问卷入口
按交易意愿填写问卷
展示类型结果
引导回交易界面继续操作
避免投资建议,降低用户的阅读压力,辅助上手工具

最多四个问题,覆盖主流交易类型
AI 用自然语言解释术语






对话直接带入上下文
提供潜在提问选项
场景化的入口
严格避免投资建议
功能基础,体验就不基础
灵活的 AI 语言风格设置
适应各认知层次用户
Web 3 用户的认知层次差异大,实时的预览帮助直观判断。


克制应用 AI
功能基础,体验就不基础
总结一下
更多
对大热点事件:更结构化、多视角的聚合页




专题详情页-人工精细运营
什么是热点专题
普通事件详情页-算法自动聚合




活动入口
大热点事件
常规专题
首屏扫视即可知今日大事
更便捷查看多个专题-头条的优势品类
培养用户日常来看热榜的习惯
频道默认选中总榜
大热点专题










阶段一
阶段二
阶段三
阶段四
在推荐分发获得最大曝光
但用户容易随着热点消退而流失
针对重大热点事件
频道头部海报入口制造更稳定的预期
针对时间跨度较大的热点事件
结构化、动态更新的入口
以专题作为热榜频道卖点
用优质内容作日常拉活




动态更新的入口刺激了用户回访,对频道渗透有微弱的提升
分阶段推演界面结构
组件化的设计思路

世界杯项目,以头部动效渲染赛事氛围
四套基础模版动效,覆盖完整赛事阶段
开赛
两两对决
明星球员登场
夺冠
简单替换图片即可上线,有效节约设计、运营和研发人效,
保证第一时间以定制化的动效牵引用户关注。
频道头部:重要比赛



频道头部:夺冠



频道头部:开赛



频道头部:明星球员出场



原运营工作流
将封面图导入到 Photoshop
根据球队选择对应颜色模版
输入标题
从 Photoshop 导出海报
将海报上传到运营后台,完成
将海报工具写入运营后台后
上传封面图到运营后台
输入标题
自动匹配颜色并生成海报,完成
将定制的字体包写入客户端会导致体积过大;而让运营在作图软件手动修改则流程冗长;
通过灵活调用内部工具解决,保证设计还原和上线效率。






世界杯战报页头部:根据球衣颜色区分赛事,传递激烈赛事气氛
内部工具的灵活调用:平衡实现难度和运营效率
协调上下游优化工作流
以「火星打卡指南」包装天问一号着陆事件,配合新华社的宣发,低门槛、趣味性的小游戏可以在站外取得广泛的传播,是提升热榜品牌影响力的有效手段。
游戏化的新闻阅读体验
重头播放


总结设计方法
通用玩法 = 小游戏内容策划
关键词
在通用的小游戏玩法上入手,结合关键词更换游戏剧情
既能保证受众广泛,同时能赋予用户新的游戏体验,能在有限时间内产出大量的方案
总结设计方法,提效设计策划
常见问题:拿到选题后无从下手
按五要素发散关键词
结合搜索调研,初步发散

围绕用户特征和平台目标
收敛关键词
关键词是否贴合头条用户画像?
是否面向足够广泛的受众?
是否有充分可发散和落地的空间?
储备通用玩法
用关键词更换游戏剧情
通用玩法面向广泛受众
新的剧情带来新鲜感
以愤怒的小鸟为灵感
打卡的趣味化表述
将日常行为和太空旅行绑定
弥补用户被疫情压抑的出行需求



UI 风格定义

世界杯 UI 风格确定
从用户入手:延续纸媒杂志的视觉情怀
从拟物到扁平,平衡视觉情怀和风格一致性
从内容入手:赛场上的一抹亮色
以球衣颜色作为视觉语言
战报页背景色点缀:区分赛事,渲染激烈气氛
80后头条男性用户:纸媒杂志有张力的版式构成一代人的回忆
早期交互探索方案
通过拟物化模拟杂志观看体验
最终扁平 UI 方案
通过图形和色彩打造视觉张力
保留拟物化细节点缀













品牌设计



从品牌形象延伸到插画、交互和视觉体验,
通过系统的设计语言,构建用户对于钱包应用的信任。
探索性重构 Metamask
构建更具安全感的 Web3 新手体验

原品牌色
新的 UI 和品牌色
原 UI 色

柠檬黄介于原品牌橙色与原 UI 蓝色之间,延续了原来品牌的暖色调,轻微贴近绿色唤起安全感,也使得品牌与界面在色彩上更协调统一。
旧版本插画风格各异,装饰性为主,影响核心内容的呈现。
统一以轻拟物风格呈现,借用日常可感的图形,帮助用户理解晦涩的 Web3 术语
更协调统一的颜色:连结品牌一致性与安全感
更统一,更具说明意味的插画
















灵感源于守护神像
富有安全感的新品牌符号
新的品牌形象承袭狮子神像的符号精神,
寓意警觉与守护,传达出可靠与安心。
从空洞无神到怒目警觉
惊鸿一瞥只为守护
新的品牌形象以极简单色呈现,抛弃陈旧的 low-poly 风格,传递新鲜感并增强辨识度。借鉴盾牌的形态特征,硬朗的轮廓勾勒出狐狸姿态,目光传递出警惕与守护。
Ⓒ Qichenghsu All Right Reserved