在开发人员工作的某个时刻，您可能需要与设计师合作。 让我们说清楚：总是欢迎好的设计。 我们都不喜欢创建丑陋的应用程序。 因此，您有一位为客户提供精美设计的设计师。 到现在为止还挺好。 但是现在，您需要实现这些设计。 拉屎。 根据它们的复杂性，它可能是一场噩梦或白日梦。 您的生活由设计师掌控。
回到主题：您拥有需要实现的设计。 您的设计师（希望）是在Sketch或Adobe XD中完成的。 出于本文的目的，我们假设他/她是在Sketch中完成的。 至此，Sketch文件应该已经准备好了。 现在怎么办？ 您需要测量边距和填充，为Android＆iOS导出图标，检查文本的字体等-您只需要实现UI。 为此，您的设计师需要向您提供信息，或者他/她可以通过例如共享设计。 InVission或草图文件可以共享。 让我们说清楚，第一个解决方案不是一个选择，因为它需要太多的时间和精力。
这是一种选择。 这很棒！ 由于它可能是可单击的，可能具有动画等，我认为这是将模型/设计发送给客户进行批准时的最佳选择。 InVission还具有“检查”模式。 您可以测量所有内容，上色，检查字体，导出资产等。
为了打开检查模式：打开InVission->选择项目->打开选择的视图->按I或单击底部栏中的 。
根据我的经验，出口资产可能会非常痛苦。 首先，有时您需要的资产没有在Sketch中标记为可导出，因此您将无法导出它们（截图）。 因此，要进行更改，您需要联系设计师，礼貌地请他/她制作新版本的设计并更新InVission。 尽管此过程很简单，但有时是不可能的，因为您无法与设计者联系。
其次，为了同时为Android和iOS导出资产，需要将其标记为以下内容。
但是，嘿，设计师不知道您将需要8个尺寸的一项资产，因此他可能会使该资产仅可用于iOS。 照顾出口是您的工作-自己完成或确保设计师会做到。
如上所述，您必须与设计师紧密合作。 但是如前所述，由于设计已经完成并提供了，所以有时不是一种选择。
假设您最终将设计上传到InVission，因为资产只能导出到iOS。 令人遗憾的是，我还没有找到一种方法来使资产对于Android和iOS都可导出……我的工作流程主要是：
- 以1x，2x，3x导出iOS资产
- 打开Android Studio，
- 从先前导出的@ 3x文件创建所需的Android资产（因为这是最大的文件，应创建Android的所有资产），
- 关闭Android Studio，
- 打开文件浏览器，
- 将已经创建的Android资源复制到我的Android项目中，
- 复制在点号中创建的资产。 1进入我的iOS项目，
- 打开Visual Studio，
- 将添加的资产添加到我的解决方案中。
当然，除了使用Android Studio之外，您还可以使用任何可以使用它的网站。 但是仍然需要时间。
两种方式都非常复杂。 我想摆脱手动生成Android文件的麻烦。 我想摆脱
1–4。 我希望InVission为我做到这一点。 也许可以吗？ 目前，我还没有找到一种方法。
首先，此方法需要在您的计算机上使用Sketch，因此它不适合Windows / Linux上的用户以及没有Sketch许可证（或已经过期的试用版）的人员使用。 在这种方法中，您应该具有原始草图文件。 有时有可能，有时没有（记住吗？您应该与设计师联系）。
遵循此路径有一个缺点-默认情况下，草图仅支持导出iOS资产。 但请放心，您可以轻松扩展它，使其也可以将其导出到Android。
为此，您需要添加允许导出Android资产的插件。 为了做到这一点：
- 打开这个Github存储库，
- 下载它，
- 解压缩下载的文件。
现在，打开Sketch ，我们需要安装此插件。
- 打开草图
- 转到“ 插件”并打开“ 管理插件” ，
- 在打开的视图上，单击“设置”图标 ，然后单击“ 显示插件文件夹” 。
您应该以打开的Finder结束。 现在，只需将扩展名为.sketchplugin的文件夹复制到打开的文件夹即可。 瞧 做完了 再打开一次Sketch，现在您的扩展名应该可见了。 简单？ 据说这也可以通过Sketch Toolbox来实现，但是我还没有做到这一点，因为计算机上的Toolbox在一开始就崩溃了。
好的，因此安装了插件：
- 选择要导出的资产。
- 在右下角，应该有一个下拉菜单。 打开它。
- 在这里，您应该可以选择Android。 如果是，请单击它。 它应该自动生成mdpi ， hdpi ， xhdpi 等 。 档案
因此，现在您可以导出iOS和Android。 那很好！
但是对我来说，这还不够。 我想单击一下即可导出适用于Android和iOS的资产。 所以我做到了。 如果要具有以下相同的内容：
- 单击导出并选择过滤器图标（右上角）。 出现以下菜单（或类似菜单）。
单击“ 创建预设” …值得一提的是，这里有4个预设：默认一个，适用于iOS（1x，@ 2x，@ 3x），Android（我之前介绍过的插件）和移动设备（同时适用于iOS和Android） ）
- 现在，点击创建后，这应该会出现
- 单击左下角的+ ，输入预设的名称并添加所需的大小。 您可以从Android和iOS预设中复制它们（如果已安装插件），也可以从上图中复制它们。
就这样。 Voilà，现在您只需单击即可导出iOS和Android。
您是开发人员还是设计师-都没关系。 仅在发送/接收设计文件时检查以下内容：
- 画板/页面/视图/我们叫它的大小是多少？ 设计是否针对iPhone 7、8+或SE完成？ 还是设计是针对Android完成的？ 这在测量项目时很重要。 另外，请记住，某些设计在较小/较大的手机上可能看起来不太好。 始终与您的设计师/开发人员保持联系，以便您了解最终结果，
- 检查是否有特定于平台的控件。 就个人而言，我讨厌在Android上实现底部的TabBar-我坚信应该将其放在顶部，而将iOS放在底部！ 一致性有时不是那么好！
- 检查项目是否正确分组，以便轻松了解发生了什么。
- 扩展上一点：检查资产/组的名称是否易于理解。 有时很难知道什么是“第4组”或“符号7”。
- 检查图像是否被裁切为合适的尺寸。 使其可视化：我看到其中带有正方形图像的设计。 我导出图像。 导出的图像不是正方形。 嗯 只是不要这样做。
- 检查使用什么字体。 如果是自定义文件，请：请求.ttf文件，因为您将需要它。
并永远记住：设计者/开发者不是您的敌人！ 您在同一个团队中比赛，所以不要战斗，保持礼貌和合作！
希望这篇文章对您的日常发展有所帮助。 与往常一样：如果您有任何问题，请随时与我联系！
最初于 2018 年5月14日 发布在 lukaszlawicki.pl 。
