ui-research

UI 研究

在设计新 UI 之前，先研究真实产品，让设计成果立足于已发布产品解决问题的实际方式。

这项技能可确保 UI 工作借鉴现实灵感、现代模式和以人为本的设计，而不是生成泛泛的 AI 输出。

重要参考： 请参阅 UI 灵感来源

---

何时使用此技能

在以下情况下使用：

• 创建新的 UI 组件
• 设计落地页
• 构建仪表板或管理界面
• 开发移动应用屏幕
• 进行任何视觉设计或前端工作

---

研究工作流

阶段 1：定义

开始搜索前，请回答：

1. What am I building? (component, page, flow)
2. What platform? (web, iOS, Android, desktop)
3. What industry? (SaaS, e-commerce, fintech, etc.)
4. What feeling? (professional, playful, minimal, bold)
5. What constraints? (existing brand, tech stack, timeline)

阶段 2：研究

搜索策略：

# For each UI task, search at least 3 sources:

# 1. Real products (MOST IMPORTANT)
Search: Mobbin, UI Sources, Refero
Why: See how real companies solved this problem

# 2. Curated galleries
Search: Land-book, Awwwards, Godly
Why: High-quality, vetted designs

# 3. Component patterns
Search: shadcn/ui, Collect UI, Dribbble
Why: Specific UI element inspiration

按任务分类的搜索词：

构建内容	搜索词
仪表板	"analytics dashboard", "admin panel", "SaaS dashboard"
落地页	"[industry] landing page", "hero section", "pricing page"
移动应用	"[app type] iOS", "mobile [feature]", "[competitor] app"
电子商务	"product page", "checkout flow", "cart design"
身份验证流程	"login screen", "onboarding", "signup form"
设置	"settings page", "profile settings", "preferences"

阶段 3：收集

保存 5-10 个值得借鉴的示例。对每个示例，记录：

URL/Source: [where you found it]
What works: [specific elements you like]
Patterns: [repeating solutions across examples]
Unique: [what makes this stand out]
Adapt: [how to apply to our project]

阶段 4：分析

模式识别：

Common patterns across examples:
- Layout: [grid, spacing, hierarchy]
- Colors: [palette trends, contrast]
- Typography: [fonts, scale, weights]
- Components: [buttons, cards, forms]
- Interactions: [hover, transitions, feedback]

质量检查清单：

• 找到 3 个以上真实发布的产品（而非概念设计）
• 识别重复出现的模式
• 记录独特的差异化设计
• 考虑无障碍性
• 检查移动端适配情况

阶段 5：设计简报

开始实施前，记录：

## UI Research Brief

### Inspiration Sources

- [Link 1]: [What to adopt]
- [Link 2]: [What to adopt]
- [Link 3]: [What to adopt]

### Key Patterns to Follow

- Layout: [specific approach]
- Color: [palette direction]
- Typography: [font choices]
- Components: [style decisions]

### Differentiation

- [What makes ours unique]
- [Brand personality elements]

### Technical Approach

- Component library: [shadcn/ui, etc.]
- Animation approach: [Framer Motion, CSS]
- Responsive strategy: [mobile-first, etc.]

---

来源选择指南

按项目类型

项目	主要来源	次要来源
SaaS 应用	Mobbin, UI Sources	Land-book, shadcn/ui
落地页	Land-book, Godly	Awwwards, One Page Love
移动应用	Mobbin, Screenlane	Pttrns, Apple HIG
电子商务	Baymard, Awwwards	Mobbin, UI Sources
仪表板	Dribbble, UI Sources	Ant Design, Tremor
作品集	Awwwards, One Page Love	Godly, personal sites

按平台

平台	必需的研究
iOS	Apple HIG, Mobbin（iOS 筛选）
Android	Material 3, Mobbin（Android 筛选）
Web	Awwwards, Land-book, shadcn/ui
桌面端	Fluent 2, 平台专属应用
跨平台	以上全部，找出共同点

---

避免“AI 风格”

应避免的危险信号

GENERIC AI PATTERNS (Don't do these):
- Blue/purple gradient backgrounds
- Perfectly symmetrical everything
- Generic blob/wave decorations
- Undraw-style illustrations
- "Hero with laptop mockup" layouts
- Default color schemes unchanged
- Cookie-cutter card grids
- Overused glassmorphism
- Cream/off-white page background by default
- Italic accent words inside headlines
- Numbered "01 / 02 / 03" section labels
- Monospace eyebrow labels
- Pill-shaped buttons everywhere

增添人性化的元素

WHAT MAKES DESIGN FEEL HUMAN:
- Custom color palette with personality
- Intentional asymmetry
- Unique typography combinations
- Real photography or custom illustration
- Micro-interactions with character
- Subtle organic shapes
- Brand-specific details
- Thoughtful empty states
- Personality in copywriting

质量特征

方面	普通 AI	精心打磨的设计
颜色	默认蓝色	定制品牌配色
布局	完美网格	有意的变化
图像	素材照片	定制或精心挑选的图像
文案	Lorem ipsum	真实且富有个性的文本
动画	常规淡入淡出	有目的且体现品牌特色的动效
细节	无	悬停状态、微交互

---

研究工具

浏览器扩展

• Muzli - 设计灵感信息流
• Panda - 新闻与灵感仪表板
• Stylify Me - 提取网站配色和字体

截图工具

• Full Page Screen Capture - 捕获整个页面
• Awesome Screenshot - 添加注释并保存

组织

• Figma - 创建情绪板
• Notion - 记录研究内容
• Eagle - 视觉书签管理器
• Pinterest - 快速收集

---

研究输出模板

# UI Research: [Component/Page Name]

## Context

- **Building:** [what]
- **Platform:** [where]
- **Constraints:** [limitations]

## Inspiration (5-10 sources)

### 1. [Company/Site Name]

- **URL:** [link]
- **Screenshot:** [attached]
- **What works:** [specific elements]
- **Adopt:** [what to use]

### 2. [Company/Site Name]

...

## Pattern Analysis

### Layout

- [Common layout patterns observed]

### Color

- [Palette trends]

### Typography

- [Font and scale patterns]

### Components

- [UI element patterns]

## Design Direction

### Must Have

- [Non-negotiable elements]

### Nice to Have

- [Enhancement opportunities]

### Avoid

- [Anti-patterns to skip]

## Technical Stack

- **Components:** [library choice]
- **Styling:** [approach]
- **Animation:** [library/method]

---

与其他技能集成

研究完成后，继续使用：

下一步	要使用的技能
视觉实现	frontend-enhancer
设计系统搭建	generic-design-system
UX 流程设计	generic-ux-designer
动画制作	ui-animation
品牌统一	brand-identity

---

快速入门清单

进行任何 UI 工作之前：

• 明确要构建的内容
• 搜索 3 个以上灵感来源
• 收集 5 个以上相关示例
• 找出反复出现的模式
• 记录独特的差异化特点
• 制定简要的设计方向
• 检查是否存在「AI 风格」的危险信号
• 规划体现人性化的元素

---

另请参阅

• UI 灵感来源 - 包含 URL 的完整来源列表
• 设计模式 - 视觉设计令牌
• frontend-enhancer - 用于研究后的实现
• generic-design-system - 用于设计系统工作
• graphic-design - 用于视觉设计原则