Pencil 常用 UI 设计模式完全指南

UI 设计模式概述

UI 设计模式是解决常见设计问题的成熟方案，本篇介绍如何使用 Pencil 实现这些模式。

设计模式分类

UI 设计模式：
├── 导航模式
│   ├── 标签导航
│   ├── 抽屉导航
│   └── 列表导航
│
├── 内容组织
│   ├── 列表视图
│   ├── 卡片布局
│   └── 网格布局
│
├── 表单模式
│   ├── 输入表单
│   ├── 搜索表单
│   └── 筛选表单
│
└── 反馈模式
    ├── 提示信息
    ├── 加载状态
    └── 确认对话框

导航模式

标签栏导航

# 标签栏设计
┌─────────────────────────────────┐
│           内容区域               │
├─────────────────────────────────┤
│  🏠   📋   💬   👤             │
│ 首页   分类  消息    我的         │
└─────────────────────────────────┘

设计要点：
- 标签数量：3-5 个
- 图标 + 文字
- 选中状态高亮
- 固定在底部

顶部导航栏

# 顶部导航设计
┌─────────────────────────────────┐
│ ←  返回    标题        ⚙️ 设置   │
├─────────────────────────────────┤
│                                 │
│          内容区域                │
│                                 │
└─────────────────────────────────┘

设计要点：
- 左侧：返回按钮/菜单
- 中间：页面标题
- 右侧：操作按钮
- 高度：44-56px

抽屉导航

# 侧边抽屉设计
┌────┬────────────────────────────┐
│≡   │  Logo                      │
├────┤  ─────────────────────────  │
│首页 │  🏠  首页                   │
├────┤  📦  产品                   │
│分类 │  📋  订单                   │
├────┤  💬  消息                   │
│消息 │  ❤️  收藏                   │
├────┤  👤  我的                   │
│我的 │                            │
└────┴────────────────────────────┘

设计要点：
- 抽屉宽度：240-320px
- 半透明遮罩层
- 点击遮罩关闭

底部Sheet

# 底部弹出Sheet
┌─────────────────────────────────┐
│                                 │
│          内容区域                │
│                                 │
├─────────────────────────────────┤
│  ════════════════════════════   │  ← 拖动条
│  选项 1                          │
│  选项 2                          │
│  选项 3                          │
└─────────────────────────────────┘

使用场景：
- 选择器
- 操作菜单
- 筛选面板

列表视图模式

标准列表

# 列表项结构
┌─────────────────────────────────┐
│ 🖼️    标题文字                    ›
│       副标题文字                   │
│       2024-03-20                 │
└─────────────────────────────────┘

组件构成：
- 左侧：图标/头像
- 中间：标题 + 副标题
- 右侧：箭头/状态

带操作的列表

# 列表项 + 操作
┌─────────────────────────────────┐
│ 🖼️  标题                    ⋮   │
│     副标题                       │
└─────────────────────────────────┘

操作类型：
- ⋮ 更多菜单
- ✏️ 编辑
- 🗑️ 删除
- ➕ 添加

分组列表

# 分组列表
┌─────────────────────────────────┐
│ 常用                              │
├─────────────────────────────────┤
│ 🏠  首页                      ›  │
│ 🔍  搜索                      ›  │
├─────────────────────────────────┤
│ 设置                              │
├─────────────────────────────────┤
│ ⚙️  通用设置                  ›  │
│ 🔔  通知设置                  ›  │
│ 🔒  隐私设置                  ›  │
└─────────────────────────────────┘

卡片布局模式

基础卡片

# 单卡片设计
┌─────────────────────────────────┐
│ ┌─────────────────────────────┐ │
│ │        图片区域              │ │
│ └─────────────────────────────┘ │
│ 卡片标题                         │
│ 卡片描述文字，最多两行...         │
│ ¥99.00                          │
└─────────────────────────────────┘

卡片属性：
- 圆角：8-12px
- 阴影：轻柔阴影
- 间距：8-16px

卡片网格

# 卡片网格布局
┌────────────┬────────────┐
│   卡片 1   │   卡片 2   │
│            │            │
├────────────┼────────────┤
│   卡片 3   │   卡片 4   │
│            │            │
└────────────┴────────────┘

布局要点：
- 2 列网格
- 间距 12-16px
- 卡片宽高比一致

轮播卡片

# 水平轮播
┌─────────────────────────────────┐
│ ┌────┐ ┌────┐ ┌────┐          │
│ │ 1  │ │ 2  │ │ 3  │ →        │
│ └────┘ └────┘ └────┘          │
│         ○ ● ○                  │
└─────────────────────────────────┘

指示器：
- 圆点
- 数字
- 进度条

表单模式

基础表单

# 表单结构
┌─────────────────────────────────┐
│ 用户名                            │
│ ┌─────────────────────────────┐ │
│ │ 请输入用户名                  │ │
│ └─────────────────────────────┘ │
│                                 │
│ 密码                             │
│ ┌─────────────────────────────┐ │
│ │ ••••••••                     │ │
│ └─────────────────────────────┘ │
│                                 │
│    [      登录按钮      ]       │
└─────────────────────────────────┘

搜索表单

# 搜索栏设计
┌─────────────────────────────────┐
│ 🔍  搜索内容...              ✕  │
└─────────────────────────────────┘

组件构成：
- 搜索图标
- 输入框
- 清除按钮
- 可选：取消按钮

筛选表单

# 筛选面板
┌─────────────────────────────────┐
│ 筛选                    [重置]   │
├─────────────────────────────────┤
│ 分类                             │
│ ○ 全部  ● 手机  ○ 电脑  ○ 配件  │
│                                 │
│ 价格区间                          │
│ ──●──────────────●──            │
│ ¥0              ¥10000          │
│                                 │
│ 品牌                             │
│ ☐ 苹果  ☐ 三星  ☐ 华为  ☐ 小米 │
│                                 │
│    [        应用        ]       │
└─────────────────────────────────┘

表单元素

输入框状态

# 输入框状态
┌─────────────────────────────┐
│ 标签                        │
│ ┌─────────────────────────┐ │
│ │ 请输入内容          ✕   │ │ ← 默认
│ └─────────────────────────┘ │
│                             │
│ ┌─────────────────────────┐ │
│ │ 输入内容           ✕   │ │ ← 聚焦
│ └─────────────────────────┘ │
│                             │
│ ┌─────────────────────────┐ │
│ │ 错误提示           ✕   │ │ ← 错误
│ └─────────────────────────┘ │
│ ⚠️ 输入格式错误              │
│                             │
│ ┌─────────────────────────┐ │
│ │ 只读内容                │ │ ← 只读
│ └─────────────────────────┘ │
└─────────────────────────────┘

复选框和单选框

# 复选框（多选）
☐ 选项 A
☑ 选项 B
☐ 选项 C

# 单选框（单选）
○ 选项 A
● 选项 B
○ 选项 C

开关

# 开关样式
设置项                    [  ON  ]  ← 开启
设置项                    [ OFF  ]  ← 关闭

滑块

# 滑块
音量  ────●───────────────  70%

# 范围滑块
价格  ────●──────●────────
      ¥0     ¥5000   ¥10000

反馈模式

Toast 提示

# Toast 提示
┌─────────────────────────────────┐
│                                 │
│    ✓  操作成功                   │
│                                 │
└─────────────────────────────────┘

特点：
- 自动消失（2-3秒）
- 居中显示
- 简短文字

加载状态

# 加载指示器
┌─────────────────────────────────┐
│                                 │
│         ◐ 加载中...             │
│                                 │
└─────────────────────────────────┘

类型：
- 圆形旋转
- 进度条
- 骨架屏

空状态

# 空状态设计
┌─────────────────────────────────┐
│                                 │
│           📭                    │
│                                 │
│       暂无数据                   │
│    当前没有可显示的内容          │
│                                 │
│      [   刷新试试   ]           │
│                                 │
└─────────────────────────────────┘

错误状态

# 错误状态设计
┌─────────────────────────────────┐
│                                 │
│           ⚠️                    │
│                                 │
│        加载失败                  │
│    网络连接不稳定，请稍后重试     │
│                                 │
│      [   重新加载   ]           │
│                                 │
└─────────────────────────────────┘

对话框

# 确认对话框
┌─────────────────────────────────┐
│           确认删除               │
│                                 │
│    确定要删除这个项目吗？        │
│    此操作无法撤销                │
│                                 │
│      [取消]      [确定]          │
└─────────────────────────────────┘

组合模式

列表 + 卡片组合

# 混合布局
┌─────────────────────────────────┐
│ 精选推荐                         │
├─────────────────────────────────┤
│ ┌─────────────┬─────────────┐   │
│ │   卡片 1    │   卡片 2    │   │
│ └─────────────┴─────────────┘   │
├─────────────────────────────────┤
│ 列表项 1                     ›  │
│ 列表项 2                     ›  │
│ 列表项 3                     ›  │
└─────────────────────────────────┘

Tab + 内容组合

# Tab + 列表
┌─────────────────────────────────┐
│ [推荐] [最新] [热门]            │
├─────────────────────────────────┤
│ 列表项 1                     ›  │
│ 列表项 2                     ›  │
│ 列表项 3                     ›  │
│ 列表项 4                     ›  │
└─────────────────────────────────┘

---

掌握这些常用 UI 设计模式，能够快速创建专业水平的原型，提升设计效率。