The Second Screen4:38 with Anwar Montasir
In this video, we’ll conclude this demo wireframe by creating a screen where runners can record a New Run.
I'm duplicating the run stats artboard and renaming this one New Run. 0:00 Let's delete all the content that doesn't belong here. 0:09 I'm holding Shift as I click, 0:15 to select multiple layers of content before hitting the Delete key. 0:17 I'll also delete the back link from the navigation bar 0:24 since it doesn't apply here 0:28 I'll label this page Record my Run 0:32 since that's the action that the user will achieve here, 0:38 and change the highlight in the Tab Bar to reflect our current screen. 0:41 I'll use the plus button in my colors palette to easily switch 0:47 between these particular shades of blue and grey. 0:52 I'm copying the map component from the run-app-components file, 1:04 and pasting it into my New Run screen. 1:09 Using SF Symbols, I'll create an icon right in the center of the screen 1:13 to start and stop recording. 1:19 I'll add a subtle shadow to the icon, to make it a bit more prominent. 1:26 Finally, I'll add a white shape behind my icon 1:32 to make the center of the icon opaque. 1:36 I'll draw lines to visually divide up the stats of my run. 1:45 I'll use repeat grid in creating the stats, starting with Time. 1:59 Heart rate. 2:09 Distance and Steps. 2:18 Pace and Flights. 2:31 It's possible the user might tap this icon accidentally during their run. 2:49 If I have decided to give the user an opportunity to cancel or 2:55 confirm this action, I'll use an Action Sheet to do so, 2:59 as Action Sheets are used to request confirmation 3:05 before performing a potentially destructive operation. 3:09 For example, clicking the trash icon in 3:14 the Photo Viewer doesn't delete the photo right away. 3:17 An Action Sheet appears, allowing the user to either cancel the action, 3:21 or tap delete photo to confirm the image should be moved to the trash. 3:26 This second step reduces the possibility that the user will delete 3:31 a treasured photo by mistake. 3:36 I'm duplicating the new run artboard and 3:40 I'll call this new artboard Stop Recording. 3:43 I'll paste in an Action Sheet from the UI kit, and 3:47 I'll change the top button label to Stop Recording. 3:51 Now there's no stopping this recording by accident. 3:58 Users must either confirm that the activity has ended or 4:02 hit Cancel and continue their run. 4:06 That concludes our look at the Apple Human Interface Guidelines. 4:10 These guidelines will continue to evolve over time, so 4:14 be sure to review them anytime you're tasked with designing an iOS app. 4:18 And combine these learnings with your own observations 4:23 on how users interact with their iPhones and iPads. 4:26 You'll be creating consistent experiences and 4:31 keeping your iOS users firmly in control. 4:34
You need to sign up for Treehouse in order to download course files.Sign up