|
Shang Gao
www.shanggao.net
© 2000-2026 Shang Gao. All rights reserved. 未经书面许可，不得用于商业用途。
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Read 33
UI Design System & GuidelinesWebsite Design Reference v1.0.0 1. Introduction介绍 Purpose · 目的
Reference Standards · 参考标准
Scope · 适用范围This document applies to the current website (Home Page + Content Pages + existing styles). Future product plans are out of scope. 本规范适用于当前网站（主页 + 内容页 + 现有样式）。未来的产品计划不在本规范范围内。 2. Design Principles设计原则 Five core principles · 五大核心原则：
3. Terminology术语对照 Page-Level · 页面级
Interactive Components · 交互组件
Layout Units · 布局单位
Navigation · 导航
States · 状态
4. Typography System字号系统
Base: Token Definitions
Responsive Scaling · 缩放/* Desktop: 100% (default) */
html { font-size: 100%; }
/* Tablet ≤ 900px */
@media (max-width: 900px) {
html { font-size: 90%; }
}
/* Mobile ≤ 640px */
@media (max-width: 640px) {
html { font-size: 85%; }
}
Effect · 效果：
Font Weight
Line Height
5. Spacing System间距系统 Base: 4px grid
Applications · 应用场景
6. Color System色彩系统 Site Theme (Dark) · 站点主题--bg
#0c148b
--bg-alt / --card
#0a1069
--text
#ffffff
--muted
#c3ceff
--accent
#66d9ff
--accent-hover
#8ae6ff
--border
#3d4fd8
--yellow
#ffd83d
Document Theme (Light) · 文档主题Used on content pages (articles, docs) for readability. 用于内容页（文章、文档），确保可读性。 --doc-bg
#ffffff
--doc-text
#1a1a2e
--doc-muted
#4b5568
--doc-accent
#2563eb
--doc-accent-soft
#dbeafe
--doc-card
#f9fafb
--doc-border
#e5e7eb
Status Colors · 状态色--success
#10b981
--warn
#ef4444
--gold
#f59e0b
Contrast (WCAG AA)
7. Radius & Shadow圆角与阴影 Radius
Shadow
8. Layout Structure布局结构 Page Hierarchy · 页面层级┌─────────────────────────────────┐
│ Header │
├─────────────────────────────────┤
│ │
│ Main Content │
│ │
│ ┌───────────────────────┐ │
│ │ Section │ │
│ │ ┌───────────┐ │ │
│ │ │ Card │ │ │
│ │ └───────────┘ │ │
│ └───────────────────────┘ │
│ │
├─────────────────────────────────┤
│ Footer │
└─────────────────────────────────┘
Container Width
9. Header顶部 Structure (Desktop)┌─────────────────────────────────────────┐
│ [Logo] [Clock] [Nav Items...] [☰] │
└─────────────────────────────────────────┘
Dimensions
Mobile (≤900px)
Mobile Header Height@media (max-width: 640px) {
:root { --header-height: 64px; }
}
10. Section区块 StructureSection Title
Section Subtitle
[Card] [Card] [Card]
Dimensions
Note · 注意
Section 副标题末尾不加句号。Section subtitles do NOT end with a period. 11. Card卡片 Structure┌───────────────────────────┐
│ [Icon] │
│ Card Title │
│ Sub-label: Body Text │
└───────────────────────────┘
Dimensions
States
12. Button按钮 Types
Dimensions
States
13. Form表单 StructureLabel
[Input field]
Label
[Textarea]
[Button] [Button]
Dimensions
States
14. Modal弹窗 Structure▒▒▒▒▒ Overlay ▒▒▒▒▒
┌─────────────────────┐
│ Modal Header [X] │
├─────────────────────┤
│ Countdown │
│ Modal Body │
│ ... │
├─────────────────────┤
│ Modal Footer │
└─────────────────────┘
Dimensions
15. Footer页脚 StructureFooter Trust Label
Client List
─────────────────────
[Col 1] [Col 2] [Col 3] [Col 4]
─────────────────────
Copyright (centered)
Dimensions
Changed in v1.1
移除了页脚时钟。版权信息改为居中显示，字号统一为 16. Content Page Structure内容页结构 All content (articles, milestones, projects, courses) follows a unified directory and URL structure. 所有内容（文章、里程碑、项目、课程）遵循统一的目录与 URL 结构。 Directory Structure · 目录结构{category}/
└── YYMMDDNN-slug/
├── index.php ← 正文
├── meta.php ← 元数据
└── assets/
└── index.php ← 安全跳转
Directory Naming · 目录命名
Examples · 示例： 26091300-Professional-Website-Design
26091301-专业网站首页设计
26091400-Second-Milestone
Parsing Rule · 解析规则
前 6 位是日期 URL Structure · URL 结构https://www.shanggao.net/{category}/{YYMMDDNN-slug}/
Example:
https://www.shanggao.net/milestones/26091300-Professional-Website-Design/
Reserved Categories · 预留分类
17. Content Page Header内容页头部 Content pages use a 3-column header. Height matches the main site header. 内容页采用三栏头部，高度与主站一致。 Structure — Desktop┌──────────────────────────────────────────────┐
│ [Logo] [Category Name] [Back] │
└──────────────────────────────────────────────┘
Structure — Mobile (≤640px)┌──────────────────────────────┐
│ [Logo] [📋] [←] │
└──────────────────────────────┘
Elements
Why a 📋 icon on mobile?
手机隐藏中间分类名后，会失去"回列表"入口。 Dimensions
Filter Button (List Page)List page header has an additional search box (desktop) / search icon (mobile). 列表页头部另有搜索框（桌面）/ 搜索图标（手机）。 18. Content Listing Page列表页
The listing page ( Structure┌─────────────────────────────────────────────────┐
│ Professional Website Design 1 Shang Gao · │
│ 2026-09-13 │
│ Completed the design and implementation... │
│ [web] [design] [php] [css] │
└─────────────────────────────────────────────────┘
Card Layout
Mobile (≤640px)
Content Sources
Posts are loaded via the shared $items = load_posts('milestones', null, dirname(__DIR__));
Sorting · 排序
By Home Page Block
The home page shows the latest 5 posts per category, with a "Coming soon ..." placeholder if fewer than 5.
主页每个分类区块显示最新 5 条；不足 5 条时补一条 19. Content Detail Page正文页 Structure┌──────────────────────────────────────────┐
│ [PDF / Print] [★ ★ ★ ★ ★] │ ← Actions
├──────────────────────────────────────────┤
│ Professional Website Design 1 │
│ 专业网站首页设计 │
│ Shang Gao · 2026-09-13 │
├──────────────────────────────────────────┤
│ ┌────────────────┬────────────────┐ │
│ │ What Was Built │ What Was Learned│ │
│ │ │ │ │
│ │ ... │ ... │ │
│ └────────────────┴────────────────┘ │
│ │
│ [Comparison Table] │
│ │
│ [Next Steps Cards] │
└──────────────────────────────────────────┘
Actions Bar
Document Header
Two-Column Grid
桌面双列（ 20. Print & PDF打印与 PDF Strategy · 策略
Print Layout · 打印版式
Page Header & Footer
Print header and footer are rendered via a <table class="print-table">
<thead>...页眉...</thead>
<tbody>...正文...</tbody>
<tfoot>...页脚...</tfoot>
</table>
Header Content · 页眉内容Shang Gao www.shanggao.net
© 2000-2026 Shang Gao. All rights reserved. 未经书面许可，不得用于商业用途。
Print CSS Rules
关键：卡片允许拆分
禁止打印 · Print Disabled
当 @media print {
body * { display: none !important; }
body::after {
content: "This content is for online viewing only.";
display: block;
padding: 80mm 20mm;
}
}
21. Meta Referencemeta.php 字段
Every post directory contains a Field List
Example<?php
if (!defined('ALLOW_META_LOAD')) {
http_response_code(404);
exit;
}
return [
'title' => 'Professional Website Design 1',
'slug' => '专业网站首页设计',
'date' => '260913',
'index' => '00',
'author' => 'Shang Gao',
'category' => 'milestones',
'tags' => ['web', 'design', 'php', 'css'],
'summary' => '...',
'summary_zh' => '...',
'cover' => '',
'lang' => 'en',
'status' => 'published',
'visibility' => 'public',
'allow_print' => true,
'allow_pdf' => true,
'pdf' => '',
];
22. Visibility & Permissions可见性与权限 Visibility Levels
PDF / Print Permissions
Critical Rule · 关键规则
权限检查必须在服务端（PHP）进行，不能只靠前端隐藏。 23. Security Guidelines安全规范 Core Rule · 核心规则前端隐藏 ≠ 后端保护
任何权限限制必须在服务端检查。前端隐藏只是"不显示"，不是"禁止访问"。 Implementation · 实施
Error Responses
Future · 未来
24. File Protection文件保护
敏感文件通过"加载常量"保护：只有被可信脚本 Protected Files
Pattern被保护文件的开头： <?php
if (!defined('ALLOW_CONFIG_LOAD')) {
http_response_code(404);
exit;
}
return [ ... ];
调用方： define('ALLOW_CONFIG_LOAD', true);
$config = require __DIR__ . '/config.php';
assets/ Protection
<?php
header('Location: ../index.php');
exit;
Note
25. Breakpoints断点
Media Queries/* Tablet + Mobile */
@media (max-width: 900px) { ... }
/* Mobile only */
@media (max-width: 640px) { ... }
Three breakpoints
使用三个命名断点：Mobile / Tablet / Desktop。Desktop 用默认样式（无媒体查询）。 26. Mobile-First Strategy移动优先 Flow · 流程
Key Techniques · 关键技巧
Why 85% on mobile?
手机屏幕窄，字号需按比例缩小，但 80% 偏小、90% 偏大，85% 是经验最优值。 27. CSS Class MappingCSS 类映射 Home Page
Content Pages
28. Framework Comparison框架对照
29. Changelog更新记录
— End of Document · 文档结束 — |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||