Designing for iPhone 14 Pro’s Dynamic IslandDesigners pack your bags, we’re going to iPhone’s Dynamic Island. Apple just announced its newest devices during its September “Far out” event. The line-up includes new Apple Watches, AirPods, and iPhone. But the iPhone 14 Pro and Pro Max is the device you need to keep an eye out for. It features a new TrueDepth camera system, removing the infamous notch and replacing it with a pill-shaped cutout. While plenty of people have been mocking Apple for keeping the notch instead of searching for an alternative like an under-display camera similar to competitors. But the notch has always been a unique feature, making the iPhone stand-out from other smartphones, which all have become flat touch screen bricks. With the new Dynamic Island, they ensure iPhone still has a recognizable front display while introducing useful functionality. It’s a seamless integration of hardware and software that can show activities like playing music, timers, … and updates such as charging, AirPods connection, calls, … Let’s take a look at how you can take advantage of the Dynamic Island for your own apps. How iPhone uses Dynamic IslandApple shows relevant information when closing an app or when you have an incoming notification or an alert is displayed. You can tap and hold the Dynamic Island, and it expands to show more information, or simply tap to go back to the app. Here are some built in examples of how iPhone takes advantage of Dynamic Island. Phone callsThe island transforms when you have an incoming phone call and shows a sound and timer indication while you have a phone call in the background.  MusicWhen you close the Music app and have a song playing, the album art will be displayed with an animated sound graph. This will likely work for any music or sound app, similar to how it’s displayed on your lock screen and control center.  Connecting AirPodsOnce your AirPods are connected, a visual of your AirPods model is displayed together with the current battery status.  NavigationTurn by turn navigation is displayed with directions and distance. When you have to switch lanes or take an exit, the Dynamic Island expands and shows you more information.  Face IDPreviously, the Face ID authentication would be displayed at the center of your screen. Now it integrates into the Dynamic island as it expands when you have to authenticate.  Muting your iPhoneWhen switch the mute toggle, a short status is shown.  ChargingWhen you start charging your device, the Dynamic Island informs you about it and show your current battery percentage.  More examplesVoice Memos Focus modes Timers These are just a few examples that Apple showed during the keynote. Multiple ActivitiesIt’s also possible to see two activities at once, for example, while having an active time and playing music. The Dynamic Island will automatically adapt to show you more information.  Always on displayThanks to the always-on display on the iPhone 14 Pro and Pro Max, you will be able to see the Dynamic Island on your lock screen, so any relevant information will always be visible when you glance at your screen. When the screen is dimmed and your device is locked, a lock icon will be displayed to inform you that no one can access your device if you leave it on your desk or table.  How to use Dynamic Island in your own appActivities in Dynamic Island are built similar to Live Activities introduced with iOS 16. These or glanceable time-based alerts that are displayed on your iPhone’s lock screen. They update live when a sports teams scores, your coffee order is ready or when your Lyft ride is nearby.  Of course, there is a lot less space on the Dynamic Island compared to Live Activities. So, you have to make sure you show the most relevant information. The user can then expand it by tapping and holding on the Dynamic Island to view more information. Apple built a design system that you can use for your own app to ensure everything displayed in the Dynamic Island is consistent for every app. PermissionsWith this new UI, you might think all hell is going to break loose as it will be constantly animating and updating throughout the day. But Apple will likely add a toggle in Settings to turn it off per-app, as they previewed for Live Activities coming in a later iOS 16 release. Adapting your designsYou currently might design for devices with a notch, where the status bar height varies for different iPhone models. This is also true for the new iPhone 14 Pro models where the status bar height is now 54pt. Here’s the height for other iPhones:
The iPhone 14 Pro screen size (393x852pt) is also a tiny bit larger than the iPhone 13 Pro (390x844pt). How to design a live activity for Dynamic Island?A Dynamic Island Live Activity has 3 different ways to be displayed:
You are required to support both compact views and the minimal view to make sure your Live Activity can be displayed on the Dynamic island. Color usageThe compact and minimal views have a default black background color with white text. But you can set an optional tint color with Expanded viewIt’s also required to support the expanded view, which will be displayed after a long tap. It will also appear briefly when your Live Activity updates. An interesting addition, devices without the Dynamic Island will also show the expanded view as a banner when the activity updates. The Dynamic Island is split up in different regions where you can place your UI elements.
The system will first calculate the with of center content while taking the minimum with of the leading and trailing region into account. After that, the leading and trailing content will be placed and sized based on the vertical position. But by default, leading and trailing regions will have the same width. However, you can set the priority, so the system knows which region should be prioritized. That view will get priority and will be able to use the full width of the Dynamic Island. If the leading content next to the camera is too wide, you can use Read more documentation on Apple Developer Design ResourcesYou can already find the official iPhone 14 product bezels on developer.apple.com |
|
|
来自： wintelsui > 《好好学iOS学习笔记》
