PureRef UI设计师用法：界面参考、配色、组件整理

UI设计师日常需要收集大量界面截图、配色方案、组件参考。PureRef 的自由画布和置顶功能让它成为UI设计的绝佳参考工具。

一、界面截图管理

收集方式

• 手机截图后传到电脑，拖入 PureRef
• 从网页直接拖拽界面截图
• 使用截图工具截图后 Ctrl+V 粘贴

分类组织

按界面类型分组：登录页、首页、列表页、详情页、个人中心等。每个分组内用网格对齐整齐排列。用颜色标记平台：iOS蓝、Android绿、Web紫。

二、配色工作流

1. 收集优秀配色的界面和色卡
2. 用颜色检索按色调筛选（蓝色系/暖色/暗色）
3. 用标注工具在截图上圈出主色、辅色、点缀色
4. 设计时开启置顶，用吸管工具跨窗口取色（配合Figma/Sketch/PS）

三、组件参考

建立自己的组件参考库：

• 按钮：不同风格、状态、尺寸的按钮参考
• 卡片：各种卡片布局样式
• 导航：顶部导航、底部Tab、侧边栏
• 表单：输入框、选择器、日期选择
• 弹窗：Dialog、ActionSheet、Toast

每个组件类型一个分组，设计时展开对应分组参考。这比在 Eagle/Pinterest 中翻找快得多。

四、设计评审

PureRef 也是设计评审的利器：

1. 将设计稿截图导入 PureRef
2. 用标注工具在问题处画框、箭头、写修改意见
3. 保存 .pur 文件发给开发或同事
4. 对方打开后能看到所有标注，比文字描述直观

五、图标参考

收集大量图标参考后：

• 按风格分组：线性、面性、双色、手绘等
• 统一图标尺寸后网格排列
• 用颜色标记喜欢的风格
• 设计图标时置顶参考

六、暗色模式参考

暗色模式设计需要专门的参考：

• 收集优秀暗色界面截图
• 用颜色检索筛选深色系图片
• 标注暗色模式的层级关系、透明度、分割线颜色
• 切换 PureRef 到暗色模式（右上角主题切换），模拟暗色环境

七、与设计软件配合

Figma：PureRef 置顶在副屏或侧边，Figma 主屏设计。Figma 也有内置的参考图功能，但 PureRef 更灵活。

Sketch：类似 Figma，PureRef 置顶参考。

Photoshop/XD：开启半透明悬浮模式，直接对照设计。

八、建立个人参考库

长期积累建议：

1. 建立一个 master.pur 主参考库，按类别分区
2. 每个项目一个 project.pur，从主库复制相关参考
3. 定期整理，删除过时参考
4. 使用 Save with Images 备份到云盘

九、总结

UI设计师使用 PureRef 的核心场景：界面参考置顶、配色取色、组件库管理、设计评审标注。它不替代 Eagle 等收藏工具，但在"设计时参考"这个环节最顺手。更多创作工作流见Moodboard制作教程和游戏美术工作流。