@C7210 ：今 WWDC 期间看到一些设计方面的分会视频，萌生要做这样的中图版本。实过每年的 DC 分会都有几场错的设计题演讲，印象中 2017 年的基础设计原则专题，及 2014 年的快速原专题等等，都非值得习。
或许因 WWDC 分会视频的获取本较高，且多缺乏字幕的英文原声，所以一直以见到太多同学关注，也蛮遗憾的。我推一下好了，就从今的「What’s New in iOS Design」始。
其实近也看到朋友关于这场分会的内，不过点提炼。演讲者内的骨骼之间填充了很多价的细节信息，不仅关于「how」，于「why」。我会把所这些内都涵盖，尽可能还原完整的场。
本场演讲是 Apple Design Evangelist 团队 Mike Stern，话题涉及「深色模」、「卡片视图」和「情境菜单」三大。由于体篇幅较长，我们在本期首先聚焦于「深色模」。Mike 从设计体系、颜色、材质、系统控件、SF Symbols 等若干新变化入手，「深色模」相关主题进了从内到详细诠释。
随着 iOS 13 到来，我们设计和开发 app 将会发生细微而又大变化。
深色模式将改变对颜色、图标图形及文字内容的理方式。
新的卡片风格面板将会改变模视图的默认呈现方式及操作方法。
新的情菜可以帮助用户快速访问当前内容相关的情化功能选项。
下来，将围绕这三个主题进行详细的探索。首先来深色模式。
去年，我们为 macOS 带来深模式，受到人们的欢迎。其年以来，影像视频类产品通常在使用深界面，以帮助用户更清晰地聚焦内容身。
深界面非常适合光条件暗的境，因为我们的眼睛能够更加轻松地在界面与周围的境之间进行切换。此外，出个人喜，很用户也更加倾向使用深界面。
iOS 中的深模式使用纯黑为背，为文字内容及其他前元素提供最高对比度。此外，纯黑背在视效果上以和设备框无缝融合，使整个界面看来更加开阔，仿佛与硬件融为一。
一般而言，所有 app 应该支持深模式。当人们将系统切换为深模式之，自期望每一个 app 的外观随之进行改变。
深模式的设计适涉及到整个 iOS 设计系的进化。目前，iOS 设计系已经面向 iOS 13 进行面的翻新。里简单诠释一下，所谓「设计系」，大是指以符合特定逻辑及一致的方式整合在一的一系列界面组成元素，包括颜、字、图形等等。一套合理、一致的设计系将有助你构建出更加易学易用的 app。基 iOS 设计系构建的 app 自能使 iOS 用户感到熟悉易懂。
在进正题之前，我还想和各位分享我们的设计团在 iOS 设计系翻新程中的一主要设计目标。
首先，也是最首要的，我们希望 iOS 依能够持人们所熟悉的样子，并符合长久以来的操直。
我们希望 iOS 具备更好的一致性。有的置 app 都已进行重设计，保持彼此之间的统一。期间到的设计特性正是我们在接来的正题当中将要进行了解的。
我们希望新的设体系能够提供一系列的颜色选项，以便构建加清晰的信息层级，使重的元素得以突显，次元素则度弱化。
我们将可访问性（accessibility）放在了和其他设计目标等要位，新系统将全支持「辅助功能」设「粗体文本」与「增强比度」模。
最后，希望新的计体系足够简直，易于实施。
下面进正题，让我们一对深模式进行深的。
每个 app 有背视图，同时绝大数 app 提供文字内容与图标。很 app 还通分隔与分组容器来组织内容。
我们很自地通值对元素的颜进行定义，例字是纯黑，背是纯白等等。随着界面复度的提升，盘也相应地进行扩展，但通常不出现什么大问题。
而，要同时适深、浅两种外观模式，你就必须管理两套完整的颜方案，并确它们之间始终持同步。种情况下，我们需要以更加抽象的方式来思考和管理颜系。为此，我们引「语义化颜」的概念。
语义颜色通过「途」对颜色进行定义描述，而非通过具体色值。「途」的概念具有态性，可脱离于具体的表现样式而独立存在。譬如，一个「背景色」，在深色模式当中可指代黑色，而在浅色模式当中可指代白色。
因此，相于自己维护两套独立的配色，你现在全可使系统置的语义颜色方案，来确保你的界面可自适配深、浅两种外观模式，这会非方。
iOS 13 置了一整套语义颜色供你使，中多数颜色都拥有「一级」至「级」梯，这些变量要于构建信息层级。例如「本色」（LabelColor）是一级字色，可供最的对，要于最为重要的容元素，如容的标题。而「二级本色」（SecondaryLabelColor）可于副标题，「级本色」（TertiaryLabelColor）于输入框占位符本，「级本色」（QuaternaryLabelColor）于禁状态的本。
对于背景色来说是同。「系统背景色」（SystemBackground）是一级背景色，在浅色模式当中指代白色，在深色模式当中则指代黑色。「二级系统背景色」和「级系统背景色」则于构建更丰富的背景层级。
此外还有一组背景色专门于列表视图（SystemGroupedBackground）。仔细观察图，你会发现，深、浅两种模式当中的列表视图，在背景色的使上并非简单的反色。在两种模式中，列表行的背景色都界面色更明亮，因为我们希望在确保对的同时，使两种模式的界面在感知上更统一。在设计深色界面时，试着设想光源变暗之后的效应，而非简单地将有颜色进行反转。
此外，系统置的语义颜色还包括填充色（FillColor），及分隔线色（SeparatorColor）。中，有的填充色和一种分隔线色采了半透明效果，与各类背景色形成良好的对。
系统同时供了六种全透明的灰色供你使（SystemGrey）。
在那些使半透明色可带来问题的地方，这些灰色将尤适。例如在绘制交叉格时，半透明色会产生重叠效果，干扰人们的视线；如果元素需要叠放置，那么只有使实色才表现正样式。
语义化颜已经被用新系统中的方方面面，因此我们也鼓励你在自己的 app 中使用颜。你以在 Apple Design Resources 与 Human Interface Guidelines 当中查看完整的颜定义，以便更地步。
此外，我们还继续提供一系列着颜供你使用。着同样是动态的，能够针对深、浅模式进行自动整。
同时，每个着还拥有高对比度变，当「辅助功能」设置中的「增强对比度」被开启，组变将被用，着在深模式中变得更亮，在浅模式中变得更暗。
如你需要使用定制化着色，那么样要确保它们可以适配于深、浅两观模。在浅色模表现良好颜色，到了深色模可能会生比度不足问题，反亦然。此，最好可以过线上比度计算工具来进精准确认。
由于着色样具有动态特性，此你可以为深、浅两模选择相似不着色，使各自比度到标准，即 4.5 : 1 或更高。良好比度可以提升界可访问性及可用性。
此，你可能会用到更多定制化颜色，例如可以由用户自主选择色，或是定制化状态指示符等等。与着色相仿，这些定制化颜色样可以拥有动态特性，此你仍然可以针深、浅模进细微调，确保所有颜色在不模下都可以提供足够比度。
我们前在讲「深色」与「浅色」，然而这是比较简化说法。实上，深色模背景色体系分为「base」和「elevated」两组，用于构图层层级关系。
两个浅色图层生叠加时，我们过投影效可以将它们区分开来；然而在深色模下，这几乎是效。此，在深色模，样使用「SystemBackground」作为背景色图层，在视觉上位于「后」会采用「base」色值，颜色较深；而位于「前」会采用「elevated」色值，颜色较浅。
以联系界为例。在独立「联系」app ，其背景色采用「base」色组，即纯黑；然而样界以模态视图形出现在「电话」时，其背景则会采用「elevated」色组。
我们再来看个稍复杂些例子。iPad 「邮件」在独立状态下会采用「base」色组作为背景色。我们唤出「联系」作为悬浮窗口时，其背景色会采用「elevated」色组，以便在视觉上表现出悬浮于「邮件」上效。
然而，「联系」与「邮件」多任务并列展示时，它们都会采用「elevated」色组作为背景，以确保窗口分隔空以及分隔指示符足够明显可见。
创新邮件时模态视图样采用了「elevated」色组作为背景，此时，后「邮件」主界背景色会稍许变深，为模态视图会为后图层添加层覆盖效，使其变暗。
此，你在为深色模进设计时，也要考虑到背景色可能随着层级升降而生明暗变化，并进步考量前景元素颜色比度是否恰。时我们要再强调半透明填充色和分隔线色要性，为它们可以灵活适应于「base」与「elevated」两组背景色。
下面看质（materials）。
iOS 13 材质体系发生了很大变化。现在，你可以从「thick」、「regular」、「thin」和「ultra-thin」这四透明度不材质进自由选择，它们都能良好适配于不背景环境。
时，它们观会随着深、浅模切换而自动调。
你可以根据自己实设计需求而选择使用哪厚度材质。其，「regular」是系统默认材质，适用于绝大多数界环境。
如需要为内容提供更高比度，你也可以选择更厚材质。
如需承载轻量级操作，或是较为简单内容，那么「thin」或「ultra-thin」更加适合。材质选择取决于其所承载内容特质。
说到内容，深、浅两模下材质都为其可能承载内容提供了恰虚化透明效（vibrancy）。这是在 iOS 及 Apple 其他平台被广泛采用视觉效。
相比于实色元素来说，具有虚化透明效内容更加适用于系统提供材质。材质背后背景色发生变化，实色内容很可能与材质生混溶，而带来严可读性问题；而具有虚化效内容则能始终保持恰比度。
新的 iOS 设体系同样涉及到系统控件的翻新，包括形状与颜色的变化，从达到高的内部一致性。
过语义化颜色重绘的系统控件可以良好配于深、浅两种模式。因此，使用系统提供的 UIKit，无需付出任何发本便能实深色模式的自动配。重新创建控件替系统控件，这不仅需花费的时间，同时也难以具备自动配一系列优点。
当然，很多时候，制化的控件也必需的；UIKit 毕竟难以满足所的设需求。譬如，UIKit 并提供星级打分控件。当自行设时，应该使用系统提供的颜色方案，这样就无需针对深、浅模式单独行理了。
导航栏也行了升级。默认状态下的标题导航栏不再背景色投影效果，因标题能够与内区域无缝衔接。当内导航栏底部行滚动时，导航栏的背景色与投影效果则会淡入呈。
这种处理逻辑同样可以用于默认的小导航栏。例如 iPad 的「设置」当中，主导航栏与右侧标准导航栏都使用了无背景、无投影的样式。
无缝衔接的导航栏看去不错，但也并非任何时候都用。由于其背景全透明的，任何于下方的内都会直接呈出。此外，如果界面当中的控件元素较多，信息密度较，那么应该导航栏底部保留原本的投影效果，从形明确的区隔感。
一直以，iOS 都会提供一系列图标符，用于列表行或底部具栏处。然深色模式当中，过去的图标表得些差强人意，因它们看去太过纤细了。
于，我们的设团队重新设了所的图标。酷的，我们将它们制了 SF Symbols 供各使用。
SF Symbols 当中包含了超过 1500 图标。这不仅一套全新的图标集，同时表了设使用图标的全新思。顾思义，SF Symbols 了配合 San Francisco 字体的视觉特性所设的。
这些图标可以文本字符一样被输入，因此能够与文字同时呈一行当中。它们拥内嵌基线，以确保与文字保持恰当的纵向对齐。
每一 SF Symbol 都针对当字提供了小（small）、中（medium）、（large）三种缩变体，以应不同的界面环境。
同时，与 San Francisco 相对应，每一 SF Symbol 都提供了种不同的字重。
SF Symbols 的矢特性可以确保其能够配合动态字体功能（dynamic type）实自由缩。
同时，由于提供了多种字重，当「辅功能」设置中的「粗体文本」被启后，SF Symbols 也会自动呈粗体样式。
设界面时，可以通过新的 SF Symbols app 找到所需的图标，直接复制，然后粘贴到设稿里的文本图层当中即可。
新过的 iOS Apple Design Resources Sketch 文件已全面支持 SF Symbols。譬如，换 tab bar 中的图标，只需选中 tab bar，将 SF Symbol 粘贴到右侧检查器面板的特字段当中，即可实覆写。这项功能我人已使用了几月，这真的会改变我们一直以的设方式。
如果这 1500 多图标仍然难以满足的全部需求，还可以将某 SF Symbol 导出 SVG 格式，然后到 Illustrator 或 Sketch 当中行制化修改。保存后的 Symbol 同样具备述的一切功能特性。
欢迎关注作者微信公众号：「Beforweb」
浙公网安备33011002017549号