1.原文

Size Classes and Core Components

Designing for multiple screen sizes can seem complicated, difficult, and time-consuming. Learn how size classes, dynamic type, and UIKit elements help your app to scale elegantly, save you time, and make your app look amazing on whatever device people are using.

2.译文

为多种屏幕尺寸设计似乎很复杂、困难和耗时。了解大小类、动态类型和UIKit元素如何帮助你的应用优雅地缩放，节省你的时间，并使你的应用在人们使用的任何设备上给予用户惊喜。

所以，面向iOS设计，过去要简单得多，因为只有一个尺寸。

而我们现在有三种不同尺寸的iPhone屏幕和三种不同尺寸的iPad屏幕，有不同的方向，以及分屏和多任务屏幕。

这看起来可能需要考虑很多不同的屏幕尺寸，但设计和构建应用程序有一个基本框架，可以简化过程。

这将节省你的时间，同时无论人们使用什么设备，你的应用程序体验将更好。

其中的关键是将屏幕尺寸分级、使用动态文本和标准UI组件。

所有这些都是为了让你更容易设计和构建你的应用。

首先，让我们了解下尺寸分级。

所有屏幕尺寸——所有iOS屏幕尺寸都属于两种尺寸类型之一，紧凑或常规。

考虑这个问题的一个简单方法是，较窄的屏幕宽度是紧凑的尺寸，就像iPhone的布局一样。

更宽的屏幕宽度和iPad的宽度差不多。

如果你把所有屏幕叠在一起，无论是纵向还是横向你都可以看到，size classes同时适用于宽度和高度。

创建这两个大小类的目的是为了让布局更加灵活，元素也会根据屏幕大小进行调整。

下面我举几个例子说明这对你的布局带来什么影响。

iPhone 7 Plus的横屏显示为固定宽度，这使得它可以像所有ipad一样使用分屏视图。

而这两款在横向上更小的手机在宽度和高度上都很紧凑。

这意味着横屏bar高度将比你在纵向中看到的更短。

屏幕宽度也定义了UIKit的边距和边距，边距可以是标准的，也可以像这款iPad一样适用于更宽的屏幕。

但很多种情况，如果文本通过UIKit边距沿边移动那么文本行就会太长，当你到达一行的末尾时，眼睛就很难向下跳转。

因此，我们使用可读性边距来限制较大设备上的行长度。

这些边距是灵活的，因为它们可以随文本大小而变化。

较小的文本需要更窄的可读性长度，而较大的文本可以有更长的长度。

如果你使用的是带有可读边距的动态类型，那么人们使用你的应用会有更舒适的阅读体验。

让我们再谈谈动态文本是什么，以及它如何帮助人们使用你的应用。

动态类型是预定义的文本样式，可以在设备上缩放，这样人们就可以看到最适合自己的文本大小。

有很多人发现他们应用中的文本太小了，无法阅读。

因此，使用动态类型将自动允许文本放大或缩小而不影响你的布局。

它也使得在辅助设置中选择更大的类型，更容易。

它还能让你的应用无缝本地化。

您的文本将根据字符的高度调整字母或行高。

所以使用这些功能只会让更多人更容易使用你的应用。

这是我们的动态文本的规范。

今年，我们对现有的文本样式做了一些调整，将标题字重从轻调到常规。

在大多数情况下，我们建议每个屏幕使用两到三种文本样式。

有10种不同的文本样式可供选择，有无数的组合，当你设计你的应用程序时也有很大的灵活性。

文本样式的名称应该是描述性的，说明在什么地方最适合使用某些样式。

例如，Body用于需要大量文本的地方。Body也是我们在整个系统中使用的默认值。

从文本规范，我们可以引入更小或更大的样式，或者在上面这个例子中加入粗体，来创建层次结构。

但如果在设计中使用自定义字体呢?今年，有了我们的新API，我们也可以实现定制字体动态，这非常棒。

请记住，您可能必须对每个文本样式调整字号，因为不是所有字体都有相同的比例。

这对于保持文本在视觉上的大小是很重要的。

Etsy就是一个使用动态类型的应用程序的一个很好的例子。

这里是它的默认大小，这里是一个更大的大小，视觉不错。

排在最后但同等重要，让我们讨论UI组件库。

比起将精力集中在设计人们已经熟悉的任务或功能上，我们希望你能够专注于设计使你的应用程序独特的东西。

我们有一些标准的UI元素，你可以在你的应用中使用，它们会自动适应所有屏幕尺寸。

这包括像表格这样的组件它不仅能很好地与动态类型缩放，它还继承可读性边距和标准交互，如滑动动作和编辑模式。

还有很多其他资源可以帮助加强一致性，并无缝地适应不同设备。

需要注意的是，所有这些组件都适用于iOS 7，这是我们建议你开始新设计的尺寸。

一旦你有了一个iPhone的设计，我们有一些技巧使它适应iPad。

回到一分钟前，我们用尺寸分级中的常规和iPad分屏视图同步iPhone和iPad之间的内容层次实现你的应用两端的衔接。

分屏视图的左侧可以被称为主视图。右边是详情页。

而iPhone上的细节视图则是你需要进一步深入才能看到的页面。

请记住，iPad将共享iPad和iPhone的特定布局，iPad布局应保持与iPhone布局相同的层次结构，包括标准导航、工具栏和标签栏。

如果你的应用程序启用了多任务处理，当你的应用程序必须与另一个应用程序共存时，要保持一致性。

而在多任务处理中，你的应用程序在iPhone布局在紧凑和常规之间来回切换取决于它当前的屏幕宽度。

好了，我们来回顾一下。

在面向iOS设计时，我们必须牢记这三点。

无论人们使用的是什么设备，考虑尺寸分级都能让你的应用看起来更棒。

使用动态文本将使你的文本易于缩放和翻译成不同的语言，这将使更多的人使用你的应用程序。

利用现有的UI组件库将使你更容易的去修改设计和调整那些人们可能已经熟悉了的功能。

我们鼓励你充分利用这些工具，不仅是为了节省你的时间，而且无论人们使用什么iOS应用，你的应用体验都将是统一的、连贯的。