如何实现像素完美的 iOS UI 设计

您可能已经无数次听到“像素完美设计”这个词，甚至没有考虑它的含义，或者它应该意味着什么。 最近几个月，您可能听说过像素完美设计概念的衰落，但这些说法存在一个小问题，尤其是在 iOS UI 设计方面。

也就是说，像素完美设计的定义并不像大多数 iOS UI 指南那样一成不变。 人们以不同的方式解释它，因此出现了问题——像素完美对某些人来说似乎已经过去了，但其他人将在未来几年继续使用该原则，尽管名称不同。 这主要是一个命名问题。

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

由于没有对像素完美的明确定义，所以我对像素完美设计理念的理解是，一切都是为了最大限度地提高清晰度和保真度。 设计实施后，它在任何 iPhone 显示器上看起来都是一样的，没有任何瑕疵或任何类型的问题。

创建像素完美的 iOS 应用程序 UI 意味着您正在创建一个考虑像素的设计，并在屏幕上实现完全相同的设计，直至参考设计上的每个像素，同时确保它能够响应地适应其他设备。

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

UI 设计师尽最大努力创建易于感知和交互的界面。 尊重设计者的工作并完全按照交付的方式实现接口是开发人员的职业职责。

对于非像素完美的应用程序，用户不太可能遇到任何阻碍他们使用和享受应用程序的重大问题，但像素完美的应用程序肯定看起来更清晰、更清晰、更一致。

由于 Apple App Store 的竞争激烈，我们欢迎改进整体外观和用户体验的每一点润色。 它可能有助于区分您的应用程序并使其更显眼，从而更有利可图。

这个快速的 iOS UI 设计指南将从设计师和开发人员的角度带您完成从基本设计阶段到实施的整个过程。

创建 iOS UI 设计

让我们开始吧。 像素完美的应用程序显然是从像素完美的设计开始的，我们都知道现在这些是从哪里来的。

必备的 iOS 界面设计工具

我认为我说 Sketch 已经成为 Web 和移动 UI/UX 设计师的事实标准是准确的。 虽然 Adob​​e XD 是一个新兴的替代品，但它在受欢迎程度方面落后于 Sketch。

接下来，我们将选择画板大小。 如今，我们拥有不同屏幕尺寸和纵横比的 iOS 设备，我们需要选择一种尺寸来创建我们的设计。 由于自动布局，它将无缝适应其他显示尺寸。 如果需要，您可以为不同的Size Classes创建不同的布局变体。

这里唯一真正的问题是：设计师应该如何与开发人员分享有关为不同显示器调整设计的信息？

幸运的是，没有必要为每一个都写下规范，因为 Sketch 的自动布局插件会处理这些。 设计师只需要设置所需的自动布局，通过点击导出到不同的屏幕尺寸，开发人员将了解如何放置布局约束并确保一切看起来都很好，无论是在 iPhone X 还是旧款 iPhone 5 上。

注意：从版本 44 开始，Sketch 团队已经显着改进了调整大小的控件，让用户在调整父级大小时对图层的行为方式有更多的权力和控制。

设置您的设计

听起来不错，但我们还没有选择用于创建设计的尺寸。 根据 David Smith 的 iOS 统计数据，57% 的 iPhone 用户依赖 4.7 英寸显示屏，该显示屏在 iPhone 6/6s 中引入，随后用于 iPhone 7 甚至最近推出的 iPhone 8。

我相信你们现在都熟悉 Apple 的 4.7 英寸显示器，但如果您不是数字人，我们谈论的是每英寸 326 像素 (PPI) 的 750x1334 像素显示器。 这是标准的 Retina 显示屏，在代码中我们将拥有一半的分辨率。 因此，我建议您从375x667像素开始。

接下来，我们需要确保我们的 iOS UI 设计最大限度地提高清晰度。 要达到这个目标，您需要打开像素拟合：

这是一个带有和不带有像素拟合的简单矩形的示例：

编辑矢量对象时使用圆形：全像素：

这些显然只是基础知识，要仔细查看 Sketch 中像素完美的 iOS UI 元素，您应该查看官方教程。

随意使用复杂的矢量动画，因为开发人员可以使用 Lottie 库轻松播放它。 您可以在移动设备上播放 Adob​​e After Effects 动画，而不会受到任何缩放伪影的影响。 只需将 JSON 文件提供给开发人员即可。

尽可能使用 sRGB 颜色配置文件。 如果 sRGB 在广色域显示器上不够用，您将需要提供颜色或图形资源（一个 sRGB，另一个带有嵌入的颜色配置文件）。 如果您需要，Apple 的 HID 指南中提供了有关颜色配置文件的详细信息。

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

伟大的！ 现在我们知道的足够多，可以创建像素完美的设计； 我们如何与开发者分享它？ 我们显然需要进入我们的工具箱。

选择正确的工具

有一些非常有用的工具可以与开发人员分享设计师的作品 - Zeplin。 只需使用它，开发人员将获得几乎所有必要的信息，以确保您的 UI 设计正常工作：图形资源、设计中使用的字体和颜色、文本等等。 设计师此时可能需要提供的几乎唯一的东西就是字体文件，以防他们使用了 iOS 中不包含的字体。

另一个很酷的工具是 PaintCode，它可以从矢量图像生成代码。 PaintCode 使用您的 SVG 路径和颜色数据来生成 Swift 或 ObjC 类。 使用 PaintCode，您可以使用表达式、变量等来创建按钮的被动/主动状态、向上/向下状态、动态文本、来自变量的动画等等。

您显然需要依赖 Xcode 和一些标准的 iOS 开发工具，但我们稍后会谈到。

如果您必须仅动态更新设计资产的特定部分，例如更改聊天图标上渐变背景的基色，这将非常有用。 而且，作为一个方便的奖励，您的应用程序将减轻重量。

好的，开发者终于拥有了他们需要的一切，那么我们如何完美地实现像素完美的设计（请原谅双关语）？

设置和同步您的工具

使用 Zeplin，只要设计人员正确设置所有内容，您几乎可以获得所需的一切。 如果某些事情被忽略或不清楚，Zeplin 提供了有效的评论功能，让设计人员和开发人员能够快速识别和解决潜在问题。 即使一切都正确完成，评论也可用于反馈和小改进。

然而，众所周知，事情并不总是按计划进行，因此有时开发人员需要选择一种颜色，即使设计师提供了应用程序中使用的调色板。

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

• 将显示颜色配置文件设置为 sRGB：转到System Preferences - Displays - Color并选择sRGB IEC61966-2.1 。

• 在Digital Color Meter或任何其他颜色选择器工具中，选择以sRGB显示。

• 检查 Xcode 调色板中的颜色配置文件是否设置为设备 RGB。

注意：图像可以具有嵌入的颜色配置文件。 如果是这种情况，如果您想从该图像中获取正确的颜色，则需要使您的工具适应该配置文件。 幸运的是，这应该是一个例外，你不应该经常遇到这种情况。

在 Xcode 9 中，请记住在需要时保留矢量数据。 虽然它会增加应用程序的大小，但这也将允许您将图像用于任何显示尺寸。 但是，在 iOS 10 和更早版本的 Apple 移动操作系统上，图像不会使用额外的矢量数据进行放大。

相反，较旧的操作系统版本将使用旧的缩放机制，并且在超出原始大小时会给您留下模糊的图像。 您可以查看 Apple 的官方文档以获取有关此特定问题的更多信息。

最后，开发人员需要确保尺寸和距离尽可能与原始设计相匹配。 如果 Zeplin 中存在任何可疑信息，您可以通过屏幕规则的变化来测量不同 iOS UI 组件之间的距离。 其中之一是 xScope，一个具有许多实用功能的屏幕标尺。

让您的 iOS UI 设计栩栩如生

在实现 iOS UI 设计时，有几种方法可供选择：Storyboard、XIB 和自定义代码。

• 故事板- 可视化屏幕和它们之间的导航，但没有选项可以从一个控制器继承另一个控制器的设计。

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

• 代码- 迄今为止最灵活的选项，但不提供即时可视化。

对于故事板，您需要将设计拆分为流，例如 LoginFlow.storyboard、SettingsFlow.storyboard 或 NewsFeedFlow.storyboard。 这样，您将保持故事板的轻量级。

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

有关未分组和分组的元素，请参见以下示例：

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

要在 IB 中使用颜色，您可以在 Xcode Color Picker 的底部准备一个调色板。

注意：如果您的应用的最低 iOS 版本为 11，您可以使用 Asset Catalog 中的“命名颜色”选项。

包起来

而已。 现在我们只需要将结果发送给 QA 团队，检查一切是否正常，瞧！ 我们像素完美的应用程序已准备就绪。

本文的目的是提供一个线性且简单的像素完美 iOS UI 设计示例，在尽可能短的时间内获得最佳结果。 UI 设计师和开发人员之间的协作并不总是那么简单和顺畅，但这是另一篇文章的问题。