很多朋友可能还不太了解Flawless App是什么软件，这篇文章就来简单介绍一下吧！Flawless App for mac是专为UI设计师及开发者打造的一款UI原稿矫正工具，功能还是很实用，提供了分屏和叠加的方式供用户进行UI原稿对比，像tiff、sketch、jpeg等格式的文件都能导入，非常实用。
我们Flawless App 的使命在于帮助iOS 开发人员及设计师们改善App 的设计实作。我们的工具可以在开发环境中将开发人员的实际情况与设计稿进行比较。所以开发人员可以即时地比较设计稿与最终App 画面的差异、点出所有视觉上的问题以及立即地修复。这将会增加视觉上的品质、节省时间及帮助所有团队更快速地向前推展进度。
我想要分享Flawless App 是如何的帮助你改善iOS App，让其在每个装置上看起来跟设计稿几乎相同。此外，也改善你的团队间的沟通及省了许多头疼的恼事。
尽管Flawless App 主要是为iOS 开发人员所设计，但它不只能节省开发人员的时间也节省了设计师及测试人员的时间。所以让我带你看看Flawless App 中对设计师及开发人员来说最重要的功能。
设计稿与实际App的比较
Flawless App 的核心功能是能够在iOS 模拟器上比较设计稿与实际上的差异。快速开启一个iOS 模拟器（藉由Xcode，一个iOS/macOS 开发使用的IDE），然后选择一张设计稿作为图档（可以是jpeg、png、tiff、gif 等等格式）或是选择一个Sketch 档案。我们的工具将会施展魔法将设计稿无缝地置入iOS 模拟器中。所以开发人员可以浏览及找出所有视觉上的问题。
对iOS 开发人员的效益
- 你可以在所使用的工具Build App 时看到画面。不需要开启「另一个视窗」浪费珍贵的萤幕空间及时间。设计样式就在你指掌之间切换。
- 非常容易地整合进你现在的制作流程里。不需要额外的步骤，不需与第三方程式库连结或是需要设定。只要下载后即可使用。
对UI 设计师的效益
- 将设计稿的确认委托给开发人员。
- 对于开发人员会注意到设计稿与实际情况的差异，同时在建构UI 时不会有太多意见充满信心。实际的成果将会看起来与你可爱的设计稿一模一样。
萤幕撷取动画
你是否曾参与过设计稿的审核呢？是的，就是那些让开发人员与设计师们坐在一起找出「哪些花俏的按钮没有运作」的会议。如果是，那你阅读这篇真是对极了。
藉由使用Flawless App，你可以立即地从iOS 模拟器中撷取出设计稿与实际情况比较的GIF 档案。因为它是个GIF 档案，所以它可以被分享到任何你们团队所用的服务像是：Slack、Asana 或是Jira。
要启用这项功能，开发人员只需要选取一个设计稿档案，然后选择适当的比较模式（分隔或是覆盖）接着按下撷取扭，这将会在桌面建立一个比较的GIF 档案。
对iOS 开发人员的效益
- 你可以在版本控制系统中附加萤幕截图GIF 动画到你的Pull-Request。这样你的团队不只可以检视你的程式码同时也可以检视设计上的实作。
- 撷取萤幕画面动画并分享给设计师及测试人员来确认你的实作已经依最初的设计稿进行足够的改善。
对UI 设计师的效益
- 检视截图动画来取代检视整个App。所以设计审核将会花更少的时间完成。
- 附加萤幕截图GIF 动画到Trello、JIRA、Asana 等等的地方来展示UI 工作已完成。所以团队的其他人也可以来查看结果。
动态设计制作
过去，iOS 平台对不同的装置尺寸方面或多或少是保守的。但如今已非如此，现在iOS App 需要支援至少10 种不同的萤幕尺寸。你会如何处理这些尺寸的设计？或许我们需要为不同的萤幕尺寸设计个别的图像？不！应该还有更好的方法。
最后，Sketch 从44 版开始可以调整约束条件的大小(Resizing Constraints)。这是一个非常有用的内建工具让设计师可以在Sketch 内动态地调整元素的大小。使用这些设定条件，设计师们可以藉由在图像编辑中变更萤幕尺寸来找出元件布局在不同萤幕尺寸中是如何运作。这对建构响应式元件布局是非常重要的。
不幸的是，在程式实作时开发人员没有办法看到设计稿是如何在不同的萤幕大小中运作。在大部分的例子里，开发人员必须以常识来猜想调整的规则。而且一旦有任何的困难，设计师就要帮忙协助。
这与设计师如何和开发人员分享设计稿无关。在现今的工具里，设计稿最后会变成一张静态的图像。所以开发人员无法直接调整大小然后看这些元件在不同的萤幕尺寸中会发生什么变化。藉由使用Flawless App，这些就不再是个问题。使用动态设计制作（Dynamic Design Generation），开发人员可以看到设计稿在在任何的萤幕尺寸中会是什么样子。
设计师所要做的就是在选定的画布(Artboard)中为对应的布局指定调整约束条件并在Sketch 中开启“Adjust content on resize” 选项。然后开发人员会在Flawless App 中选取这份Sketch 档案。我们的工具会自动找出现在正运行的iOS 模拟器（iPhone 5、iPhone X、iPad 等等）然后产生出符合萤幕大小的正确设计样貌。这是不是很惊人呀？！此外，要感谢Xcode 9 可以让开发人员同时开启多个iOS 模拟器，让开发人员可以找出不同萤幕尺寸所有可能的设计变化。
对iOS 开发人员的效益
- 不再猜想不同的萤幕尺寸下该如何调整设计样式。只要即时地看一下然后实作适当的约束条件。
- Flawless App 支援多个iOS 模拟器，因此你可以一次在多个模拟器上开启一个设计稿。
- 可以完全地由设计师来设定约束条件的调整。
对UI 设计师的效益
- 你可以为单一个萤幕尺寸设计画面就好，然后在Sketch 中为其他萤幕尺寸指定整体大小即可。
- 如果正在使用版本控制系统的话，你可以也邀请开发人员加入。如此一来开发人员就可以拿到最新且符合正确约束调整条件的Sketch 档案。这样的方式可以更加无缝地传送Sketch 档案。
进一步改善你的工作流程
Zeplin files support – 支援Zeplin 档案
如果团队的设计师使用Zeplin 来将设计稿传给开发人员，Flawless App 是你现有的工作流程中不可缺少的补充套件。我希望你会很高兴Flawless App 支援Zepline 设计档案。开发人员可以从Zeplin 的macOS 软体中拖拉一个或多个设计图档到工具列的Flawless App 图示。
Quick hotkeys support – 支援热键
开发人员可以在iOS 模拟器中不需要用到滑鼠就可以与设计稿互动或是比较设计稿与实作上的差异：
- ⌃⌥→ 用来在选取的设计图档间切换
- ⌘⇧E 用来开启/关闭对照功能
- ⌘⇧R 切换对照模式
使用长形设计萤幕
有时你会有些像「新闻摘要」这样有着一堆项目的萤幕画面。设计师们喜欢制作一些比iOS 模拟器萤幕长度还长的画面。Flawless App 同样也支援这样的案例。开发人员可以选取一个长型画面而我们的工具会在iOS 模拟器中允许它滚动。哇，如此一来你就可以很容易地与App 进行互动！
与GIF 进行比较
动作及动画在使用者介面里扮演着重要的角色。在UI 中即使是微小的动作也可能剧烈地改变使用者与App 间的互动方式。那就是为什么我们引进检查实际运作的能力而不仅是静态图像，还有GIF 图像。Flawless App 会判断设计稿是GIF 格式并可以透过暂停/播放的能力来适当地播放GIF。
小结
虽然Flawless App 被设计给iOS 开发者使用，但我希望现在你看到使用它会带给整个产品团队多大的助益。我们正与我们的使用者一齐推进产品的能耐。我们相信对于正在建构一个成熟的产品并关心使用者的你来说，视觉上的品质是非常重要的。持续的设计实作不应该是痛苦且耗时的。
