我是产品设计师
徐启柽 (chēng)
Hi, Workstream Team
三年字节-头条热榜
两年独立设计
持续迭代底层思维方式
58 同城 SMB 招聘智能化重构
Design Challenge for Workstream
58同城的生态困局
流量变现与生态健康的博弈
前置商业调研与愿景定义
求职者
信息鉴别能力弱
依赖“老乡带老乡”和“即时反馈”
平台
人口红利和互联网趋势带来的增长空间见顶
营收模式主要依赖置顶招聘广告
中小企业
预算有限，无专业 HR
难以触达真实求职者
劳务中介
依靠高薪广告+保姆式服务
将求职者洗入私域
设计愿景：扶持中小企业直招
避免中介对长期生态的透支
生活服务领域下
10-50 人规模的中小商家
排除建筑、制造业领域：避开中介已经明显渗透的领域，避免直接硬刚
生活服务领域下，排除大客户和微型散户：大客户（海底捞）有专门 HR 团队和自建 ATS，散户（夫妻店）招聘需求低频且随意
店长兼任HR
有权无力
人员流动性大
常年有 3-5 个缺口
强支付意愿能力
追求省心与结果
定义 ICP
深入痛点
海量曝光背后的供需错配
身处海外，无法线下接触真实 58 同城商家
我选取了替代的用户调研方法
58 平台真实投递与招聘
电话微信访谈
2-4 pm 线下走访
经营模式类似的华人餐厅
调用熟人资源
深访资深餐饮从业者
关键痛点
招聘生态
商家付费买来了噪音
平台只负责售卖置顶广告，带来大量低质流量，商家无暇手动筛选和联系
求职者被文本简历拦截
有真实技能但不擅长用文本表述，因得不到及时反馈而大量海投
熟人推荐与人脉网络
低技术岗位高频招聘
数字化接受度高
设计推演
从简历搬运到价值匹配
放弃文本媒介
文本是求职者能力的有损压缩，导致 Garbage In, Garbage Out 的循环
电话触达求职者
最大化信息输入来源：无触达门槛，贴近蓝领习惯
捕捉精准画像：实时对话无修饰空间
招聘的本质是识别“人”而非筛选“文本”
双端联动
打造更高质量的信息流转与算法迭代
引导添加客服企微
最大化信息输入来源
画像迭代
基于对话和面试记录持续修正
同方言 AI 主动致电
自然对话生成简历并推荐岗位
低门槛求职
不再需要手动填写简历
人机校准
纠偏报告并手动回复长尾问题
画像迭代
根据面试反馈与回复持续修正
AI 代面试
自动电话初筛输出结构化面试报告
低门槛发布
默认填入同类商家与职位预设
用户端
从“人找工作”到“工作找人”
商家端
从“手动捞人”到“AI 全托管”
轻量化与精细化兼备的面试配置
软硬兼施的考核标准
自动生成面试题目
支持精细校准
通过自动邀约线下面
提供默认选项，支持用户以自然语言精细调整
美容娱乐 (勾)
分梯度呈现求职者档案
从容应对海量信息
工作台视图
总览场景
允许用户以合适的信息筛选尺度，快速获取所需信息。
列表视图
检索场景
详情页视图
审阅场景
卡片视图
扫视场景
美容娱乐 (勾)
视图之间
轻便无缝的浏览和切换体验
列表视图和卡片视图之间，提供中间态，方便快速预览
卡片视图操作按钮折叠
防止用户滑动过程中误触
列表展开视图按钮外露
用户已手动点击确认意图，误触概率低
同一套页面框架，灵活呈现内容，适配不同入口场景
自然连贯的滑动和切换体验
从入口形态判断摘要是否已经展示，继而在详情页区分选中 Tab，避免重复呈现内容
上下滑动联动 Tab：既延续用户自然滑动习惯，又支持快速定位
末尾滑动切换下一个档案：详情页维度更便捷的切换，减少页面跳转
美容娱乐 (勾)
多维呈现求职者画像
结构化总览
熟人关系背书
面试问答切片
对话分析
红绿标签展示硬件门槛
结构化摘要总结多维内容
引入人脉网络
平台给优质人才背书
原话呈现+语气分析
单条内容精细校准模型
挖掘潜在真实意图
预估到面意愿
美容娱乐 (勾)
维系和求职者的对话
高效的人机协同
低效的消息列表
AI 自动回复
长尾问题集中处理
短视频上下滑交互
快速语音回复
自动学习的问答知识库
支持精细编辑
对话不仅是沟通手段，更是完善求职者画像的关键信息输入来源。
AI 自动回复重复提问，避免求职者流失，同时节省商家时间。
特别鸣谢
AI 在设计过程中提供的大量帮助
🙏
行业调研
竞品分析
用户访谈
设计输出
使用 Podwise 播客转文字收集大量行业创始人的对话，并整合到 Notebook LM 形成知识库，快速补全商业认知，连接到 Gemini 进行深度的头脑风爆
使用 ChatGPT-Atlas Agent 模式访问了多个国内外 HR SaaS 工具官网，快速总结并归纳各自功能与核心解决的问题。
使用飞书妙计语音转文字并输入到 Notebook LM 与 Gemini ，批量整合多段对话，形成清晰明确的用户洞察
使用 Gemini 与 Figma Make，提效设计输出
更多设计案例
结合数据分析迭代设计
为什么做推送授权
业务有收益：显著促活 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
随用户多次拒绝，间隔拉长
对低开启意愿的用户降低打扰。
一次函数递增速度慢，
用户多次拒绝才能扩大引导间隔
打扰程度较大
前期间隔较短，引导相对高频
尽可能覆盖有开启意愿的用户
二次函数式的增长，贴近频控设计思路
新用户打开应用后
优先下发「应用的授权弹窗」
若用户点击「暂不开启」
则应用给用户发送静默推送
若用户点击开启后
再下发「系统的授权弹窗」
从新用户场景尝试挽回 iOS 授权率短板
发现弹窗样式的设计机会
实验效果
复盘
头条样式弹窗点击率反而更低，静默推送提醒能力有限
新用户场景下，用户有连续点选多个系统弹窗的习惯
相较于头条样式弹窗，新用户更信任系统弹窗
相比直接出在新用户场景出系统弹窗
用头条样式弹窗拦截既明确说明了推送类型，也强化了开启利益点。
阶段二：优化转化短板
在老用户场景实验仿系统弹窗样式
最终得到收益
对照组：头条原生样式
实验组：仿系统样式
弹窗当前点击率更高
—
跳转后打开率显著更高，相对提升超 100%
—
整体授权率更高
—
仿系统弹窗贴合跳转预期，整体效果更好
用户在头条内点击开启后，需要跳转到系统设置进一步开启。
推广到安卓各端扩大收益
iOS
小米
华为
Vivo
Oppo
既贴合用户跳转预期，又强化开启推送利益点，清晰模拟推送场景。
后续更新设计规范
用户关闭推送时，询问原因
通过推送次数挽留
通过推送类型挽留
当前弹窗可完成的操作，使用头条样式
需跳转到系统设置的弹窗，使用仿系统样式
在移动端以结构化呈现复杂信息
流于表层的资产分析
生硬的策略建议
低效的信息排布
Web3 主流产品体验仍未成熟
为专业用户重设计
以币安专业版的个人资产页为例，可见存在明显的体验阻碍
而专业用户显著贡献营收，他们的持有资产复杂，对深度分析有较大需求
以结构化重新组织复杂信息
清晰的布局
结构化的视图与解读
场景化的建议
资产首页：更清晰的布局和交互
Before
After
更清晰的动线，折叠次要信息
无效信息多，视觉动线混乱
更流畅的多币种浏览交互
同类信息散乱分布
用户难以形成连贯系统的分析
整体表现
盈亏分析
交易细节
持有资产细节
用户画像
资产分析
总资产趋势
交易分析
交易盈亏趋势，交易盈亏日历
各账户的交易次数与盈亏
币种分布
币种分布
盈亏前三名的币种
流入与流出分析
流入与流出数额
风险评估
用户风险画像
资产风险占比
主要信息大类
信息架构
旧版信息架构：侧重内容视角
更结构化的盈亏报告
以递进结构
串起完整的盈亏因果链条
新的信息架构：回归用户视角
复盘交易行为
用户自己的交易错题本和案例集
精简的交易洞察，侧重分析
完整的交易历史，侧重检索
按「最大数额、最大盈利、最大亏损」挑重点
从行为视角分析资产盈亏
分析层
指标选取：兼顾短期和长期视角
买入和持有之外，卖出行为同样纳入复盘
短期交易时期：交易后 24 小时的涨跌和图表
长期交易质量：盈亏率和盈亏数值
使用「假设收益」帮助用户评估卖出时机，即是否成功止盈或错失时机。
颜色标识的细节
红绿色直接反映结果，用户一眼即可辨认交易是否有利
红绿色表示价格涨跌，容易引发歧义
以交易性格画像
连接用户行为和策略建议
缺乏上下文，割裂而空泛的建议
Before
After
先建立共情，再给出建议
动态的交易画像
根基层
四个维度勾勒用户交易性格
以中立客观、模糊但细腻的形式呈现
风险承受度、交易节奏、情绪反应、决策稳定性
Deskless Workers 和店主操作移动端为主
小屏幕空间下清晰高效的工具体验
深入垂直场景
结构化处理复杂信息
总结一下
对大热点事件：更结构化、多视角的聚合页
专题详情页-人工精细运营
什么是热点专题
普通事件详情页-算法自动聚合
活动入口
大热点事件
常规专题
首屏扫视即可知今日大事
更便捷查看多个专题-头条的优势品类
培养用户日常来看热榜的习惯
频道默认选中总榜
大热点专题
阶段一
阶段二
阶段三
阶段四
在推荐分发获得最大曝光
但用户容易随着热点消退而流失
针对重大热点事件
频道头部海报入口制造更稳定的预期
针对时间跨度较大的热点事件
结构化、动态更新的入口
以专题作为热榜频道卖点
用优质内容作日常拉活
动态更新的入口刺激了用户回访，对频道渗透有微弱的提升
分阶段推演界面结构
世界杯项目，以头部动效渲染赛事氛围
四套基础模版动效，覆盖完整赛事阶段
开赛
两两对决
明星球员登场
夺冠
简单替换图片即可上线，有效节约设计、运营和研发人效，
保证第一时间以定制化的动效牵引用户关注。
频道头部：重要比赛
频道头部：夺冠
频道头部：开赛
频道头部：明星球员出场
组件化的设计思路
原运营工作流
将封面图导入到 Photoshop
根据球队选择对应颜色模版
输入标题
从 Photoshop 导出海报
将海报上传到运营后台，完成
将海报工具写入运营后台后
上传封面图到运营后台
输入标题
自动匹配颜色并生成海报，完成
将定制的字体包写入客户端会导致体积过大；而让运营在作图软件手动修改则流程冗长；
通过灵活调用内部工具解决，保证设计还原和上线效率。
世界杯战报页头部：根据球衣颜色区分赛事，传递激烈赛事气氛
内部工具的灵活调用：平衡实现难度和运营效率
协调上下游优化工作流
以「火星打卡指南」包装天问一号着陆事件，配合新华社的宣发，低门槛、趣味性的小游戏可以在站外取得广泛的传播，是提升热榜品牌影响力的有效手段。
游戏化的新闻阅读体验
重头播放
总结设计方法
通用玩法 = 小游戏内容策划
关键词
在通用的小游戏玩法上入手，结合关键词更换游戏剧情
既能保证受众广泛，同时能赋予用户新的游戏体验，能在有限时间内产出大量的方案
总结设计方法，提效设计策划
常见问题：拿到选题后无从下手
按五要素发散关键词
结合搜索调研，初步发散
围绕用户特征和平台目标
收敛关键词
关键词是否贴合头条用户画像？
是否面向足够广泛的受众？
是否有充分可发散和落地的空间？
储备通用玩法
用关键词更换游戏剧情
通用玩法面向广泛受众
新的剧情带来新鲜感
以愤怒的小鸟为灵感
打卡的趣味化表述
将日常行为和太空旅行绑定
弥补用户被疫情压抑的出行需求
UI 风格定义
世界杯 UI 风格确定
从用户入手：延续纸媒杂志的视觉情怀
从拟物到扁平，平衡视觉情怀和风格一致性
从内容入手：赛场上的一抹亮色
以球衣颜色作为视觉语言
战报页背景色点缀：区分赛事，渲染激烈气氛
80后头条男性用户：纸媒杂志有张力的版式构成一代人的回忆
早期交互探索方案
通过拟物化模拟杂志观看体验
最终扁平 UI 方案
通过图形和色彩打造视觉张力
保留拟物化细节点缀
品牌设计
从品牌形象延伸到插画、交互和视觉体验，
通过系统的设计语言，构建用户对于钱包应用的信任。
探索性重构 Metamask
构建更具安全感的 Web3 新手体验
原品牌色
新的 UI 和品牌色
原 UI 色
柠檬黄介于原品牌橙色与原 UI 蓝色之间，延续了原来品牌的暖色调，轻微贴近绿色唤起安全感，也使得品牌与界面在色彩上更协调统一。
旧版本插画风格各异，装饰性为主，影响核心内容的呈现。
统一以轻拟物风格呈现，借用日常可感的图形，帮助用户理解晦涩的 Web3 术语
更协调统一的颜色：连结品牌一致性与安全感
更统一，更具说明意味的插画
灵感源于守护神像
富有安全感的新品牌符号
新的品牌形象承袭狮子神像的符号精神，
寓意警觉与守护，传达出可靠与安心。
从空洞无神到怒目警觉
惊鸿一瞥只为守护
新的品牌形象以极简单色呈现，抛弃陈旧的 low-poly 风格，传递新鲜感并增强辨识度。借鉴盾牌的形态特征，硬朗的轮廓勾勒出狐狸姿态，目光传递出警惕与守护。
Ⓒ Qichenghsu All Right Reserved