Human Interface Guidelines
Overview
Correct
  • Standard sizes for the top bar include 44px and 60px.
  • If the bottom bar has icons on it, such as the Mail app, it must be 44px.
  • If the bottom bar has no icons, feel free to shrink it down to a minimum of 30px.
  • Don't overcomplicate things by adding lots of buttons. Keep the less-used stuff in a slider or a separate screen.
  • The bars have nice black borders to separate them from the rest of the content. An incorrect example is shown to the right:
Incorrect
Slide Animation
Correct
  • List items which lead to another screen are shown by placing the symbol on the right side of the row.
  • Any selected item should be deselected when the user returns to the screen. Incorrect example is shown to the side:
Incorrect
Full Screen
Correct
  • Full screen apps's backgrounds should be black.
  • The status bar should either be positioned on top in the transparant state or just hidden completely.
Incorrect
Deleting Items
Correct
  • Deleting is done via the "Edit" button, or a swiping motion. Follow how Apple does it in Mail.
  • When in either edit mode, nothing should be selected. An incorrect example is shown to the right:
Incorrect

Settings Screens
Correct
  • Font color should be BOLD, #4D576D or rgb(77,87,109) with a 1px white shadow.
  • Bubbles containing a toggle switch must not be selectable. Example of incorrect usage to the right:
Incorrect
Top Bars
Correct
  • The title bar (aka. the top bar) is tied into the navigation so it is important that each screen has a title.
  • Whenever there is a "Back" button such as this one for browsing Albums, which I arrived from browsing Artists, it should say the title of the previous screen.
  • It is always 44px, or on rare occations 60px.
Incorrect
Black Bottom Bars
  • Never make a bottom bar black unless it's completely made up of icons.
  • This is difficult because most programmers don't make icons. Get a graphic designer to do it, or use the built in icons from your iPhone.
Scrolling Lists
Correct
  • Lists are usually 44px in height.
  • The exception to this is when you have multiple lines of text on one list item. However, if you just have a one liner, it's always 44px.
  • Height is always the same throughout the list. If one cell is 62px, every cell is 62px.
  • Lists always have a light gray horizontal line to separate list items.
  • List items which lead to another screen are shown by placing the symbol on the right side of the row.
Incorrect
Backgrounds
Correct
  • If your background is black, the Status Bar must be black.
Incorrect
Custom Skins
Correct
  • If you're real comfortable at designing your own styles, go for it, but only if it looks good!
Correct
Index