rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
83e846f9dcbf3d0be942e340c6f60724d0ee923f
quyun-v2/docs/design/portal/GLOBAL.md
Rogee 83e846f9dc feat: add pages
2025-12-25 23:52:41 +08:00

6.7 KiB
Raw Blame History

Portal 全局设计准则 (Global Design Guidelines)

适用范围: PC 端 Portal 站点 核心风格: 内容型（浅灰背景 + 白色卡片），强调信息层级与阅读体验。

1. 全局布局 (Layout & Container)

采用经典的垂直分布布局，确保内容区域聚焦且具备良好的扩展性。

1.1 页面结构 (DOM Structure)

  • Root: min-h-screen flex flex-col bg-slate-50 (浅灰背景，hex: #F8FAFC)
    • Header: fixed top-0 w-full z-50 (固定顶部)
    • Main: flex-grow pt-16 (内容自适应填充，顶部留出 Header 高度)
    • Footer: mt-auto (页脚沉底)

1.2 核心容器 (Main Container)

所有页面核心内容需包裹在标准容器内，以保证视觉统一。

  • 宽度限制: max-w-screen-xl (Tailwind default: 1280px)
  • 对齐方式: mx-auto (水平居中)
  • 内边距: px-4 sm:px-6 lg:px-8 (响应式呼吸感)
  • 示例代码: 
    <main class="flex-grow pt-16">
  <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8">
    <!-- Page Content Here -->
  </div>
</main>

1.3 基础色彩规范 (Basic Colors)

  • 背景色: bg-slate-50 (页面底色)
  • 卡片色: bg-white (内容承载)
  • 边框色: border-slate-200 (轻微分割线)
  • 文字色:
    • 主要: text-slate-900 (标题、正文)
    • 次要: text-slate-500 (描述、辅助信息)
    • 链接: text-primary-600 hover:text-primary-700

2. 顶部导航栏 (TopNavbar)

全局常驻入口，承载品牌认知与核心路径导航。

2.1 外观 (Appearance)

  • 尺寸: 高度 h-16 (64px)
  • 背景: bg-white (纯白背景)
  • 质感: border-b border-slate-200 或 shadow-sm (轻微投影，提升层级)

2.2 布局 (Flex Grid)

flex items-center justify-between + Container

区域 元素 交互/样式
Left Logo 图片/SVG + 文字，点击回首页 (/)。高度控制在 32-40px。
Center-Left Nav Links 首页、分类、标签等。间距 space-x-8。
Default: text-slate-600 font-medium
Hover: text-primary-600
Active: text-primary-600
Center-Right Global Search 圆角矩形输入框 rounded-full 或 rounded-lg。
bg-slate-100 focus:bg-white focus:ring。
宽度：默认 w-64，聚焦时可伸展。
Right User Actions 未登录:
- [登录]: Ghost Button (text-slate-600 hover:bg-slate-50)
- [注册]: Primary Button (bg-primary-600 text-white)
已登录:
- [通知]: Bell Icon (h-10 w-10 flex items-center justify-center rounded-full hover:bg-slate-100 relative)。
- Badge: 右上角红色圆点或数字，表示未读。
- 交互: 点击直接跳转至 /me/notifications。
- [头像]: Avatar + Dropdown Menu

3. 页脚 (Footer)

全局底部信息区，采用深色风格以稳定视觉重心。

3.1 外观 (Appearance)

  • 背景: bg-slate-900 (深色)
  • 文字: text-slate-400 (灰色文本，避免纯白刺眼)
  • 链接: Hover 时变亮 hover:text-white

3.2 内容结构

  • Upper Section (Links): py-12
    • Grid 布局 (3-4 列)
    • 栏目：关于我们、帮助中心、法律条款、关注我们 (Social Icons)
  • Bottom Section (Copyright): border-t border-slate-800 py-6
    • 版权声明 (© 2025 Quyun)
    • ICP 备案号 / 公安网备

4. 通用 UI 元素 (Common Components)

4.1 内容卡片 (Content Card)

用于承载列表项、详情块等。

  • 样式: bg-white rounded-lg border border-slate-100 shadow-sm transition-shadow hover:shadow-md
  • 内边距: p-4 或 p-6

4.2 按钮 (Buttons)

针对中老年用户优化：增大点击区域与文字标签

  • Primary: bg-primary-600 text-white hover:bg-primary-700 rounded-lg px-6 py-3 text-lg h-12 flex items-center justify-center
  • Secondary/Outline: border-2 border-slate-300 text-slate-800 hover:bg-slate-50 rounded-lg px-6 py-3 text-lg h-12 flex items-center justify-center
  • Ghost: text-slate-700 hover:bg-slate-100 rounded-lg px-4 py-3 text-lg h-12 flex items-center justify-center
  • 说明: 按钮高度至少 48px (h-12)，边框适当加粗以便识别。

4.3 标题与文字 (Typography)

针对中老年用户优化：提升基准字号与行高

  • Root Font Size: PC 端默认 16px，允许用户浏览器缩放。
  • Body Text: text-base (16px) 或 text-lg (18px)，行高 leading-relaxed (1.625)。
  • H1 (页面主标题): text-3xl sm:text-4xl font-bold text-slate-900 mb-6
  • H2 (区块标题): text-2xl font-bold text-slate-900 mb-5
  • H3 (小标题): text-xl font-semibold text-slate-900 mb-3
  • 辅助文字: 避免使用小于 14px 的文字。辅助色最低为 text-slate-600 (保证 4.5:1 对比度)。

4.4 输入框 (Inputs)

  • 尺寸: 高度 h-12 (48px) 或 h-14 (56px)。
  • 样式: text-lg px-4 border-slate-300 focus:border-primary-600 focus:ring-2。
  • Label: 必须显示 Label，字号 text-base 或 text-lg，不建议仅用 placeholder。

5. 响应式与可访问性 (Responsive & Accessibility)

确保站点在移动端具备良好体验，并符合 WCAG 可访问性标准，特别关注中老年用户体验。

5.1 TopNavbar 响应式策略 (Mobile Adaptation)

当视口宽度小于 md (768px) 时，导航栏需进行自适应折叠。

  • 导航链接: 收纳至左侧或右侧的 汉堡菜单 (Hamburger Menu)。
    • 菜单图标需显著，加文字标签 "菜单" 辅助识别。
    • 抽屉内菜单项字号 text-lg，行高宽松。
  • 全局搜索:
    • 默认状态: 仅展示搜索图标 (Magnifying Glass)。
    • 交互状态: 点击图标后，展开全宽搜索栏覆盖 Logo 或 弹出模态搜索框。
  • 用户区:
    • 若空间允许，保留头像/登录按钮；若空间不足，并入汉堡菜单底部。

5.2 键盘导航与焦点 (Keyboard & Focus)

  • Focus Visible: 所有交互元素（链接、按钮、输入框）在键盘聚焦时必须有清晰的可见轮廓。
    • 推荐样式: focus-visible:ring-4 focus-visible:ring-primary-400 focus-visible:outline-none (加宽 Ring 宽度)。
  • Skip Link: 页面首个可聚焦元素应为 "跳转至主要内容 (Skip to main content)"。

5.3 触控目标 (Touch Targets)

  • 最小点击面积: 移动端交互元素的可点击区域必须 \ge 48 \times 48 px (Tailwind min-h-[48px] min-w-[48px])。
    • 按钮间距 gap-4 以上，防止误触。

5.4 ARIA 与语义化 (Semantics)

  • 表单标签: 所有 <input> 必须有对应的可视 <label>。
  • 高对比度: 文本与背景对比度至少 4.5:1 (WCAG AA)，关键信息追求 7:1 (WCAG AAA)。避免使用浅灰文字。
Reference in New Issue View Git Blame Copy Permalink