「短网址服务」低保真草图清单

By Leeting Yan

September 24, 2025

1. 首页（短链生成）

布局要点：

顶部导航栏
- 左侧：LOGO / 产品名
- 右侧：按钮 → 登录 / 注册 / Dashboard
主体区域
- [TextBox] 输入长链
- [TextBox] 自定义短码（可选）
- [Dropdown] 有效期（7天/30天/永久）
- [Button, Primary] 生成短链
结果展示区域（生成后显示）
- [Label] 短链 + [Button, Icon] 复制
- [Image Placeholder] 二维码 + [Button] 下载
- [Label] 到期时间提示
- [Notice] 登录引导文案
页脚
- [Link] API文档 | [Link] 帮助 | [Text] Copyright

2. 登录 / 注册页

登录页组件：

[Logo] 产品 LOGO
[TextBox] 邮箱
[TextBox, Password] 密码
[Checkbox] 记住我
[Button, Primary] 登录
[Link] 忘记密码
[Divider]
[Label] “还没有账号？” + [Link] 去注册

注册页额外组件：

[TextBox, Password] 确认密码
[Checkbox] 同意服务协议

3. Dashboard

3.1 短链管理列表

顶部：
- [TextBox] 搜索短码/长链
- [Button] 搜索
表格（Table）列：
- 短链
- 原始链接
- 点击量
- 到期时间
- 操作（[IconButton] 复制 / 二维码 / 修改 / 删除）
底部分页：
- [Pagination] « 1 2 3 … »

3.2 数据统计页

顶部过滤：
- [DatePicker] 时间区间选择器（近7天/近30天/自定义）
图表区域：
- [LineChart] 访问趋势图
- [PieChart] 来源分布
- [PieChart] 设备分布
- [MapChart] 地域分布

3.3 用户设置页

用户信息区：
- [Label] 邮箱
- [Button] 修改密码
API Key 管理：
- [Table] Key(打码) | 创建时间 | 有效期 | 操作（删除）
- [Button] 新建 Key
自定义域名：
- [TextBox] 输入域名
- [Button] 校验

4. API 文档页

[TextBlock] 说明文字（如何获取 API Key）
[CodeBlock] 示例调用（curl 示例）
[CodeBlock] 响应 JSON 示例
[Accordion] 错误码对照表（展开/折叠）

5. 错误/异常页面

[Icon: Error] 错误状态图标
[Label] 提示文案
- 短链不存在 → 「短链不存在或已被删除」
- 短链过期 → 「短链已过期，请重新生成」
- 系统错误 → 「系统开小差了，请稍后再试」
[Button] 返回首页

移动端适配要点

输入框/按钮宽度 → 100%

表格在移动端 → 卡片式展示：

短链: s.io/abc123
原始链接: example.com/...
点击量: 1203
到期时间: 2025-10-01
操作: [复制] [二维码] [修改] [删除]

图表 → 垂直排列，不做横向排布。

总结：这份清单已经拆到 UI 组件级别（TextBox、Button、Table、Chart…），交互/UI 同事可以直接在 Balsamiq/Figma 中搭框，快速输出低保真原型。

👌 好的，那我接着帮你整理一份 页面跳转关系图（Site Map / Navigation Flow），方便和交互/UI 同事沟通整体信息架构（IA，Information Architecture），明确页面之间的入口和流转路径。

短网址服务页面跳转关系图

flowchart TD

%% 顶层
Home[首页: 短链生成] -->|生成成功| Result[结果展示区 (短链+二维码)]

Home --> Login[登录页]
Home --> Register[注册页]
Home --> API[API 文档页]

Result --> Dashboard[Dashboard首页]

%% 登录/注册流程
Login --> Dashboard
Register --> Dashboard

%% Dashboard 模块
Dashboard --> URLMgmt[短链管理列表]
Dashboard --> Stats[数据统计页]
Dashboard --> Settings[用户设置]

%% 短链管理
URLMgmt --> URLModify[短链修改弹窗]
URLMgmt --> QRModal[二维码查看弹窗]
URLMgmt --> ConfirmDelete[删除确认弹窗]

%% 用户设置
Settings --> APIKeyMgmt[API Key 管理]
Settings --> DomainBind[自定义域名绑定]
Settings --> Profile[账号信息/修改密码]

%% 异常路径
Home --> NotFound[错误页: 短链不存在/过期]
Dashboard --> NotFound

页面流转说明

1. 首页（Home）

功能：输入长链 → 点击生成 → 结果展示区
跳转路径：
- 登录按钮 → 登录页
- 注册按钮 → 注册页
- API 文档 → API 文档页
- 结果展示区 → 登录提示（跳转 Dashboard）

2. 登录 / 注册

登录成功 → Dashboard
注册成功 → 自动登录 → Dashboard

3. Dashboard（核心入口）

包含三个核心模块：

短链管理（URLMgmt）
- 修改 → 弹窗（URLModify）
- 查看二维码 → 弹窗（QRModal）
- 删除 → 弹窗确认（ConfirmDelete）
数据统计（Stats）
- 通过左侧导航切换
- 可选择时间区间，图表实时刷新
用户设置（Settings）
- API Key 管理（APIKeyMgmt）
- 自定义域名绑定（DomainBind）
- 修改密码 / 账号信息（Profile）

4. 错误/异常页面

短链不存在 / 已过期时 → 跳转到 NotFound 页面
系统错误 → 错误页

导航设计要点

顶部导航栏（全局可见）
- 首页 | API 文档 | 登录/注册（未登录） | Dashboard（已登录）
Dashboard 内部导航（侧边栏）
- 短链管理
- 数据统计
- 用户设置
返回入口
- 所有异常页面提供「返回首页」按钮
- 弹窗关闭 → 回到来源页面

📌 这样一张 页面跳转关系图 + 说明，就能清晰表达：

用户完整路径（首页 → 登录 → Dashboard）
Dashboard 内部的模块划分
异常情况的流转

短网址服务交互细节清单

1. 首页（短链生成页）

输入框
- 自动聚焦，粘贴时去掉前后空格。
- 长度超限时实时提示「链接过长」。
- 输入非 http/https 时阻止提交，提示「请输入有效链接」。
生成按钮
- 点击后 → Loading 状态（文字变为「生成中…」，按钮禁用）。
- 成功 → 展示短链 & 二维码。
- 失败 → 弹出错误提示（toast/提示条）。
结果展示
- 短链区域：一键复制，复制成功后显示「已复制」提示，2 秒后自动消失。
- 二维码：hover/点击可放大，提供「下载」按钮（默认 PNG）。
- 登录引导提示：游客用户生成结果后显示「登录以保存记录」。