Getting Started with iOS Human Interface Guidelines #1
Overview
iPhone X’s beauty appearance motivate me to learn something new. It is gorgeous and more attractive!
This is the first time I have browsed iOS Human Interface Guidelines(HIG) on Apple developer website, even though I had done some GUI design works on iOS apps. Fewer people, like me, are willing to read HIG before developing an app since the theory always too complicated for people to understand.
In order to know more about iPhone X, I start to learn Swift. I realize there are so many important details that I need to consider. With hands-on experience, I get back to learn fundamental knowledge and to rethink my app works by reading HIG. As a result, I have summarized the most important principles of iOS HIG following the same order outlined by Apple. Here we go:
iOS Design Themes
- Legible text and appropriate icons throughout apps.
- UI should not outshine the content. Deference in iOS HIG means "respect", sorta like "respect your elders". Content is paramount.
- A hierarchal concept in apps will navigate users through content easily.
Design Principles
The most important thing is to understand users and their needs.
- Aesthetic appearance with useful function.
- An app incorporates features and behaviors in ways people expect.
- Users experience direct manipulation, which assists people to understand.
- Providing perceptible feedback in response to every user action and showing results to users are able to keep people informed.
- People learn more quickly when an app’s virtual objects and actions are metaphors for familiar experiences.
- Make people feel like they are in control.
iPhone X
Screen Size
- Portrait dimensions 1125px × 2436px (375pt × 812pt @3x)
- Landscape dimensions 2436px × 1125px (812pt × 375pt@3x)
*What is different between “pt” and “px”?
Layout
- Provide a full-screen experience. Make sure backgrounds extend to the edges of the display.
- Prevent clipping. All apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. In order to get best results, you can use standard, system-provided interface elements and Auto Layout to construct your interface.
- Avoid explicitly placing interactive controls at the very bottom of the screen and in corners. Since people use swipe gestures at the bottom edge of the display to access the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area.
- Auto-hiding of the indicator only is recommended to use for passive viewing experiences like playing videos or photo slideshows.
Color
- Supports a P3 color space. Use wide color to enhance the visual experience.
Gestures
- Avoid interfering with systemwide screen-edge gestures. Some games may require specific gestures which priority over the system’s gestures. This should be implemented sparingly on apps in order to prevent people from hardly accessing to the system-level actions.
Additional Design Considerations
- If your app integrates with Apple Pay or other system authentication features, do not reference Touch ID on iPhone X since iPhone X supports Face ID for authentication.
- The Emoji/Globe button and Dictation button automatically appear beneath the keyboard — even when using custom keyboards. Your app cannot affect these buttons.
Technical term
- Negative space
Simply the area around and between the objects (main subjects) in an image. The objects themselves are referred to as the positive space in your photo. The opposite of negative space is positive space. - Gestures
Include touch mechanics (what your fingers do on the screen) and touch activities (results of specific gestures). - Aspect ratio
The aspect ratio of an image describes the proportional relationship between its width and its height. - High-resolution
Used to describe something such as a screen or photograph that shows an image extremely clearly. - Portrait dimensions
Vertical. - Landscape dimensions
Horizontal.
