网上书店 UI设计规范
基于PRD文档的完整UI设计规范和页面设计
颜色规范
Primary
#2563eb
Primary Hover
#1d4ed8
Success
#16a34a
Warning
#f59e0b
Danger
#dc2226
Info
#0ea5e9
Text Primary
#1e293b
Text Secondary
#64748b
字体规范
H1 / 30px
网上书店
H2 / 24px
热门推荐
H3 / 20px
图书详情
H4 / 18px
章节标题
Body / 16px
正文内容，用于段落文字显示
Small / 14px
辅助说明文字
Caption / 12px
注释和标签文字
间距规范
4px (xs)
8px (sm)
16px (md)
24px (lg)
32px (xl)
48px (2xl)
组件规范
按钮 Buttons
支持多种状态和尺寸的按钮组件
输入框 Input
支持文本、密码、搜索等多种类型
待付款
已完成
处理中
已取消
标签 Badge
用于状态标识和分类标记
卡片标题
卡片内容区域
卡片 Card
用于内容分组和展示
¥39.90
¥59.90
价格 Price
用于商品价格展示
评分 Rating
用于用户评分展示
首页设计
图书详情页
📖
三体全集（典藏版）
¥93.00
¥168.00
5.5折
作者
刘慈欣
出版社
重庆出版社
出版日期
2019-10-01
ISBN
978-7-229-04873-3
库存
有货
数量
内容简介
《三体》是刘慈欣创作的长篇科幻小说，由《三体》、《三体Ⅱ·黑暗森林》、《三体Ⅲ·死神永生》组成，第一部于2006年起在《科幻世界》杂志上连载，第二部于2008年出版，第三部于2010年出版。
作品讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程。第一部经过刘宇昆翻译后获得了第73届雨果奖最佳长篇小说奖。
作者简介
刘慈欣，1963年6月出生于北京，山西阳泉人，中国当代科幻作家，中国科幻小说代表作家之一，被誉为"中国当代科幻第一人"。
用户评论
张
张三
2026-01-15
非常震撼的科幻作品，对宇宙和文明的思考令人叹为观止。强烈推荐！
李
李四
2026-01-10
故事构思宏大，但是有些地方读起来比较吃力，需要反复阅读。
购物车页
订单页
我的订单
订单号：2026011500001
已付款
📖
三体全集（典藏版）
¥93.00 × 1
📚
活着
¥19.80 × 2
订单号：2026011000002
已发货
📕
百年孤独
¥39.50 × 1
订单号：2026010500003
已完成
📗
小王子
¥22.00 × 1
用户中心 - 个人信息
个人信息
张
支持JPG、PNG格式，不超过2MB
管理后台
数据概览
管理员
管
今日销售额
¥12,580
↑ 12.5% 较昨日
今日订单数
86
↑ 8.3% 较昨日
新增用户
128
↓ 2.1% 较昨日
待处理订单
23
需要及时处理
最近订单
| 订单号 | 用户 | 商品 | 金额 | 状态 | 时间 | 操作 |
|---|---|---|---|---|---|---|
| 2026011500001 | 张三 | 三体全集 × 1 | ¥93.00 | 已完成 | 2026-01-15 14:30 |
|
| 2026011500002 | 李四 | 活着 × 2 | ¥39.60 | 已发货 | 2026-01-15 13:20 |
|
| 2026011500003 | 王五 | 百年孤独 × 1 | ¥39.50 | 待发货 | 2026-01-15 12:15 |
|
| 2026011500004 | 赵六 | 小王子 × 3 | ¥66.00 | 已取消 | 2026-01-15 11:00 |
|
图书管理
| ID | 封面 | 书名 | 作者 | 价格 | 库存 | 销量 | 状态 | 操作 |
|---|---|---|---|---|---|---|---|---|
| 1 | 📖 | 三体全集（典藏版） | 刘慈欣 | ¥93.00 | 256 | 12,580 | 上架 |
|
| 2 | 📚 | 活着 | 余华 | ¥19.80 | 520 | 8,920 | 上架 |
|
| 3 | 📕 | 百年孤独 | 加西亚·马尔克斯 | ¥39.50 | 180 | 5,430 | 上架 |
|
设计说明
设计原则
- 简洁清晰 - 界面布局简洁，信息层次分明，减少用户认知负担
- 一致性 - 统一的颜色、字体、间距和交互模式
- 可用性 - 符合用户习惯，操作流程直观
- 响应式 - 支持桌面端和移动端自适应布局
交互规范
- 悬停效果 - 按钮悬停变色，卡片悬停上浮
- 过渡动画 - 所有状态变化使用 0.2s 过渡动画
- 反馈提示 - 操作完成后给予明确的视觉反馈
- 加载状态 - 数据加载时显示骨架屏或加载动画
适配方案
- 桌面端 - 1200px 以上，5列图书网格
- 平板端 - 768px - 1024px，4列图书网格
- 移动端 - 480px 以下，2列图书网格
