Hi, I'm Facai Wo, a ux designer at Shanghai.
Here I will share some understanding about design and feel free to share your idea.

Apple Watch App设计指引

1.Apple Watch 与其他产品的不同

 

更加个人化。

 

与手机等电子设备相比,watch更加个人化,在某些更加personal的情景下或许有特别的应用。那Apple watch的使用场景是什么呢?

 

Holistic

 

不知道中文如何翻译比较好。在Apple watch 的各种传感器的协助下,这么一款产品有时显得并没有那么电子化。听起来似乎矛盾,但正是这些传感器的帮助,让用户不用再仅仅依靠笨拙的办法来与设备进行交互。当一个机器人越来越聪明的时候,你说他是很电子化呢还是去电子化呢?

 

轻量

 

apple watch 是iPhone的一个附属产品,交互的时间以秒来计算。或者可以说瞥吧~~

 

2.apple watch app剖析

 

导航架构

 

非常简单,就两种。

 

同级水平滑动;

 

带有层级的用列表来显示一级一面,然后点击进入二级页面。

 

交互方式

 

单次点击为主要操作

 

手势包括垂直滑动,水平滑动,左边缘滑动返回上一级,不支持多点手势(面积太小)

 

用力按来调出上下文菜单(如果有的话)

 

数码表冠,第三方app只能用它来滚动界面(可能是还没开放相应api?)

 

3.Glance视图

 

模板化的

 

不可垂直滚动

 

可以相应点击操作跳转指定页面

 

不是必须的

 

4.Notification视图

 

short look notification

 

custom long look notification

 

5.modal sheet模态视图

 

模态视图可以阻止用户与app内其他内容进行交互,从而让用户更专心的完成任务。

 

通过左上角关闭按钮或者从边缘向左滑动可以退出模态视图。

 

6.layout布局

 

使用全部的屏幕宽度,因为apple watch有额外的物理黑边在屏幕周围。

 

使用上下文菜单来显示不太重要的操作(通过force touch调出)

 

apple watch有两个分辨率,所以。。。有些图片要准备两套切图。

 

7.颜色和字体

 

颜色

 

背景色为黑色,主色使用品牌色,避免仅仅只用颜色来表示可操作,考虑部分色盲人群,考虑颜色的跨文化特性。

 

字体

 

系统字体是特别为手表优化过的(称为dynamic type),大字体时会压缩字间距,标点在小字体时,会变大一点。可以采用自定义字体。

 

8.动画

 

通过动画显示状态变化,提供反馈;帮助人们将他们的操作可视化。

 

Create prerendered animations using a sequence of static images”使用静态的序列帧来制作预渲染的动画这样播放的帧率更高,动画更流畅。

 

9.品牌

 

可以通过app icon,颜色,自定义button,自定义字体,来表现品牌。(相比ios仍旧捉襟见肘)

 


 

以上内容提炼自2015年2月9日官网发布版本

 


评论
热度 ( 1 )

© FACAI WO | Powered by LOFTER