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

短网址服务页面设计要点汇总

1. 首页（短链生成页）

目标：让用户在最短路径内完成「输入长链 → 获取短链+二维码」

模块与要点

  1. 输入区域

    • 输入框：支持粘贴长链，自动去掉前后空格。

    • 占位符示例：请输入或粘贴长链接

    • 可选项：

      • 自定义短码（额外输入框，显示「可选」标识）
      • 有效期选择（下拉框：7天/30天/永久）

  2. 生成按钮

    • 主按钮：高亮「生成短链」
    • 点击后进入 Loading 状态，避免重复提交。

  3. 结果展示

    • 短链显示区：带一键复制按钮（提示「已复制」）
    • 二维码展示：支持下载（PNG/SVG），hover/点击可放大。
    • 补充：显示过期时间信息。

  4. 引导与入口

    • 顶部导航：登录/注册入口、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 → 表格+图表（管理+统计）
  • 登录注册 → 简洁直观
  • 异常页 → 友好提示

短网址服务用户操作流程图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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. 首页（短链生成页）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

-------------------------------------------------------
 LOGO / 系统名称                    登录 | 注册 | Dashboard
-------------------------------------------------------
 [ 输入长链接 ................................. ] 
 [ 可选: 自定义短码 .... ]   [ 有效期选择 ▼ ]

 [ 生成短链 ]   ← 主操作按钮，高亮

-------------------------------------------------------
 生成结果（生成后展示区域）
 短链: https://s.io/abc123   [复制按钮]
 二维码: [二维码图片] [下载按钮]
 到期时间: 2025-10-24

 [提示: 登录后可保存历史记录并查看统计 → 去登录]
-------------------------------------------------------
 Footer: © 2025 ShortURL | API文档 | 帮助

交互要点

  • 输入框聚焦时高亮，支持粘贴。
  • 生成按钮点击后进入 Loading 状态，避免重复提交。
  • 生成后短链展示带 一键复制 和 二维码下载。
  • 游客用户结果区域显示“引导登录”提示。

2. 登录 / 注册页

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

-------------------------------------------------------
 LOGO
-------------------------------------------------------
 [邮箱输入框] 
 [密码输入框]
 [ 登录按钮 ]

 [ ] 记住我      [ 忘记密码 ]

 还没有账号？ [ 注册入口 ]
-------------------------------------------------------

注册页类似，多一个“确认密码”和“协议勾选”。

3. 用户 Dashboard

3.1 短链管理列表

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

-------------------------------------------------------
 左侧导航栏：
  - 短链管理
  - 数据统计
  - 用户设置
-------------------------------------------------------
 短链管理页
-------------------------------------------------------
 搜索框: [ 输入短码/原始URL ] [搜索]

 表格:
 ---------------------------------------------------------
 | 短链         | 原始链接      | 点击量 | 到期时间 | 操作 |
 ---------------------------------------------------------
 | s.io/abc123  | example.com.. |  1023  | 2025-10-01 | [复制] [二维码] [修改] [删除]
 | s.io/myshop  | shop.com/...  |   223  | 永久      | [复制] [二维码] [修改] [删除]
 ---------------------------------------------------------
 分页控件:  « 1 2 3 ... »
-------------------------------------------------------

交互要点

  • 列表分页，支持模糊搜索。
  • 操作区按钮用图标（复制、二维码、编辑、删除）。
  • 删除有二次确认弹窗。
  • 已过期短链灰显。

3.2 数据统计页

1
2
3
4
5
6
7
8

-------------------------------------------------------
 访问趋势（折线图）
 [ 日期选择器: 近7天 / 近30天 / 自定义区间 ]
-------------------------------------------------------
 来源分布（饼图）      设备分布（饼图）
-------------------------------------------------------
 地理分布（地图热力图）
-------------------------------------------------------

交互要点

  • 当无数据时显示「暂无统计数据」。
  • 图表区支持 Hover 查看详细数值。
  • 时间选择器实时刷新数据。

3.3 用户设置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

-------------------------------------------------------
 用户信息
 邮箱: xxx@example.com
 [ 修改密码 ]

 API Key 管理
 ---------------------------------------------------------
 | Key (部分打码)    | 创建时间 | 有效期   | 操作 |
 ---------------------------------------------------------
 | abcd****xyz       | 2025-09-20 | 永久    | [删除]
 ---------------------------------------------------------
 [ 生成新的 API Key ]

 自定义域名
 [ 输入域名 ........ ]  [ 校验按钮 ]
 (提示: 需配置 DNS 解析)
-------------------------------------------------------

4. API 文档页

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

-------------------------------------------------------
 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. 错误/异常页面

短链不存在/已过期

1
2
3
4

-------------------------------------------------------
 ❌ 短链不存在或已过期
-------------------------------------------------------
 [ 返回首页 ]

系统错误

1
2
3
4

-------------------------------------------------------
 ⚠️ 系统开小差了，请稍后再试
-------------------------------------------------------
 [ 返回首页 ]

页面设计汇总重点（和交互沟通要点）

  1. 首页 → 极简，输入框 + 一键生成，生成结果区域需要短链复制 & 二维码下载。

  2. Dashboard → 核心，包含「表格管理」+「数据统计图表」+「用户设置」。

  3. 移动端适配 → 表格转卡片式展示，按钮排列纵向。

  4. 交互细节 →

    • 操作按钮均需 hover 提示（如“复制短链”）。
    • 删除、覆盖等操作必须二次确认。
    • 成功/失败操作统一反馈（toast 弹出）。