HomeNewsUI Design for iPhone X: Bottom Elements

UI Design for iPhone X: Bottom Elements

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.

pic

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

pic

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.

pic

Banners

pic

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

pic

pic

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.

pic

Pad and float.

pic

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

pic

pic

Featured articles on Prototypr: