Farlanki

Apple Watch Human Interface Guidelines 笔记

字数统计: 991阅读时长: 3 min
2015/08/15 Share

基本的UI设计

Apple Watch 特征

  • 隐私性
  • 整体性
  • 轻量化使用

关于App

导航风格
  • 栏式 :当应用有分栏信息时使用,使用者通过在一个页面选择一次来到达目标页面。
  • 基于页面的:使用者通过水平滑动切换页面,在页面的底部有dot indictor,页面数量尽量少。
用户交互
  • 基于动作的事件:轻触通常代表选择或者交互,是使用者和应用交互的主要方法。
  • 手势
    • 垂直滑动以滚动当前页面。
    • 水平滑动以展示上一或下一页面。
    • 左侧滑动返回父页面。
  • 压力触摸:在触摸的基础上加上了压力程度感应。
  • 数码表冠:让用户轻松地滚动长页面。

预览页面

预览页面是程序的最重要的信息的快速浏览界面。

  • 特点:

    • 基于模板:在xcode里选择合适的模板。
    • 不可滑动: 所有内容被要求在一个页面里显示完毕。
    • 可选 :不要求所有应用都拥有这个页面,用户也可以选择哪些程序的预览页面需要显示。
  • 注意事项
    • 根据用户的实际情况来设计页面。
    • 提供有用的信息。

通知

  • 短时通知:当通知到达,首先显示的是短时通知。为保护隐私性,短时通知会显示尽量简洁的信息。
    如果用户手腕没有提起,短时通知将自动消失。特点:

    • 基于模板
    • 显示应用名称,图标,通知文字
    • 应用名称的颜色由应用的代表颜色决定
  • 长时通知:长时通知显示在用户轻触短时通知或者用户提起手腕的时候。它提供更详细的信息。它不会自动消失,必须由用户手动忽略。

    • 顶部是系统提供的应用概览,底部是忽略按钮,可以在中间自定义其他按钮等。
    • 最多4个按钮
    • 橄榄栏的颜色应该配合程序的标志颜色

模式页面

模式页面会暂时阻止用户和应用的其他部分交互。只有在以下情况下才会使用模式页面:

  • 在用户的决定至关重要的时候
  • 防止用户做出模棱两可的决定的时候

模式页面的左上角会有『关闭按钮』,当用户点击时系统不会做出进一步反应。注意:

  • 在自带的『关闭』按钮外,不要添加其他的『关闭』按钮
  • 适时添加『接受』按钮
  • 不要在模式页面里让用户做出复杂的动作。

布局

  • 不要添加太多左右相邻的组件,防止组件太小以至难以触摸。
  • 使用全屏幕
  • 左对齐
  • 适配不同大小的屏幕

颜色和排版

  • 颜色
    • 使用黑色背景以给用户营造无边框的印象
    • 使用应用的标志颜色
    • 文本的文字应高对比度
    • 防止颜色单一
    • 考虑不同颜色在不用文化的不用印象
  • 排版

    • 尽量使用自带文本样式
    • 使用单一字体
    • 使用动态类型

    ##动画

    • 可以用连续的静态图像来创造动画(不支持真正的动画!)

UI元素

标签

  • 标签是静态文。
  • 不允许直接的交互
  • 可由程序更新
  • 可多行

图像

  • 图像类显示其图像
  • 不支持交互
  • 可由程序控制动画的开始和停止
  • 只需创建retina版本

  • 组是其他对象的容器
  • 组没有默认外观
  • 可以水平和垂直布局其项目
    *可以设置背景
  • 可设置圆角
  • 有设置边缘和空间的属性

菜单

  • 用力按压屏幕会显示当前页面的菜单
  • 不是栏式,不可滚动
  • 为每个选项配图像和文字
CATALOG
  1. 1. 基本的UI设计
    1. 1.1. Apple Watch 特征
    2. 1.2. 关于App
      1. 1.2.0.0.1. 导航风格
      2. 1.2.0.0.2. 用户交互
  • 1.3. 预览页面
  • 1.4. 通知
  • 1.5. 模式页面
  • 1.6. 布局
  • 1.7. 颜色和排版
  • 2. UI元素
    1. 2.1. 标签
    2. 2.2. 图像
    3. 2.3.
    4. 2.4. 菜单