产品使用及设计说明手册 · 2026-05-18
旅行邮箱是一款以邮政明信片为核心载体的旅行记录 H5 应用。用户通过创建「旅程」,在旅途中拍摄照片、记录心情,将每一段经历封装为一张独特的「明信片」。明信片可收藏、可寄送(给未来的自己或通讯录好友),并在地图与时间轴中形成可视化的旅行足迹。
首次使用需创建「旅行信箱」,系统会分配唯一的邮箱号(格式:CN-XXXXXX)。
注册页面 — 创建旅行信箱
已注册用户可通过邮箱号和密码登录。
CN- 前缀)
登录页面 — 开启信箱
首页是用户进入应用后的主界面,采用双栏瀑布流布局展示「旅行公告栏」中的公开明信片。
| 区域 | 说明 |
|---|---|
| 顶部栏 | 显示当前时间、用户昵称、日期 |
| 今日卡片 | 引导创建第一段旅程,快捷入口 |
| 快捷导航 | 收件箱 / 寄出 / 通讯录 三个功能入口 |
| 旅行公告栏 | 双栏瀑布流展示公开明信片(含城市标签、点赞数、作者邮箱号) |
| 底部引导 | 未创建旅程时显示「创建第一段旅程」引导 |
| 底部 Tab | 首页 / 时间轴 / 记录 / 地图 / 我的 |
首页 — 旅行公告栏与快捷入口
每张明信片卡片包含:顶部城市标签、封面图片、类型标签(香/番 等)、标题、底部点赞数 + 作者邮箱号。
时间轴按日期倒序展示用户创建的所有明信片,形成线性的旅行回忆时间线。每条记录按日期分组,包含明信片缩略图、标题、城市、日期。
时间轴 — 按日期倒序排列的明信片(共 4 张)
「记录」是产品的核心功能,用于创建一张新的旅行明信片。
记录明信片 — 填写表单创建新明信片
| 步骤 | 字段 | 说明 |
|---|---|---|
| 1 | 照片 | 点击拍照或从相册选择,比例 4:3,最大 5MB |
| 2 | 所属旅程 | 选择已有旅程,或点击「+ 新建旅程」创建 |
| 3 | 位置 | 点击定位按钮自动获取,或手动输入具体地址 |
| 4 | 城市 | 输入城市名称(必填) |
| 5 | 国家 | 默认「中国」,可修改 |
| 6 | 收件人 | 选填,默认「未来的我」,可写给通讯录好友 |
| 7 | 备注 | 记录此刻的心情,最多 200 字 |
| 8 | 邮票 | 默认使用当前邮票,点击「更换」可选择其他已解锁邮票 |
| 9 | 预览 | 点击「查看」可预览明信片正反面效果 |
| 10 | 保存 | 填写完整后点击「保存明信片」完成创建 |
地图页以可视化方式展示用户的旅行足迹。顶部统计国家数、城市数、明信片数与旅程数,中部足迹图标记已到访城市,底部列表展示到访城市与对应明信片数量。
地图 — 旅行足迹可视化(3 座城市 · 1 段旅程 · 4 张明信片)
个人中心汇总展示用户的个人信息、资产、社交入口和设置。
个人中心 — 信息汇总与功能入口
| 区域 | 说明 |
|---|---|
| 头像昵称区 | 头像、昵称、状态签名、邮箱号、加入天数 |
| 数据统计 | 总旅程 / 明信片 / 收藏 / 积分 |
| 邮票集藏 | 横向滚动展示已解锁的邮票 |
| 社交入口 | 邮票商店 / 我的通讯录 / 我的收件箱 |
| 设置 | 修改头像 / 编辑昵称 / 退出登录 |
| 关于 | 隐私协议 / 用户协议 / 关于我们 |
| 版本信息 | 旅行邮箱 · v1.0.0 |
邮票商店提供多种主题的虚拟邮票,用户可用积分解锁,用于装饰明信片。点击任意邮票可进入全屏预览,查看设计理念与插画细节。
左:邮票商店列表 · 右:邮票全屏预览(含设计理念)
| 系列 | 主题 | 积分 |
|---|---|---|
| SÉRIE I 旅行 | 经典、自然、文化、城市 | 免费 |
| SÉRIE II 古迹 | 长城、兵马俑、古塔、苏园 | 20 PT |
| SÉRIE III 四季 | 春樱、夏荷、秋枫、冬雪 | 30 PT |
| SÉRIE IV 节气 | 立春、清明、夏至、立秋、霜降、大寒 | 50 PT |
| SÉRIE V 远方 | 草原、雪山、沙漠、海岛 | 80 PT |
| 行为 | 积分 |
|---|---|
| 注册奖励 | +50 PT |
| 每日签到 | +5 PT |
| 记录明信片 | +10 PT |
积分明细 — 收支记录
通讯录管理好友关系,可查看已添加的联系人。
通讯录 — 好友列表
展示收到的好友明信片,支持「来信」与「已寄出」两个标签切换。
收件箱 — 收到的明信片列表
选择已创建的明信片,寄送给通讯录好友或自己。
寄出明信片 — 选择明信片发送
点击收件箱中的明信片可查看详情,包含寄件人信息、明信片正面与背面内容。
收件详情 — 查看好友寄来的明信片
旅程是明信片的上级组织单位,一段旅程可包含多张明信片。
旅程管理 — 创建新旅程
以「登机牌(Boarding Pass)」风格展示所有旅程。
旅程列表 — Boarding Pass 风格卡片
列表展示用户创建的所有明信片,包含编号、城市、日期、封面、收件人等信息。
我的明信片 — 全部明信片列表
点击明信片可查看详情页,展示完整明信片正反面、邮戳、邮票、留言等信息。
明信片详情 — 完整明信片展示
收藏页面包含明信片集、邮票集,以及「印成实体册」增值服务。
收藏 — 明信片集与邮票集
支持编辑已寄出的明信片信息,修改不会改变原始记录时间。
编辑明信片 — 修改已寄出明信片
独立的公告栏页面,展示所有公开分享的明信片,支持双栏瀑布流浏览。
旅行公告栏 — 公开明信片瀑布流
| 色彩角色 | 色值 | 用途 |
|---|---|---|
| 主色(邮政绿) | #2D5A45 | 顶部导航、按钮、标签、强调文字 |
| 背景色(米白) | #F5F0E8 | 页面背景、卡片底色 |
| 文字主色 | #333333 | 标题、正文 |
| 文字次色 | #888888 | 辅助说明、时间、次要信息 |
| 边框/分割线 | #E0DCD4 | 卡片边框、分隔线 |
| 点缀色(红) | #C0392B | 邮戳、积分标签、重要提示 |
TRAVEL MAILBOX、BULLETIN BOARD)应用内置 5 个系列共 22 枚虚拟邮票,采用复古铜版画风格,每枚邮票对应不同的旅行主题。用户在记录明信片时可选择对应邮票进行贴附,增添旅行仪式感。
<所有子页面采用统一的顶部导航栏:左侧返回按钮(<)、中间页面标题(中文 + 英文小标题)、右侧操作按钮。
box-shadow: 0 2px 8px rgba(0,0,0,0.06))| 编号 | 页面 | 说明 |
|---|---|---|
| 01 | 首页 | 旅行公告栏与快捷入口 |
| 02 | 个人中心 | 信息汇总与功能入口 |
| 03 | 时间轴 | 按日期倒序排列的明信片(4 张) |
| 05 | 地图 | 旅行足迹可视化(3 座城市) |
| 06 | 收件箱 | 收到的明信片列表 |
| 09 | 旅程管理 | 创建新旅程 |
| 10 | 明信片详情页 | 完整信息展示与操作 |
| 11 | 邮票商店 | 解锁主题邮票 |
| 13 | 登录页 | 开启信箱 |
| 14 | 注册页 | 创建旅行信箱 |
| 15 | 记录明信片 | 填写表单创建新明信片 |
| 16 | 通讯录 | 好友列表 |
| 17 | 寄出明信片 | 选择明信片发送 |
| 18 | 我的明信片 | 全部明信片列表 |
| 19 | 旅程列表 | Boarding Pass 风格卡片 |
| 20 | 收藏 | 明信片集与邮票集 |
| 21 | 积分明细 | 收支记录 |
| 22 | 编辑明信片 | 修改已寄出明信片 |
| 23 | 收件详情 | 查看好友寄来的明信片 |
| 24 | 旅行公告栏 | 公开明信片瀑布流 |
| 25 | 邮票预览 | 全屏放大 + 设计理念 |
| 26 | 明信片正面 | 翻转预览 — 旅途照片 + 邮戳 |
| 27 | 明信片背面 | 翻转预览 — 留言 + 地址 + 邮票 |
旅行邮箱 · v1.0.0 · 记录旅途 · 寄往远方
© 2026 旅行邮箱