medium bookmark / Raindrop.io |

iPhone X and its curved screen is the most exciting iOS UI design challenge in many years. However, there’s not a lot of time for developers to adjust their apps to this new form.

These are explorations on how certain design patterns can be adapted to the new screen. I’ll use findings in our own apps as an example.

Edge-to-Edge Buttons

This kind of button treatment was introduced around iOS 7 when Apple wanted to make the most out of small screens.

The solution can be to pad them and give them a floating treatment. Gradients are optional, but boy are they nice.

32-36 pt from the bottom edge is similar to the distance used in Apple’s tabbars. 44 pt is the corner radius of the screen. Harmoinizing the radius of the element with screen radius makes it more pleasant. The spacing from the bottom of the screen helps avoid interfering with the home indicator.

Banners

Again, I’d suggest pad them and float them.

Bottom Progress Bar

With a running timer, we push the rest of the UI up to present a progress bar that’s visible throughout the UI. This now collides with the home indicator and screen corners.

Pad and float.

For views with a tab bar, the progress bar could instead float above them.