iOS14 让人热议的“小部件”该怎么设计？

9月17日，苹果正式发布了iOS 14的新版系统，这次较大的亮点，便是iPhone桌面UI新增“小部件”功能，让原本规规矩矩的 iPhone主页发生了很大的变化；更进一步的如果你足够敏锐，就一定会第一时间想到小部件是需要 UI 进行设计的。

我请教了前小红书的设计负责人酸梅干超人，进一步解读了iOS14的设计规范，当然，由于篇幅原因，我这里跟大家解读几个常见的设计规范：

本次iOS更新的重中之重：小部件。iOS 的桌面自此以后变得更加多样化 (花里胡哨)。当然，使用安卓的同学一定不会对桌面小部件陌生，但作为 UI 设计师，我们还是需要去了解更多的关于苹果版小部件的细节。

首先，针对 375✕812 (iPhoneX/Xs/11 Pro) 的屏幕来说，即将到来的 小部件总共有三种不同的尺寸，它们分别是：155✕155pt(small)、329✕155pt (medium)、329✕345pt(large)。

以天气小部件为例：

而其余尺寸的屏幕小部件的尺寸也各不相同，下面给出详细的表格：

第二，苹果官方建议小部件只专注于一个功能，展示与 APP 最具强关联性的信息；谨慎地使用色彩，让文字信息凸显出来且易于阅读。

第三，建议使用 iOS 原生字体，即：西文 SF Pro，中文苹方。

第四，数据加载需要占位符，可使用半透明的方块、圆形来表示文字段、图标。

第五，Widget 内部图形的圆角需适配外框的圆角。

第六，适配黑暗模式。

PS：文末有赠送iOS14小部件设计资源的方式哦～

San Francisco (SF) 是 iOS 系统的默认英⽂字体：这种字型的字体经过了优化，使设计具有可读性、清晰性和⼀致性。

San Francisco 字体的设计的⼤号字体和⼩号字体都很清晰。在响应⽂本⼤⼩的变化时，优先考虑内容，下面给出默认的大尺寸字体规范：

在字体的使用中，如果可以的话，尽量只使用一种字体，⽤字重、字体⼤⼩和颜⾊来突出 App 中重要的信息。

PS：文末有免费赠送SF字体的方式哦～

iOS ⽤于在屏幕上放置内容的坐标系统是以点（pt）为基础的，这些点映射到显示器中则以像素显示。

在标准分辨率屏幕上，⼀个点等于⼀个像素（1pt = 1px）。但因为⾼分辨率屏幕的像素密度更⾼，所以在真实世界⾥同等⾯积的屏幕中就包含更多的像素，即⼀点中包含更多像素（1pt = 2px、1pt=3px）。因此，⾼分辨率屏幕需要具备更⾼像素的图像。

为了⽀持所有的 iOS 设备，在设计时建议提供⾼分辨率的图像：基于不同的设备，将每个图像中的像素数量乘以特定⽐例系数来进⾏适配。

标准分辨率图像的⽐例系数为1.0，这种图像被称为 @1x 图像。⾼分辨率图像的⽐例系数为2.0或3.0，被称为 @2x 或 @3x 图像。假设你有⼀个标准的分辨率 @1x 图像，如 100px x 100px，那么，该图像的@2x版本将是 200px  × 200px，@3x 版本将是 300px × 300px。

分辨率影响了图标的设计，iOS的App图标需符合以下规格标准：

每个 App 必须提供⼀⼤⼀⼩两个图标，⼩图标会出现在主屏幕，并且当你的 App 被安装后会被系统使⽤，⼤图标会被⽤在苹果商店中。

在 iOS13 以及更⾼版本中，⽤户可以选择⼀种称为深⾊模式的系统级⿊暗主题。

在深⾊模式中，系统在所有视图、菜单、控件中采⽤了⼀种更⿊的⾊板，并且它使⽤了⼀种更为醒⽬的⾊彩让前景内容在背景中脱颖⽽出。深⾊模式⽀持所有⽆障碍特性。

深⾊模式将焦点放在界⾯的内容区域，让内容脱颖⽽出，⽽其他 UI 元素隐于⿊暗。深⾊模式的⾊板包含了更暗的背景⾊和更亮的前景⾊，在设计时色彩的选择上，需保证在深浅模式下颜⾊都能拥有⾜够的对⽐度。