Apple Watch Human Interface Guidelines Part I
Today, Apple has finally introduced the long-awaited SDK for development for the new wearable devices from the Apple Watch family.
This event is important not only in terms of providing hundreds of thousands of iOS developers around the world access to the heart of completely new technologies and concepts, but it is also important because it allows us to assess in advance the possibilities and limitations of a product that has not yet been released. The first limitation is:
The so-called Human Interface Guidelines is one of the main documents for iOS developers and mobile interface developers who are beginners. And the release of the publication specifically for the Apple Watch was, perhaps, inevitable.
HIG for Apple Watch is noticeably inferior in volume to traditional HIG publications, but it contains a lot of interesting things. As for the content, we have the following interesting points:
1) UI Design Basics
2) Basics of UI elements
3) Icon and Image Design
')
We will not give the translation of each of the sub-chapters, but go straight to the points that, in my opinion, will play a major role in understanding Apple Watch as a product.
Unlike the accepted types of navigation in iOS, Apple Watch will provide at least two types:
1) Hierarchical navigation is a concept that almost completely corresponds to UINavigationController in iOS. It is necessary to connect one screen with another and transfer data between them. Apple strongly recommends providing the user with no more than one selectable option per screen.
2) Page by page navigation is a concept reminiscent of the UIPageController in iOS. It is used for situations where the data on individual pages is not related to each other.
We are all accustomed to the fact that iOS devices have a wide choice of possibilities for entering information. Gestures, svaypas, tapas - all this is available to users of the iPhone, iPad and iPod Touch "out of the box." However, since the Apple Watch is a new category of devices, Apple separately considers all the options available for interaction between the user and the device.
1) Action based events are equivalent to “tapas” in iOS.
2) Gestures - Apple Watch has no Gesture Recognizers custom entities, that is, the system will intercept and process all gestures for you. The documentation also notes that gestures consisting of more than 1 touch are not supported.
3) Power Press - a new kind of interaction for Apple devices. Used to display context menus.
4) Digital Crown - the same hardware element in the form of a wheel on the side face of the clock. Used to accurately scale or scroll content.
In addition to the standard applications that depend on the connection to the iPhone, Apple also gives access to the so-called "Glances" - screens that can be accessed directly from the lock screen. But even here there is an annoying limitation - the content in this kind of “applications” cannot contain any active elements, since clicking on one of these tabs immediately leads to the corresponding application. Their content also cannot be scrolled and their design must obey certain patterns available in Xcode.
Finally, the third type of interaction with Apple Watch - “Active alerts” is a special screen with limited elements of your own design that is called when you receive push notifications or local notifications.
Apple urges you to adhere to the following rules when developing the design and layout of an application:
1) Limit the number of elements located side by side. If such a decision is inevitable - use the pictures on the buttons instead of text.
2) Do not leave any indents from the edges of the screen because the Apple Watch screen itself is limited by frames.
3) Applications, if necessary, will stretch the interface elements.
4) Text title buttons should be full screen wide.
5) It is necessary to prepare in advance the images for the two sizes of Apple Watch screens (340x272 and 390x312).
6) The background of your application should be black to create a beautiful “compatibility with device” effect.
7) Use contrasting colors for text and lettering, but consider color blind.
8) It is desirable to prepare animations in advance in the form of cut frame by frame pictures. Creating dynamic animations can create a visible delay.
9) Do not allow your brand to stop people from using the application - it should not distract them.
10) “Avoid the temptation to insert your company logo in every screen of your application” because the Apple Watch screen space is worth its weight in gold.
In the next part we will talk about new types of UI elements and sum up the subtotals on the first version of HIG.
Thanks for attention!
This event is important not only in terms of providing hundreds of thousands of iOS developers around the world access to the heart of completely new technologies and concepts, but it is also important because it allows us to assess in advance the possibilities and limitations of a product that has not yet been released. The first limitation is:
"To run your application, Apple Watch must be connected to the iPhone."
The so-called Human Interface Guidelines is one of the main documents for iOS developers and mobile interface developers who are beginners. And the release of the publication specifically for the Apple Watch was, perhaps, inevitable.
HIG for Apple Watch is noticeably inferior in volume to traditional HIG publications, but it contains a lot of interesting things. As for the content, we have the following interesting points:
1) UI Design Basics
2) Basics of UI elements
3) Icon and Image Design
')
We will not give the translation of each of the sub-chapters, but go straight to the points that, in my opinion, will play a major role in understanding Apple Watch as a product.
Types of navigation
Unlike the accepted types of navigation in iOS, Apple Watch will provide at least two types:
1) Hierarchical navigation is a concept that almost completely corresponds to UINavigationController in iOS. It is necessary to connect one screen with another and transfer data between them. Apple strongly recommends providing the user with no more than one selectable option per screen.
2) Page by page navigation is a concept reminiscent of the UIPageController in iOS. It is used for situations where the data on individual pages is not related to each other.
Ways to interact with Apple Watch
We are all accustomed to the fact that iOS devices have a wide choice of possibilities for entering information. Gestures, svaypas, tapas - all this is available to users of the iPhone, iPad and iPod Touch "out of the box." However, since the Apple Watch is a new category of devices, Apple separately considers all the options available for interaction between the user and the device.
1) Action based events are equivalent to “tapas” in iOS.
2) Gestures - Apple Watch has no Gesture Recognizers custom entities, that is, the system will intercept and process all gestures for you. The documentation also notes that gestures consisting of more than 1 touch are not supported.
3) Power Press - a new kind of interaction for Apple devices. Used to display context menus.
4) Digital Crown - the same hardware element in the form of a wheel on the side face of the clock. Used to accurately scale or scroll content.
Types of applications for Apple Watch
In addition to the standard applications that depend on the connection to the iPhone, Apple also gives access to the so-called "Glances" - screens that can be accessed directly from the lock screen. But even here there is an annoying limitation - the content in this kind of “applications” cannot contain any active elements, since clicking on one of these tabs immediately leads to the corresponding application. Their content also cannot be scrolled and their design must obey certain patterns available in Xcode.
Finally, the third type of interaction with Apple Watch - “Active alerts” is a special screen with limited elements of your own design that is called when you receive push notifications or local notifications.
Interface layout
Apple urges you to adhere to the following rules when developing the design and layout of an application:
1) Limit the number of elements located side by side. If such a decision is inevitable - use the pictures on the buttons instead of text.
2) Do not leave any indents from the edges of the screen because the Apple Watch screen itself is limited by frames.
3) Applications, if necessary, will stretch the interface elements.
4) Text title buttons should be full screen wide.
5) It is necessary to prepare in advance the images for the two sizes of Apple Watch screens (340x272 and 390x312).
6) The background of your application should be black to create a beautiful “compatibility with device” effect.
7) Use contrasting colors for text and lettering, but consider color blind.
8) It is desirable to prepare animations in advance in the form of cut frame by frame pictures. Creating dynamic animations can create a visible delay.
9) Do not allow your brand to stop people from using the application - it should not distract them.
10) “Avoid the temptation to insert your company logo in every screen of your application” because the Apple Watch screen space is worth its weight in gold.
In the next part we will talk about new types of UI elements and sum up the subtotals on the first version of HIG.
Thanks for attention!
Source: https://habr.com/ru/post/363171/
All Articles