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

本文概述

• 但是为什么要使用像素完美的设计？
• 创建iOS UI设计
• 自定义代码以实现像素完美的结果
• 本文总结

你可能无数次听到过”像素完美设计”一词, 甚至没有考虑它的含义或含义。最近几个月, 你可能已经听说过像素完美设计概念的衰落, 但是这些主张存在一个小问题, 尤其是在iOS UI设计方面。

也就是说, 像大多数iOS用户界面指南一样, 像素完美设计的定义并非一成不变。人们用不同的方式来解释它, 因此问题-像素完美似乎对某些人而言是过去的, 但其他人将继续使用该原理, 尽管名称不同。主要是命名问题。

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

由于没有完美的像素定义, 因此我对像素完美设计概念的理解是, 要尽一切努力使清晰度和保真度最大化。设计一旦实施, 就可以在任何iPhone显示器上看起来完全一样, 没有任何伪像或任何问题。

创建像素完美的iOS应用程序用户界面意味着你要创建一个考虑像素的设计, 并在屏幕上实现完全相同的设计, 直到参考设计上的每个像素, 同时确保它能适应其他设备。

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

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

使用非像素完美的应用程序, 用户不太可能遇到任何会妨碍他们使用和使用该应用程序的重大问题, 但是像素完美的应用程序确实看起来更加清晰, 整洁和一致。

由于Apple App Store具有高度竞争性, 因此欢迎使用能改善整体外观和用户体验的每一滴润饰剂。它可能有助于使你的应用与众不同, 并使其更加可见, 从而带来更多利润。

这份快速的iOS UI设计指南将带你从设计师和开发人员的角度出发, 从基本设计阶段到实现整个​​过程。

创建iOS UI设计

让我们开始吧。像素完美的应用程序显然是从像素完美的设计开始的, 我们都知道如今它们来自何处。

基本的iOS界面设计工具

我想说的很准确, Sketch已经成为Web和移动UI / UX设计人员的事实上的标准。尽管Adobe XD是一个新兴的替代方案, 但在流行度方面落后于Sketch。

接下来, 我们将选择画板尺寸。如今, 我们的iOS设备具有不同的屏幕尺寸和宽高比, 我们需要选择一种尺寸来创建我们的设计。多亏了自动版式, 它可以无缝适应其他显示尺寸。如果需要, 可以为不同的尺寸类别创建不同的布局变体。

这里唯一真正的问题是：设计人员应如何与开发人员共享有关使设计适用于不同显示器的信息？

幸运的是, 无需为每个规格写下规格, 因为Sketch的Auto Layout插件将解决这一问题。设计人员只需要设置所需的自动布局, 单击即可导出到不同的屏幕尺寸, 并且开发人员将了解如何放置布局约束, 并确保无论在iPhone X还是旧的iPhone 5上, 一切看起来都不错。

注意：自版本44开始, Sketch团队大大改善了调整大小的控件, 为用户提供了更多功能, 并控制了其父级调整大小时图层的行为。

设置设计

听起来不错, 但我们仍未选择用于创建设计的尺寸。根据David Smith的iOS统计数据, 所有iPhone用户中有57％依赖于4.7英寸显示屏, 该显示屏是在iPhone 6 / 6s中推出的, 随后在iPhone 7甚至是最近发布的iPhone 8中使用。

我敢肯定, 你现在都已经熟悉Apple的4.7英寸显示屏, 但是如果你不是数字人, 我们正在谈论的是750×1334像素显示屏, 每英寸326像素(PPI)。这是标准的Retina显示屏, 在代码中, 我们将获得一半的分辨率。因此, 建议你从375×667像素开始。

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

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

编辑矢量对象时, 请使用”圆角：全像素”：

这些显然只是基础知识, 要进一步了解Sketch中像素完美的iOS UI元素, 你应该查看官方教程。

随意使用复杂的矢量动画, 因为开发人员可以使用Lottie库轻松播放它。你可以在移动设备上播放Adobe After Effects动画而不会遇到任何缩放缺陷。只需将JSON文件提供给开发人员即可。

尽可能使用sRGB颜色配置文件。如果在宽色域显示器上sRGB不够, 则需要提供颜色或图形资源(一个sRGB, 另一个具有嵌入式颜色配置文件)。如果需要, 可以在Apple的HID指南中找到有关颜色配置文件的详细信息。

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

大！现在我们足够了解创建一个像素完美的设计了。我们如何与开发者共享？我们显然需要进入我们的工具箱。

选择合适的工具

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

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

显然, 你将需要依靠Xcode和一些标准的iOS开发工具, 但是稍后我们将继续介绍。

如果你只需要动态更新设计资产的特定部分, 例如在聊天图标上更改渐变背景的基础颜色, 这将非常有用。而且, 作为一种方便的奖励, 你的应用程序将减轻体重。

好了, 开发人员终于拥有了他们需要的一切, 那么我们如何完美地实现像素完美的设计呢？

设置和同步工具

使用Zeplin, 只要设计师正确设置了所有内容, 你应该就能获得所需的几乎所有东西。如果某些事情被忽略或不清楚, Zeplin提供了有效的注释功能, 使设计人员和开发人员可以快速识别并解决潜在问题。即使一切都正确完成, 这些注释也可以用于反馈和较小的改进。

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

要正确执行此操作, 你需要同步工具：

• 将你的显示颜色配置文件设置为sRGB：转到系统偏好设置-显示-颜色, 然后选择sRGB IEC61966-2.1。

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

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

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

在Xcode 9中, 请记住在需要时保留矢量数据。虽然它会增加应用程序的大小, 但这也将允许你将图像用于任何显示大小。但是, 在iOS 10和Apple移动操作系统的早期版本上, 将不会使用其他矢量数据来按比例放大图像。

取而代之的是, 较旧的OS版本将使用旧式缩放机制, 并且在超出原始大小时会留下模糊的图像。你可以查看Apple的官方文档以获取有关此特定问题的其他信息。

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

将你的iOS UI设计变为现实

在实现iOS UI设计时, 有几种方法可供选择：故事板, XIB和自定义代码。

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

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

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

对于情节提要, 你需要将设计分成多个流程, 例如LoginFlow.storyboard, SettingsFlow.storyboard或NewsFeedFlow.storyboard。这样, 你将使故事板轻便。

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

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

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

要在IB中使用颜色, 你可以在Xcode拾色器的​​底部准备一个调色板。

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

本文总结

而已。现在, 我们只需要将结果发送给质量检查小组, 检查一切是否井井有条, 就可以了！我们的像素完美应用已准备就绪。

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