Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Getting Started With Human Interface Guidelines!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
In this video, we’ll conclude this demo wireframe by creating a screen where runners can record a New Run.
Further reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up