Apple Watch应用设计(上)

Apple Watch
Apple Watch

目前我的工作基本上不大可能会需要设计一款Apple Watch应用,不过我觉得在Apple Watch上设计开发一款应用应该是一件很酷的事情,所以最近看了一些相关文章,也在这里分享下。
我还没买Apple Watch,也没有亲身体验一款Apple Watch,我只是看看文章或视频,我写的内容也许有错误。买Apple Watch前提还需要买一个iPhone6,事实上我现在用的iPhone5已经两年多了,最近屏幕碎了也懒得去修。虽然我是个苹果产品粉丝,不过我是个理性消费的人。(恩,我不会告诉你其实这是因为穷。)
先简单了解下Apple Watch应用。

一、导航

Watch支持两种界面导航方式:

  1. 层级式导航
    适用于功能和数据较为复杂的产品,用户需要层层递进的访问某些功能或内容。大多数应用,比如聊天类、购物类,都适合使用这种导航方式。
  2. 页面式导航
    适用于那些信息模型相对简单、不同模块之间不存在直接数据关联的产品。比如天气类应用,在不同的城市切换可以使用这种页面式导航方式。

你必须在这两种导航方式中选择一种来设计你的应用。

二、交互

  1. 轻点
    和iOS App一样,列表、按钮、切换等控件都可以通过轻点来操作,这是Watch应用的主要交互方式。
  2. 手势
    你不能在Watch应用里擅自添加任何定制的手势操作,系统已经自带了一些手势操作:
    也许是考虑到屏幕太小,Apple Watch不支持多指手势,比如在iPhone上两指捏合能缩小地图是不支持的。
  • 垂直方向滑动可以滚动当前屏幕;
  • 在页面式导航应用,水平方向滑动能切换不同的页面;
  • 在层级式导航应用,从屏幕左边缘向右滑动可以返回到父级页面;
  1. 按压(Force Touch)
    这是苹果带来的一种全新的交互方式,Watch的屏幕能感知到用户的按压,从而呼唤出相应的菜单。Force Touch据说会运用在下一代iPhone上。

  2. 数码表冠(The Digital Crown)
    前文提到垂直方向滑动手指可以达到滚动当前屏幕的效果,但是在Watch如此小的屏幕上滑动手指,屏幕的内容往往会被手指遮挡,所以苹果发明了数码表冠,转动数码表冠就可以滚动当前页面。
    曾经给手表上弦的表冠,在智能手表上被保留并赋予了新的交互方式,这样的设计既是一种产品传承,也体现了做为新事物的独特创新和灵感。

三、应用组件

Apple Watch应用除去App本身外,还包括Notification和Glance模块。

  1. 通知(Notification)
    Notification类似于iPhone当中的通知,Notification分为“普通”与“可交互”两种模式,类似于iPhone会在屏幕顶端默认呈现“普通”的通知横幅,下拉后便会将其切换至可交互模式,提供回复一类的操作。在Watch端,这两种模式分别叫做“Short Look”与“Long Look”。
  • Short Look
    为了让用户可以在最短时间做出判断,同时也为了保护隐私,Short Look只提供最少量的必要信息。界面简单至极,形式完全由系统模板定义,包括应用图标、消息标题以及应用名称三个组成部分,全部在一屏当中显示,不支持滚动。
    当一条通知过来,Watch先以Short Look形式展示给用户,如果用户对当前消息没兴趣,只需要把手放下,通知会自动从屏幕消失。如果用户保持手腕姿势不变,Watch就会认为用户有了解更多信息的想法,进而自动将Short Look转换为Long Look,以提供更加详细的内容和可交互的选择。如此的智能和人性化,这才是好的设计。

  • Long Look
    相比于Short Look,Long Look内容形式稍微丰富,屏幕当然会更long,所以支持滚屏了呢。虽然内容相对丰富,但仍要遵循系统提供的标准框架:顶部栏由系统提供,用于显示app的图标及名称(可自定义背景色);最底部的Dismiss按钮同样由系统输出,用来关闭Notification;而这两者之间的区域则可以由app自己来定义,包括内容和互动功能两部分。
    在Long Look里最多可以放置4个定制化的功能按钮,如果用户看到通知后需要有进一步的操作,那么你的应用应该尽可能让用户在这个4个按钮中完成,避免让用户再拿出iPhone,这就不是Apple Watch的目的了。

  1. 一瞥(Glance)

自从 19 世纪手表诞生以来,瞥一眼手腕查看时间,已经成了人们的习惯动作,有了 Apple Watch,这个习惯性的一瞥可以给你更多讯息。我们开发了Glance,这个功能可以将你查看最频繁的讯息提炼出来,使你常用的 app 更加适合在手腕上浏览操作。要查看相关讯息时,你只需用手指向上轻扫一下,就能立即浏览天气预报、查看日历上的下一步安排,或在地图上查找当前位置。你可以通过左右轻扫来翻阅不同的 Glance,或轻点其中一个,即可打开相应的 app 查看详情。

这是苹果对Glance的介绍,相信即便你没有Apple Watch也能感受到Glance到底是什么东西。

Glance有点类似于iPhone通知中心里的Widget,它是一个可选组件,每个App最多只能拥有一个Glance视图。由于它可以非常轻松的唤出,只需要手指从手表屏幕向上轻扫一下,所以你应该把用户最关心最常用的信息放在Glance里,比如一个to-do类应用显示用户接下来要做的事情,航旅应用可以显示用户当前航班的信息,理财应用可以显示用户昨天的收益情况。

Glance具有以下几方面的特性:

  • 基于模板。Glance界面的上下两部分有各自独立的模板。你可以在Xcode当中挑选合适的模板,并按照相应的规格设计你的内容。 - 不可滚动。所有信息都要集中呈现在一屏当中。
  • 只读。轻点Glance界面当中的任何地方都会打开相应的应用。 - 非强制。不是所有的应用都需要Glance视图,用户可以自主选择在Glance(s)中显示哪些应用的信息。

以上是对Apple Watch应用的一些基本了解,接下来我会写什么情况我们需要做一款Watch应用,为什么要做。并且会自己设计一款Apple Watch应用。
(本篇完)

一些有帮助的文章
Apple Watch平台认知与产品设计
http://www.beforweb.com/node/695

Apple Watch Design Resources
http://www.tuicool.com/articles/Z77JJbm

关于Watch应用的导航、通知、复杂任务及动效
http://www.beforweb.com/node/717

为Soundwave设计Watch应用时学到的五件事
http://www.beforweb.com/node/701

Apple Watch界面设计规范(预发布版本)
http://beforweb.com/node/596

为Apple Watch简化现有产品的设计思路
http://www.beforweb.com/node/709

初识WatchKit
http://www.cocoachina.com/ios/20141121/10276.html


题图来自Apple官网。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容