iOS Gears Everything About ios
Apple has updated its Apple Watch Human Interface Guidelines site this evening with some new resources for developers.
While Apple had previously published Human Interface Guidelines for designing apps for the Apple Watch, the relaunched site contains some new pages and resources for developers.
The site is overall pretty easy to navigate. Sections are broken down into 5 major categories, each containing guidelines and suggestions for how to utilize different aspects of the watch during app development. The UI Elements section, for example, breaks down a ton of different guidelines and suggestions for ways to incorporate everything from images and labels, to switches and sliders in your app. Along the way, there are ample example photos to get you started.
Also included in the relaunch are some new resources for developers to take advantage of. In the resources section, Apple provides a number of Photoshop templates, along with a download of the San Francisco font to help you get started with designing your app.
If you’re a developer looking for some extra resources for building your Apple Watch app, you can hit up the source link below to check out Apple’s Human Interface Guidelines.
Source: Apple
<!–*/
<!–*/
img,
.devicebox img {
margin: 0px;
max-width: 100%;
padding: 0px;
}
div .devicebox *,
div .devicebox li,
div .devicebox a:active,
div .devicebox a:hover,
div .devicebox a:link,
div .devicebox a:visited {
color: #fff;
}
.devicebox a:hover {
text-decoration: underline;
}
.devicebox p,
.devicebox ul li,
.devicebox ol li {
font-size: 16px;
padding: initial;
}
.devicebox ul {
margin: 0;
padding: 0.5em 1em 1em 30px;
}
.devicebox ul li {
display: list-item;
line-height: 24px;
list-style: disc outside none;
}
.devicebox ul li:before {
display: none;
}
.devicebox p ~ p {
padding: 0px 15px 15px;
line-height: 1.25;
}
.devicebox p:first-of-type + p {
padding: 15px;
}
div *:last-of-type + .devicebox,
div *:last-of-type + div ~ .devicebox {
float: none;
margin: 0 auto 30px;
max-width: 700px;
min-height: 225px;
position: relative;
width: 100%;
}
div *:last-of-type + .devicebox .video,
div *:last-of-type + div ~ .devicebox .video {
bottom: 0px;
left: 50%;
position: absolute;
right: 0px;
top: 30px;
}
div *:last-of-type + .devicebox .video_iframe,
div *:last-of-type + div ~ .devicebox .video_iframe {
height: 100%;
padding: 0px;
}
div *:last-of-type + .devicebox h3 + p,
div *:last-of-type + div ~ .devicebox h3 + p {
bottom: 0;
left: 50%;
overflow: hidden;
position: absolute;
right: 0;
top: 30px;
width: 50%
}
div *:last-of-type + .devicebox h3 + p img,
div *:last-of-type + div ~ .devicebox h3 + p img {
float: right;
height: 100%;
width: auto;
}
div *:last-of-type + .devicebox ul,
div *:last-of-type + div ~ .devicebox ul,
div *:last-of-type + .devicebox p,
div *:last-of-type + div ~ .devicebox p {
width: 43%;
}
@media all and (max-width: 500px) {
.devicebox {
float: none;
margin: 0 0 30px;
max-width: 100%;
width: 100%;
}
div *:last-of-type + .devicebox .video,
div *:last-of-type + div ~ .devicebox .video {
left: 0;
position: relative;
top: 0;
}
div *:last-of-type + .devicebox .video_iframe,
div *:last-of-type + div ~ .devicebox .video_iframe {
padding-bottom: 56.25%;
}
div *:last-of-type + .devicebox h3 + p,
div *:last-of-type + div ~ .devicebox h3 + p {
left: 0;
position: relative;
top: 0;
}
div *:last-of-type + .devicebox ul,
div *:last-of-type + div ~ .devicebox ul {
width: auto;
}
}
/*–>*/
/*–>*/
/*–>*/
Source: iMore
