Today Widget:抢占比桌面更重要的地盘

摘要

让我们一起来看看 Today Widget 的设计奥义。

编者注:本文转自腾讯 ISUX(http://isux.tencent.com/today-widget-pattern.html)。


Apple 于去年发布的 iOS8 系统带来了许多有趣的新特性,其中的 App Extensions 让第三方产品与系统本体的互动变得更为直接。

「Today Widget」,「Get a quick update or perform a quick task in the Today view of Notification Center」(在通知中心的今日视图中快速获得更新或完成操作)——从此在许多场景下、用户毋须再前往桌面寻找 icon 进入 app 了,只需在屏幕上轻轻一  Swipe(即使在未解锁状态下),就可以展开 Today View 、快速获得各种信息或执行任务。这样的功能与操作方式极富「效率」的魅力。

1.jpg

如果说 Today Widget 是 iOS 平台上新兴的小工具,那承载 Widget 的「Today View」即将成为这个平台上潜力无限的新地盘,影响力超过纷繁杂乱的桌面也相当可期。

不过直到最近,作者仍然发现身边还有许多的小伙伴并不知道它的存在和便利。于是在这篇文章中,作者打算整理一下早前的内部分享,希望可以与更多的人分享自己热衷的 Today Widget ,一同发掘更多新鲜的 Widget 玩法,并探讨不同类型的 Widget 各自呈现的设计 Pattern 。

快捷入口/快速启动类:

作为习惯把常用 app 放在 Dock 和第一页的用户,有的时候也非常想开辟另一块触手可得的地盘放置高频使用的 app 。现在只需下划展开 Today View,即可以立马找到并点开想要使用的 app 。

Launcher 是一种产品类型,在这里则是一个名为 Launcher 的 iOS app ——可以把它看作快捷入口最为典型的例子。

2.jpg

通过 Launcher 可以设置快速启动应用程序、快速拨打联系人电话、快速 FaceTime……或者说它就是各应用各操作的快捷方式在Today View 中的集合,这些快捷方式的主要展现形式延续了他们原本的形状造型,基本以平铺的 icon 和圆圈头像为主。功能与之相似的还有 Touch2 系列,不用的用途衍生出不同的小 app 。

3.jpg

当然除了这些快速启动与快捷联系人外,也有相当多放置功能入口的 Widget 。比如 Evernote ,比如 Path ,它们将自身最主要的功能入口放在了这里

4.jpg

在这里需附带一提,Apple 对于 Widget 的限制虽然给出了书面 Guidline ,但还是很难摸透他的审核原则,Launcher 就曾因为用来创建各种 app 和 url 的快捷方式而被 App Store下架,而作者参与的产品也因在 Widget 中直接置入功能模块入口而被拒,当然为了避免做出铁定被驳回的设计,基本的规则必须阅读的,相关资料可查本文最后的附录。

 新闻/资讯类:

过去的每个早上我们依次主动打开一个个 App 查天气、看最新资讯,Widget 则可以帮助我们不动声色地轻松获取。新闻与资讯放在  Today View 中是非常说得通的应用场景,下拉即刷新,让用户可以在各个碎片时间快速获得即时的信息情报。所以这一类型的 Widget 通常展示股票指数、实时新闻、天气、比分、节目预告。除「即时」以外、还可以「就地」基于地理位置提供各种资讯服务。

5.jpg

即时信息型的 Widget 布局会更倾向于垂直功能的本身,信息清晰、快速传达是首要任务,基本上设计可以和 app 内部界面较为一致。

其中新闻类根据不同的 app 性质可以有较多的布局方式。

6.jpg

从左至右,Google News 图文列表(小),在有限的屏高内同时展示多个条目,作为新闻聚合站给用户提供来源丰富的实时新闻;  News360 图文列表(大),从用户主动订阅的频道中随机轮番推送新闻与专题,较大的图文位需要优质、最好是智能筛选的内容来保证质量;VICE News 大图+文字摘要,每日单条重要新闻挂在 Widget 上可以看出媒体的力度与自信,这样的设计更适合于展示专题、头条,或通过摘要引出适合深度阅读的内容。

所以新闻类 Widget 布局和新闻媒体本身的调性也很有关系。

至于地理位置类 Widget ,想象空间颇大,除了各类 LBS 贴身资讯,也有许多非常有趣的互动点。最先可以想到的,找到身边的吃喝玩乐(这好像应该点评来做),需要注意控制内容展示区域的面积。

7.jpg用 AF AR 快速查看附近的吃喝玩乐

附近旅馆、附近租房 or 卖房,适用于游客群体与关注居住消费的群体,建议热火朝天打着「互联网+」口号的 O2O 租房行业、传统房产中介借鉴一下。(虽然有个观点是租房买房等需求因为低频不应该做成应用,但如果资源充足,整一个又何妨呢,好好包装营销一下可能就成为行业标杆 or 下一个 Airbnb 了:)。
8.jpg

快速一键签到,并同时提供其他签到好友的地理位置信息,各 IM 或社交类 app 如果可以接入或直接开启一个类似功能,也是相当值得期待的。

9.jpg

以及以下这个「我究竟在哪里」,如果不深入挖掘这个 app 的社会意义(如适合不会看电子地图的老年人…),就只能把它当作一个有点冷的创意了,路痴专享。

10.jpg

总的来说,资讯类 Widget 注重实用性,根据不同属性,设计的差异略大;信息须被设计得足够简洁明了,实用性得以体现,才能获得更高的用户关注。

 UGC与运营内容推送:

快捷入口类 Widget 让用户快速触及功能,新闻资讯类降低用户获取情报的操作成本,这两者是基础款,相比还有一些因垂直需求而主动期望接受的信息,也很常见。
首先是内容推荐与 UGC 类,随机推送优秀的用户创作,以吸引用户在短促的滚动操作时间内「驻目」,内容有格调是必备条件。

11.jpg

除了 UGC ,开发者也可自行运营一些内容,比如 Camera+ 的摄影类文章、教程和谚语,至少让用户看到了开发运营者的用心,即使同时合入了拍照功能按钮也觉得蛮顺理应当。

12.jpg

此类信息是浏览过程中的调剂项,适合受众明确的垂直功能的应用或社区,为用户提供碎片时间内的平衡与放松,信息如果可以打动人,便能够激活启动,更多的时候可以看作是品牌的塑造与维护。这一类 Widget 的设计语言不用太繁复,必须内容大于形式,用心吸引阅读和开启。

服务/订单跟踪类:

服务与订单跟踪是作者实际使用过并印象深刻的 Widget ,值得一说。
此类外挂主要用于优化体验,由电商购物发起,延伸至对服务进度的跟踪,格瓦拉是其中体验最完整的 app 。

13.jpg

 在 iOS8 Extension正式面世后没多久,格瓦拉就上架「观影小伙伴」的 feature ,并直接全盘搬到 Widget 中,在电影开场前 3 小时启动电影票订单的服务流程(从普通的电影资讯轮播变身为订单跟进),提醒开场时间和地点;并随着观影时间的接近,翻页到取票密码查询;在电影结束后还有快速打分界面。谁都不想在约会看电影的时候还一个劲地低头翻阅手机,所以这些信息挂在 Today View 上,确实非常方便:)
Service Tracking 还有很多的想象空间,我的外卖送到哪里了,我的等位是不是快到了,都是可以挂在外面的可快速追踪信息。作者记得前几个版本淘宝也做了,可以在 Widget 中查看宝贝的物流,现在不知为何消失了……
服务跟踪类的 Widget 应关注一个流程的不同阶段在呈现上的一致性和相通性,同时视觉表现的识别性也很重要,万一未来有好多不同平台的服务进度需要关注来着……

功能外挂型:

这里也顺带给大家介绍一些纯功能外挂的 Widget(虽然此类非常多、也有很多文章已经介绍过),有些 app 在第一时间就响应号召挂出了 Widget,又有些 app 可以说是专门为 Widget 而生的。

首先 Todo 和 Timetable 等工具是商务人士或效率偏执狂的最爱。(其实给女生提供一些有可爱的或 Art deco风的 memo 小挂件也是挺不错的……)

14.jpg

其次是健康类,无论是层出不穷的可穿戴设备、还是 iOS8 对 Health 接口的开放、又或者是大家都统统用起了微信运动——可以发现智能健康已逐步成为受重视的领域。对于健康控和运动控来说,把健康数据展示在 Today View 上应该会有相当大的需求。

15.jpg

Today Steps 图形化展示运动数据(图片来自 App Store) 

然后流量与容量,对部分人群来说,也是相当重要的!

16.jpg

DataMan(图片来自 App Store)

非常容易开发,也算有实际价值的各类 D-day 倒数。

17.jpg

以及,复制黏贴/翻译/笔记本/记账,是对剪贴板的充分利用,也在有限的 Widget 界面中呈现了各类可爱袖珍的界面。但作者还是较少使用这些功能。拿记账来举例,当初发现这只 Widget 的时候非常激动,但试用后明白到,在一个滑动感很强、随手可以收起的面板中做输入操作,有太多的不稳定性……同理,在 Widget 中打游戏也是不太适合的……

18.jpg

也有不少敬业的 app ,则是专门为 Today View 切割出了最为适合的小模块。

19.jpg

kindle 的阅读进度

20.jpg

DayOne 的日志统计

City mapper 在 Widget 中放置了一枚「Get Me Home Compass」带我回家导航罗盘,显示目的地的方向与距离(可惜此 app 尚未支持任何中国地区)。

21.jpg

City mapper 的「带我回家」罗盘

总的来说,简单的工具 app 会将主要功能直接嵌入 Widget ,而较为庞大的 app 则是选择一个量级适合的模块放入 Widget 。

装饰类:

最后我们来聊一下有无限可能性的——纯装饰类 Widget,作为一个务实的人作者较为怀疑它存在的意义,但作为有少女心的设计师,隐隐觉得这是一个可以发挥和有钱途的领域。毕竟 LINE 已经拿它来赚钱啦。
Line deco 之日历、时钟、电量,其中可以发现广告合作和收费装饰……因为无法搞定 LINE 账号赚到 P 币,就不给大家亲自演示收费项目了……

22.jpg

与之相似的还有电子相册 Photo Widget ,挑选若干手机相册中的照片放进 Today View ,下滑就能看看照片……虽然这个行为当前看起来没啥价值,但其中也能够想到不少深挖的需求与概念,大家可以自行想象哦。

23.jpg

至此,我们来总结一下 Today Widget 的设计奥义吧——

1 不同属性和类型的 Widget 设计方式不同;

2 直接、快速、实用、信息清晰、简洁明了是基本要义;

3 内容有价值,用心运营,可以获得更多的关注与启动;

4 基于时间、 LBS 、订单服务的 Widget 有许多的可能性;

5 整体功能或局部功能外挂也是目前的 Widget 主流应用形式;

6 纯装饰类 Widget 可能真的可以赚到钱~~

 

最最后,作为一个靠谱讲规范的视觉设计师,给大家提供一个 Today Widget 参数表,虽然官网也有提供示意图,但在拜托开发同学对照研究后,发现应该是下图这样的才对。在做设计稿的时候也不要忘记 Today Widget 必须适配到n种苹果设备以及它们的横竖屏…

25.jpg

24.jpg

附录:

App Store Review Guidelines – Extensions
App Extension Programming Guide – Today
iOS Human Interface Guidelines – Today Widgets

最新文章

极客公园

用极客视角,追踪你不可错过的科技圈.

极客之选

新鲜、有趣的硬件产品,第一时间为你呈现。

张鹏科技商业观察

聊科技,谈商业。