「短网址服务」产品UI需求

By Leeting Yan

September 24, 2025

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 弹出）。