做 UI 界面，可从 Pixso、Figma、Sketch 中选一款主工具；需求还没确定时，用 Balsamiq 画线框；需要演示精细动效时看 Flinto；研发交接需要独立管理时看 Zeplin。初学者不必同时学会所有软件，先完成一套包含列表、详情和表单的界面，再补原型与交付能力。中文团队需要共同编辑、评论和查看标注时，可以从 Pixso 在线 UI 设计开始。
选工具先看要交出的东西：线框图说明信息放在哪里，界面稿确定视觉和组件，交互原型演示操作后的变化，交付文件则让研发知道尺寸、状态和资源。它们有关联，但不能用一张精美图片代替所有工作。InVision 与 Adobe XD 还会出现在旧项目中，前者的设计协作服务已关闭，后者处于维护模式，处理方式与新项目选型不同。
| 当前任务 | 可选工具 | 先做出什么 |
|---|---|---|
| APP 或网页界面设计 | Pixso、Figma、Sketch | 页面、可复用组件和不同屏宽下的布局 |
| 讨论需求与信息结构 | Balsamiq | 低保真线框与主要页面路径 |
| 展示手势与精细动效 | Flinto | 转场、微交互及设备预览 |
| 向研发移交已确认设计 | Zeplin，或主设计工具的交付能力 | 标注、资源、页面版本和行为说明 |
| 接手历史设计资产 | InVision、Adobe XD 的存量项目 | 可访问的源文件、导出资源与迁移清单 |
1. Pixso：中文界面设计与团队协作
Pixso 将界面编辑、原型、评论和设计交付放在同一工作区。设计师可用图层、组件、自动布局组织页面，产品经理在画面上提出意见，研发查看标注与资源。对使用不同操作系统的团队，浏览器访问也方便成员围绕同一份文件工作。
例如设计一个活动报名页，可以先建立标题、说明、输入框和按钮，再将输入框整理为组件。新增“手机号格式错误”和“报名成功”两个状态后，用原型连线演示填写与提交。评审意见贴在对应字段旁，处理后继续在同一文件中交付，避免讨论的是旧截图、修改的却是另一份稿件。
- 入门学习：中文界面配合功能文档、视频教程和设计技巧，适合边做页面边学习图层、约束与组件。
- 重复界面：把常用按钮、导航和表单控件整理为组件，再用于多个页面，减少反复手工调整。
- 资源与插件：社区提供模板、图标和组件等素材，选择与项目相符的资源后继续编辑；使用范围仍要看资源自身说明。
- 多人协作：设计稿、评论和交付信息保持关联，便于产品、设计与研发讨论同一个页面对象。
Pixso 支持浏览器访问，但浏览器仍会使用设备内存，大型文件的流畅度也与图层数量、图片体积、设备和网络有关。迁入已有项目时，先导入一份包含字体、组件和交互的典型文件，逐页检查结果，再安排整批迁移；支持某种文件格式不代表所有细节都会原样转换。
2. InVision：处理历史原型与协作资料
InVision 曾用于把静态设计稿连接为可点击原型，并通过页面评论、共享资料和 DSM 设计系统管理协作内容。它的价值主要在原型展示与反馈，而非替代完整的界面绘制工具。Miro 的官方说明确认，InVision 的 Prototype、DSM 等设计产品于 2024 年 12 月 31 日停止服务，因此不应再作为新项目可直接采用的工具。
接手带有 InVision 链接的旧需求时，先找团队已保存的原始设计文件、图片导出、录屏和评审记录。将页面入口与跳转关系整理出来，再在仍可使用的原型工具中重建关键路径。若只剩无法访问的分享链接，不能把链接本身当成完整交付件，也不要假设还能从已关闭服务中导出内容。
3. Zeplin：让设计交付有明确版本和说明
Zeplin 的重点是设计师与开发者之间的交接。设计稿发布后，研发可以选中图层查看尺寸、间距、资源和代码片段，也能在页面旁查阅注释与变更。需要把“继续探索的设计稿”和“研发当前采用的版本”区分开时，独立交付空间尤其有用。
以登录页为例，交付时不只给默认画面，还应说明密码错误、请求中和无网络时怎样显示。Zeplin 的开发者功能覆盖图层检查、资源下载、评论与注释；代码片段可以帮助理解样式，却不能自动替代业务逻辑、接口接入和最终调试。如果主设计工具已经满足团队的标注和版本需要，也不必再增加一道重复交接。
4. Balsamiq：先把页面结构讨论清楚
Balsamiq 适合快速制作低保真线框。它用按钮、输入框、列表、导航等界面元素表达结构，让讨论集中在信息优先级和操作路径。产品经理、设计师和研发在需求初期都可以参与，不必先确定品牌色或绘制精细图标。
例如客户管理列表尚未确定字段时，先画出搜索、筛选、客户名称和“新建客户”入口，再连接到详情页，讨论哪些信息必须首屏显示。决定结构后，再进入主设计工具完成字体、间距、组件状态和响应式布局。Balsamiq 的低保真定位适合这一阶段；需要最终视觉稿或复杂动效时，应搭配相应工具。
5. Sketch：偏好 Mac 原生工作方式的界面设计
Sketch 的设计编辑器以 Mac 为核心，支持矢量绘制、组件与样式复用、界面布局和原型。已经积累 Sketch 文件、组件库并熟悉 Mac 操作的团队，可以沿用这些资产；需要外部人员查看和交付时，再结合网页端与协作方案安排工作。
Sketch 的 Mac-only 许可证与订阅方案不能混为一谈。许可证说明表明，Mac-only 许可包含一年应用更新，到期后可继续使用已有许可覆盖的最后版本；Workspace、网页应用与实时协作则属于不同方案。选型时先问清楚：只是个人在 Mac 上编辑本地文件，还是多人需要共享工作区与协作，而非只比较一次购买与按月支付的数字。
6. Figma：围绕共享文件组织界面与组件
Figma 支持浏览器中的界面设计、组件、布局、原型和协作反馈。设计师可在同一文件里管理多个画板，用组件维护重复元素，再连接页面用于演示。对于已有 Figma 组件库或需要与使用 Figma 的合作方交接的项目，延续文件与组件体系能减少重复整理。
Figma 具有矢量绘制能力，其矢量网络可用来编辑路径、图标和形状。选择它时，更值得比较的是团队现有资产、访问环境、席位与协作方式。比如需要向外部开发者交付时，让对方实际打开一份项目，确认能取得所需资源与信息；涉及企业数据管理时，则由团队结合部署和合规要求选择产品方案。
7. Flinto：把转场与微交互做得更具体
Flinto 是 Mac 上的交互原型工具，重点在页面转场、手势和屏幕内微交互。Transition Designer 用于页面间变化，Behavior Designer 用于按钮、开关、菜单等局部状态。它支持导入 Sketch 或 Figma 设计，并通过 Mac 或 iOS 预览呈现交互效果。
例如音乐播放器的封面从列表扩展到播放页，或收藏按钮按下后先缩放再恢复，都需要讨论变化的起止状态、速度和手势反馈。Flinto 的行为设计适合探索这类细节。产物仍是交互原型，不能直接当作可上线的移动应用；研发需要根据动效规则、资源和业务逻辑实现最终功能。
8. Adobe XD：维护已有界面与原型项目
Adobe XD 提供矢量界面设计、组件、交互原型和分享能力，也能与 Adobe 设计资源配合使用。已有 XD 项目的团队仍需理解画板、组件、原型连线和资源导出，才能继续查阅或迁移历史设计。Adobe 官方帮助中心已注明 XD 处于维护模式，因此新项目不宜把持续新增功能作为采用它的依据。
如果接手的是 XD 文件，先保存可打开的源文件，整理字体、图片、组件与页面关系，再决定继续维护还是迁移。迁移时用包含组件实例和关键交互的页面试导入，分别确认视觉是否完整、组件是否可编辑、跳转是否需要重建。先处理正在迭代的核心页面，比一次迁走所有历史文件更容易控制工作量。
用一个小项目决定先学哪款
对初学者，可以用“活动列表—活动详情—报名表单—报名结果”四个页面练习。第一步把信息和按钮摆清楚；第二步统一字体、颜色和组件；第三步连接点击、返回与表单错误；第四步请同事查看原型，并根据评论修改。能独立完成这四步，比记住更多工具名称更有价值。
对团队，不妨先拿这类小项目比较两款候选：同一处按钮调整需要改几个地方，评审意见能否找到原画面，研发能否取得资源与状态说明，离开项目的成员能否完成文件交接。主设计工具已经完成大部分工作时，只为确实缺少的能力增加辅助软件，避免把每一次改稿变成跨工具搬运。
想在中文环境里完成这套练习，可以打开 Pixso 创建界面文件，先从一个列表和一个详情页开始，再连接报名与返回路径。
