{"id":114450,"date":"2020-06-19T17:55:05","date_gmt":"2020-06-19T17:55:05","guid":{"rendered":"https:\/\/developer.apple.com\/news\/?id=yyz8lqtw"},"modified":"2020-06-19T17:55:05","modified_gmt":"2020-06-19T17:55:05","slug":"the-developers-guide-to-the-human-interface-guidelines","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2020\/06\/19\/the-developers-guide-to-the-human-interface-guidelines\/","title":{"rendered":"The developer\u2019s guide to the Human Interface Guidelines"},"content":{"rendered":"<div class=\"inline-article-image\"><img decoding=\"async\" src=\"https:\/\/www.sickgaming.net\/blog\/wp-content\/uploads\/2020\/06\/the-developers-guide-to-the-human-interface-guidelines.jpg\" data-hires=\"false\"><\/div>\n<p>The Human Interface Guidelines \u2014 \u201cHIG\u201d for short \u2014 offers in-depth information and UI resources for all of Apple\u2019s platforms, including specific technology areas. The HIG is full of information for designers that can help them create more compelling, intuitive, and beautiful experiences and design better apps. <\/p>\n<p>If you\u2019re an engineer, the HIG can be equally useful as a guide during the entire development process. It offers a high-level and comprehensive view of key UI elements and associated APIs, and best practices to help you implement features into your app.<\/p>\n<p>We\u2019ve put together a few common scenarios to show you how the HIG can help you throughout app design and development.<\/p>\n<h3>Where to start<\/h3>\n<p>The HIG is organized by platforms and technologies, each with its own index. If you\u2019ve never explored the HIG before, consider starting with the platform you\u2019re currently developing for.<\/p>\n<div class=\"inline-article-image\"><img decoding=\"async\" src=\"https:\/\/www.sickgaming.net\/blog\/wp-content\/uploads\/2020\/06\/the-developers-guide-to-the-human-interface-guidelines-1.jpg\" data-hires=\"false\"><\/div>\n<p>Each platform is broken up into multiple sections that cover topics like app architecture, interaction, views, controls, and system capabilities. If you\u2019d like to implement custom UI elements for your Apple Watch app, for example, you could reference the SpriteKit and SceneKit page of the System Capabilities section and gain perspective on some of the user experience considerations of implementing textured and 3D imagery in your app, as well as find a link to the WKInterfaceSCNScene and WKInterfaceSKScene framework over on the Developer Documentation website. <\/p>\n<h3>\u201cI want to include a new UI element.\u201d<\/h3>\n<p>The HIG offers guidance for all interface elements, with a focus on the element\u2019s intended use. When including any new piece of UI into your app, consider using the HIG to review how you should present the intended element on screen. Explore recommendations, learn about the rationale for styling, and understand the various ways in which you can achieve a presentation that expresses your brand and feels familiar to people who use your app. <\/p>\n<div class=\"inline-article-image\"><img decoding=\"async\" src=\"https:\/\/www.sickgaming.net\/blog\/wp-content\/uploads\/2020\/06\/the-developers-guide-to-the-human-interface-guidelines-2.jpg\" data-hires=\"false\"><\/div>\n<p>Even for something as simple as adding a button to your interface, the HIG provides recommendations for how to place, label, and align it within your app \u2014 along with guidance on presenting and using these elements. <\/p>\n<h3>\u201cI want to introduce a new feature into my app.\u201d<\/h3>\n<p>When Apple releases new features, you can often find additional insight and best practices around adoption within the HIG.<\/p>\n<p>Say that you add Augmented Reality (AR) content to your app. Inside the HIG, you can find information on AR interactions and address common problems with interface patterns. You can learn how to guide people into an AR experience, for example, or how people expect to interact with real and virtual content on screen. This guidance can also help you have discussions with your design and development teams as you plan out feature inclusion, and lead to better implementation.<\/p>\n<h3>Get started with Apple design elements<\/h3>\n<p>Apple\u2019s ever-growing resources library makes it easy to explore the design side of our platforms. These downloads are great for prototyping concepts, finding specifications, and learning the language of design elements.<\/p>\n<div class=\"inline-article-image\"><img decoding=\"async\" src=\"https:\/\/www.sickgaming.net\/blog\/wp-content\/uploads\/2020\/06\/the-developers-guide-to-the-human-interface-guidelines-3.jpg\" data-hires=\"false\"><\/div>\n<p>There are templates and libraries for Adobe Photoshop, Adobe XD, Sketch, and Keynote, and each of these is filled with ready-to-use iOS UI elements \u2014 toolbars, tab bars, buttons, and much more. You can also explore resources like the SF Symbols app, which contains thousands of symbols in a wide range of weights and scales. These symbols integrate nicely with Xcode, they&#8217;re simple to align with text labels, and they support accessibility features like Dynamic Type and Bold Text.<\/p>\n<h3>The helpful HIG<\/h3>\n<p>The HIG is one of the best places you can start when you\u2019re making design and engineering decisions about your app. It lays out the principles that define design across all Apple platforms, and it makes recommendations to help you anticipate and implement what most people want when using software.<\/p>\n<p>Best of all, the HIG is continually updated to reflect changes and improvements across Apple\u2019s platforms. So you can count on implementing features that keep pace with people\u2019s evolving expectations. <\/p>\n<h3>Resources<\/h3>\n<p><a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/\" class=\"icon icon-after icon-chevronright\">Human Interface Guidelines<\/a><\/p>\n<p><a href=\"https:\/\/developer.apple.com\/design\/resources\/\" class=\"icon icon-after icon-chevronright\">Apple Design Resources<\/a><\/p>\n<p><a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/sf-symbols\/overview\/\" class=\"icon icon-after icon-chevronright\">Learn more about SF Symbols<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Human Interface Guidelines \u2014 \u201cHIG\u201d for short \u2014 offers in-depth information and UI resources for all of Apple\u2019s platforms, including specific technology areas. The HIG is full of information for designers that can help them create more compelling, intuitive, and beautiful experiences and design better apps. If you\u2019re an engineer, the HIG can be [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":114451,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[],"class_list":["post-114450","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apple-developer-news"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/114450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=114450"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/114450\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/114451"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=114450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=114450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=114450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}