2014年11月24日 星期一

Apple Watch Human Interface Guidelines 隨手記


Apple Watch Human Interface Guidelines


Interface Style:

  • Hierarchical. This style matches the navigation style in iOS and is best suited for apps with hierarchical information. In a hierarchical app, users navigate by making one choice per screen until they reach their destination. To navigate to another destination, users must retrace some or all of their steps and make different choices.
    A hierarchical model is typically better than a flat, paginated navigation model for more complex app interactions.
  • Page-based. A paginated interface lets the user navigate between pages of content by swiping horizontally. A page-based interface is best suited for apps with simple data models where the data on each page is not directly tied to the data on the other pages.
    A dot indicator at the bottom of each page shows the user’s place in the set. Keep the total number of pages as small as possible to simplify navigation.

註:二擇一,避免混用


Glances are:
  • Template-based. There are separate templates for the upper and lower portions of the Glance screen. Use Xcode to pick the templates you want and then design your content to those specifications.
  • Not scrollable. All content must fit on a single screen.
  • Read-only. Tapping anywhere on the glance opens the app.
  • Optional. Not all apps need a Glance, and users can select which Glances to display.

註: Glances 非必要,可套版,不可滾動



Notification:

Be sensitive to the frequency with which you send notifications to users. Users might perceive a frequent notifications as annoying and disable notifications for your app on Apple Watch. Always make sure notifications are relevant to what the user wants.


註:有分 short look & long look,版面制式化,小心使用


Layout:


兩種SIZE





Color and Typography
Use black for your app’s background color. A black background blends seamlessly with the device bezel and maintains the illusion of there being no screen edges. Avoid bright background colors in your interface.
Use your app’s key color for branding or status. Every app defines a key color. The system uses this key color for the title string in the upper-left corner of the screen and in notification interfaces to highlight your app name or other key information. You should similarly use the key color as part of the branding of your app.
Use high contrast colors for text. High contrast colors make text more legible.

Use the built-in text styles whenever possible. The built-in styles automatically support Dynamic Type and were designed to look good on Apple Watch.

Prefer the use of a single font throughout your app. Apps can use an additional font for branding purposes, but use that extra font sparingly. Mixing many different fonts can make your app seem fragmented and sloppy. Use the UIFont text styles API to define different areas of text according to semantic usage, such as body or headline.


註:顏色採用高對比,建議使用黑色背景,字型盡量單一且使用內建字型。


Table:


Use row types consistently. You might create different row types to implement your content, headers, and footers. Be consistent in your use of those rows.

Avoid mixing rows with dramatically different types of content. When displaying content, be consistent with the row type you use to display that content. Use other row types only as section breaks or to organize the content rows. Using the same row type for content ensures that rows are sized consistently and are easier to navigate.

Limit the number of table rows displayed at one time. Tables with more than twenty rows of content become cumbersome to scroll through. Display only the subset of rows that are immediately relevant and give the user the option to load more rows.


註:單一cell,避免太多列,超迥10列給user "讀取更多" 的 button.

Button:



Create buttons that span the width of the screen. The creation of full-width buttons is strongly encouraged. If you must put more than one button in the same horizontal space, limit the total number of buttons to two.
Try to match button heights whenever possible. If you have multiple buttons onscreen together, use the same height for each. Buttons


註:寬盡量滿版,最多塞二個button

Image:
Create all image assets as @2x resources. There is no need to create non Retina images.


Dates and Timers:

Use a date object whenever you want to display the current day or time.
Always use a timer label to implement a precise countdown or count-up timer.

註:使用內建的 Dates Label 和 Timer Label


ICON: