ITP 342 Mobile App Dev. Interface Fun

Transcription

1 ITP 342 Mobile App Dev Interface Fun

2 Human Interface Guidelines ios Human Interface Guidelines library/ios/documentation/ userexperience/conceptual/ MobileHIG/index.html 2

3 ios App Anatomy Almost all ios apps use at least some of the UI components defined by the UIKit framework. Knowing the names, roles, and capabilities of these basic components helps you make informed decisions as you design the UI of your app. 3

4 ios App Anatomy 4

5 UI Elements The UI elements provided by UIKit fall into four broad categories: Bars contain contextual information that tell users where they are and controls that help users navigate or initiate actions Content views contain app-specific content and can enable behaviors such as scrolling, insertion, deletion, and rearrangement of items Controls perform actions or display information. Temporary views appear briefly to give users important information or additional choices and functionality. 5

6 Layout Make it easy for people to interact with content and controls by giving each interactive element ample spacing. Give tappable controls a hit target of about 44 x 44 points. Recommended Not Recommended 6

7 Bars The status bar, navigation bar, tab bar, and toolbar are UI elements that have specifically defined appearances and behaviors in ios apps. These bars are not required to be present in every app (apps that provide an immersive experience often don t display any of them), but if they are present, it s important to use them correctly. The bars provide familiar anchors to users of ios devices, who are accustomed to the information they display and the types of functions they perform. 7

8 Status Bar The status bar displays important information about the device and the current environment. The status bar: Is transparent Always appears at the upper edge of the device screen 8

9 Navigation Bar A navigation bar enables navigation through an information hierarchy and, optionally, management of screen contents. A navigation bar: Is translucent Generally appears at the upper edge of an app screen, just below the status bar Usually displays the title of the current screen or view, centered along its length Can automatically change its height when an iphone changes orientation On ipad, a nav bar can also display within a view that doesn't extend across the screen, such as one pane of a split view controller. 9

10 Toolbar A toolbar contains controls that perform actions related to objects in the screen or view. A toolbar: Is translucent Always appears at the bottom edge of a screen or view on iphone and can also appear at the top edge of the screen or view on ipad Can automatically change its height when an iphone changes orientation 10

11 Toolbar and Navigation Bar Buttons ios provides many of the standard toolbar and navigation bar buttons that are used in the built-in apps. Button Name Meaning Share Camera Compose Bookmarks Search Add Trash Organize Reply Refresh Play FastForward Pause Rewind Open an action sheet that lists system-provided and app-specific services that act on the specified content. Open an action sheet that displays a photo picker in camera mode. Open a new message view in edit mode. Show app-specific bookmarks. Display a search field. Create a new item. Delete current item. Move or route an item to a destination within the app, such as a folder. Send or route an item to another location. Refresh contents (use only when necessary; otherwise, refresh automatically). Begin media playback or slides. Fast forward through media playback or slides. Pause media playback or slides (note that this implies context preservation). Move backwards through media playback or slides. 11

12 Tab Bar A tab bar gives people the ability to switch between different subtasks, views, or modes. A tab bar: Is translucent Always appears at the bottom edge of the screen Displays no more than 5 tabs at one time on iphone Maintains the same height in all orientations Can display a badge a red oval containing white text and either a number or an exclamation point 12

13 Tab Bar Icons ios provides the standard icons for use in tab bars. Icon Name Meaning Bookmarks Show app-specific bookmarks. Contacts Show contacts. Downloads Show downloads. Favorites Show user-determined favorites. Featured Show content featured by the app. History Show history of user actions. More Show additional tab bar items. MostRecent Show the most recent item. MostViewed Show items most popular with all users. Recents Show the items accessed by the user within an app-defined period. Search Enter a search mode. TopRated Show the highest-rated items, as determined by the user. 13

14 Search Bar A search bar accepts text from users, which can be used as input for a search It can display optional elements, such as: Placeholder text The Bookmarks button The Clear button The results list icon A prompt 14

15 Scope Bar A scope bar which is available only in conjunction with a search bar helps users define the scope of a search. 15

16 Content Views ios provides several views and view controllers that can display custom app content. Each view has certain properties and behaviors that make it especially well-suited to display certain types of information. We will go over more of them as the semester progresses. 16

17 Image View An image view displays one image or an animated series of images. An image view: Has no predefined appearance and it doesn't enable user interaction by default Examines properties of both the image and its parent view to determine whether the image should be stretched, scaled, sized to fit, or pinned to a specific location 17

18 Controls Controls are UI elements that users view to get information, or interact with to perform an action. ios provides a large number of controls that you can use in your app. We will go over some of them now. We will cover more as the semester progresses. 18

19 Label A label displays static text. A label: Displays any amount of static text Doesn t allow user interaction except, potentially, to copy the text Take care to make your labels legible. Don t sacrifice clarity for fancy fonts or showy colors. 19

20 Segmented Control A segmented control is a linear set of segments, each of which functions as a button that can display a different view. A segmented control: Consists of two or more segments whose widths are proportional, based on the total number of segments Can display text or images Use a segmented control to offer choices that are closely related but mutually exclusive. 20

21 Slider A slider allows users to make adjustments to a value or process throughout a range of allowed values. A slider: Consists of a horizontal track and a thumb (a circular control that users can slide) Can include optional images that convey the meaning of the right and left values Fills the portion of the track between the minimum value (typically on the left) and the thumb 21

22 Stepper A stepper increases or decreases a value by a constant amount. A stepper: Is a two-segment control in which one segment displays a plus symbol and the other segment displays a minus symbol by default Supports custom images Doesn t display the value that the user changes 22

23 Switch A switch presents two mutually exclusive choices or states. On Off A switch: Indicates the binary state of an item Is used in table views only Use a switch in a table row to give users a way to specify one of two options, such as yes/no or on/off, that govern the state of an item. 23

24 System Button A button performs an appspecific action. A system button: Has no border or background appearance by default Can contain an icon or a text title Supports custom decoration, such as a border or background image For a title, use title-style capitalization. 24

25 Text Field A text field accepts a single line of user input. A text field: Is a fixed-height field with rounded corners Automatically displays a keyboard when users tap within it Can include system provided buttons, such as the Bookmarks button Can display text that uses multiple styles Use a text field to get a small amount of information from the user. 25

26 Temporary Views Temporary views appear briefly to give users important information or additional choices and functionality. 26

27 Alert An alert gives people important information that affects their use of an app or the device. An alert: Displays a required title and an optional message Contains one or more buttons 27

28 Action Sheet An action sheet displays a set of choices related to a task the user initiates. On iphone, an action sheet emerges from the bottom of the screen. On ipad, an action sheet is always displayed in a popover. An action sheet: Appears as the result of a user action Displays two or more buttons Use red for the button that performs a potentially destructive action. 28

29 Modal View A modal view that is, a view presented modally provides selfcontained functionality in the context of the current task or workflow. A modal view: Occupies the entire screen or, on ipad, can occupy the entire area of a parent view (such as a popover) Contains the text and controls that are necessary to complete the task Usually displays a button that completes the task and dismisses the view and a Cancel button that abandons the task and dismisses the view 29

30 3 Forms of UI Controls Static (or inactive) Examples labels & images User doesn t do anything to it Passive Example text field & labels Simply hold on to a value that the user has entered until you re ready to use it Change the value programmatically Need IBOutlet Active Example buttons Touch them & something happens Need IBAction 30

31 Less & More 31

32 Segmented Control Displays an element that comprises multiple segments Each of which functions as a discrete button Each segment can display either text or an image, but not both Using the library, add a Segmented Control to your View Define the number of segments For each segment (0 - n), select the pull-down and enter a title 32

33 Less & More Let s use a segmented control to display less or more options Create a Segmented Control Define 2 segments Segment 0 = Less Segment 1 = More Drag a View from the library (UIView, not View Controller) Change the background color to make it visible 33

34 View On the View, add at least the following components: Slider and a Label Stepper and a Label Segmented control For a happy or sad ending, Switch and a Label In the Attributes for the View, check the box for Hidden We want the view to be initially hidden since the first element of the Less/More segmented control is Less 34

35 Implementing Show/Hide IBOutlet settingsview IBAction toggleshowhide 35

36 Slider Use a slider to let the user choose a number in a given range As the user moves the slider, reflect the slider s value in a label In the Attributes Inspector Set the minimum value Set the maximum value Set the initial value to a number that is in the middle of the minimum & maximum 36

37 Label for Slider Create a label for the slider Resize is correctly Set its text to the largest value to determine the correct width Then select Editor Size to Fit Content Set its text to the middle value, which is the starting value of the slider 37

38 Slider Changed IBOutlet sliderlabel IBAction Event Value Changed Method sliderchanged: 38

39 Stepper IBOutlet for Stepper petsstepper IBOutlet for Label petslabel IBAction Event Value Changed Method stepperchanged 39

40 Outlet for Switch On/Off Switch Create a label for switch Happy Ending IBOutlet endingswitch 40

41 Button Add a Button to the main View Update its text to something meaningful like "Create Story" IBAction Event Touch Up Inside 41

42 42

43 43