网页设计 » 用户体验 » Today Widget 抢占比桌面更重要的地盘

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

发表于: 用户体验, 视觉设计. 评论
Sponsor

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、快速获得各种信息或执行任务。这样的功能与操作方式极富“效率”的魅力。

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

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

快捷入口/快速启动类:

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

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

Launcher

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

touch2series584

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

新闻/资讯类:

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

weather_stock_sports

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

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

news

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

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

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

AFAR

用AFAR快速查看附近的吃喝玩乐

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

hotel_and_estate

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

swarm

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

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

UGC与运营内容推送:

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

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

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

服务/订单跟踪类:

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

gewara

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

功能外挂型:

这里也顺带给大家介绍一些纯功能外挂的Widget(虽然此类非常多、也有很多文章已经介绍过),有些app在第一时间就响应号召挂出了Widget,又有些app可以说是专门为Widget而生的。
首先Todo和Timetable等工具是商务人士或效率偏执狂的最爱。(其实给女生提供一些有可爱的或Art deco风的memo小挂件也是挺不错的……)

todo

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

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

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

datamanDataMan(图片来自App Store)

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

dday

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

clips

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

Kindle

kindle的阅读进度

DayOne
DayOne的日志统计

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

compassCity mapper的“带我回家”罗盘

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

装饰类:

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

LINE-DECO

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

photo_widget

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

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

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

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

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

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

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

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

6_frame

width_table

附录

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

来源:腾讯ISUX(http://isux.tencent.com/today-widget-pattern.html)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }