构建样式化的界面

嗨 我是路克拉森 我是一名Xcode工程师 晚一点 将会交给我的同事尤瑟夫埃拉布 Interface Builder提供简单符合直觉的 方式 将设计app用户界面的工作可视化 开发人员不需写任何程序代码 只需 专注在如何让他们的app显得出众 今天 我们要向你展示 Interface Builder在Xcode 13中 使你可以比以往更轻松地利用 最新的平台功能 包括新系统提供的 控件样式 让你的app更加突出 在本视频 我们将介绍 Interface Builder的改进 包括画布、按钮样式的创作支持 表格内容样式 分层符号及辅助使用 我们先从画布的更新开始 在Xcode 13 的Interface Builder中 你首先会注意到 画布底栏的新设计

左方的控制功能维持不变 只不过更为简洁 让画布拥有更多空间 这里有个弹出框可以选择设备 有组织的分类各式设备 点选另一类别后会展开细项 同时收起原类别 让你更轻松地寻找到想要的设备

还有选项可以配置空间布局、方向 与外观 还有视频后段会谈到的 全新辅助功能选项 其他优化包括 画布大纲的呈现 我们回到Interface Builder来看这项 我正在进行一个旅馆app的订房页面 我从左边的大纲页面上 注意到订房 页面没有被放置在活动页面的旁边

这不符合我的预想 因为活动页面 之后应该接续订房页面 现在 我们可以使用拖放方式 在大纲上移动一个或多个页面 所以我将订房页面拖放到 促销页面的下方

太好了 现在两页面的位置接续了 也更容易互相导航 只要拖曳时按住Option键不放 就可以复制整个页面 另一个大纲的更新 就是类别 例如约束条件 现在已可供自定义 允许键盘导览 修改 要删除整个 类别或对象更为简易 我选大纲中其中一个约束群组 来做示范 这样 我就是选取了群组中所有的 约束条件 我点选箭头朝右按钮 展开群组中的四个约束条件 现在 我可以在检查器中轻松地修改 任何群组内的约束条件

或者 想删除整个约束条件群组 只要点它并按下删除键即可 接着 我们继续谈新的按钮样式

在Interface Builder的Xcode 13中 支持新的按钮默认样式 包含熟悉的一般样式 还有三款新样式 灰色、淡色和填充样式 这些新样式让你更轻松地在 Interface Builder中直接设计出 兼具美观与一致性的按钮 为系统的特色提供自动选项 例如动态字体、多行标题及辅助使用 另外 按钮样式支持更多定制化选项 例如默认按钮的大小和边角样式 我会在视频后段部分 谈到更多定制化样式的选项 观看视频 “Meet the UIKit button system” 获得更多关于按钮样式的信息 让我们回到Interface Builder 实际看看这些新样式 在界面底部 有个“订房”的按钮 可以做些更吸引人的改进 我会使用捏合缩放 拉近画面

我希望这个按钮的底色被填充、有圆角 更能吸引人的目光 在Xcode 13 可以设计出这种按钮 直接从Interface Builder中 选择按钮样式 我们近一点来看检查器选项 靠近按钮检查器选项的最上方 有个新的“样式”属性 如果不是选择默认样式 按钮就会选入新的按钮样式系统 同时支持动态字体、多行标题 及辅助功能 我打开检查器 点选样式的下拉式选单 为我的“订房”按钮选择填充样式 现在 按钮有了填充的蓝色与圆角 正是我想要的样子 我只要做这个小变化 按钮的样式选项得以快速达到 你想要的视觉效果 选择样式之后 检查器上出现了新的属性 提供更进一步的定制化 包括字体、标题栏 色彩 影像位置以及边角样式 还有更多高级的背景调整选择

如同其名 “填充”样式让按钮的底色 填满颜色 让用户界面上的重要按钮 更加合宜显眼 在边角样式 你不需要为了设定出 一个特定的圆弧半径数字而烦恼 默认的圆角样式叫做“动态” 让漂亮的圆角半径 可以随着字体大小等比调整 按钮得以在任何尺寸如出一辙 或者使用“固定”样式 让按钮在不同 尺寸之下 一律固定相同圆角半径 你可以视不同情况调整 “动态”和“固定”样式皆提供了 定制化的圆角半径 另外 有许多默认圆角样式可供选择 包括小、中、大与胶囊 都适用于“动态”圆角调整 在检视中 按钮的样式也能调整按钮的大小 包括默认按钮的尺寸 有小、中、大 让我们回到饭店app 看看更多可改进按钮的地方 “入住”和“退房”按钮 看起来有些平淡 我会使用淡色 让它们更显眼 就是在背景刷上透明的颜色 适合重要又不到“填满”那样显眼的 视觉效果的按钮 我会在大纲页面 按住Command键 同时选择“入住”和“退房”按钮

在检查器中的按钮样式中 选择淡色

这完完全全就是我想要的按钮效果 接着 在促销页面上有几个按钮 也正合适使用新的淡色样式 我们继续采用 看看效果如何 点两下 使用画布的“小地图”功能 直接跳到促销页面

这个页面展示了许多旅馆的最新促销 客人在选择不同旅馆时 只要按下对应的“预约”按钮即可 每一个“预约”按钮都叠在底图上 为了凸显按钮与背景的对比 淡色样式可以帮得上忙 我会选这三个“预约”按钮 在大纲页面 同时按住Command键

在检查器的样式中 选择刷淡 一次更改所有的按钮样式

看起来真不赖 刷淡的按钮样式和背景颜色 是依循app的色调 提供了恰如其分的对比 我还希望“预约”按钮 可以再被点选后 切换外观并改变颜色 显示出哪些促销已经被点选过 我要把它们修改成双态触变钮 此效果也是iOS 15的新功能 就在目录下方的检查器中 我要修改“设为主选项”的属性 把此按钮改为双态触变钮

在此之前 我想先新增一个新按钮 在订房页面 让客人可以求助

我直接操作 打开对象库

现在有默认配置可以使用 有新的样式系统 包括一般样式按钮 还有三种新样式 灰色、淡色和填充 灰色样式 底色是透明的灰色 可以让对比强烈一些 所以 我选这个新款灰色按钮 再决定位置 作为“求助”按钮 就在导航栏上点选

我会在大纲上选择这个按钮

再使用捏合缩放 将画面放大

我要设定按钮的字体和大小

还有一个问号的符号 作为图标

再将图片与标题分得开一些 设定图示的边距

使用Interface Builder的一个好处 就是可以尝试很多变化 并快速查看使用效果 我还不确定这里用什么边角样式才好 所以我要尝试胶囊样式 看效果如何

看起来不错 但不是我要的效果 我要另外选择大的边角样式 来达到我期望的样貌 操作起来真简单 现在 任何需要更改按钮外观的地方 都能在按钮的检查器中轻而易举地达到 对于所需的更高级的定制化样式 可以在背景设定里面调整 有更多属性可以做出更细致调整 包括边角的圆角半径、笔画和底图

在订房最后一个步骤之前 要选择 一个房间的住房人数 我希望页面有住房人数的选项 可选择一至四人入住 iOS 15现在支持了弹出式按钮 非常适用于现在这个情境

弹出式按钮 是当你点选后 会展开一系列的选项 你就可以从中挑选出某一个选项 然后成为此弹出式按钮的标签

我已经创建好住房人数的标签了 接下来只要新增一个弹出式按钮即可 打开对象库 拖曳一个出来

弹出式窗口同样支持按钮样式 所以我会选择淡色样式 来呼应入住与退房的按钮样式

再来 我在大纲之中按下Option键 同时拖曳原对象 复制出两相同对象

最后 我要把这些对象修改成 一至四的选项

注意 如果是在Mac Catalyst 15的 Mac电脑打开此app 按钮样式会 自动导引至macOS的原生变体 更轻易让你的app在Mac上看来美观 现在Mac Catalyst 15已支持iOS的 弹出式按钮及工具提示 工具提示在 鼠标光标移至控制时 就会出现信息

我打算为此app增加一个 Mac Catalyst版本 并设定工具提示 在控件检查器建立新的弹出式窗口

这样就完成了 注意 目录的对象必须连接 运行时展示出来的动作

现在 我已在app采纳新的按钮样式 来继续打造并执行吧

这是app实际操作起来的样子 有着新款灰色样式的求助按钮 淡色样式的房间选项 还有填充样式预约按钮

最后是淡色的促销按钮 看起来真棒

接下来 我会交给尤瑟夫 来说明内容样式、 分层符号与辅助功能 尤瑟夫？ 谢谢 路克 下一个工作流程 我们要谈到的是 利用表格单元格样式的内容配置 来设计你的表格单元格样式 多数很棒的旅馆 也拥有很棒的餐厅 这间旅馆也不例外 我最近正在为这个app增加一些视图 让顾客查看餐厅的菜单 来看看我的最新进度 我用双指双击 在目录检视上近距离 对焦在他的表格 这个静态的表格视图 呈现旅馆 一系列的设施 我最近为旅馆餐厅 增加了新的一行 我希望它能比下方标签中的标题 更突出 表格单元格样式其中一样新功能 就是能让我们设计出想要的外观

这些是用新表格样式制作的版面设计 例如组标题 值单元和组页尾 这些新样式非常适合配上图标 同时自由地提供动态字体 让我们回到Interface Builder 在表格检查器中重新设计这些表格 我会选择文件大纲中所有的单元格

点选靠近属性检查器上方的样式 滑下选项 包含所有新的配置样式 我选择副标题值单位 由于我们正在使用其中一款新样式 我们可以更改检查器中的图示边距 我们在这里使用样式 并在标签与 图示之间 增加一点舒展的空间 现在 我们值单位的标签 标题更大也更清楚了 这正合我心意 大幅改善视觉呈现 不过 我仍想替这些值单位添些色彩 接下来 我们来看看分层符号 可以如何派上用场 在新的iOS 15 符号有多层效果 让我可以逐层指定色彩 此渲染效果可增加符号的色彩与深度 这里有两种新的渲染模式供我们利用 首先是分层模式 让你选定符号主层的色调 再从此色调延伸出其他层的色彩 颜色会随着层级不断递减 另一个是调色模式 让你能为符号的不同层级 单独自定义色彩 在“What's new in SF Symbols”视频 有更多关于新符号渲染模式的信息 在我们表格的检查器中 这些符号是采用单色模式 然而 我想要加强符号主层的元素 使用分层模式就能完美解决 这里是使用新渲染模式的符号 不同符号层级之间的不透明度 正好呈现了我想要加强的效果 再让我们回去Interface Builder应用 同样的 选择所有的值单位 为值单位的符号 选择渲染模式

我选择分层模式 并选刷淡色彩 来搭配我app的调性

太好了 我们给了这个属性的外观 一个全新的样貌 通过新的内容配置 更改值单位的风格 并为符号使用分层模式 现在 我们打造了新的属性外观 再来谈辅助功能 我们来看看目录的外观 这里提供了餐厅中关于某一品项的 更多详细信息 这里的叙述标签 使用章节标题模式 代表能够支持动态字体 这个标签的宽度已颇为足够 我猜测在大型版面设计上 某些设定可能会遇到一些问题 Interface Builder在Xcode 13新功能 你可以通过辅助功能 预览在iOS的浏览下 会有何效果 在Interface Builder的设计环节 就可办到 如同路克先前提到 在画布的底栏 有全新的辅助功能选项 点选辅助功能 就会有弹出式窗口 展开我可以在Interface Builder 调整的不同设定 有些设定可以调字体大小 边框值或颜色 我现在可以在画布预览我设定的效果 确保之后的呈现符合我的期待 好了 让我们回到叙述标签确认一下 在大型字体 是否能保持良好效果 我会打开辅助功能的弹出式窗口 启用设定 在动态字体的轴上移动 注意到叙述的标签内容 现在已经超出了画面的边界 我可以打开约束的弹出式窗口 为标签新增一项追踪约束来改善 同时 我也想修改预览标题的行数 到属性的检查器 调为0

如此 标签就算字再多也会自己分行 有了这些修改 我的标签不再会被 画面裁切 而会随文本自动调整 再次调整动态字体的轴 注意到现在的叙述标签 在任何字体大小之下都能完美呈现

在设计阶段就能预览辅助功能的效果 是非常强大的功能 因为你能在使用Interface Builder时 不须跳出就能快速修改 在iOS的辅助功能 现在 我们做了这么多修改 来看看模拟器中app的执行状态 在属性的表格预览中 这些值单位使用了内容配置的其中 一款样式 成就了我们预想的新版面设计 这些值单位拥有使用分层渲染模式的 符号 让符号的主要元素更为显眼 点击进入目录品项的详细信息 在这里的叙述标签也恰到好处 整体回顾一下 我们先把信息各栏的呈现变得更简洁 又看到了你可以如何定制化app按钮 使用功能强大的新按钮样式系统 再来使用了弹出式窗口 并如何使用内容配置样式在 快速检查新的版面设计在iOS与 Mac Catalyst之下的呈现 你的符号也可以通过新的渲染模式 增添更多色彩与强调重点 最后 我们来到如何在设计阶段时 更简单地预览辅助功能之下的设计 以确保app的iOS辅助功能之下 仍然适用 我们做了这么多地修改 完全不用写任何一条程序代码 让你把 时间花在如何让你的app更为出色

我们邀请你使用今天所谈到的工具 来让你的app更新颖、有型和现代 也记得去看这两条视频 “Meet the UIKit button system”和 “What's new in SF Symbols” 谢谢观赏 祝你在WWDC21过得愉快 [打击乐]