When the first Apple Watch was introduced in 2015, I was shocked by the WatchOS home screen design. Its layout differs from the standard web format layout, but proposes a primitive visual dynamic interface.

Five years later, I’m still in awe when I open the watch with its sleek and stylish UI. But, from an engineering standpoint, I’m still confused about the underlying principles of this layout.

As an experienced application developer, I know that constructing the navigation flow and layout is critical to the foundation of any application. Apple has done it all, with a degree of flexibility, customer satisfaction and curiosity.

Sure, I like to use CSS Grid, Flexbox, and other Web and mobile technologies to build solid application layouts, but due to the complexity involved behind the Apple Watch Bubble UI, these methods don’t work. I decided to investigate all aspects of this layout, and in particular to explore the geometry of visual design and the mathematics of design that can orchestrate layout.

Disclaimer: This discussion of the basic functionality and design of the user interface is based solely on my personal opinion; There’s a good chance Apple already has this layout, and it could even be very different.

Basic geometry of layout

Let’s start with the basic cellular grid of bubbles. We’ll deal with bubble resizing and other related effects in the layout later. As shown in the figure below, there is a row with one less bubble every other complete bubble row, and the bubble in the last row is an incomplete center bubble row.

As shown in the figure below, UI can be divided into three concentric regions: center, Fringe, and Outer. The first two areas are critical when modeling how the size and position of bubbles change on the screen. Meanwhile, in all cases of bubble sliding, if a region contains the central dot of the bubble, the bubble is judged to be in the region.

The central region is defined as a central (rounded) rectangle bounded by x and y radii and decorated with corner radii. All bubbles in the center area are rendered at their maximum size.

Edge region An edge region is defined as the space outside the center region within a certain fringe width of its outer edge. This area is used to contain the transition from minimum to maximum size of each bubble. As the bubble enters the region from the periphery, the bubble moves at its minimum size, which increases linearly until it reaches its maximum size when it reaches the central region.

External area An external area is defined as all the space on a 2D canvas that does not include the center and edge areas. In this region, all bubbles are minimized.

What about circular and non-circular rectangular areas?

When x radii, y radii and corner radii are equal, the center and edge regions are circular. In addition, when the corner radius is zero, the central region becomes non-circular; However, corners in the edge area will still be filleted with a radius of the edge width (edges cut into arcs).

Calculate bubble size according to bubble position

Let’s dive into the basic techniques of layout, and let’s use defined areas to develop a mathematical model that calculates the size of the bubble based on its position on the screen.

First, we need to define another key visual landmark: the corner area.

The corner area is defined as four areas defined by the corner of the canvas and the inner corner of the center area (the radius of the corner embedded from the edge). In the corner area, the dimensions remain constant along the radial direction with respect to the inner corner. In contrast, bubbles outside the corner region remain constant in size for constant x or y positions.

Note: If the central region is round, then all four interior angles are in the center. Otherwise, if the central area forms a non-rounded rectangle, the inner corner will not deviate from the outer edge of the rectangle.

Step 1: Determine if the bubble is in the corner area

At first glance, this seems to require four separate operations. However, we can look for similarities between all corner regions, and an expression will be generated: if the bubble is in the corner region, then

abs(bubble.x) > x_radius and abs(bubble.y) > y_radius
Copy the code

Because the variables X radius and y radius are essentially positive.

Step 2: Identify concentric regions containing bubbles

As mentioned earlier, bubble size depends in part on which concentric region contains the center of the bubble.

If the bubble is in the corner area, first calculate its distance to the corresponding inner Angle according to the hook distance formula:

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

If the distance is less than the corner radius, the bubble is judged to be in the central region; If this distance is less than the sum of the radius of the corner and the width of the edge, the bubble is judged to be in the edge region. Otherwise, bubbles are located in the outer region.

If the bubble is not confined to the corner area, calculate its distance from the center of the canvas using the following expression:

distance_to_center = max(abs(bubble.x), abs(bubble.y))
Copy the code

If the distance is less than the corresponding radius (x or y), it is in the central region. Otherwise, if the distance is still less than the sum of the radius and edge width, the bubble is in the edge region. Otherwise, bubbles are located in the outer region.

Step 3: Calculate bubble size

The bubbles in the central area are rendered at maximum size, while the bubbles in the outer area are completely unamplified.

The edge region is an interesting one because it is responsible for the transition between bubble size and state.

The current size change of all bubbles is proportional to the progress of the bubbles through the edge region. In other words, the bubbles 30% away from the outer edge have been 30% enlarged, while the bubbles 20% away from the inner edge have been 80% enlarged.

Therefore, the current size of the bubble is calculated by interpolating the distance from the bubble to the middle region (from range (0, edge width) to range (maximum size, minimum size)). The calculation is as follows:

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

Here the ** distance_to_MIDDLE_region ** can be represented as

distance_to_internal_corner - corner_radius
Copy the code

If the bubble is in the corner area, otherwise

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

Very good! This calculation needs to be repeated for each bubble each time the user scrolls. Seems simple enough, right? But in reality, this is just the tip of the iceberg. While many people would be happy with the current state of the model, I wanted to refine it further so that I could accomplish the feat of recreating Apple in the interface.

Advanced features

compact

I inadvertently noticed that the Apple Watch UI optimizes bubble compactness. Whenever bubbles change size in the edge area, they maintain the same binding line width as the nearest bubble.

Currently, our model always keeps bubbles at a constant distance. The chart below shows how our current progress compares to our final goal (a look ahead).

Achieving optimal compactness brings new complexity, and from now on, in addition to manipulating size, we need to directly manipulate the bubble position.

As before, we will translate each bubble according to the one containing the concentric region and whether the bubble is located in the corner region.

The bubbles in the central region are already so tight that they do not need to move.

The bubble in the outer region moves inward until it reaches its maximum size. If these bubbles are in the corner area, they will be shifted to the corresponding inner corner or center of the canvas.

The edge region is again responsible for the transition between these two states. Just like the size of the bubble, the amount of bubble translation is determined by interpolating the distance from the central region (range (edge width, 0) to range (maximum size, 0)). (Interpolation or interpolation is a process or method of deducing new data points within a range from known discrete data points.)

translation_magnitude = distance_to_middle_region / fringe_width * max_size
Copy the code

The previous direction rule also applies.

gravity

This feature is a concept I conjured up with my own imagination — Apple’s bubble layout doesn’t necessarily show it off. Nevertheless, I want to further improve the compactness between bubbles by drawing the distant bubbles to the central region.

Surprisingly, the property of gravity is easier to implement than any other deconstruction transformation undertaken so far.

In short, gravitational effects involve shifting bubbles from the outer region to the edge region, proportional to the distance from the bubble to the edge. For our purposes, we define a linear relationship between the bubble distance to the edge and the displacement, but this can be done in many different ways (exponential, square, square root, etc.).

The distance the bubbles in the outer region will be moved can be described as the number of values expressed by “compactness”, plus an additional value:

distance_to_fringe_region * gravitation
Copy the code

Where, the distance to the edge region can be expressed as

distance_to_middle_region - fringe_width
Copy the code

And gravity is a constant of proportionality. A value of 0 means no gravity, and a value of 1 means no separation between the outer bubbles. Gravity works best when it falls between these two values.

From theory to application

As a Web developer obsessed with React. Js, I want to open source my findings to the design and development community. Following the steps described in this article, I have implemented a source React component that you can use.

This abstraction with all the controllable variables in question (and more) is highly configurable. The layout also allows for the use of custom bubble components for basic customizability. I can’t wait to see you use this layout to create your own content!

conclusion

Thank you for reading my article and I hope you find it inspiring! Feel free to leave feedback or questions in the comments section.

resources

  1. The online Demo
  2. Making the warehouse

🌈 that’s all for today’s article sharing. If you like this article, please like it.Star,Focus onI (public number: front iron egg) 🎯

  • Deconstructing the Iconic Apple Watch Bubble UI
  • Originally written by Blake Sanie
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: ZhiZhuZhu
  • Proofreader: Hoarfroster