Guidelines: Crucial Dos and Don’ts for iOS App UI Design

With Apple s completely revamped design language for iOS App UI design coming out 2 years ago, features like bolder titles and bigger use of cards are making designers focusing on animations and function easier and easier. Indeed, as Twain is often quoted as saying: history does not repeat itself, but it does often rhyme. After the widespread using of thin fonts in iOS 7, bolder texts have been a feature of renewed focus. Why does Apple call iOS 10 their biggest release ever and how should we designers understand it?

I have been asked many times what are the shortcuts to deliver an extraordinary iOS App that rockets to be crowned in the App Store lists. Well, to do so, there do exist some silver bullets to enhance the usability and appeal of your Apps if you fully grasp the dos and don’ts iOS App UI design that will affect your design universally.

1. Text Readability

readability-text-size.png

In Retina, the most ideal text size for reading is about 16pt, while typography should be at least 11pt to be legible at a typical reading distance without zooming. The general rule is 12pt for small text,17pt for body text and 20pt+ for titles.

2. Descriptive layout

Descriptive layout.png

Each page must fit the screen of an iOS device. A title should clearly explain what this screen is about. Text should be short and easy to digest.

3. Color

Color.png

Apple has been using a vibrant color palette, make sure to use a prominent color so that the text can be legible. Picking the right colors(as in web design) and neutral tones can make or break your design.

4. Use Obvious Image

Use obvious image.png

@1x assets will appear blurry on iPhone, so youd better use high-resolution images that are @2x and @3x. Images that are not at their intended ratio will cause distortion.

5. Use Controls Right

controls.png

According to iOS App UI design principles, Buttons should be 44pt so that it can be accurately tapped with a finger. And you should choose the right UI elements from abundant options like pickers, segmented controls, sliders, switches, steppers and apply them to the right place naturally.

6. Spacing and Alignment

 Spacing and Alignmen.png

Align UI elements to improve legibility. The general rule is to have a minimum margin of 8pt. Dont let users suffocate because your texts are overlapped.

7. Golden Ratio Grid System

golden ratio grid system icons.png

Apple applied a golden ratio grid system on some of their icons. You can also consider to  size and align elements on your icon according to it. This rule is quite flexible and you need to feel free to break it if your icon works simply better without the system.

8. Animation

animation.png

Don’t use animation for the sake of using animation. Excessive animation can distract people, especially in apps that dont provide an immersive experience. And, make sure each animation makes sense. For example, if a user reveals a page by sliding from left to right, he/she should be allowed to return by sliding it back to left.

Leave your comments below if you have any further resources about iOS App UI design or you can tell me what you want to read in my next post.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s