I am Product Designer
Qicheng Hsu
Hey, Workstream Team
3 years working for Bytedance-Today's Hot List
2 years working as
Independent Designer
Web3 Tool Design
Exploration
Experience
亿万用户量级设计实践
前置理解业务和用户
专长
多用户场景洞察
复杂信息的结构化设计
理念
商业前瞻的设计追求
开放心态与钻研韧性
Improving push notification opt-in rate
平衡用户和业务视角，以数据分析洞察场景
Business context: Why Toutiao needs a trending list
前置理解行业赛道和业务策略
重设计币安个人资产页
结构化处理复杂信息和流程
构建清晰高效的移动端工具体验
AI 重构新手用户交易工作流
紧贴用户场景构思 AI 应用
I’ve selected four key parts from my portfolio
Strategic insights and design projects at ByteDance
Recent explorations in tool-related design
Why Toutiao needs a trending list
Business context:
Increasing push notification opt-in rate for Toutiao
Balancing user experience and business needs
Analyze user scenarios through data
重设计币安个人资产页
结构化处理复杂信息
构建清晰高效的移动端工具体验
紧贴用户场景构思 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