iOS

Design Note for iOS

IOS design

Core Philosophies

  • deference
  • clarity
  • depth

Your content should be the hero, everything else is secondary

  • Simplify

    • focus on functional colors, harmonious gradients, and beautiful typography

  • Maximize content

    • The content should take the whole screen, giving maximum space to its inner elements.

  • Color

    • Use a prominent color to show that an element is tappable or that it’s highlighted.

  • Typography is content

    • Because of the simplification of the user interface and the focus on the content, your typography will occupy from 50% to 90% of the screen.
      The design should have 3 typographic layers: The heading, the subheading and the body text. For the font, let’s use the clean and utilitarian Avenir Next, which comes with Mac OS X. I’m applying some realistic text. I don’t like to use Lorem Ipsum very much because the content feels very different from the actual text. I like the design to be as close as possible to what’s going to be served when the product is out.
      Using the minimum rule of 22px for text, I’m applying 30px for the body, 40px for the sub-heading and 80px for the heading.

  • Negative space

    • The less you see, the more you can focus on few things at once. Negative spacing gives breathing room.

  • Icon states

    • The icons for navigation have 2 states: outline and fill mode.
    • Make things obvious. Buttons should be self-explanatory and typography should be big and readable at a comfortable distance.

  • Make the text readable

    • In Retina, typography should have a minimum size of 11pt. The optimal size for reading is around 16pt.

  • Use obvious icons

    • Icons should not be ambiguous, they should clearly indicate what the symbol means. Whenever possible, use text to accompany the icon. Be specific.

  • Descriptive screens

    • Each page should clearly explain what it does.

  • Meaning in colors

    • Colors have meaning. Use red, green, blue and neutral tones wisely to indicate destructive actions, affirmative actions, links and inactive states respectively.
    • Depth is the idea that everything should be contextual and transitional.

  • Transitional interface

    • Every screen transitions from one to another.

  • Blurred background

    • Blurring the background not only allows you to keep its natural colors, but also brings focus to the foreground.

“What you think people want, multiplied by ten is what you should create. Anything less won’t last longer than a day in people’s mind. Do it right and it’ll last a lifetime.”

  • Make it delightful

    • What’s not really mentioned in the guidelines are 3 things that can make your app really stand out: animations, gestures and sounds.

  • Design for touch

    • Buttons should be easily tappable. Their sizes should be between 30-60pt wide. The optimal size is 44pt. On rare occasions, set to 22pt for links inside texts, but use cautiously as they become hard to tap. Even text buttons have a tappable zone of at least 30pt.

  • Readability

    • Typography should have a minimum size of 11pt. The optimal font size for reading is around 16pt. Use a line-height of 120-145% to make the reading experience even better.
      Adaptive Layout
      Landscape Mode
      San Francisco Font
      3D Touch
      The Apple Watch

Designing for iOS 9

Adaptive Layout and Multitasking

With the increasing number of device resolutions to deal with, it is crucial to make your layout adaptive.

Points and Pixels

Button and Font Sizes

The general rule is 44pt for buttons and 12pt for small text, 17pt for body text and 20pt+ for titles.

The back button: circle button of 72px by 72px. Circular buttons are very friendly and approachable.

Spacing and Alignment

A general rule is to have a minimum padding or margin of 8pt.

The Navigation Bar is used for quick information about the screen. The left portion can be used for placing Back, Profile, Menu buttons whereas the right portion is generally used for action buttons like Add, Edit, Done.

Reference

http://designcode.io