关于SegmentFault:解构标志性的-Apple-Watch-Bubble-UI

当第一款 Apple Watch 在 2015 年推出的时候，我对 WatchOS 的主屏幕设计感到震惊。它的布局不同于规范的网格局布局，而是提出了一种原始的视觉动静界面。

五年后，当我关上这款具备润滑又时尚 UI 的手表时，依然感到敬畏。然而，从工程学的角度来看，我依然对这种布局的底层原理感到困惑。

作为一名经验丰富的应用程序开发人员，我晓得结构导航流程和布局对于任何应用程序的根底都至关重要。Apple 全副都做到了，并且还具备肯定的灵活性，用户的满意度和好奇心。

当然，我喜爱应用 CSS Grid、Flexbox 以及其余 Web 和挪动端技术来构建牢靠的应用程序布局，然而因为 Apple Watch Bubble UI 背地波及的复杂性，这些办法并不实用。我决定钻研这种布局的各个方面，尤其是摸索能够编排布局的视觉设计的几何形态和设计的数学原理。

免责申明：此用户界面的基本功能和设计的探讨仅源于我的个人见解；苹果很有可能曾经实现了这一布局，甚至可能有很大不同。

布局的根底几何

让咱们从气泡的根本蜂窝网格开始。咱们稍后将解决布局中气泡的大小调整以及其余相干成果。如下图所示是每隔一个残缺的气泡行呈现一个少一个气泡的行，以及最初一行的气泡是不残缺的居中气泡行。

如下图所示，UI 能够分为三个同心区域：center（核心），fringe（边缘），和 outer（内部区域）。在针对气泡的大小和地位在屏幕上的变动进行建模时，前两个区域至关重要。同时在针对气泡滑动的所有状况时，如果某个区域蕴含该气泡的核心圆点，则该气泡被判断为在该区域内。

核心区域 定义为以 x 半径 和 y 半径 为边界，并且具备 拐角半径 润饰的处于核心的（圆角）矩形。核心区域中的所有气泡均以其 maximum size（最大尺寸）渲染。

边缘区域 边缘区域定义为核心区域内部在其外边缘的肯定 fringe width（边缘宽度）内的空间。此区域用于蕴含每个气泡 从最小尺寸到最大尺寸的过渡。当气泡从外围进入该区域时，气泡以其最小大小进行挪动，该大小线性减少，直到达到核心区域时达到其最大大小。

内部区域 内部区域定义为 2D 画布上不包含核心和边缘区域的所有空间。在这个区域内，所有气泡都被 最小化。

圆形和非圆形矩形区域如何解决？

当 x 半径 ，y 半径 和拐角半径 均相等时 ，核心和边缘区域为圆形。此外， 当拐角半径 为零时，核心区域变为非圆形；然而，边缘区域的拐角仍将以边缘宽度的半径进行倒圆角（棱角切削成圆弧面）。

依据气泡地位计算气泡大小

让咱们深入研究布局的根本技巧，让咱们应用定义的区域来开发数学模型，该模型依据气泡在屏幕上的地位来计算气泡的大小。

首先，咱们须要定义另一个要害的视觉地标：拐角区域。

拐角区域 定义为由画布的拐角以及核心区域的外部拐角（从边缘的嵌入的 拐角半径）界定的四个区域。在拐角区域，尺寸绝对于外部拐角沿径向（指沿半径的方向的）放弃恒定。相比之下，拐角区域内部的气泡在 x 或 y 地位不变时放弃大小不变。

留神：如果核心区域是圆形，则所有四个外部角均位于核心。否则，如果核心区域造成一个非圆角的矩形，则外部拐角不会偏离矩形的外边缘。

步骤 1：确定气泡是否在角落区域

乍一看，这仿佛须要四个独自的操作。然而，咱们能够寻找所有拐角区域之间的相似性，而后就会产生一个表达式：如果气泡在拐角区域内，则

abs(bubble.x) > x_radius and abs(bubble.y) > y_radius

因为变量 x radius 和 y radius 实质上是正的。

步骤 2：确定蕴含气泡的同心区域

如前所述，气泡大小有一部分是取决于哪个同心区域蕴含气泡的核心。

如果气泡在拐角区域 ，首先依据 勾股间隔公式 计算其到对应内角的间隔：

distance_to_internal_corner = sqrt((abs(bubble.x) - (x_radius - corner_radius))^2 + (abs(bubble.y) - (y_radius - corner_radius))^2)

如果此间隔小于 拐角半径 ，则气泡被断定被为在核心区域；如果此间隔小于 拐角半径 和边缘宽度 的总和，则气泡被断定为在边缘区域。否则，气泡位于内部区域。

如果气泡未限度在拐角区域内，就应用以下表达式计算其到画布核心的间隔：

distance_to_center = max(abs(bubble.x), abs(bubble.y))

如果该间隔小于对应的半径（x 或 y），则在核心区域内。否则，如果间隔仍小于半径和 边缘宽度 的总和，则气泡位于边缘区域中。否则，气泡位于内部区域。

步骤 3：计算气泡大小

核心区域内的气泡以最大尺寸渲染，而内部区域内的气泡则齐全未被放大。

边缘区域是个乏味的区域，因为该区域须要负责气泡的大小状态之间的过渡。

所有气泡的以后大小变动都 与气泡通过边缘区域的进度成比例。换句话说，间隔外边缘 30% 的气泡已进行了 30% 的放大，而间隔内边缘 20% 的气泡已进行了 80% 的放大。

因而，计算出气泡的以后大小是通过将气泡到两头区域的间隔（从范畴 (0， 边缘宽度 ) 到范畴 ( 最大大小 ， 最小大小)）进行插值来实现的。计算如下：

current_size = max_size + distance_to_middle_region / fringe_width * (min_size - max_size)

这里的 **distance_to_middle_region** 能够示意为

distance_to_internal_corner - corner_radius

如果气泡在拐角区域，否则

max(abs(bubble.x)- x_radius, abs(bubble.y)- y_radius))

十分棒！用户每次滚动时都须要对每个气泡反复进行此计算。看起来很简略，对吧？但实际上，这只是冰山一角。只管许多人会对以后的模型状态感到满足，但我想进一步欠缺模型这样就能够实现在界面上复刻 Apple 的壮举。

高级性能

紧凑

我不经意间留神到 Apple Watch UI 能够优化气泡的紧凑性。每当气泡在边缘区域产生尺寸转换时，它们都与最近的气泡放弃雷同的装订线宽度。

以后，咱们的模型始终会使气泡之间放弃恒定的间隔。上面的图表显示了咱们以后的进度与最终目标的比照（前瞻）。

实现最佳的紧凑性会带来新的复杂性，从当初开始，除了操纵尺寸之外，咱们还须要间接操作气泡的地位。

与之前类似，咱们将依据蕴含同心区域的每个气泡以及气泡是否位于拐角区域来平移每个气泡。

核心区域中的气泡曾经很严密了，因而不须要挪动。

内部区域中的气泡向内挪动直到这个气泡的最大大小。如果 这些气泡位于拐角区域，它们将平移到相应的外部拐角或画布的核心。

边缘区域再次负责这 两个状态之间的过渡 。就像气泡的大小一样，气泡平移间隔的多少由到核心区域的间隔（范畴 ( 边缘宽度 ，0) 到范畴 ( 最大大小，0)）的插值得出。（内插或称插值（英语：interpolation）是一种通过已知的、离散的数据点，在范畴内推求新数据点的过程或办法。）

translation_magnitude = distance_to_middle_region / fringe_width * max_size

之前的方向规定同样实用。

引力

这个个性是我用本人的想象力设想进去的一个概念 —— Apple 的气泡布局不肯定会展现它。尽管如此，我想通过将远处的气泡吸引到核心区域来进一步提高气泡之间的的紧凑性。

出其不意的是，实现引力这个个性比迄今为止进行的任何其余解构转换都要容易。

简而言之，引力效应波及将内部区域中的气泡平移到边缘区域，与气泡到边缘的间隔成正比。为了达到咱们的目标，咱们定义了气泡到边缘的间隔与位移之间的线性关系，然而这能够通过许多不同的形式（指数，平方，平方根等）来实现。

处于内部区域中的气泡将要被挪动间隔能够被形容为“紧凑性”所表白的数量值，加上 一个额定值：

distance_to_fringe_region * gravitation

其中 到边缘区域的间隔 能够表白为

distance_to_middle_region - fringe_width

以及 引力 是一个比例常数。这个值为 0 时示意没有重力作用，这个值为 1 时则示意在内部气泡之间没有拆散。当引力介于这两个值之间时，成果最好。

从实践到利用

作为一个对 React.js 着迷的 Web 开发人员，我想向设计和开发社区开源我的这次钻研发现。依照本文形容的步骤，我实现了一个 源的 React 组件，能够供大家应用。

具备所有探讨的可控变量（甚至更多）的这种形象是高度可配置的。该布局还容许应用自定义气泡组件以实现根本的可定制性。我急不可待想看到您应用此布局创立属于你的内容！

论断

感谢您浏览我的文章，心愿您能从中取得启发！随时在评论局部中留下反馈或问题。

资源

1. 在线 Demo
2. Github 仓库

???? 明天的文章分享就到这里啦，如果喜爱这篇文章的话请点赞、Star、关注我（公众号：前端铁蛋）吧 ????

• 原文地址：Deconstructing the Iconic Apple Watch Bubble UI
• 原文作者：Blake Sanie
• 译文出自：掘金翻译打算
• 本文永恒链接：https://github.com/xitu/gold-miner/blob/master/article/2021/deconstructing-the-iconic-apple-watch-bubble-ui.md
• 译者：ZhiZhuZhu（弹铁蛋同学）
• 校对者：Hoarfroster