旅行邮箱 v1.0.0

产品使用及设计说明手册 · 2026-05-18

平台支持
Android App · H5 网页
H5:http://115.190.7.207
APK:GitHub Release 下载

目录

一、产品概述

旅行邮箱是一款以邮政明信片为核心载体的旅行记录 H5 应用。用户通过创建「旅程」,在旅途中拍摄照片、记录心情,将每一段经历封装为一张独特的「明信片」。明信片可收藏、可寄送(给未来的自己或通讯录好友),并在地图与时间轴中形成可视化的旅行足迹。

产品理念
· 邮政美学:以传统邮政信封、邮票、邮戳为视觉符号,营造复古而温暖的旅行仪式感。
· 旅程归档:每张明信片都必须归属到一段「旅程」中,形成结构化的旅行记忆。
· 社交寄送:支持将明信片寄送给通讯录好友,分享旅途中的美好瞬间。

二、整体功能架构

┌─────────────────────────────────────────────────────────────┐ │ 旅行邮箱 v1.0.0 │ ├─────────────────────────────────────────────────────────────┤ │ 用户体系 │ │ ├── 注册(邮箱号 CN-XXXXXX + 密码) │ │ ├── 登录 │ │ └── 个人资料(昵称、头像、积分、统计) │ ├─────────────────────────────────────────────────────────────┤ │ 核心功能 │ │ ├── 首页(公告栏、快捷入口) │ │ ├── 时间轴(按日期倒序展示明信片) │ │ ├── 记录(创建明信片:照片+位置+城市+心情+邮票) │ │ ├── 地图(旅行足迹可视化:国家/城市/明信片/旅程统计) │ │ └── 我的(个人中心、设置、关于) │ ├─────────────────────────────────────────────────────────────┤ │ 社交功能 │ │ ├── 通讯录(好友列表) │ │ ├── 收件箱(收到的好友明信片) │ │ └── 寄出(发送明信片给好友/自己) │ ├─────────────────────────────────────────────────────────────┤ │ 增值系统 │ │ ├── 邮票商店(解锁主题邮票:经典/自然/文化/城市/古迹/四季…) │ │ ├── 积分系统(注册/签到/记录明信片/寄出 获得积分) │ │ └── 收藏(邮票集、明信片集) │ ├─────────────────────────────────────────────────────────────┤ │ 旅程管理 │ │ ├── 创建旅程(设定出发地与目的地) │ │ ├── 旅程列表(Boarding Pass 风格卡片) │ │ └── 旅程归档(明信片自动归属) │ └─────────────────────────────────────────────────────────────┘

三、使用指南

3.1 注册与登录

注册流程

首次使用需创建「旅行信箱」,系统会分配唯一的邮箱号(格式:CN-XXXXXX)。

  1. 点击「立即注册」进入注册页
  2. 输入旅行昵称
  3. 设置 6 位数字密码
  4. 点击「投递申请」完成注册
  5. 系统会自动分配邮箱号并登录
注册页面

注册页面 — 创建旅行信箱

登录流程

已注册用户可通过邮箱号和密码登录。

  1. 输入 6 位邮箱号(系统自动补全 CN- 前缀)
  2. 输入密码
  3. 点击「开启信箱」登录
登录页面

登录页面 — 开启信箱

3.2 首页

首页是用户进入应用后的主界面,采用双栏瀑布流布局展示「旅行公告栏」中的公开明信片。

区域说明
顶部栏显示当前时间、用户昵称、日期
今日卡片引导创建第一段旅程,快捷入口
快捷导航收件箱 / 寄出 / 通讯录 三个功能入口
旅行公告栏双栏瀑布流展示公开明信片(含城市标签、点赞数、作者邮箱号)
底部引导未创建旅程时显示「创建第一段旅程」引导
底部 Tab首页 / 时间轴 / 记录 / 地图 / 我的
首页

首页 — 旅行公告栏与快捷入口

公告栏明信片卡片

每张明信片卡片包含:顶部城市标签、封面图片、类型标签(香/番 等)、标题、底部点赞数 + 作者邮箱号。

3.3 时间轴

时间轴按日期倒序展示用户创建的所有明信片,形成线性的旅行回忆时间线。每条记录按日期分组,包含明信片缩略图、标题、城市、日期。

时间轴

时间轴 — 按日期倒序排列的明信片(共 4 张)

3.4 记录明信片

「记录」是产品的核心功能,用于创建一张新的旅行明信片。

记录明信片

记录明信片 — 填写表单创建新明信片

步骤字段说明
1照片点击拍照或从相册选择,比例 4:3,最大 5MB
2所属旅程选择已有旅程,或点击「+ 新建旅程」创建
3位置点击定位按钮自动获取,或手动输入具体地址
4城市输入城市名称(必填)
5国家默认「中国」,可修改
6收件人选填,默认「未来的我」,可写给通讯录好友
7备注记录此刻的心情,最多 200 字
8邮票默认使用当前邮票,点击「更换」可选择其他已解锁邮票
9预览点击「查看」可预览明信片正反面效果
10保存填写完整后点击「保存明信片」完成创建

3.5 地图

地图页以可视化方式展示用户的旅行足迹。顶部统计国家数、城市数、明信片数与旅程数,中部足迹图标记已到访城市,底部列表展示到访城市与对应明信片数量。

地图

地图 — 旅行足迹可视化(3 座城市 · 1 段旅程 · 4 张明信片)

3.6 个人中心(我的)

个人中心汇总展示用户的个人信息、资产、社交入口和设置。

个人中心

个人中心 — 信息汇总与功能入口

区域说明
头像昵称区头像、昵称、状态签名、邮箱号、加入天数
数据统计总旅程 / 明信片 / 收藏 / 积分
邮票集藏横向滚动展示已解锁的邮票
社交入口邮票商店 / 我的通讯录 / 我的收件箱
设置修改头像 / 编辑昵称 / 退出登录
关于隐私协议 / 用户协议 / 关于我们
版本信息旅行邮箱 · v1.0.0

3.7 邮票商店与预览

邮票商店提供多种主题的虚拟邮票,用户可用积分解锁,用于装饰明信片。点击任意邮票可进入全屏预览,查看设计理念与插画细节。

邮票商店 邮票预览

左:邮票商店列表 · 右:邮票全屏预览(含设计理念)

系列主题积分
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
积分明细

积分明细 — 收支记录

3.8 通讯录

通讯录管理好友关系,可查看已添加的联系人。

通讯录

通讯录 — 好友列表

3.9 收件箱与寄出

收件箱

展示收到的好友明信片,支持「来信」与「已寄出」两个标签切换。

收件箱

收件箱 — 收到的明信片列表

寄出

选择已创建的明信片,寄送给通讯录好友或自己。

寄出明信片

寄出明信片 — 选择明信片发送

明信片详情(收到)

点击收件箱中的明信片可查看详情,包含寄件人信息、明信片正面与背面内容。

收件详情

收件详情 — 查看好友寄来的明信片

3.10 旅程管理

旅程是明信片的上级组织单位,一段旅程可包含多张明信片。

创建旅程

  1. 设定旅程名称
  2. 选择出发地
  3. 选择目的地
  4. 设定出发日期
旅程管理

旅程管理 — 创建新旅程

旅程列表

以「登机牌(Boarding Pass)」风格展示所有旅程。

旅程列表

旅程列表 — Boarding Pass 风格卡片

3.11 我的明信片与收藏

我的明信片

列表展示用户创建的所有明信片,包含编号、城市、日期、封面、收件人等信息。

我的明信片

我的明信片 — 全部明信片列表

明信片详情(自己创建)

点击明信片可查看详情页,展示完整明信片正反面、邮戳、邮票、留言等信息。

明信片详情

明信片详情 — 完整明信片展示

收藏

收藏页面包含明信片集、邮票集,以及「印成实体册」增值服务。

收藏

收藏 — 明信片集与邮票集

编辑明信片

支持编辑已寄出的明信片信息,修改不会改变原始记录时间。

编辑明信片

编辑明信片 — 修改已寄出明信片

旅行公告栏

独立的公告栏页面,展示所有公开分享的明信片,支持双栏瀑布流浏览。

旅行公告栏

旅行公告栏 — 公开明信片瀑布流

四、设计说明

4.1 视觉风格

色彩体系

色彩角色色值用途
主色(邮政绿)#2D5A45顶部导航、按钮、标签、强调文字
背景色(米白)#F5F0E8页面背景、卡片底色
文字主色#333333标题、正文
文字次色#888888辅助说明、时间、次要信息
边框/分割线#E0DCD4卡片边框、分隔线
点缀色(红)#C0392B邮戳、积分标签、重要提示

字体规范

视觉元素

邮票设计素材

应用内置 5 个系列共 22 枚虚拟邮票,采用复古铜版画风格,每枚邮票对应不同的旅行主题。用户在记录明信片时可选择对应邮票进行贴附,增添旅行仪式感。

系列一:旅行印记

系列二:世界遗产

系列三:四季风光

系列四:二十四节气

系列五:远方

4.2 交互设计

底部 Tab 导航

首页 / 时间轴 / 记录 / 地图 / 我的
· 选中状态:图标 + 文字高亮(邮政绿)
· 未选中状态:灰色图标 + 文字
· 「记录」Tab 带特殊强调(笔形图标)

页面转场

弹窗规范

4.3 页面布局

统一头部

所有子页面采用统一的顶部导航栏:左侧返回按钮(<)、中间页面标题(中文 + 英文小标题)、右侧操作按钮。

卡片布局

五、附录

截图清单

编号页面说明
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明信片背面翻转预览 — 留言 + 地址 + 邮票
相关链接
H5 生产环境:http://115.190.7.207
GitHub Release:v1.0.0
APK 下载:旅行邮箱.apk
GitHub 仓库:llmlearning-x/Postcards
文档说明
本手册基于线上 H5 环境实际截图与功能体验整理,涵盖产品功能架构、使用指南与设计说明,供产品、设计与开发人员参考使用。

旅行邮箱 · v1.0.0 · 记录旅途 · 寄往远方
© 2026 旅行邮箱