[번역] Apple Dynamic Island Design

This article is a translated content from an overseas UXUI-related article. The original title is[[How to design for Apple iOS Dynamic Island]and Introducing the Dynamic Island Award, purpose of live activities, size, UX tips, accessibility tips, etc.

Dynamic Island is a new pill-shaped punch-hole display at the top of the iPhone, which began with the launch of the iPhone 14 series in September 2022. The dynamic island surrounds the FaceID sensor and front-facing camera, and if the app offers the dynamic island feature, users can view and interact with real-time activities.

This article briefly introduces a guide to refer to when designing a dynamic island.

How to design a dynamic island?

1. Define the purpose of using dynamic islands | Define the purpose of using Dynamic Island

2. Provide compact, minimized, and expanded views. | Design for compact view, minimal view expanded view

3. Follow the details and margin values | Follow the specifications and margins closely

4. Pass dynamic island usage rights to users | Give usesrs control over the Dynamic Island

5. Be mindful of user experience and accessibility | Don’t forget about user experience and accessibility

6. Use online resources | Learn from online resources

1. Define the purpose of using the dynamic island.

Define the purpose of using Dynamic Island

Live activities display the latest information about the app, allowing users to check the progress of tasks at a glance.

Before designing a live activity, think about what benefits your users will get from it. If your users are working on a time-sensitive task that requires frequent updates, you may want to display the task’s updates as a dynamic island.

Examples of dynamic islands in use:

How much time is left until your Uber taxi arrives at your destination

Steps for food delivery on the Doordash app (Baemin in Korea)

Timer in voice recorder

Interact with fitness apps

Time remaining to download or upload file

2. Design compact/minimal/extended views

Design for compact view, minimal view expanded view

If you decide to use Dynamic Island, get familiar with three ways to display live activity.

Compact view: When there is only one live activity

Minimal: When there are 2 live activities

Expanded: When expanding a compact or minimal view by clicking on it

3. Follow the details and margin values

Follow the specifications and margins closely

Below is a table summarizing the sizes of dynamic islands and live activities on the iPhone 14 Pro and Pro Max.

Dynamic Island Width:

Live activity size:

4. Pass dynamic island usage rights to users

Give usesrs control over the Dynamic Island

Live activities should be the user’s primary interaction outcome in an app. For example, if you’ve booked a food delivery app, Live Activity could activate a feature that shows the remaining time for your food to arrive.

When a live activity is activated, the user should always be able to see what’s going on, such as when clicking on something in the live activity takes them to a page in the app. If the user wants to terminate the live activity before the task is finished, you should leave open the option to do so.

However, some users may want to disable Live Activities in their iPhone settings and iOS supports that, so you should take this into consideration when designing Live Activities as well.

5. Be mindful of user experience and accessibility

Don’t forget about user experience and accessibility

Before using the dynamic island feature, it is important to conduct research to understand user needs and information.

If you decide to use Live Activities, conduct usability testing for new features before official deployment.

Also consider the accessibility of live activities such as:

Dark mode support

Maintain consistency in design and layout of current apps and live activities

High-contrast colors (dark text on a light background or light text on a dark background)

6. Use online resources

Learn from online resources

If you’re out of ideas, search for Dynamic Island on dribbble. Take a look at what other designers and developers have been doing with dynamic islands.

Thank you always for reading the poorly translated text. I’m getting a lot of encouragement from likes and scripts.