1 00:00:00,990 --> 00:00:07,190 I'm duplicating the run stats artboard and renaming this one New Run. 2 00:00:09,150 --> 00:00:12,091 Let's delete all the content that doesn't belong here. 3 00:00:15,073 --> 00:00:17,483 I'm holding Shift as I click, 4 00:00:17,483 --> 00:00:22,870 to select multiple layers of content before hitting the Delete key. 5 00:00:24,840 --> 00:00:28,900 I'll also delete the back link from the navigation bar 6 00:00:28,900 --> 00:00:31,170 since it doesn't apply here 7 00:00:32,740 --> 00:00:35,830 I'll label this page Record my Run 8 00:00:38,430 --> 00:00:41,810 since that's the action that the user will achieve here, 9 00:00:41,810 --> 00:00:46,230 and change the highlight in the Tab Bar to reflect our current screen. 10 00:00:47,800 --> 00:00:52,538 I'll use the plus button in my colors palette to easily switch 11 00:00:52,538 --> 00:00:56,468 between these particular shades of blue and grey. 12 00:01:04,305 --> 00:01:09,133 I'm copying the map component from the run-app-components file, 13 00:01:09,133 --> 00:01:11,960 and pasting it into my New Run screen. 14 00:01:13,900 --> 00:01:19,517 Using SF Symbols, I'll create an icon right in the center of the screen 15 00:01:19,517 --> 00:01:21,791 to start and stop recording. 16 00:01:26,139 --> 00:01:30,650 I'll add a subtle shadow to the icon, to make it a bit more prominent. 17 00:01:32,960 --> 00:01:36,429 Finally, I'll add a white shape behind my icon 18 00:01:36,429 --> 00:01:39,082 to make the center of the icon opaque. 19 00:01:45,728 --> 00:01:51,987 I'll draw lines to visually divide up the stats of my run. 20 00:01:59,486 --> 00:02:04,790 I'll use repeat grid in creating the stats, starting with Time. 21 00:02:09,457 --> 00:02:10,441 Heart rate. 22 00:02:18,695 --> 00:02:20,659 Distance and Steps. 23 00:02:31,932 --> 00:02:33,858 Pace and Flights. 24 00:02:49,189 --> 00:02:55,460 It's possible the user might tap this icon accidentally during their run. 25 00:02:55,460 --> 00:02:59,450 If I have decided to give the user an opportunity to cancel or 26 00:02:59,450 --> 00:03:04,070 confirm this action, I'll use an Action Sheet to do so, 27 00:03:05,140 --> 00:03:09,530 as Action Sheets are used to request confirmation 28 00:03:09,530 --> 00:03:13,360 before performing a potentially destructive operation. 29 00:03:14,400 --> 00:03:17,220 For example, clicking the trash icon in 30 00:03:17,220 --> 00:03:21,240 the Photo Viewer doesn't delete the photo right away. 31 00:03:21,240 --> 00:03:26,560 An Action Sheet appears, allowing the user to either cancel the action, 32 00:03:26,560 --> 00:03:30,600 or tap delete photo to confirm the image should be moved to the trash. 33 00:03:31,640 --> 00:03:36,150 This second step reduces the possibility that the user will delete 34 00:03:36,150 --> 00:03:38,120 a treasured photo by mistake. 35 00:03:40,170 --> 00:03:43,560 I'm duplicating the new run artboard and 36 00:03:43,560 --> 00:03:46,220 I'll call this new artboard Stop Recording. 37 00:03:47,760 --> 00:03:51,558 I'll paste in an Action Sheet from the UI kit, and 38 00:03:51,558 --> 00:03:55,639 I'll change the top button label to Stop Recording. 39 00:03:58,430 --> 00:04:02,000 Now there's no stopping this recording by accident. 40 00:04:02,000 --> 00:04:06,870 Users must either confirm that the activity has ended or 41 00:04:06,870 --> 00:04:08,870 hit Cancel and continue their run. 42 00:04:10,350 --> 00:04:14,450 That concludes our look at the Apple Human Interface Guidelines. 43 00:04:14,450 --> 00:04:18,160 These guidelines will continue to evolve over time, so 44 00:04:18,160 --> 00:04:23,380 be sure to review them anytime you're tasked with designing an iOS app. 45 00:04:23,380 --> 00:04:26,600 And combine these learnings with your own observations 46 00:04:26,600 --> 00:04:31,140 on how users interact with their iPhones and iPads. 47 00:04:31,140 --> 00:04:34,500 You'll be creating consistent experiences and 48 00:04:34,500 --> 00:04:37,710 keeping your iOS users firmly in control.