谁需要最终 UI 设计
你的流程已经确定，但界面看起来未完成或不协调，每个开发人员都以不同方式填补视觉上的空白。视觉设计为每个关键界面赋予最终的、符合品牌的外观，供你的团队据此构建。
- 已批准线框图或原型、在开发前需要最终界面的创始人
- 在不重建流程的情况下，重新发布过时 SaaS 产品或仪表盘的团队
- 需要完整 Figma 文件以据此构建的开发团队，无论是内部团队还是代理机构
服务于可用性和您品牌的视觉设计
如果用户看不清界面、找不到下一步或无法从错误中恢复，那么再美观的界面也不够。我们的设计师在 Figma 中为网站、SaaS 产品、仪表板和移动应用创建高保真界面，以一致的字体、颜色、间距和组件应用您的品牌。每个关键界面都附带其状态、断点以及开发者所需的说明。您可以仅就视觉设计与我们合作；开发和托管的范围会单独界定。
AI 辅助探索，视觉由设计师主导
AI 如何协助
- 在您的品牌范围内探索视觉方向和布局方案，以便在早期对比更多创意。
- 为仪表板、表格和表单等密集界面生成变体，供设计师细化。
- 草拟逼真的样本内容，以便用可信的文本和数据审查界面。
- 标记 Figma 文件中的不一致之处，例如偏离色板的颜色、分离的组件和缺失的状态。
我们的专家负责什么
- 由设计师确定视觉方向、层次结构和品牌契合度，并审核每个界面。
- 设计师检查无障碍性：颜色对比度、文本大小、焦点状态、触摸目标和标签。
- 视觉一致性通过共享组件、变量和记录在案的使用规则来强制执行。
- 关键界面会与您的团队一起验证，必要时还会与真实用户一起验证，然后再交付。
每个关键界面具备哪些状态
此为 SaaS 网页应用的示例性状态覆盖；你的状态会逐个界面地确定。
| 默认 | 加载中 | 空 | 错误 | 成功 | |
|---|---|---|---|---|---|
| 注册与登录 | 专为此界面设计 | 共享模式，附说明进行调整 | 此界面不需要 | 专为此界面设计 | 专为此界面设计 |
| 仪表盘总览 | 专为此界面设计 | 专为此界面设计 | 专为此界面设计 | 共享模式，附说明进行调整 | 此界面不需要 |
| 带筛选的数据表 | 专为此界面设计 | 共享模式，附说明进行调整 | 专为此界面设计 | 共享模式，附说明进行调整 | 共享模式，附说明进行调整 |
| 账单与套餐变更 | 专为此界面设计 | 专为此界面设计 | 共享模式，附说明进行调整 | 专为此界面设计 | 专为此界面设计 |
| 通知面板 | 专为此界面设计 | 共享模式，附说明进行调整 | 专为此界面设计 | 共享模式，附说明进行调整 | 此界面不需要 |
- 专为此界面设计
- 共享模式，附说明进行调整
- 此界面不需要
我们如何设计你的界面
- 01
方向
我们审视你的品牌、产品和用户，借助 AI 辅助的多种变体探索视觉方向，并与你共同确定一个方向。
- 02
基础
将颜色、字体、间距和核心组件设置为 Figma 变量和组件，作为每个界面的基础。
- 03
界面与状态
设计师为每个关键界面创建其各种状态和断点，并在过程中检查对比度、层级和一致性。
- 04
交付与设计质检
为开发人员提供规范、素材和说明，与你的团队进行讲解演示，并对照设计审查构建成果。
您将获得什么
Figma 中的 UI 设计交付物
高保真界面
每个关键界面的最终 UI，包括空、加载、错误和成功状态，让开发者无需自行猜测。
响应式布局
桌面、平板和移动断点一并设计，并附有布局在中间如何自适应的规则。
浅色和深色主题
深色模式作为独立主题进行设计，并在两种主题中都检查对比度，而不是通过反转颜色生成。
品牌应用于产品
将您的品牌指南延伸至数字用途：颜色角色、字体比例、图标、图像和图表样式。
组织有序的 Figma 文件
正确设置自动布局、组件、变体和变量，并采用清晰的命名，让您的团队能够维护这些文件。
开发者交付
规格说明、导出的素材、无障碍说明和实现指导，并与您的开发者逐一讲解。
典型的视觉设计需求
我们所界定范围的典型场景，而非客户案例研究。
已批准线框图，但没有最终界面
低保真线框图已获批准，开发人员希望在开始前拿到最终界面。我们先确定一个视觉方向，设计他们将要构建的第一批界面，然后将相同的外观延伸到产品的其余部分。
难以快速浏览的仪表盘
一个 SaaS 仪表盘在每个界面上都塞满了表格、图表和状态标签，用户难以找到重要内容。我们设立清晰的视觉层级、一套经过色盲检查的图表配色，以及易于浏览的表格样式。
止步于官网的品牌重塑
官网已有全新品牌，但产品仍停留在第一个版本的样子，因此注册时感觉像是在切换到另一家公司。我们将全新的颜色、字体和图像引入应用，并在密集界面需要更高对比度的地方进行调整。
视觉设计不涵盖哪些内容
- 流程和线框图要先行：请提供你自己的，或者如果用户旅程和界面结构尚未确定，可从线框图与原型设计开始。
- 动效、过渡和手势行为在交互设计中规定；在这里，每个状态都被设计为带有说明的静态界面。
- 由多个团队或产品共享的令牌系统、编码组件和贡献规则属于设计系统工作；在这里，Figma 组件和变量服务于本产品的界面。
- 不包含标志设计、命名和品牌战略。在没有品牌指南的情况下，我们为产品确定一种视觉风格，而非完整的品牌标识。
视觉设计如何贯穿到构建、QA 和发布
工程师早期即参与
设计师在交付前与工程师一起评估可行性，并在实施过程中解答问题，无论由我们的开发人员还是你们的开发人员进行构建。
针对真实构建成果的设计质检
我们将构建出的产品与设计稿进行比对，涵盖间距、字体、各种状态和断点，确保在发布前修正差异。
无障碍性双重检查
在 Figma 中检查对比度、焦点状态和文字大小，然后再在浏览器中结合质检，使用键盘和屏幕阅读器再次检查。
发布后仍有成长空间
新增界面复用相同的组件和规则，来自真实使用的反馈则会指导下一轮视觉优化。
常见问题
常见问题解答
你们的设计是由 AI 生成的吗？
不是。AI 帮助我们更快地探索方向、生成变体和准备示例内容，但视觉决策由设计师做出，由他们检查无障碍性和一致性，并批准每个界面。只有在你为自己的品牌认可的情况下，才会使用 AI 生成的图像。
你们可以为将由我们自己的开发人员构建的产品做设计吗？
可以。视觉设计可以作为独立的合作项目；除非你另行添加，否则不包含开发和托管。你的开发人员会获得条理清晰的 Figma 文件、规范和实施说明，如果你纳入设计质检，我们还可以对照设计审查他们的构建成果。
你们会重新设计现有产品吗？
会。我们可以逐步刷新视觉层，或重新设计关键用户旅程，同时保留足够的熟悉感以照顾现有用户。你分享的分析数据和支持反馈能帮助我们决定优先更改什么，我们会在你现有的品牌指南范围内开展工作。
交付中包含哪些内容？
对 Figma 文件、组件和变量的访问权限、规范和测量数据、导出的素材、交互状态和无障碍性说明，以及与你的开发人员进行的讲解演示。实施过程中的支持会在项目范围中约定。
