As I am designing an app for students I have decided to design it for an iPhone as this seems to be the most popular phone amongst students. Therefore I will need to follow some guidelines to ensure my app works cohesively with iOS.
I have taken some of the design guidelines that I may need to consider within my designs.
App Icon
The App Icon is used for the branding of your app. It’s the first thing that users see when they experience it. It appears prominently on the Home screen, the App Store, in Spotlight and Settings.
Super-Ellipse
Since iOS 7, the rounded corners have shifted from plain rounded corners to a super-ellipse shape. It is important to keep note that you shouldn’t export the icons with the mask, or you’ll potentially find black artifacts. Instead, just export square assets to the App Store.
Icon Grid
Apple applied a golden ratio on some of their icons. This ensures that the icons are the heroes while keeping good proportions.
Colours
iOS uses vibrant colours to bring out the buttons. These colours tend to work well against a white background as much as a black background. Keep in mind that colours should be used sparsely, for call-to-actions and minimal branding areas like the navigation bar. Roughly, only 10-20% of your design should have colours, or they will compete too much against the content.
iOS often uses neutral colours to serve as the background and menu areas. A well-contrasted black text against a white background is used to make the text comfortable to read. Finally, the pastel blue is applied for making the buttons stand out.
Button and Font Sizes
The general rule is 44pt for buttons and 12pt for small text, 17pt for body text and 20pt+ for titles.
Spacing and Alignment
A general rule is to have a minimum padding or margin of 8pt. This creates enough breathing room, which makes the layout easier to scan and the text more readable. Also, UI elements should be aligned and texts should have the same baseline position.
Status Bar
It is recommended to include the status bar in as many places as you can. Users rely on it for important information such as signal, time and battery. The text and icons can be white or black, but the background can be customised into any colour and merge with the Navigation Bar.
Tab Bar
The Tab Bar is the main navigation between multiple screens. Avoid the Hamburger menu if you have few items. Menus that are always visible will increase usage since obvious always win. Additionally, it is encouraged to add text next to your icons as most people won’t instantly recognise symbols, especially when they’re not universally known.
When they’re not active, icons will generally have an outline instead of being filled. Like this, they attract less attention.
Keyboards
The keyboard is used to input information in text fields such as search, chat or login. It’s highly customisable, for URL, Email, Phone numbers and even Emoji. You can choose between the Light and Dark themes, as well as how the action button is named (return being the default).
Picker
When you have multiple options to choose from, you can use the Picker control. It’s particularly useful for dates, which controls 3 fields in one action.
iOS Icons
These are the native icons that permeate iOS. Since they’re commonly used, they’re instantly recognised by users for their meaning. Using them for other purposes may confuse your users, so it’s important to be aware of how they’re used in iOS.
When you design custom icons outside of these, it is important to use well-known symbols. Additionally, I strongly recommend to always accompany them with a small text of 10pt or more.
RESOURCE:
WEB
- https://designcode.io/iosdesign-guidelines
No comments:
Post a Comment