Designing Your UI in the Storyboard
With every interface object created in your storyboard, how can you hope to make the UI you want? Great watch user interfaces will separate themselves from the built-in UI. Much like iOS apps use custom interfaces to establish their brand, you can apply a few techniques to make your designs great while still creating nearly everything in your storyboard.
Hiding Inactive Objects
One clever trick for a great UI is using the setHidden method of WKInterfaceObject. If you mark an interface object as hidden, it’s removed from the screen and from the layout system, so everything else will move around accordingly. If you have two mutually exclusive states you want to display, make them both and then hide the one you don’t need. When you want to switch states, call setHidden on them both with opposite values. Creating two duplicate interfaces may seem wasteful, but it allows you to be explicit with your UI’s options. Several of the properties of interface objects can’t be set once they’re created in the storyboard, so don’t feel bad about creating both states.
For every WKInterfaceObject subclass, as well as WKInterfaceController, Apple’s documentation includes a section in its introduction called Interface Builder Configuration Options. The documentation also displays the methods to call to change attributes; if there’s no method listed for a particular attribute, then you can change it only in the storyboard. For instance, you can set the background image of a WKInterfaceButton using setBackgroundImage, but you can change the background color only in the storyboard.
Using Images Effectively
Another trick to making a great UI is to take advantage of images. Not only can you place images directly in your layout with WKInterfaceImage, but other classes support background images that appear behind other interface objects. WKInterfaceGroup allows you to set a background image in code or in your storyboard. Since groups contain other interface objects, this allows you to create an image that sits behind other objects. WKInterfaceController and WKInterfaceTable also support background images but only at design time in your storyboard. Using background images is a great way to add some flavor to your app and give everything a cohesive design.
Images in the foreground don’t have to be large photographs. Using small, iconographic images draws your user’s attention to your content. A button with text is descriptive, but a button with text next to an icon conveys more information. Now, to be honest, I’m not a designer. If you aren’t either, you’ll want to consult one for better image advice. Shipping an app with programmer art may work, but a professional designer can take your app to another level.
Using Color and Type
Another factor in making great-looking watch apps is effective use of color and type. While most interface controllers should have black backgrounds, per convention,[5] a splash of color can go a long way. You can define a main tint color for your app in your storyboard by opening the File Inspector (⌥⌘1) and changing the value for Global Tint, which affects the color of UI elements such as the title bar at the top of the screen.
While it’s possible to use custom fonts in your WatchKit app the same way you can in iOS, think long and hard about it. Because Apple Watch allows the user to select the font size (a feature called Dynamic Type), built-in interface objects using the system font automatically use different font sizes when necessary. If you want to use your own font, you’ll need to implement this yourself, adjusting the size of fonts you use based on the user’s selection. Keep in mind that if you use a Glance you can’t use custom fonts, since your app isn’t loaded.
There’s one huge part of WatchKit interfaces that we haven’t covered yet, though you may have already encountered it in Interface Builder: you can’t move things around! If you try to drag an interface object in its interface controller, it snaps into place. This layout system takes some getting used to, but it can be very powerful once you understand it.