儿童文学

图文版 WWDC 设计分会:iOS 13 设计新特性(1) – 学UI网

  • 作者:本站
  • 时间:2019-08-14
  • 81人已阅读
您现在的位置:首页 > 儿童诗歌 > 文章
简介 ”开始。 其实近来也看到有朋友在做关于这场分会的内容,不过更像是要点提炼;演讲者在内容的骨骼之间填充了很多有价值的细节信息,不仅关于“how”,更在于“why”;我会把所有这些内容都涵盖

图文版 WWDC 设计分会:iOS 13 设计新特性(1) – 学UI网

”开始。

其实近来也看到有朋友在做关于这场分会的内容,不过更像是要点提炼;演讲者在内容的骨骼之间填充了很多有价值的细节信息,不仅关于“how”,更在于“why”;我会把所有这些内容都涵盖进来,尽可能还原完整的现场。 本场演讲人是AppleDesignEvangelist团队的MikeStern,话题涉及“深色模式”、“卡片视图”和“情境菜单”三大方面。 由于整体篇幅较长,我们在本期首先聚焦于“深色模式”。 Mike从设计体系、颜色、材质、系统控件、SFSymbols等若干方面的新变化入手,对“深色模式”相关主题进行了从内到外的详细诠释。

下面我们进入正题。 随着iOS13的到来,我们设计和开发app的方式将会发生细微而又重大的变化。 深色模式将改变我们对颜色、图标图形及文字内容的处理方式。 新的卡片风格面板将会改变模态视图的默认呈现方式及操作方法。 新的情境菜单可以帮助用户快速访问与当前内容相关的情境化功能选项。

接下来,我们将围绕这三个主题进行详细的探索。 首先来看深色模式。 去年,我们为macOS带来了深色模式,受到了人们的欢迎。 其实多年以来,影像视频类产品通常都在使用深色界面,以帮助用户更清晰地聚焦于内容本身。

深色界面非常适合于光线条件较暗的环境,因为我们的眼睛能够更加轻松地在界面与周围的环境之间进行切换。 此外,出于个人喜好,很多用户也更加倾向于使用深色界面。

iOS中的深色模式使用纯黑色作为背景色,为文字内容及其他前景元素提供最高对比度。 此外,纯黑背景色在视觉效果上可以和设备框体无缝融合,使整个界面看起来更加开阔,仿佛与硬件融为一体。

一般而言,所有app都应该支持深色模式。 当人们将系统切换为深色模式之后,自然会期望每一个app的外观都随之进行改变。

深色模式的设计适配涉及到整个iOS设计体系的进化。 目前,iOS设计体系已经面向iOS13进行了全面的翻新。

这里简单诠释一下,所谓“设计体系”,大体是指以符合特定逻辑及一致性的方式整合在一起的一系列界面组成元素,包括颜色、字体、图形等等。

一套合理、一致的设计体系将有助于你构建出更加易学易用的app;基于iOS设计体系构建的app自然能使iOS用户感到熟悉易懂。 在进入正题之前,我还想和各位分享我们的设计团队在iOS设计体系翻新过程中的一些主要设计目标。 首先,也是最首要的,我们希望iOS依然能够保持人们所熟悉的样子,并符合长久以来的操作直觉。

我们希望iOS具备更好的内部一致性。

所有的内置app都已进行重设计,以保持彼此之间的统一;期间所运用到的新设计特性也正是我们在接下来的正题当中将要进行了解的。

我们希望新的设计体系能够提供一系列的颜色选项,以便构建更加清晰的信息层级,使最重要的元素得以突显,而次要元素则适度弱化。 我们还将可访问性(accessibility)放在了和其他设计目标同等重要的位置,新系统将全面支持“辅助功能”设置中的“粗体文本”与“增强对比度”模式。 最后,我们希望新的设计体系足够简单直白,易于实施。

下面进入正题,让我们一起对深色模式进行深入的了解。

1.颜色每个app都有背景视图,同时绝大多数app会提供文字内容与图标。

很多app还会通过分隔线与分组容器来组织内容。

我们会很自然地通过色值对这些元素的颜色进行定义,例如字色是纯黑,背景是纯白等等。 随着界面复杂度的提升,色盘也会相应地进行扩展,但通常不会出现什么大问题。

然而,要同时适配深、浅两种外观模式,你就必须管理两套完整的颜色方案,并确保它们之间始终保持同步。 这种情况下,我们需要以更加抽象的方式来思考和管理颜色体系。

为此,我们引入了“语义化颜色”的概念。 语义化颜色通过“用途”对颜色进行定义描述,而非通过具体色值。

“用途”的概念具有动态性,可以脱离于具体的表现样式而独立存在。 譬如,一个“背景色”,在深色模式当中可以指代黑色,而在浅色模式当中可以指代白色。 因此,相比于自己维护两套独立的配色,你现在完全可以使用系统内置的语义化颜色方案来确保你的界面可以自动适配深、浅两种外观模式,这会非常方便。 iOS13内置了一整套语义化颜色供你使用,其中多数颜色都拥有“一级”至“四级”梯度。 这些变量主要用于构建信息层级,例如“文本色”(LabelColor)是一级字色,可以提供最高的对比度,主要用于最为重要的内容元素,例如内容的主标题;而“二级文本色”(SecondaryLabelColor)可以用于副标题,“三级文本色”(TertiaryLabelColor)用于输入框占位符文本,“四级文本色”(QuaternaryLabelColor)用于禁用状态的文本。 对于背景色来说也是同理。 “系统背景色”(SystemBackground)是一级背景色,在浅色模式当中指代白色,在深色模式当中则指代黑色。 “二级系统背景色”和“三级系统背景色”则用于构建更丰富的背景层级。 此外还有一组背景色专门用于列表视图(SystemGroupedBackground)。

仔细观察下图,你会发现,深、浅两种模式当中的列表视图在背景色的使用上并非简单的反色。 在两种模式中,列表行的背景色都比界面底色更加明亮,因为我们希望在确保对比度的同时,也能使两种模式下的界面在感知上更加统一。 在设计深色界面时,试着设想光源变暗之后的效应,而非简单地将所有颜色进行反转。

此外,系统内置的语义化颜色还包括填充色(FillColor),以及分隔线色(SeparatorColor)。 其中,所有的填充色和一种分隔线色采用了半透明效果,以便与各类背景色形成良好的对比度。

系统同时提供了六种完全不透明的灰色供你使用(SystemGrey)。 在那些使用半透明色可能带来问题的地方,这些灰色将尤其适用。 例如在绘制交叉网格时,半透明色会产生重叠效果,干扰人们的视线;如果元素需要叠加放置,那么只有使用实色才能表现出正常样式。 这些语义化颜色已经被用于新系统中的方方面面,因此我们也鼓励你在自己的app中使用这些颜色。 你可以在AppleDesignResources与HumanInterfaceGuidelines当中查看完整的颜色定义,以便更好地起步。

此外,我们还会继续提供一系列着色颜色供你使用。

这些着色同样是动态的,能够针对深、浅模式进行自动调整。

同时,每个着色还拥有高对比度变体,当“辅助功能”设置中的“增强对比度”被开启后,这组变体将被调用,着色在深色模式中会变得更亮,在浅色模式中会变得更暗。

Top