1. 首页（短链生成页）
目标：让用户在最短路径内完成「输入长链 → 获取短链+二维码」
模块与要点
输入区域
输入框：支持粘贴长链，自动去掉前后空格。
占位符示例：
请输入或粘贴长链接可选项：
- 自定义短码（额外输入框，显示「可选」标识）
- 有效期选择（下拉框：7天/30天/永久）
生成按钮
- 主按钮：高亮「生成短链」
- 点击后进入 Loading 状态，避免重复提交。
结果展示
- 短链显示区：带一键复制按钮（提示「已复制」）
- 二维码展示：支持下载（PNG/SVG），hover/点击可放大。
- 补充：显示过期时间信息。
引导与入口
- 顶部导航：登录/注册入口、Dashboard 入口
- 页脚：API 文档入口
2. 登录 / 注册页
目标：快速完成认证，降低阻塞
要点
- 简洁表单：邮箱 + 密码
- 注册：带「确认密码」+ 协议勾选框
- 登录：支持「记住我」选项
- 错误提示：表单下方实时显示（邮箱格式错误、密码错误等）
- 引导：未注册 → 注册入口；已注册 → 登录入口
3. 用户 Dashboard（核心管理页面）
3.1 短链管理列表
表格字段：短链、原始链接、点击量、到期时间、操作
支持搜索（短码/原始链接关键字）
支持分页（默认 10 条/页，可选 20/50）
操作按钮：
- 修改（长链/有效期）
- 删除（二次确认弹窗）
- 复制短链（图标按钮）
- 二维码（点击弹窗/侧边栏放大）
3.2 数据统计页
- 折线图：访问趋势（按日/周/月）
- 饼图：访问来源 / 设备分布
- 地图：地域分布（按国家/省份展示即可，不必太细）
- 提示：当无数据时显示「暂无统计数据」占位符
3.3 用户设置
API Key 管理：
- 列表显示已有 Key（部分打码）
- 新建 Key 按钮（可选有效期/限额）
- 删除 Key 确认操作
账号设置：修改邮箱/密码
高级设置：自定义域名绑定（输入域名 → 校验结果）
4. API 文档页面（给开发者）
- 简要说明（如何获取 API Key）
- 常用接口示例（
curl/ Postman） - 响应示例 JSON 展示（带语法高亮）
- 错误码对照表（链接或折叠面板）
5. 错误/异常页面
5.1 短链不存在 / 已过期
提示文案：
- 「短链不存在或已被删除」
- 「短链已过期，请重新生成」
提供返回首页按钮
5.2 系统异常
提示：
- 「系统开小差了，请稍后再试」
提供首页跳转入口
6. 通用交互要点
统一反馈：
- 成功 → 绿色提示（如「复制成功」）
- 失败 → 红色提示（如「短码已被占用」）
Loading 状态：按钮点击后禁用，避免重复提交
移动端适配：
- 输入框 & 按钮宽度 100%
- 表格改为卡片式展示（短链/点击量/操作按钮）
国际化支持（预留）：中英文切换
📌 总结：
- 首页 → 极简化（输入+结果）
- Dashboard → 表格+图表（管理+统计）
- 登录注册 → 简洁直观
- 异常页 → 友好提示
短网址服务用户操作流程图
flowchart TD
A["首页: 输入长链"] --> B{用户是否登录?}
B -->|否| C["游客生成短链"]
C --> C1["展示短链+二维码"]
C1 --> C2["可选择登录/注册"] --> D["登录/注册流程"]
B -->|是| E["已登录用户生成短链"]
E --> E1["展示短链+二维码"]
E1 --> F["进入Dashboard 管理"]
D --> F
F --> F1["短链管理列表: 搜索/修改/删除"]
F --> F2["查看统计报表: PV/UV/来源/设备/地域"]
F --> F3["用户设置: API Key, 域名绑定"]
关键节点说明
1. 首页 → 短链生成
- 游客和已登录用户都可以生成短链。
- 游客生成的短链 不保存历史，仅一次性使用。
- 登录用户生成的短链会进入 Dashboard，可管理和统计。
2. 登录/注册流程
- 注册：邮箱 + 密码，校验格式，避免复杂验证（降低门槛）。
- 登录：邮箱 + 密码，支持「记住我」。
- 登录后跳转 Dashboard。
3. Dashboard → 短链管理
- 短链列表：搜索、分页、修改、删除。
- 快捷操作：一键复制短链 / 查看二维码。
- 状态标识：已过期短链灰显。
4. Dashboard → 数据统计
- 趋势图（PV/UV）
- 来源分布（饼图）
- 设备分布（移动/PC）
- 地域分布（地图，按国家/省份）
5. Dashboard → 用户设置
- API Key 管理：新建/删除，展示部分 Key。
- 域名绑定：输入自定义域名，校验成功后可生成企业专属短链。
- 账号设置：修改邮箱、密码。
6. 异常路径
- 短链过期/不存在 → 错误页提示 + 返回首页按钮。
- 系统错误 → 错误提示 + 重试入口。
- API Key 无效 → 提示「Key 无效，请重新配置」。
用户路径总结
- 游客路径：输入长链 → 生成短链+二维码 → 可使用，但无历史记录。
- 注册用户路径：输入长链 → 生成短链+二维码 → 短链保存 → Dashboard 管理+统计。
- 企业用户路径：使用 API Key → 批量生成短链 → Dashboard 管理 → 统计分析 → API Key/域名管理。
短网址服务页面原型结构要点
1. 首页（短链生成页）
-------------------------------------------------------
LOGO / 系统名称 登录 | 注册 | Dashboard
-------------------------------------------------------
[ 输入长链接 ................................. ]
[ 可选: 自定义短码 .... ] [ 有效期选择 ▼ ]
[ 生成短链 ] ← 主操作按钮，高亮
-------------------------------------------------------
生成结果（生成后展示区域）
短链: https://s.io/abc123 [复制按钮]
二维码: [二维码图片] [下载按钮]
到期时间: 2025-10-24
[提示: 登录后可保存历史记录并查看统计 → 去登录]
-------------------------------------------------------
Footer: © 2025 ShortURL | API文档 | 帮助
交互要点
- 输入框聚焦时高亮，支持粘贴。
- 生成按钮点击后进入 Loading 状态，避免重复提交。
- 生成后短链展示带 一键复制 和 二维码下载。
- 游客用户结果区域显示“引导登录”提示。
2. 登录 / 注册页
-------------------------------------------------------
LOGO
-------------------------------------------------------
[邮箱输入框]
[密码输入框]
[ 登录按钮 ]
[ ] 记住我 [ 忘记密码 ]
还没有账号？ [ 注册入口 ]
-------------------------------------------------------
注册页类似，多一个“确认密码”和“协议勾选”。
3. 用户 Dashboard
3.1 短链管理列表
-------------------------------------------------------
左侧导航栏：
- 短链管理
- 数据统计
- 用户设置
-------------------------------------------------------
短链管理页
-------------------------------------------------------
搜索框: [ 输入短码/原始URL ] [搜索]
表格:
---------------------------------------------------------
| 短链 | 原始链接 | 点击量 | 到期时间 | 操作 |
---------------------------------------------------------
| s.io/abc123 | example.com.. | 1023 | 2025-10-01 | [复制] [二维码] [修改] [删除]
| s.io/myshop | shop.com/... | 223 | 永久 | [复制] [二维码] [修改] [删除]
---------------------------------------------------------
分页控件: « 1 2 3 ... »
-------------------------------------------------------
交互要点
- 列表分页，支持模糊搜索。
- 操作区按钮用图标（复制、二维码、编辑、删除）。
- 删除有二次确认弹窗。
- 已过期短链灰显。
3.2 数据统计页
-------------------------------------------------------
访问趋势（折线图）
[ 日期选择器: 近7天 / 近30天 / 自定义区间 ]
-------------------------------------------------------
来源分布（饼图） 设备分布（饼图）
-------------------------------------------------------
地理分布（地图热力图）
-------------------------------------------------------
交互要点
- 当无数据时显示「暂无统计数据」。
- 图表区支持 Hover 查看详细数值。
- 时间选择器实时刷新数据。
3.3 用户设置
-------------------------------------------------------
用户信息
邮箱: xxx@example.com
[ 修改密码 ]
API Key 管理
---------------------------------------------------------
| Key (部分打码) | 创建时间 | 有效期 | 操作 |
---------------------------------------------------------
| abcd****xyz | 2025-09-20 | 永久 | [删除]
---------------------------------------------------------
[ 生成新的 API Key ]
自定义域名
[ 输入域名 ........ ] [ 校验按钮 ]
(提示: 需配置 DNS 解析)
-------------------------------------------------------
4. API 文档页
-------------------------------------------------------
API Key 使用说明
-------------------------------------------------------
示例:
curl -X POST https://s.io/api/shorten \
-H "Authorization: Bearer {API_KEY}" \
-d '{"long_url":"https://example.com"}'
返回:
{
"code":0,
"message":"success",
"data": { "short_url":"https://s.io/abc123" }
}
-------------------------------------------------------
错误码对照表（折叠面板）
-------------------------------------------------------
5. 错误/异常页面
短链不存在/已过期
-------------------------------------------------------
❌ 短链不存在或已过期
-------------------------------------------------------
[ 返回首页 ]
系统错误
-------------------------------------------------------
⚠️ 系统开小差了，请稍后再试
-------------------------------------------------------
[ 返回首页 ]
页面设计汇总重点（和交互沟通要点）
首页 → 极简，输入框 + 一键生成，生成结果区域需要短链复制 & 二维码下载。
Dashboard → 核心，包含「表格管理」+「数据统计图表」+「用户设置」。
移动端适配 → 表格转卡片式展示，按钮排列纵向。
交互细节 →
- 操作按钮均需 hover 提示（如“复制短链”）。
- 删除、覆盖等操作必须二次确认。
- 成功/失败操作统一反馈（toast 弹出）。
继续阅读
探索更多技术文章
浏览归档，发现更多关于系统设计、工具链和工程实践的内容。