Course User interface - Lesson 5
2 likes1,129 views
This document provides summaries of guidelines for designing iOS interfaces from Apple's Human Interface Guidelines. It discusses principles like using visual weight to show importance, avoiding splash screens, common gestures, appropriate use of buttons, incorporating brands subtly, using a single font, and views like maps, tables and text. It also covers do's and don'ts of formatting, touch targets, text size, contrast, spacing and more. The document concludes with an assignment to create sketches for a smart home app including login, home and event history screens.
Course User interface - Lesson 5
- 2. Alexander Lisovsky Co-Founder at ZZ Photo, UX/UI designer a.lisovsky@zzphoto.me facebook.com/alexlisovsky, pinterest.com/alexlisovsky, twitter.com/lisovsky
- 3. iOS Human Interface Guideline
- 4. Фокус внимания Удобство навигации
- 6. Use visual weight and balance to show users the relative importance of onscreen elements https://developer.apple.com/design/
- 8. As much as possible, avoid displaying a splash screen or other startup experience. It’s best when users can begin using your app immediately. https://developer.apple.com/design/
- 9. People use gestures—such as tap, drag, and pinch—to interact with apps and their iOS devices. https://developer.apple.com/design/ Tap To press or select a control or item. Drag To scroll or pan—that is, move side to side. To drag an element. Flick To scroll or pan quickly. Swipe With one finger, to return to the previous screen, to reveal the hidden view in a split view controller, or the Delete button in a table-view row. With four fingers, to switch between apps on iPad.
- 10. https://developer.apple.com/design/ Double tap To zoom in and center a block of content or an image. To zoom out (if already zoomed in). Double tap To zoom in and center a block of content or an image. To zoom out (if already zoomed in). Touch and hold In editable or selectable text, to display a magnified view for cursor positioning. Shake To initiate an undo or redo action.
- 11. A key color gives users a strong visual indicator of interactivity, especially in apps that don’t use an abundance of other colors. In Contacts, blue marks the interactive elements and gives the app a unified and recognizable visual theme. https://developer.apple.com/design/
- 12. An icon or a title that provides a clear call to action invites users to tap it. For example, the titles in Maps, such as “Flyover Tour” and “Directions to Here,” clearly describe actions that users can take. Combined with a key color, actionable titles tend to make button borders or other embellishments superfluous. https://developer.apple.com/design/
- 13. In a content area, add a button border or background only if necessary. Buttons in bars, action sheets, and alerts don’t need borders because users know that most of the items in these areas are interactive. In a content area, on the other hand, a button might need a border or a background to distinguish it from the rest of the content. https://developer.apple.com/design/
- 15. Incorporate a brand’s assets in a refined, unobtrusive way. People use your app to get things done or be entertained; they don’t want to feel as if they’re being forced to watch an advertisement. https://developer.apple.com/design/
- 17. In general, use a single font throughout your app. Mixing several different fonts can make your app seem fragmented and sloppy. Instead, use one font and just a few styles and sizes. https://developer.apple.com/design/
- 18. The Status Bar https://developer.apple.com/design/ Navigation Bar Tab Bar Search Bar Scope Bar
- 20. Content Views
- 21. A collection view manages an ordered collection of items and presents them in a customizable layout. https://developer.apple.com/design/
- 22. A map view presents geographical data and supports most of the functionality provided by the built-in Maps app (shown below in Photos). https://developer.apple.com/design/
- 23. A popover is a transient view that can be revealed when people tap a control or tap in an onscreen area. https://developer.apple.com/design/
- 25. A split view controller is a full-screen view controller that manages the presentation of two child view controllers. https://developer.apple.com/design/
- 26. A table view presents data in a scrolling single- column list of multiple rows. https://developer.apple.com/design/
- 27. A text view accepts and displays multiple lines of attributed text. https://developer.apple.com/design/
- 28. A web view is a region that can display rich HTML content (shown here between the navigation bar and toolbar in Mail on iPhone). https://developer.apple.com/design/
- 29. Do and Don`t
- 40. Smart Home iOS app
- 45. Moodboard
- 46. Практическое задание: Создаем скетч приложения Smart Home: - Экран входа - Главный экран - Экран истории событий
- 49. Alexander Lisovsky Co-Founder at ZZ Photo UX/UI designer a.lisovsky@zzphoto.me facebook.com/alexlisovsky, pinterest.com/alexlisovsky, twitter.com/lisovsky