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

短网址服务页面低保真草图清单（Wireframe Components）

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%

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

    1
2
3
4
5

    短链: 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），明确页面之间的入口和流转路径。

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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（核心入口）

包含三个核心模块：

  1. 短链管理（URLMgmt）

    • 修改 → 弹窗（URLModify）
    • 查看二维码 → 弹窗（QRModal）
    • 删除 → 弹窗确认（ConfirmDelete）

  2. 数据统计（Stats）

    • 通过左侧导航切换
    • 可选择时间区间，图表实时刷新

  3. 用户设置（Settings）

    • API Key 管理（APIKeyMgmt）
    • 自定义域名绑定（DomainBind）
    • 修改密码 / 账号信息（Profile）

4. 错误/异常页面

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

导航设计要点

  • 顶部导航栏（全局可见）

    • 首页 | API 文档 | 登录/注册（未登录） | Dashboard（已登录）

  • Dashboard 内部导航（侧边栏）

    • 短链管理
    • 数据统计
    • 用户设置

  • 返回入口

    • 所有异常页面提供「返回首页」按钮
    • 弹窗关闭 → 回到来源页面

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

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

短网址服务交互细节清单

1. 首页（短链生成页）

  • 输入框

    • 自动聚焦，粘贴时去掉前后空格。
    • 长度超限时实时提示「链接过长」。
    • 输入非 http/https 时阻止提交，提示「请输入有效链接」。

  • 生成按钮

    • 点击后 → Loading 状态（文字变为「生成中…」，按钮禁用）。
    • 成功 → 展示短链 & 二维码。
    • 失败 → 弹出错误提示（toast/提示条）。

  • 结果展示

    • 短链区域：一键复制，复制成功后显示「已复制」提示，2 秒后自动消失。
    • 二维码：hover/点击可放大，提供「下载」按钮（默认 PNG）。
    • 登录引导提示：游客用户生成结果后显示「登录以保存记录」。

2. 登录 / 注册页

  • 表单输入

    • 邮箱输入框 → 失焦校验格式（错误时红色提示）。
    • 密码输入框 → 输入时不展示纯文本。
    • 注册页：密码与确认密码不一致时实时提示。

  • 按钮状态

    • 登录/注册按钮点击后进入 Loading。
    • 成功 → 跳转 Dashboard。
    • 失败 → 表单下方红色错误提示。

  • 切换交互

    • 登录页底部「没有账号？去注册」 → 跳转注册页。
    • 注册页底部「已有账号？去登录」 → 跳转登录页。

3. Dashboard

3.1 短链管理列表

  • 表格交互

    • hover 行高亮。
    • 点击短链字段 → 打开原始长链（新窗口）。
    • 已过期短链 → 灰色字体 + 操作按钮禁用。

  • 操作按钮

    • [复制] → 点击复制短链，成功提示「已复制」。
    • [二维码] → 弹窗展示大号二维码，带下载按钮。
    • [修改] → 弹窗编辑原始链接/有效期，提交后刷新表格。
    • [删除] → 二次确认弹窗「确认删除？此操作不可恢复」。

  • 分页

    • 默认 10 条/页，可切换 20/50 条。
    • 页码切换时显示 Loading 状态。

3.2 数据统计页

  • 时间区间选择

    • 默认展示「近7天」。
    • 下拉可选「近30天、自定义」。
    • 自定义 → 弹窗选择开始-结束日期。

  • 图表交互

    • hover 折线图 → 显示当日 PV/UV 数值。
    • hover 饼图 → 显示百分比 + 数值。
    • hover 地图 → 显示国家/省份名称 + 点击数。

  • 异常处理

    • 无数据 → 显示「暂无统计数据」灰色占位。

3.3 用户设置页

  • API Key 管理

    • Key 只展示前4位+后4位，中间打码。
    • 新建 Key → 弹窗输入有效期，点击生成后展示 Key 并提示「请复制保存」。
    • 删除 Key → 二次确认。

  • 自定义域名

    • 输入框校验域名格式。
    • 点击「校验」 → Loading → 返回「绑定成功/失败」。
    • 失败时提示「请检查 DNS 配置」。

  • 账号信息

    • 修改密码 → 表单（旧密码+新密码+确认密码），提交后提示「修改成功」。

4. API 文档页

  • 代码块

    • 支持一键复制。
    • JSON 响应高亮。

  • 错误码表

    • 折叠面板展示，默认折叠。
    • 点击展开 → 显示完整表格。

5. 错误/异常页面

  • 提示文案

    • 短链不存在 → 「短链不存在或已被删除」。
    • 短链过期 → 「短链已过期，请重新生成」。
    • 系统错误 → 「系统开小差了，请稍后再试」。

  • 操作按钮

    • [返回首页] → 点击跳转到首页输入区。

6. 全局交互规范

  • 反馈方式

    • 成功 → 绿色 toast（自动消失 2s）。
    • 失败 → 红色 toast 或表单下方错误提示。

  • 加载状态

    • 表格、图表加载时显示 Loading 动画。
    • API 请求未完成时禁用相关按钮。

  • 移动端适配

    • 表格转卡片式展示。
    • 图表纵向排列。

  • 国际化

    • 错误提示 message 从错误码表映射到多语言文案。