Download to read offline
Uploaded bySansern Wuthirat
iOS Human Interface Design Guideline Part 1
The document provides comprehensive guidelines for designing user interfaces on iOS, emphasizing principles like clarity, depth, and aesthetic integrity. It covers components of user interaction, visual design, typography, and system capabilities, outlining best practices for icons and branding. Central to the guidelines is the idea of enhancing user experience through thoughtful design that prioritizes content while enabling intuitive user control.
iOS Human Interface Design Guideline Part 1
- 1. iOS Human Interface Guideline Thehigh expectations for quality and functionality.
- 2. Topics Overviews User Interactions System Capabilities VisualDesign Icons Design Glyphs Workshop
- 3.
- 4. Overview Deference iOS Design Theme Thecontent is paramount The UI doesn’t compete with the content
- 5. Overview Clarity iOS Design Theme Functiondrives design Text is easy to read at any size Icons are effective and precise Adornments are subtle Negative space, Color, Fonts, Graphics, UI highlight important content
- 6. Overview Depth iOS Design Theme Motion& Layer work together create a livelier Transition provide a sense of depth
- 7. Aesthetic Integrity Consistency Direct Manipulation Feedback Metaphors UserControl Overview Design Principle
- 8. Help people performa serious task can keep them focused by using subtle Design Principle Aesthetic Integrity
- 9.
- 10.
- 11.
- 12. Use system-provided interface elements DesignPrinciple Consistency
- 13.
- 14. Standard text styles DesignPrinciple Consistency
- 15.
- 16. Engage people and facilitatesunderstanding Design Principle Direct Manipulation
- 17. Rotate the device DesignPrinciple Direct Manipulation
- 18. Use gestures toaffect onscreen content Design Principle Direct Manipulation
- 19. Uniform terminology Design Principle DirectManipulation
- 20. Feedback acknowledges actions andshows results to keep people informed Design Principle Feedback
- 21.
- 22.
- 23. Animation and sound DesignPrinciple Feedback
- 24. People learn morequickly when an app’s virtual objects and actions are metaphors for familiar experiences Design Principle Metaphors
- 25. Drag and swipe content DesignPrinciple Metaphors
- 26.
- 27.
- 28. Flick through pages DesignPrinciple Metaphors
- 29. The best appsfind the correct balance between enabling users and avoiding unwanted outcomes. Design Principle User Control
- 30. Keeping interactive elements familiarand predictable Design Principle User Control
- 31.
- 32. Make it easyto cancel operations, even when they’re already underway. Design Principle User Control
- 33. User Interaction 3D Touch Accessibility DataEntry Drag and Drop First Launch Experience Gesture Navigation
- 34.
- 35.
- 36. User Interaction Accessibility Reduce TransparencyVoice Over Button Shapes
- 37.
- 38. User Interaction Drag andDrop With a single finger, a user can move or duplicate selected photos, text, or other content by dragging the content from one location to another, then raising the finger to drop it.
- 39.
- 40. User Interaction Navigation Hierarchical navigation Flatnavigation Content-driven or experience-driven navigation
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48. System Capabilities Notifications Apps canuse notifications to provide timely and important information anytime, whether the device is locked or in use.
- 49.
- 50. System Capabilities Printing Your appcan take advantage of the system’s built-in AirPrint technology to enable wireless printing of images, PDFs, and other content to compatible printers.
- 51. System Capabilities Quick Look QuickLook lets people preview Keynote, Numbers, Pages, and PDF documents, as well as images and other types of files.
- 52. System Capabilities Screenshots A usercan capture what's displayed on their screen by taking a screenshot. Starting in iOS 11.
- 53. System Capabilities Siri Your appcan integrate with Siri so that the user can perform certain tasks in response to spoken commands and questions.
- 54.
- 55.
- 56. Visual Design Animation Beautiful, subtleanimation throughout iOS builds a visual sense of connection between people and content onscreen.
- 57. Visual Design Animation Strive forrealism and credibility. Use consistent animation. Make animations optional. Always test the results to make sure they work well.
- 58. Visual Design Branding Successful brandinginvolves more than just adding brand assets to your app. but not so much that it becomes a distraction.
- 59. Visual Design Branding Incorporate refined,unobtrusive branding. Don’t let branding get in the way of great app design. Defer to content over branding. Resist the temptation to display your logo throughout your app. This is especially important in navigation bars, where a title is more helpful.
- 60. Visual Design Color R 255 G59 B 48 R 255 G 149 B 0 R 255 G 204 B 0 R 76 G 217 B 100 R 90 G 200 B 250 R 0 G 122 B 255 R 88 G 86 B 214 R 255 G 45 B 85 PinkPurpleBlueTeal BlueGreenYellowOrangeRed
- 61. Visual Design Color R 255 G59 B 48 R 255 G 149 B 0 R 255 G 204 B 0 R 76 G 217 B 100 R 90 G 200 B 250 R 0 G 122 B 255 R 88 G 86 B 214 R 255 G 45 B 85 R 255 G 255 B 255 R 239 G 239 B 244 R 229 G 229 B 234 R 209 G 209 B 214 R 199 G 199 B 204 R 142 G 142 B 147 R 0 B 0 G 0 BlackGrayMid GrayLight Gray 2Light GrayCustom GrayWhite PinkPurpleBlueTeal BlueGreenYellowOrangeRed
- 62. Visual Design Color Enabled anddisabled elements Avoid using the same color for interactive and non-interactive elements.
- 63. Visual Design Color Dark colorscheme Consider how artwork and translucency affect nearby colors.
- 64. Visual Design Color Dark colorscheme Consider how artwork and translucency affect nearby colors.
- 66. Visual Design Color Be awareof colorblindness. As seen with red-green color blindness. As seen without color blindness.
- 67. Visual Design Color Consider howyour use of color might be perceived in other countries and cultures.
- 68. Visual Design Color Use sufficientcolor contrast ratios. Standard minimum contrast ratio of 4.5:1, although 7:1
- 69. Visual Design Color Color Management Applycolor profiles to your images. Standard RGB (sRGB) or P3 Provide color space-specific image and color variations when the experience calls for it.
- 70.
- 71.
- 72.
- 76. Visual Design Layout Design anapp that provides a great experience in any context.
- 77.
- 78.
- 82. Visual Design Typography San Francisco(SF) Use SF Pro Text for sizes below 20pt. Use SF Pro Display for sizes 20pt or greater.
- 83. Icons App Icon Custom Icons SystemIcons Design Glyphs
- 84.
- 85. Icons App Icon Beautiful, subtleanimation throughout iOS builds a visual sense of connection between people and content onscreen.
- 86.
- 87.
- 93. Icons App Icon Embrace simplicity Providea single focus point. Use words only when they’re essential or part of a logo. Keep icon corners square. Test your icon against different wallpapers.
- 94.
- 95. Icons Custom Icons Provide twoversions of custom tab bar icons.
- 96. Icons Custom Icons “To createa filled-in version of an icon that has interior details (such as the Radio icon) invert the details so they retain their prominence in the selected version. The Keypad icon also has interior details, but the selected version would be confusing and hard to recognize if its background was filled in and the circles became white outlines.” Excerpt From: Apple Inc. “iOS Human Interface Guidelines.” iBooks.
- 97. Icons Custom Icons “Sometimes, adesign needs a slight alteration to look good when it’s selected. For example, because the Timer and Podcasts icons include open areas, the selected versions condense the strokes a bit to fit into a circular enclosure.” Excerpt From: Apple Inc. “iOS Human Interface Guidelines.” iBooks.
- 98. Icons Custom Icons “If anicon becomes less recognizable when it’s filled in, a good alternative is to use a heavier stroke to draw the selected version. For example, the selected versions of the Voicemail and Reading List icons are drawn with a 2-point stroke, instead of the 1-point stroke that was used to draw the unselected versions.” Excerpt From: Apple Inc. “iOS Human Interface Guidelines.” iBooks.
- 99.
- 100. Icons Custom Icons Create simple,recognizable designs. Design a solid color icon with transparency, anti-aliasing, and no drop shadow. Keep your icons consistent.
- 101. Icons System Icons Navigation Bar Toolbar Tab Bar Quick Action
- 102. Icons System Icons Navigation Bar& Toolbar TitleParent Title
- 103. Icons System Icons Navigation Bar& Toolbar
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 121. Simplified form Universal symbology Quicklyreadable in context Effective Glyphs
- 124.
- 125.
- 126.
- 127.
- 128.
- 129. Where are glyphsused?
- 139.
- 140.
- 148.
- 153.
- 165.
- 166. Crafting Glyphs Build asa set Test in context Preview on device
- 167. How do Iget started?
- 168.
- 169.
- 171.
- 175.
- 176. Recap Simplify and thinkglobally Build as sets and test in context Harmonize with type Adapt for system spaces
- 177.