你可能听过无数次“像素完美的设计”, 甚至不考虑这意味着什么, or what it should mean. In recent months, 你可能听说过像素完美设计概念的衰落, 但这些说法有一个小问题, 尤其是在iOS UI设计方面.

也就是说，像素完美设计的定义并不像大多数iOS UI指南那样是一成不变的. 人们有不同的解释, 因此，对一些人来说，像素的完美似乎是无关紧要的, 但其他人将在未来几年继续使用这一原则, 虽然用的是另一个名字. 这主要是一个命名问题.

什么是像素完美的UI设计?

由于像素的完美性没有明确的定义, 我对像素完美设计概念的理解是，一切都是为了最大限度地提高清晰度和保真度. 一旦设计实现, 它在任何iPhone屏幕上看起来都一样，没有任何人为影响或问题.

创造一个像素完美的iOS应用UI意味着你在脑海中创造了一个像素设计，并在屏幕上执行了完全相同的设计, 精确到参考设计上的每一个像素, 同时确保它的响应适应其他设备.

但为什么是像素完美的设计?

UI designers 他们是否尽力创建易于感知和交互的界面. 尊重设计师的工作并按照交付的内容执行界面是开发者的职业职责.

使用非像素完美的应用程序, 用户不太可能遇到任何阻碍他们使用和享受应用程序的重大问题, 但像素完美的应用程序肯定看起来更清晰, cleaner, and more consistent.

因为苹果App Store的竞争非常激烈, 每一点改善整体外观和用户体验的润色都是受欢迎的. 它可以帮助你的应用脱颖而出，让它更显眼，从而获得更多利润.

这个快速的iOS UI设计指南将带你完成从基本设计阶段到实现的过程, 从设计师和开发者的角度来看.

创建iOS UI设计

Let’s get started. 像素完美的应用程序显然是从像素完美的设计开始的, 我们现在都知道这些是从哪里来的.

基本的iOS界面设计工具

我想我说的很准确 Sketch 已经成为web和移动UI/UX设计师的事实上的标准. While Adobe XD是一个很有前途的替代方案在受欢迎程度上，它落后于Sketch.

接下来，我们将选择画板的大小. 现在，我们有iOS设备 不同的屏幕尺寸和宽高比 我们需要选择一个尺寸来创建我们的设计. 由于自动布局，它将无缝地适应其他显示尺寸. 如果需要，您可以为不同的对象创建不同的布局变化 Size Classes.

这里唯一真正的问题是: 设计师应该如何与开发人员分享针对不同显示调整设计的信息?

幸运的是，没有必要为每一个写规格，因为 自动布局插件素描 我会处理的. 设计人员只需要设置所需的自动布局, 通过单击导出到不同的屏幕尺寸, 开发人员将了解如何放置布局约束，并确保一切看起来都很好, 无论是iPhone X还是老款iPhone 5.

Note: Since version 44, Sketch团队极大地改进了调整大小的控制, 给用户更多的权力和控制层应该如何表现时，他们的父级调整大小.

设置你的设计

听起来不错，但是我们还没有选择用来创建我们的设计的尺寸. According to David Smith的iOS数据在美国，57%的iPhone用户依赖4.7-inch displays, 在iPhone 6/6s中引入，随后被用于iPhone 7，甚至最近发布的iPhone 8.

我相信你们都熟悉苹果4.现在有7英寸的显示屏了, 但以防你不懂数字, 我们讨论的是750x1334像素的显示器，每英寸326像素(PPI). 这是标准的视网膜显示器，在代码中我们将有一半的分辨率. 因此，我建议你从 375x667 pixels.

接下来，我们需要确保我们的iOS UI设计最大化了清晰度. 为了达到这个目标，你需要打开 pixel fitting:

下面是一个简单矩形的例子，有和没有像素拟合:

Use Round: Full Pixels 编辑矢量对象时:

这些显然只是基本的, 以及在Sketch中仔细查看像素完美的iOS UI元素, you should 查看官方教程.

可以随意使用复杂的矢量动画，因为开发人员可以使用 Lottie library. 您可以在移动设备上播放Adobe After Effects动画，而不会受到任何缩放工件的影响. 只需向开发人员提供JSON文件，就可以了.

尽可能使用sRGB颜色配置文件. 如果sRGB在宽色域显示器上是不够的, 你需要提供颜色或图形资源(一个sRGB和另一个嵌入颜色配置文件). 颜色配置文件的详细信息可在 苹果人机界面指南(HIG) should you need it.

自定义代码像素完美的结果

Great! Now we know enough to create a pixel-perfect design; how do we share it with the developer? 显然，我们需要动用我们的工具箱.

选择合适的工具

有很多非常有用的工具可以让设计师与开发者分享工作成果 Zeplin. 只要使用它，开发人员就会获得几乎所有必要的信息，以确保你的UI设计工作:图像资产, 设计中使用的字体和颜色, text, and much more. 在这一点上，设计师可能需要提供的唯一东西就是字体文件, 以防他们使用iOS中不包含的字体.

另一个很酷的工具是 PaintCode，它可以从矢量图像生成代码. PaintCode使用SVG路径和颜色数据来生成Swift或ObjC类. 使用PaintCode，你可以使用表达式、变量等. 创建按钮的被动/主动状态, up/down states, dynamic text, 来自变量的动画, and much more.

显然你需要依靠Xcode和一些标准的iOS开发工具, 但我们稍后会讲到.

如果您只需要动态更新设计资产的特定部分，例如.g.，更改聊天图标渐变背景的基本颜色. 而且，作为一个方便的奖励，你的应用程序将减轻重量.

Ok, 开发者终于拥有了他们所需要的一切, 那么，我们如何完美地实现像素完美的设计呢??

设置和同步您的工具

With Zeplin, 你应该能买到几乎所有你需要的东西, 前提是设计师正确设置了所有内容. 如果某事被忽视或不清楚, Zeplin提供了一个有效的注释功能, 允许设计人员和开发人员快速识别和解决潜在问题. 即使一切都做得正确，评论也可以用于反馈和小的改进.

However, as we all know, 事情并不总是按计划进行, 所以有时候开发者需要选择一种颜色, 即使设计师提供了应用中使用的调色板.

要正确执行此操作，您需要同步您的工具:

• 设置您的显示颜色配置文件为sRGB:转到 系统首选项-显示-颜色 and choose sRGB IEC61966-2.1.

• In 数字式色彩计，或任何其他颜色选择器工具，选择显示在 sRGB.

• 检查Xcode调色板中的颜色配置文件设置为 Device RGB.

Note: 图像可以有嵌入的颜色配置文件. 如果是这样的话, 如果你想从这个图像中获取正确的颜色，你需要调整你的工具来适应这个配置文件. 幸运的是，这应该是一个例外，您不应该经常遇到这样的情况.

在Xcode 9中，记住 保存矢量数据 when needed. 虽然它会增加应用程序的大小，这也将允许您使用任何显示尺寸的图像. 然而，在iOS 10和更早版本的苹果移动操作系统上，这些图像 不会扩大规模吗 使用额外的矢量数据.

Instead, 旧的操作系统版本将使用遗留的扩展机制，当扩展到超过原始大小时，会给您留下模糊的图像. 你可以查看苹果的官方文档了解更多的信息 这个问题.

Finally, 开发者需要确保尺寸和距离尽可能与原始设计相匹配. 如果泽普林有任何可疑信息, 你可以根据不同的屏幕规则测量不同iOS UI组件之间的距离. One of them is xScope，一种具有许多实用功能的屏幕尺子.

将你的iOS UI设计带入生活

当涉及到执行iOS UI设计时，有一些方法可供选择: 故事板、XIB和自定义代码.

• Storyboard -可视化屏幕和导航之间, 但是没有选择从一个控制器继承另一个控制器的设计.

• XIBs -可视化一个屏幕或其部分，易于继承. 在Xcode 9之前，没有使用顶部/底部布局参考线的选项，而在Xcode 9中我们可以使用 Safe Area.

• Code -迄今为止最灵活的选择，但不提供即时可视化.

For storyboards，您需要将设计分成流程，例如.g., LoginFlow.故事板,SettingsFlow.storyboard或NewsFeedFlow.storyboard. 这样，您将保持故事板的轻量级.

将UI元素分组到块中. 这简化了对所有约束的支持. 不要偷懒，按顺序放置命名视图，因为它们从上到下显示在屏幕上. 请记住，底部将显示在顶部之上. 这将帮助您更快地找到不同的视图.

请参阅以下未分组和分组元素的示例:

如果你有多个左/右对齐的对象，不要将它们对齐到带有偏移的边缘. 更好的方法是与前一个元素对齐，或者实现带有宽度约束的特殊_ffset view_. 如果您将来需要更改偏移量，这将使它变得更容易.

为了在IB中使用颜色，你可以在Xcode颜色选择器的底部准备一个调色板.

Note: 如果你的应用的最低iOS版本是11，你可以使用Asset Catalog中的“Named Colors”选项.

Wrapping Up

That’s it. 现在我们只需要将结果发送给QA团队，检查一切是否正常，然后就可以了! 我们的像素完美的应用程序准备好了.

本文的目标是提供一个线性且简单的像素完美的iOS UI设计示例, 在尽可能短的时间内得到最好的结果. UI设计师和开发人员之间的合作并不总是如此简单和无摩擦, 但这是另一篇文章的问题.