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!
You have completed Getting Started With Human Interface Guidelines!
Preview
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