设计师工作流

设计师需要在灵感、素材和项目之间高效切换。Obsidian 的链接和嵌入功能特别适合构建设计知识库。

工作流概览

text

灵感捕获 → 素材整理 → 设计规范 → 项目文档 → 作品集

仓库结构

text

设计知识库/
├── 00-Inbox/              # 灵感收集箱
├── 01-灵感/
│   ├── 视觉参考/
│   ├── 色彩灵感/
│   ├── 排版参考/
│   └── 交互案例/
├── 02-素材库/
│   ├── 图标/
│   ├── 字体/
│   ├── 配色方案/
│   └── 组件/
├── 03-设计规范/
│   ├── 品牌规范/
│   ├── 组件库/
│   └── 设计令牌/
├── 04-项目/
│   ├── 项目A/
│   └── 项目B/
├── 05-学习笔记/
│   ├── 设计理论/
│   ├── 工具教程/
│   └── 行业动态/
├── 06-作品集/
│   ├── 2024/
│   └── 2023/
└── Daily/                 # 日记

灵感收集

使用 Web Clipper 采集

安装 Obsidian Web Clipper 浏览器扩展
浏览设计网站时一键保存
自动保存为含图片和标签的笔记

推荐采集网站：

网站	类型	建议标签
Dribbble	UI 设计	`#灵感/UI`
Behance	综合设计	`#灵感/品牌`
Awwwards	网页设计	`#灵感/网页`
Pinterest	图片灵感	`#灵感/视觉`
Mobbin	App 设计	`#灵感/移动端`

灵感笔记模板

markdown

---
title: {{title}}
date: {{date}}
tags: [灵感, {{category}}]
source: {{url}}
rating: 
---

# {{title}}

## 截图

![[{{image}}]]

## 喜欢的点

- 

## 可借鉴的

- 

## 关联灵感

-

使用 Canvas 组织灵感

在白板中关联视觉参考：

创建灵感白板
拖入相关图片和笔记
用连接线展示关系
使用颜色分组

素材管理

配色方案管理

markdown

---
title: 配色方案 - 海洋主题
tags: [素材, 配色]
style: 冷色调
---

# 配色方案 - 海洋主题

## 主色

| 颜色 | HEX | RGB | 用途 |
|------|-----|-----|------|
| 🔵 深蓝 | #1B3A5C | 27, 58, 92 | 背景 |
| 🔵 海蓝 | #2E7DAF | 46, 125, 175 | 主按钮 |
| 🔵 天蓝 | #5CB3E6 | 92, 179, 230 | 高亮 |
| ⚪ 浅蓝 | #E8F4FD | 232, 244, 253 | 背景 |
| ⚪ 白色 | #FFFFFF | 255, 255, 255 | 文本 |

## 渐变

```css
background: linear-gradient(135deg, #1B3A5C 0%, #2E7DAF 50%, #5CB3E6 100%);

应用场景

[[项目A - 网站重设计]]


### 字体管理

```markdown
---
title: 字体推荐 - 中文
tags: [素材, 字体]
---

# 字体推荐 - 中文

## 正文字体

| 字体 | 风格 | 授权 | 推荐场景 |
|------|------|------|----------|
| 思源黑体 | 无衬线 | 开源 | 界面正文 |
| 思源宋体 | 衬线 | 开源 | 长文阅读 |
| 霞鹜文楷 | 楷体 | 开源 | 文艺风格 |

## 标题字体

| 字体 | 风格 | 授权 |
|------|------|------|
| 站酷快乐体 | 活泼 | 免费 |
| 阿里巴巴普惠体 | 现代 | 免费 |

## 搭配方案

- 标题：站酷快乐体 + 正文：思源黑体
- 标题：思源宋体 + 正文：思源黑体

图标资源

markdown

---
title: 图标资源库
tags: [素材, 图标]
---

# 图标资源库

## 线性图标

| 库 | 风格 | 授权 | 数量 |
|----|------|------|------|
| Phosphor | 多风格 | 开源 | 6000+ |
| Lucide | 简约 | 开源 | 1000+ |
| Tabler | 线性 | 开源 | 4000+ |

## 填充图标

| 库 | 风格 | 授权 | 数量 |
|----|------|------|------|
| Bootstrap Icons | 通用 | 开源 | 2000+ |
| Remix Icon | 多风格 | 开源 | 2500+ |
| Font Awesome | 经典 | 免费/付费 | 2000+ |

## 使用示例

![[icon-phosphor-example.png]]

设计规范管理

设计令牌（Design Tokens）

markdown

---
title: 设计令牌 - 项目A
tags: [设计规范, 令牌]
project: 项目A
---

# 设计令牌 - 项目A

## 间距

```yaml
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px

字体

yaml

typography:
  heading1:
    size: 32px
    weight: 700
    line-height: 1.2
  heading2:
    size: 24px
    weight: 600
    line-height: 1.3
  body:
    size: 16px
    weight: 400
    line-height: 1.5
  caption:
    size: 12px
    weight: 400
    line-height: 1.4

圆角

yaml

radius:
  sm: 4px
  md: 8px
  lg: 16px
  full: 9999px

阴影

yaml

shadow:
  sm: 0 1px 2px rgba(0, 0, 0, 0.05)
  md: 0 4px 6px rgba(0, 0, 0, 0.1)
  lg: 0 10px 15px rgba(0, 0, 0, 0.1)


### 组件库文档

```markdown
---
title: 按钮组件
tags: [设计规范, 组件]
category: 表单
---

# 按钮组件

## 变体

| 变体 | 说明 | 用途 |
|------|------|------|
| Primary | 主要操作 | 提交、确认 |
| Secondary | 次要操作 | 取消、返回 |
| Ghost | 幽灵按钮 | 辅助操作 |
| Danger | 危险操作 | 删除、重置 |

## 规格

![[button-specs.png]]

## 状态

- Default: 默认状态
- Hover: 鼠标悬停
- Active: 点击
- Disabled: 禁用
- Loading: 加载中

## 设计代码

```css
.btn-primary {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--typography-body-size);
}

相关组件

[[输入框组件]]
[[选择器组件]]
[[开关组件]]


## 项目追踪

### 项目看板

使用 Bases 数据库追踪项目进度：

````markdown
```base
name: 项目看板
source: folder
path: "04-项目"
view:
  type: board
  groupBy: status
  columns:
    - property: file.name
      label: 项目
    - property: deadline
      label: 截止
    - property: client
      label: 客户


### 设计评审记录

```markdown
---
title: 设计评审 - 项目A V2
date: {{date}}
tags: [评审, 项目A]
status: 待修改
---

# 设计评审 - 项目A V2

## 评审信息

| 项目 | 内容 |
|------|------|
| 日期 | {{date}} |
| 参与人 | 设计师、产品经理、开发 |
| 阶段 | UI 设计 |

## 评审截图

![[review-v2-home.png]]
![[review-v2-detail.png]]

## 反馈意见

### 首页

- [ ] 标题字号偏大，建议缩小 2px
- [ ] CTA 按钮颜色不够醒目
- [x] 整体布局合理

### 详情页

- [ ] 信息层级需要调整
- [ ] 底部操作栏需要固定

## 修改计划

- 截止时间：{{date:3 days later}}
- 优先级：高

## 关联

- [[项目A 设计规范]]
- [[项目A 首轮评审]]
```

## 学习笔记

### 设计理论

使用标签系统组织学习笔记：

| 标签 | 内容 |
|------|------|
| `#设计/排版` | 排版理论、字体搭配 |
| `#设计/色彩` | 色彩理论、配色方法 |
| `#设计/交互` | 交互设计原则 |
| `#设计/用户体验` | UX 研究方法 |
| `#设计/视觉` | 视觉设计技巧 |

### 工具教程笔记模板

```markdown
---
title: {{title}}
date: {{date}}
tags: [工具, {{tool}}]
level: 入门/进阶/高级
---

# {{title}}

## 工具信息

| 项目 | 内容 |
|------|------|
| 名称 | |
| 版本 | |
| 平台 | |
| 授权 | |

## 核心功能

1. 

## 快捷键

| 操作 | 快捷键 |
|------|--------|
| | |

## 笔记

```

## 推荐插件

| 插件 | 用途 |
|------|------|
| **Excalidraw** | 绘制线框图和草图 |
| **Canvas** | 视觉化组织灵感 |
| **Dataview** | 查询项目状态 |
| **QuickAdd** | 快速添加设计灵感 |
| **Templater** | 自动化模板 |
| **Obsidian Git** | 版本控制设计文件 |
| **Image Toolkit** | 图片预览和标注 |

## 常见问题

### 图片太多仓库太大？

- 使用图片压缩工具处理后再添加
- 定期归档已完结项目的图片
- 考虑使用外部图床 + 链接引用

### 设计文件如何管理？

- AI/PSD 源文件放在云盘
- 在笔记中链接到云盘文件
- 导出 PNG/WebP 预览图到仓库

### 如何与 Figma 配合？

1. 在 Figma 中设计
2. 导出关键截图到仓库
3. 在笔记中嵌入截图并添加标注
4. 链接到 Figma 文件 URL

## 相关资源

- [白板功能](/advanced/canvas) — 视觉化组织
- [Excalidraw 绘图](/advanced/excalidraw) — 绘图工具
- [数据可视化](/advanced/data-visualization) — 可视化技巧
- [标签系统](/advanced/tags) — 标签组织

设计师工作流 ​

工作流概览 ​

仓库结构 ​

灵感收集 ​

使用 Web Clipper 采集 ​

灵感笔记模板 ​

使用 Canvas 组织灵感 ​

素材管理 ​

配色方案管理 ​

应用场景 ​

图标资源 ​

设计规范管理 ​

设计令牌（Design Tokens） ​

字体 ​

圆角 ​

阴影 ​

相关组件 ​

设计师工作流

工作流概览

仓库结构

灵感收集

使用 Web Clipper 采集

灵感笔记模板

使用 Canvas 组织灵感

素材管理

配色方案管理

应用场景

图标资源

设计规范管理

设计令牌（Design Tokens）

字体

圆角

阴影

相关组件