← → 翻页 · B 静态 · ESC 索引
产品设计作品集 · 2026
Vol.01
产品设计 · 0→1 · 程霖

步叙

DeepWalk · 社交内容叙事产品

在街角相遇，在街角的花园。
一个城市走读产品——用户通过地图选路线、沿路走、到点位读故事、在 POI 签到留足迹、看到同行者的痕迹。

程霖·独立 PM · 0→1 产品定义·微信小程序
产品实习作品集 · Project Portfolio
— 2026.06 —
项目概览 · Overview
02 / 14
一个 PM，做了什么。

10 周 · 从 0 到 1

独立驱动步叙从概念到原型的全过程。

Duration
10 周
从概念到原型
PRD Versions
3 版
独立输出完整 PRD
User Stories
67
12 个 Epic 拆解
Prototype Pages
9
HTML 可交互原型
Milestones
5
M0→M4 渐进交付
Competitors
4+
深度竞品分析
步叙 DeepWalk · 产品概览
Page 02
需求发现 · Problem
03 / 14
三个未被回答的问题

没有人服务
"边走边读边社交"

高德是效率工具，小红书是碎片攻略，携程是跨城规划，豆瓣是线上讨论。用户在城市散步时，三个问题无人回答。

① 我往哪个方向走有意思？
② 走到这里，它背后有什么故事？
③ 还有谁走过这条路？
— 用户调研洞察
步叙地图首页原型
地图首页 · 叙事地图 + 路线线条 + POI 标注
Page 03 · 核心问题
— · —
第一幕 · 需求与定位
Act I · 04 / 14
Act I

需求与定位

从用户痛点出发，找到步叙独占的生态位。

第一幕引子
— · —
用户研究 · Persona
Act I · 05 / 14
4 类用户 · 3 个场景

谁在走这条路

城市漫游者（P0 首发）和深度旅行者（P0 并行）是 MVP 的核心服务对象。

城市漫游者
不提前做攻略，打开就能走。要路线、要叙事、要沉浸感
P0 首发
深度旅行者
到了现场想多了解——这栋楼谁建的？这条路有什么历史？
P0 并行
内容创作者
自己发现了好地方想分享，需要模板化的创作工具
P1
本地居民
重新认识自己的城市，找到没去过的小角落
P1
步叙探索页原型
探索页 · 分类浏览路线
Page 05 · 用户画像
Act I · Persona
竞品差异化 · Positioning
Act I · 06 / 14
空间 × 叙事 × 社交

步叙独占的生态位

现有方案 · 各守一隅

碎片化 · 无叙事 · 不到场

  • 小红书：碎片攻略，自己拼路线
  • 高德/百度：效率导航，没有内容
  • 携程/马蜂窝：跨城规划，非日常
  • 豆瓣：线上讨论，不到场
步叙 · 三层融合

结构化路线 + 空间叙事 + 到场社交

  • 结构化路线：不是碎片，是完整路径
  • 空间顺序叙事：走到哪读到哪
  • 签到足迹社交：异步、轻量、到场
  • 走 ≠ 走过：停下来读故事、留句话
Page 06 · 竞品差异化
Before / After
第二幕 · 产品设计与原型
Act II · 07 / 14
Act II

设计与原型

9 页 HTML 可交互原型，完整呈现核心体验闭环。

第二幕引子
— · —
核心体验 · Experience Loop
Act II · 08 / 14
Experience · 体验循环

从打开到走完

核心体验域 · Core Experience
01
故事首屏
沉浸式故事卡片，衬线体逐行淡入
02
叙事地图
路线线条 + POI 标注 + 社交信号
03
路线走读
GPS 引导 + 分段体验 + 进度追踪
04
点位故事
全屏沉浸叙事，150→1500 字
05
签到足迹
留句话吧，140 字 + 足迹墙
用户与社交域 · Social Layer
06
微信登录
一键登录，降低社交门槛
07
个人主页
足迹墙 + 已走路线 + 豆瓣入口
08
分享卡片
群聊分享 → 同一条路线
Page 08 · 核心体验循环
Pipeline
高保真原型 · Prototype
Act II · 09 / 14
9 页 · 完整体验闭环

可交互原型界面

故事首屏
故事首屏
地图首页
地图首页
路线详情
路线详情
走读模式
走读模式
点位故事
点位故事
签到足迹
签到足迹
Page 09 · 原型展示 · HTML 可交互
v3-reimagine
设计系统 · Design System
Act II · 10 / 14
Uber + Liquid Glass + 衬线阅读体

克制的视觉语言

UI 层严格黑白灰，地图数据层使用雨过天青、城墙砖红、琉璃黄。毛玻璃材质让地图上的浮动面板自然融入。

SF Pro + PingFang SC（UI）
Noto Serif SC（阅读叙事）
12px 圆角 · 极轻阴影 0.08-0.16
— 设计系统 V3.2
个人主页原型
个人主页 · 足迹墙 + 已走路线
Page 10 · 设计系统
— · —
第三幕 · 规划与度量
Act III · 11 / 14
Act III

规划与度量

路线图、里程碑、北极星——用数据定义成功。

第三幕引子
— · —
迭代路线图 · Roadmap
Act III · 12 / 14
Sprint · 10 周 5 个里程碑

从设计到上线

Sprint 计划 · 2 周一个迭代
S1
W1-2 · 框架
故事首屏 + 叙事地图 + 用户系统 + 过渡动画
S2
W3-4 · 体验
路线详情 + 走读模式 + 点位故事 + GPS 兜底
S3
W5-6 · 社交
签到足迹 + 地图社交信号 + 内容审核
S4
W7-8 · 集成
4-Tab 导航 + 内容生产 + 集成测试
S5
W9-10 · 上线
Bug 修复 + 性能优化 + 公测 + 提审
关键里程碑 · Milestones
M0
设计验证
概念测试 > 60%
M1
框架可用
地图 + 用户系统
M2
体验闭环
选路线→走读→读故事
M3
社交集成
签到 + 足迹 + 信号
M4
MVP 上线
公测发布
Page 12 · 迭代路线图
Roadmap
度量体系 · North Star
Act III · 13 / 14
用数据定义成功

北极星指标

MVP 上线 3 个月内的目标值。

Route Completion
>40%
路线完成率 · 开始一条路线后走完的比例
Footprint Density
>3条
单路线足迹数 · 衡量用户参与深度
DCR 深度连接率
>5%
双向互动用户对 / MAU · 社交是否真实成立
Page 13 · 北极星指标
North Star Metrics
收束 · Closing
14 / 14
The Takeaway

走 ≠ 走过。 走到点位停下来， 读故事、签个到、留句话。

CityWalk 是走过——拍照打卡就走。步叙是走。

程霖·产品设计作品集·2026.06
步叙 DeepWalk · 在街角相遇，在街角的花园
— 2026 —