wangdl 849cad543b docs: add app pages brainstorm + 技术设计 DESIGN.md

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

2026-06-15 21:54:52 +08:00

35 KiB

Raw Blame History

name, version, description, platforms

name	version	description	platforms
知习 AI Design System	2.0	知习 AI — AI 驱动的知识学习平台。设计语言融合 Notion 的温润极简、Linear 的精准克制与 Apple 的质感表达，定位为"温润而聪慧"。全 Token 机器可读，AI 代理可直接引用。	iOS 18+ / iPadOS 18+ (优先), Web / Android 后续对齐

知习 AI 设计系统 v2.0

Overview

知习 AI 是一款 AI 驱动的知识学习平台，覆盖知识导入 → AI 分析 → 主动回忆 → 间隔复习全链路。设计系统以机器可读的 Token 为核心，每个组件通过 {section.token} 交叉引用， AI 编程代理无需"理解文意"即可精确还原 UI。

设计基因：

参考	采纳点	刻意不采纳
Notion	暖白底色、中性色分层、卡片圆角、非胶囊按钮	深海军蓝 Hero（学习场景忌压抑）
Linear	单主色克制、极致留白、精准字间距	纯黑底色（学习需要明亮感）
Apple (HIG)	SF Pro 全系、SF Symbols、Dynamic Type、Haptics	灰度按钮（学习场景需要明确的 CTA 色）

Colors

colors:

── 品牌主色 ──

primary: "#5B5FED" primary-pressed: "#4A4ECC" primary-deep: "#3B3EA8" primary-soft: "#EEEDFC" on-primary: "#FFFFFF" primary-gradient-start: "#5B5FED" primary-gradient-end: "#7B6FF0"

── 功能色 ──

accent-amber: "#F59E0B" accent-amber-soft: "#FEF3C7" accent-amber-deep: "#92400E" accent-coral: "#F87171" accent-coral-soft: "#FEE2E2" accent-coral-deep: "#991B1B" accent-mint: "#34D399" accent-mint-soft: "#D1FAE5" accent-mint-deep: "#065F46" accent-sky: "#60A5FA" accent-sky-soft: "#DBEAFE" accent-sky-deep: "#1E40AF"

── 中性色（暖灰体系） ──

canvas: "#FAFAF8" canvas-dark: "#1C1C1E" surface: "#F3F2F0" surface-dark: "#2C2C2E" surface-soft: "#FAFAF9" surface-soft-dark: "#242426" surface-elevated: "#FFFFFF" surface-elevated-dark: "#3A3A3C" hairline: "#E8E6E1" hairline-dark: "#38383A" hairline-soft: "#F0EEE9" hairline-soft-dark: "#303032" hairline-strong: "#D4D1CB" hairline-strong-dark: "#48484A" ink-primary: "#1E1B18" ink-primary-dark: "#FFFFFF" ink-secondary: "#6B6560" ink-secondary-dark: "#A1A1A6" ink-tertiary: "#9F9993" ink-tertiary-dark: "#636366" ink-inverse: "#FFFFFF" ink-inverse-dark: "#1E1B18" on-dark: "#FFFFFF" on-dark-muted: "#8E8E93"

── 知识库分类色（参考 Notion 数据库属性色） ──

kb-blue-bg: "#E8F0FE" kb-blue-fg: "#1967D2" kb-green-bg: "#E6F4EA" kb-green-fg: "#137333" kb-purple-bg: "#F1E8FD" kb-purple-fg: "#7627BF" kb-amber-bg: "#FEF7E0" kb-amber-fg: "#B06000" kb-rose-bg: "#FDE8EC" kb-rose-fg: "#B81C3C"

Typography

typography:

── 字体族 ──

font-display: "SF Pro Display, -apple-system, system-ui, sans-serif" font-text: "SF Pro Text, -apple-system, system-ui, sans-serif" font-mono: "SF Mono, Menlo, monospace"

── 字号层级 ──

hero: fontFamily: "{typography.font-display}" fontSize: 34pt fontWeight: 700 lineHeight: 1.12 letterSpacing: -0.5pt dynamicTypeStyle: largeTitle use: 页面大标题（如"我的知识库"）

title-1: fontFamily: "{typography.font-display}" fontSize: 28pt fontWeight: 700 lineHeight: 1.18 letterSpacing: -0.3pt dynamicTypeStyle: title1 use: 页面标题

title-2: fontFamily: "{typography.font-display}" fontSize: 22pt fontWeight: 600 lineHeight: 1.22 letterSpacing: -0.2pt dynamicTypeStyle: title2 use: 区块标题、卡片标题

title-3: fontFamily: "{typography.font-display}" fontSize: 20pt fontWeight: 600 lineHeight: 1.25 letterSpacing: -0.1pt dynamicTypeStyle: title3 use: 列表项标题、KB 卡片名称

headline: fontFamily: "{typography.font-text}" fontSize: 17pt fontWeight: 600 lineHeight: 1.29 letterSpacing: 0 dynamicTypeStyle: headline use: 段落小标题、Sheet 标题

body: fontFamily: "{typography.font-text}" fontSize: 17pt fontWeight: 400 lineHeight: 1.47 letterSpacing: 0 dynamicTypeStyle: body use: 正文、知识点内容、AI 回复正文

body-medium: fontFamily: "{typography.font-text}" fontSize: 17pt fontWeight: 500 lineHeight: 1.47 letterSpacing: 0 dynamicTypeStyle: body use: 列表行主标题（需要比 body 更突出）

body-sm: fontFamily: "{typography.font-text}" fontSize: 15pt fontWeight: 400 lineHeight: 1.47 letterSpacing: 0 dynamicTypeStyle: subheadline use: 辅助说明、卡片描述、副标题

body-sm-medium: fontFamily: "{typography.font-text}" fontSize: 15pt fontWeight: 500 lineHeight: 1.47 letterSpacing: 0 dynamicTypeStyle: subheadline use: Section Header 右侧"查看全部"

callout: fontFamily: "{typography.font-text}" fontSize: 14pt fontWeight: 500 lineHeight: 1.43 letterSpacing: 0 dynamicTypeStyle: callout use: 按钮文字、Tab 标签、Pill 标签

caption: fontFamily: "{typography.font-text}" fontSize: 13pt fontWeight: 400 lineHeight: 1.38 letterSpacing: 0 dynamicTypeStyle: caption1 use: 时间戳、元信息、输入框辅助文字

caption-bold: fontFamily: "{typography.font-text}" fontSize: 13pt fontWeight: 600 lineHeight: 1.38 letterSpacing: 0 dynamicTypeStyle: caption1 use: 徽章文字、强调标签

caption-2: fontFamily: "{typography.font-text}" fontSize: 11pt fontWeight: 500 lineHeight: 1.36 letterSpacing: 0.5pt dynamicTypeStyle: caption2 use: Tab Bar 文字、微小标签、角标数字

micro-caps: fontFamily: "{typography.font-text}" fontSize: 10pt fontWeight: 600 lineHeight: 1.30 letterSpacing: 1.2pt dynamicTypeStyle: caption2 use: 全大写标签（如"NEW""PRO"）

nav-title: fontFamily: "{typography.font-text}" fontSize: 17pt fontWeight: 600 lineHeight: 1.29 letterSpacing: 0 dynamicTypeStyle: headline use: 导航栏居中标题

Rounded

rounded: none: 0pt xs: 4pt sm: 6pt md: 10pt lg: 14pt xl: 20pt xxl: 24pt full: 9999pt

Border Radius Usage

Token	Value	Use
`{rounded.xs}`	4pt	Tag chips, small inline badges
`{rounded.sm}`	6pt	Badge backgrounds, color swatches
`{rounded.md}`	10pt	Buttons (NOT pills), inputs, list thumbnails
`{rounded.lg}`	14pt	Cards, panels, sheets
`{rounded.xl}`	20pt	KB cover cards, modals
`{rounded.xxl}`	24pt	Large feature cards
`{rounded.full}`	9999pt	Avatars, progress rings, pill-shaped filter chips

Spacing

spacing: xxs: 4pt xs: 8pt sm: 12pt md: 16pt lg: 20pt xl: 24pt xxl: 32pt xxxl: 40pt section: 48pt section-lg: 64pt hero: 80pt

Page Margin

Context	Horizontal	Vertical
pageMargin-h: 20pt	Main content area	—
pageMargin-card: 16pt	Inside cards	16pt
pageMargin-sheet: 24pt	Sheet / modal	20pt
pageMargin-listLeading: 20pt	List row without icon	—
pageMargin-listLeadingWithIcon: 68pt	List row with 40pt icon	—
pageMargin-listTrailing: 16pt	List row right edge	—

Grid

iPhone: Single column, 640pt max content width
iPad portrait: Single column, 640pt max
iPad landscape: KB grid 3 columns, 12pt gutter; lists max 720pt
Column gap (KB grid): {spacing.sm} (12pt)

Depth & Elevation

elevation: level-0: shadow: none use: 列表、正文区、无边框卡片 level-1: shadow: "0 1px 3px rgba(0,0,0,0.06)" use: 标准卡片、Section 面板 level-2: shadow: "0 4px 12px rgba(0,0,0,0.08)" use: 长按浮起、下拉菜单、Context Menu level-3: shadow: "0 -4px 20px rgba(0,0,0,0.10)" use: Sheet/弹窗、Modal

Dark Mode Elevation

In dark mode, shadows are invisible. Use brightness steps instead:

level-1: surface raised 1 step above canvas
level-2: surface raised 2 steps
level-3: surface raised 3 steps + 0.5pt {colors.hairline-dark} border

Components

7.1 Button

button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.callout}" rounded: "{rounded.md}" height: 50pt paddingH: 24pt minimumAccessibleSize: 44x44pt

button-primary-pressed: backgroundColor: "{colors.primary-pressed}" textColor: "{colors.on-primary}" typography: "{typography.callout}" rounded: "{rounded.md}" transform: scale(0.97)

button-primary-disabled: backgroundColor: "{colors.hairline}" textColor: "{colors.ink-tertiary}" typography: "{typography.callout}" rounded: "{rounded.md}" height: 50pt

button-secondary: backgroundColor: transparent textColor: "{colors.ink-primary}" typography: "{typography.callout}" rounded: "{rounded.md}" height: 50pt paddingH: 24pt border: "1.5pt solid {colors.hairline-strong}"

button-secondary-pressed: backgroundColor: "{colors.surface}" textColor: "{colors.ink-primary}" border: "1.5pt solid {colors.hairline-strong}" transform: scale(0.97)

button-tertiary: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.callout}" height: 44pt paddingH: 0 border: none

button-tertiary-pressed: textColor: "{colors.primary-pressed}"

button-icon: backgroundColor: transparent tintColor: "{colors.ink-secondary}" size: 44x44pt symbolConfig: "pointSize:22, weight:regular"

button-icon-pressed: tintColor: "{colors.primary}" transform: scale(0.92)

button-pill: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" typography: "{typography.callout}" rounded: "{rounded.full}" height: 34pt paddingH: 16pt

button-pill-selected: backgroundColor: "{colors.primary-soft}" textColor: "{colors.primary}" typography: "{typography.callout}"

button-destructive: backgroundColor: "{colors.accent-coral}" textColor: "{colors.on-primary}" typography: "{typography.callout}" rounded: "{rounded.md}" height: 50pt

7.2 Input

text-input: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink-primary}" placeholderColor: "{colors.ink-tertiary}" typography: "{typography.body}" rounded: "{rounded.md}" height: 50pt paddingH: "{spacing.md}" border: "1pt solid {colors.hairline-strong}"

text-input-focused: backgroundColor: "{colors.surface-elevated}" border: "2pt solid {colors.primary}" outerGlow: "0 0 0 3pt {colors.primary-soft}"

text-input-error: border: "2pt solid {colors.accent-coral}" outerGlow: "0 0 0 3pt {colors.accent-coral-soft}"

text-input-disabled: backgroundColor: "{colors.surface}" textColor: "{colors.ink-tertiary}" border: "1pt solid {colors.hairline}"

search-bar: backgroundColor: "{colors.surface}" textColor: "{colors.ink-primary}" placeholderColor: "{colors.ink-tertiary}" typography: "{typography.body}" rounded: "{rounded.md}" height: 40pt paddingH: "{spacing.sm}" icon: "magnifyingglass" iconColor: "{colors.ink-tertiary}"

7.3 Card

card-base: backgroundColor: "{colors.surface-elevated}" rounded: "{rounded.lg}" padding: "{spacing.md}" border: "0.5pt solid {colors.hairline}" elevation: "{elevation.level-1}"

card-kb-cover: width: flexible (grid column) rounded: "{rounded.xl}" topColorArea: height: 120pt backgroundColor: one of "{colors.kb--bg}" infoArea: height: 56pt backgroundColor: "{colors.surface-elevated}" padding: "{spacing.sm} {spacing.md}" icon: sfSymbol: "books.vertical.fill" size: 64pt color: matching "{colors.kb--fg}" position: centered in topColorArea title: typography: "{typography.title-3}" textColor: "{colors.ink-primary}" subtitle: typography: "{typography.caption}" textColor: "{colors.ink-tertiary}"

card-stat: width: ~148pt (flexible) backgroundColor: "{colors.surface-elevated}" rounded: "{rounded.lg}" padding: "{spacing.md}" elevation: "{elevation.level-1}" value: typography: "{typography.title-1}" textColor: "{colors.primary}" label: typography: "{typography.caption}" textColor: "{colors.ink-tertiary}"

card-chat-bubble-user: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: "{spacing.sm} {spacing.md}" maxWidth: 75% of container alignment: trailing

card-chat-bubble-ai: backgroundColor: "{colors.surface}" textColor: "{colors.ink-primary}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: "{spacing.sm} {spacing.md}" maxWidth: 85% of container alignment: leading

card-review-face: backgroundColor: "{colors.surface-elevated}" rounded: "{rounded.lg}" padding: "{spacing.xl}" elevation: "{elevation.level-1}" frontText: typography: "{typography.body}" textColor: "{colors.ink-primary}" backText: typography: "{typography.body}" textColor: "{colors.ink-secondary}"

tab-bar: backgroundColor: "{colors.surface-elevated}" topBorder: "0.5pt solid {colors.hairline}" height: 49pt + safeAreaBottom items: 5 (学习 / 知识库 / AI / 分析 / 我的)

tab-bar-item-selected: icon: fill variant iconColor: "{colors.primary}" textColor: "{colors.primary}" typography: "{typography.caption-2}" animation: spring(damping=0.7, duration=250ms)

tab-bar-item-unselected: icon: outline variant iconColor: "{colors.ink-tertiary}" textColor: "{colors.ink-tertiary}" typography: "{typography.caption-2}"

tab-bar-badge: backgroundColor: "{colors.accent-coral}" textColor: "{colors.on-primary}" typography: "{typography.caption-2}" size: 18pt diameter position: top-right of icon

navigation-bar-large: titleTypography: "{typography.hero}" titleColor: "{colors.ink-primary}" titleAlignment: leading collapseBehavior: "scrolls up into standard nav-bar"

navigation-bar-standard: backgroundColor: "{colors.canvas} @ 0.85 opacity + blur" titleTypography: "{typography.nav-title}" titleColor: "{colors.ink-primary}" titleAlignment: center backButton: system default chevron (DO NOT customize text or icon) trailingButtons: tintColor: "{colors.primary}" symbolConfig: "pointSize:22, weight:regular"

section-header: leadingText: typography: "{typography.body-sm-medium}" textColor: "{colors.ink-secondary}" trailingLink: typography: "{typography.body-sm-medium}" textColor: "{colors.primary}" text: "查看全部" padding: "{spacing.lg} {pageMargin-h} {spacing.sm}"

segmented-control: backgroundColor: "{colors.surface}" rounded: "{rounded.md}" height: 36pt

segmented-control-selected: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink-primary}" typography: "{typography.callout}" elevation: "{elevation.level-1}"

segmented-control-unselected: backgroundColor: transparent textColor: "{colors.ink-tertiary}" typography: "{typography.callout}"

7.5 List Row

list-row-standard: height: 52pt backgroundColor: "{colors.surface-elevated}" separatorColor: "{colors.hairline}" separatorInset: "{pageMargin-h}"

list-row-with-thumbnail: height: 64pt thumbnail: size: 40x40pt rounded: "{rounded.sm}" position: leading, centered vertically separatorInset: "{pageMargin-listLeadingWithIcon}"

list-row-title: typography: "{typography.body-medium}" textColor: "{colors.ink-primary}" maxLines: 1

list-row-subtitle: typography: "{typography.body-sm}" textColor: "{colors.ink-secondary}" maxLines: 1

list-row-trailing: typography: "{typography.caption}" textColor: "{colors.ink-tertiary}" accessory: chevron.right SF Symbol, 14pt

7.6 Badge & Tag

badge-review: backgroundColor: "{colors.accent-amber-soft}" textColor: "{colors.accent-amber-deep}" typography: "{typography.caption-bold}" rounded: "{rounded.xs}" padding: "3pt 8pt" text: "需复习"

badge-mastered: backgroundColor: "{colors.accent-mint-soft}" textColor: "{colors.accent-mint-deep}" typography: "{typography.caption-bold}" rounded: "{rounded.xs}" padding: "3pt 8pt" text: "已掌握"

badge-ai: backgroundColor: "{colors.primary-soft}" textColor: "{colors.primary}" typography: "{typography.caption-bold}" rounded: "{rounded.xs}" padding: "3pt 8pt" text: "AI 推荐"

badge-new: backgroundColor: "{colors.accent-coral-soft}" textColor: "{colors.accent-coral-deep}" typography: "{typography.micro-caps}" rounded: "{rounded.xs}" padding: "2pt 6pt" text: "NEW"

7.7 Progress

progress-bar: trackColor: "{colors.hairline}" trackHeight: 6pt trackRounded: 3pt fillColor: "{colors.primary}" fillRounded: 3pt animation: 600ms ease-out on width change

progress-bar-amber: fillColor: "{colors.accent-amber}"

progress-bar-mint: fillColor: "{colors.accent-mint}"

progress-ring: size: 80pt diameter trackColor: "{colors.hairline}" trackWidth: 6pt fillColor: "{colors.primary}" fillWidth: 6pt centerText: typography: "{typography.title-2}" textColor: "{colors.ink-primary}" animation: 800ms ease-out on strokeEnd

7.8 Toggle / Switch

toggle-on: trackColor: "{colors.primary}" thumbColor: "{colors.on-primary}"

toggle-off: trackColor: "{colors.hairline-strong}" thumbColor: "{colors.surface-elevated}"

7.9 Action Sheet

action-sheet: backgroundColor: "{colors.surface-elevated}" rounded: "{rounded.lg}" titleTypography: "{typography.headline}" destructiveButton: textColor: "{colors.accent-coral}" cancelButton: textColor: "{colors.ink-primary}" fontWeight: 600

7.10 Toast / Banner

toast: backgroundColor: "{colors.ink-primary}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}" position: bottom of safe area + 16pt animation: slide up 300ms spring, auto-dismiss 3s icon: optional leading SF Symbol 16pt

7.11 Skeleton

skeleton: backgroundColor: "{colors.hairline}" rounded: "{rounded.md}" animation: pulse 1.5s ease-in-out infinite brightnessRange: 0.6 — 1.0

7.12 Rating Button Group (复习评分)

rating-group: layout: horizontal, equal width spacing: "{spacing.sm}" paddingH: "{pageMargin-h}"

rating-button-again: backgroundColor: "{colors.accent-coral-soft}" textColor: "{colors.accent-coral-deep}" typography: "{typography.callout}" rounded: "{rounded.md}" height: 48pt icon: "arrow.counterclockwise" label: "再来一次"

rating-button-hard: backgroundColor: "{colors.accent-amber-soft}" textColor: "{colors.accent-amber-deep}" typography: "{typography.callout}" rounded: "{rounded.md}" height: 48pt icon: "hand.thumbsup" label: "有些难"

rating-button-good: backgroundColor: "{colors.accent-mint-soft}" textColor: "{colors.accent-mint-deep}" typography: "{typography.callout}" rounded: "{rounded.md}" height: 48pt icon: "hand.thumbsup.fill" label: "记住了"

7.13 Empty State

empty-state: layout: centered vertically & horizontally icon: sfSymbol: "tray" (or "sparkles" for AI, "chart.bar" for Analysis) size: 48pt color: "{colors.ink-tertiary}" title: typography: "{typography.body}" textColor: "{colors.ink-secondary}" description: typography: "{typography.body-sm}" textColor: "{colors.ink-tertiary}" maxLines: 2 action: component: "{components.button-secondary}" marginTop: "{spacing.md}"

7.14 Error State

error-state: extends: "{components.empty-state}" icon: sfSymbol: "wifi.slash" action: text: "重试" component: "{components.button-tertiary}"

Animation

animation:

默认过渡

default-duration: 200ms default-curve: ease-out

页面导航

push-duration: 300ms push-curve: ease-out pop-duration: 250ms pop-curve: ease-in

Sheet

sheet-present-duration: 350ms sheet-present-curve: "spring(damping=0.85, response=0.35)" sheet-dismiss-duration: 250ms sheet-dismiss-curve: ease-in

按压反馈

press-scale: 0.97 press-duration: 150ms press-curve: ease-out

Tab 图标

tab-select-duration: 250ms tab-select-curve: "spring(damping=0.7, response=0.3)"

AI 内容生成

ai-reveal-duration: 400ms ai-reveal-curve: ease-out ai-reveal-effect: "opacity 0→1 + translateY 8pt→0"

AI 思考指示器

ai-thinking-dot-size: 6pt ai-thinking-dot-spacing: 6pt ai-thinking-dot-color: "{colors.primary}" ai-thinking-scale-sequence: "1.0 → 1.4 → 1.0" ai-thinking-interval: 200ms ai-thinking-label: "AI 正在思考…" ai-thinking-label-typography: "{typography.body-sm}" ai-thinking-label-color: "{colors.ink-tertiary}"

消息气泡

chat-bubble-ai-duration: 400ms chat-bubble-ai-effect: "opacity + translateY 8pt" chat-bubble-user-duration: 200ms chat-bubble-user-effect: "opacity + translateY 4pt"

列表入场

list-stagger-duration: 300ms list-stagger-delay: 50ms list-stagger-effect: "opacity + translateY 20pt→0"

进度

progress-fill-duration: 600ms progress-ring-fill-duration: 800ms

复习卡片翻转

card-flip-duration: 400ms card-flip-curve: ease-in-out card-flip-effect: "3D perspective rotateY(180deg)"

禁止的动画

forbidden: - "打字机逐字动画（AI 回复用整段渐现）" - "无限弹跳循环" - "旋转加载指示器（使用系统 UIActivityIndicator）" - "百叶窗/翻页切换" - "自动轮播 onboarding"

Haptics

haptics: light: iOS: "UIImpactFeedbackGenerator(style: .light)" use: 按钮点击、Tab 切换、列表选择 medium: iOS: "UIImpactFeedbackGenerator(style: .medium)" use: 刷新完成、AI 回答到达、Sheet 弹出 heavy: iOS: "UIImpactFeedbackGenerator(style: .heavy)" use: 学习成就达成、连续打卡里程碑、卡片翻面 selection: iOS: "UISelectionFeedbackGenerator()" use: Picker 滚动、滑块拖动 notification-error: iOS: "UINotificationFeedbackGenerator(.error)" use: 操作失败、网络错误 notification-success: iOS: "UINotificationFeedbackGenerator(.success)" use: 导入完成、知识点已掌握

Icons

icons: source: "SF Symbols 6.0+ (iOS 18 minimum)" rendering: "hierarchical (outline default, fill on selected)" sizes: tabBar: 25pt navigationBar: 22pt listRow: 20pt kb-cover: 64pt emptyState: 48pt toast: 16pt badge: 12pt

语义映射

symbol-knowledgeBase: "books.vertical" symbol-ai: "sparkles" symbol-study: "brain.head.profile" symbol-analysis: "chart.bar" symbol-profile: "person.crop.circle" symbol-search: "magnifyingglass" symbol-add: "plus" symbol-close: "xmark" symbol-chevron: "chevron.right" symbol-check: "checkmark.circle.fill" symbol-warning: "exclamationmark.triangle" symbol-error: "wifi.slash" symbol-empty: "tray" symbol-review: "arrow.triangle.2.circlepath" symbol-notification: "bell" symbol-settings: "gearshape" symbol-feedback: "pencil.and.scribble" symbol-goal: "target" symbol-time: "clock" symbol-streak: "flame" symbol-mastery: "star.circle.fill"

Layout Patterns

5-Tab Structure

┌──────────┬──────────┬──────────┬──────────┬──────────┐
│  学习     │  知识库    │   AI     │  分析     │   我的    │
└──────────┴──────────┴──────────┴──────────┴──────────┘

StudyHome (学习) Layout

┌──────────────────────────────────┐
│  NavBar large: "学习"             │
│  ┌──────────────────────────────┐│
│  │ card-stat-group              ││ ← 今日进度环 + 数据（掌握 12 · 待复习 4）
│  └──────────────────────────────┘│
│  ┌──────────────────────────────┐│
│  │ list-row: "继续学习" →       ││ ← 上次会话快捷入口
│  └──────────────────────────────┘│
│  section-header: "今日推荐" →    │
│  [card][card][card] 水平滚动     │ ← 推荐知识点
│  section-header: "复习队列"       │
│  list-row × N (含 badge-review) │
└──────────────────────────────────┘

LibraryHome (知识库) Layout

┌──────────────────────────────────┐
│  NavBar large: "知识库"           │
│  search-bar                      │
│  ┌──────────┐ ┌──────────┐      │
│  │ card-kb  │ │ card-kb  │      │ ← 2 列网格
│  └──────────┘ └──────────┘      │
│  ┌──────────┐ ┌──────────┐      │
│  │ card-kb  │ │ + 新建立   │      │
│  └──────────┘ └──────────┘      │
└──────────────────────────────────┘

AiHome (AI) Layout

┌──────────────────────────────────┐
│  NavBar large: "AI" + sparkles   │
│  ┌──────────────────────────────┐│
│  │     ✨ 大图标                  ││
│  │   今天想学什么？               ││
│  │   我可以帮你解释、出题、分析…  ││
│  └──────────────────────────────┘│
│  section-header: "建议"           │
│  card × 3 (建议问题，点击即对话)  │
│  ── fixed bottom ──              │
│  text-input + mic icon           │
└──────────────────────────────────┘

AnalysisHome (分析) Layout

┌──────────────────────────────────┐
│  NavBar large: "学习分析"         │
│  ┌──────────────────────────────┐│
│  │ 本周学习时长 · 柱状图          ││
│  └──────────────────────────────┘│
│  card-stat                card-stat
│  ┌──────┐  ┌──────┐             │
│  │ 78%  │  │ 5天  │             │
│  │掌握率 │  │连续  │             │
│  └──────┘  └──────┘             │
│  section-header: "AI 学习建议"    │
│  card: AI 分析建议文             │
└──────────────────────────────────┘

Profile (我的) Layout

┌──────────────────────────────────┐
│  ┌──────────────────────────────┐│
│  │ ● 头像 64pt                   ││
│  │ 昵称 · 学习方向               ││
│  └──────────────────────────────┘│
│  list-row: 学习偏好 →           │
│  list-row: 目标设定 →           │
│  list-row: 通知管理 →           │
│  list-row: 意见反馈 →           │
│  list-row: 设置 →               │
└──────────────────────────────────┘

Interaction

Gestures

Gesture	Context	Feedback
Swipe left	List row: delete / archive	Red action button reveals
Long press	KB card: context menu	`{haptics.medium}` + card elevated to `{elevation.level-2}`
Pull down	List / home: refresh	System spinner + data reload
Edge swipe right	Any pushed page: back	System default edge gesture
Double tap	Review card: flip	`{animation.card-flip}` + `{haptics.heavy}`

Keyboard (iPad)

Focus ring: {colors.primary} 2pt outline with {colors.primary-soft} outer glow
Tab order: logical reading order (top→bottom, left→right)
⌘K: Global search / command palette (if implemented)

Page ↔ Component Mapping

iOS Page	Layout Pattern	Key Components
AIHomeView	Hero + suggestion list	`card-base`, `section-header`, `text-input`
AIChatPage	Message stream	`card-chat-bubble-user`, `card-chat-bubble-ai`, `ai-thinking`
ActiveRecallView	Q&A card	`card-review-face`, `text-input`, `progress-bar`
RecallTestPage	Full-screen test	`progress-bar`, `button-primary`, timer (monospaced)
DailyThinkingPage	Dated list	`list-row-standard` with date grouping
WeakPointsPage	Item list	`list-row-standard`, `badge-review` / `badge-ai`
AIFeedbackPageView	Analysis cards	`card-base`, `badge-ai`
LibraryHomeView	2-col grid + search	`card-kb-cover`, `search-bar`
LibrarySubpages	List / detail	`list-row-with-thumbnail`, `card-base`
StudyHomeView	Hero + horizontal scroll	`progress-ring`, `card-stat`, `card-base`
LearningSessionView	Immersive learning	`card-review-face`, `progress-bar`
ReviewCardView	Flashcard flip	`card-review-face`, `rating-group`
AnalysisHomeView	Charts + stats	`progress-ring`, `card-stat`, `card-base`
ProfileView	Static list	`list-row-standard`, avatar
EditProfilePage	Form	`text-input`, avatar, `button-primary`
SettingsView	List with toggles	`list-row-standard`, `toggle`
NotificationListView	Dated list	`list-row-standard`, `badge-new`
GoalSettingDetailView	Form + list	`text-input`, `card-stat`, `progress-bar`
MethodPreferenceView	Multi-select list	`list-row-standard` with checkmark
FeedbackFormView	Form	`text-input` (multiline), `button-primary`

Dark Mode

dark-mode: strategy: "system follows user preference (automatic)" mapping: canvas: "{colors.canvas-dark}" surface: "{colors.surface-dark}" surface-soft: "{colors.surface-soft-dark}" surface-elevated: "{colors.surface-elevated-dark}" hairline: "{colors.hairline-dark}" hairline-soft: "{colors.hairline-soft-dark}" hairline-strong: "{colors.hairline-strong-dark}" ink-primary: "{colors.ink-primary-dark}" ink-secondary: "{colors.ink-secondary-dark}" ink-tertiary: "{colors.ink-tertiary-dark}" elevation: # Shadows invisible in dark mode; use brightness steps level-1: surface raised 1 step above canvas level-2: surface raised 2 steps level-3: surface raised 3 steps + 0.5pt border hairline-dark accentBehavior: # Functional colors keep same hue, slightly desaturated for dark primary: unchanged (has enough contrast on dark surfaces) kb-colors: use bg variants at 50% opacity

Responsive Behavior

responsive: breakpoints: iPhone: "320—430pt width (compact)" iPad-portrait: "744—820pt width (regular, single column max 640pt)" iPad-landscape: "1024—1366pt width (regular, KB grid → 3 columns, lists max 720pt)"

touch-targets: minimum: 44×44pt (HIG) ideal: 48×48pt for primary actions

collapsing-navigation: large-title: visible at scroll top scroll-past: collapses to standard nav-bar with centered title threshold: 20pt scroll offset

text-scaling: all typography tokens mapped to dynamicTypeStyle supported sizes: xSmall, small, medium, large, xLarge, xxLarge, xxxLarge layout adjustments: grids may drop to single column at accessibility sizes

Do's & Don'ts

do:

"Use {colors.canvas} for page background"
"Use {colors.surface-elevated} for cards and sheets"
"Use {colors.primary} only on interactive elements (buttons, links, selected states)"
"Maximum one primary button per screen"
"AI-generated content: use {animation.ai-reveal} (fade + slide)"
"All spacing must be from the {spacing} scale"
"Use SF Symbols exclusively — no third-party icon libraries"
"Minimum touch target 44×44pt for all interactive elements"
"Cards: {rounded.lg}; Buttons: {rounded.md}; Tags: {rounded.xs}"

dont:

"NEVER use #000000 for text — use {colors.ink-primary}"
"NEVER use pure #FFFFFF for backgrounds — use {colors.canvas} or {colors.surface-elevated}"
"NEVER use {rounded.full} on buttons — pills are for filter chips and tags only"
"NEVER stack heavy shadows (level-2 or higher) on more than one element per screen"
"NEVER auto-play video"
"NEVER nest modals inside modals"
"NEVER customize navigation bar back button text or icon"
"NEVER use neon/fluorescent colors (#00FF00, #FF00FF, etc.)"
"NEVER use horizontal-scroll onboarding carousels"
"NEVER use typewriter animation for AI responses — use whole-block {animation.ai-reveal}"

Agent Prompt Quick Reference

Build this page using the 知习 AI Design System:

COLORS:
  primary CTA:       {colors.primary}        #5B5FED
  page background:   {colors.canvas}         #FAFAF8
  card background:   {colors.surface-elevated} #FFFFFF
  body text:         {colors.ink-primary}    #1E1B18
  secondary text:    {colors.ink-secondary}  #6B6560
  divider:           {colors.hairline}       #E8E6E1
  success:           {colors.accent-mint}    #34D399 / bg {colors.accent-mint-soft}
  warning:           {colors.accent-amber}   #F59E0B / bg {colors.accent-amber-soft}
  error:             {colors.accent-coral}   #F87171 / bg {colors.accent-coral-soft}

TYPOGRAPHY:
  page title: 34pt / 700 / -0.5pt tracking
  card title: 22pt / 600 / -0.2pt tracking
  body text:  17pt / 400 / 1.47 line-height
  button:     14pt / 500
  caption:    13pt / 400

RADIUS:
  buttons: 10pt | cards: 14pt | tags: 6pt

SPACING: 4pt grid — page margins 20pt, card padding 16pt

ANIMATION: 200ms ease-out default; AI content 400ms fade+slide(8pt)

FORBIDDEN: pure black text, pure white bg, pill buttons, heavy shadows,
           neon colors, typewriter animation, carousel onboarding

Known Gaps

Animation timing functions documented as CSS keywords (ease-out, spring); iOS-native equivalents (CAMediaTimingFunction, UISpringTimingParameters) need per-platform mapping
Chart/Data Visualization section is minimal — AnalysisHomeView bar chart needs full spec (axis labels, grid lines, bar width, gap, legend)
Markdown rendering inside AI responses (code blocks, inline code, bold, lists) is not yet specified
Audio playback (voice input for AI) has no UI spec — waveform, recording state, playback controls
Offline mode visual indicators (sync status icons, stale data banners) not designed
Accessibility beyond Dynamic Type — VoiceOver labels, Magic Tap, accessibility actions not enumerated per component
Sign-in / Onboarding flow — Apple Sign In button, email verification, onboarding questions UI not specified
Notification content — push notification card design (iOS notification extension) not covered
The kb-*-bg / kb-*-fg color tokens work for 5 categories; a 6th+ category needs either rotation or user-custom color

35 KiB Raw Blame History Unescape Escape