淘宝基于iOS14新特性的Widgets组件设计分享

今晚便是大家无比期盼的苹果秋季发布会了，除了各种新硬件之外，大家最关心的应该还是iOS14正式版系统以及iPhone12的公布。

虽说不知道它俩是否会有延期，但想必大家都畅想在新的手机和系统下，淘宝能给大家带来什么好玩的体验和惊喜。

那么废话不多说，现在我们就来一起了解下淘宝基于iOS14新特性的Widgets做了哪些脑洞与想法。

设计要素

一个用户平均每天进入主屏幕的次数超过90次，但停留的总时长不过几分钟，从苹果给出的官方数据发现，一目了然的内容才是用户关心的唯一要素。

在一闪而过的快速切换应用的主屏幕里，设计交互复杂的应用界面并不能契合用户的需要。

▲ 淘宝Widgets设计三原则

在widgets设计要求中，为了让用户的桌面具备更加一致性和统一的视觉观感，我们依旧延续iOS自身的设计标准，同时秉承淘宝自身的设计基因来完成手淘widgets的设计准则。

▲ 淘宝Widgets风格要素

所见即所得的物流

回忆一下，之前我们若是要查询某个订单的物流信息需要分几步？直接告诉你答案，需要四步，而且是每次都要重复这四步过程，现在我们要做的便是简化这一流程。

▲ 每次查询订单的操作深度

试想我们可以将某个比较关注的订单物流信息自定义到前台Widget透出，让你时时掌握自己包裹的一举一动，这种便捷又充满上帝视角的形式是不是别有一番味道。

▲ 手淘Widgets之物流信息

强大的订单管理

除了物流信息之外，订单类管理在一定程度上是大部分人的强诉求，手淘人群有60%在我的淘宝中的目标便是订单模块。所以如何让用户可以快速发起功能唤起也是我们要考虑的能力之一。

▲ 手淘Widgets之订单管理

看到大片的白色有人可能会产生疑问：这些Widgets能跟随系统Dark模式吗？当然，我们充分考虑到这点，将一些有必要的Widgets做了颜色适配，他将会跟随你的手机色彩模式针对性变化。

▲ 追随iOS系统级别的适配

便捷的互动权益提醒

如果你是淘宝人生、淘金币、芭芭农场等互动业务的重度用户，那你日常一定会遇到过因为自己大意而错过或忘记到各个频道中完成诸如签到和收获果实等互动权益的时候。

现在便让你之前的遗憾都化作泡沫，我们单独为互动类用户设置了一个可互动专区，大家可以在这个Widget组件上时效性了解到自己互动权益的完成状态，真正做到信息传达上的一目了然。

▲ 手淘互动频道专区

觉得组件太大了？别担心，我们同样准备了3种不同尺寸方便大家可根据自己的屏幕拥挤状况，自行选择最合适你的那一个它。

▲ S、M、L 三种尺寸型号

更丰富的内容展示形态

手淘内容包罗万象，这其中包含了商品、社区、直播、店铺等各类产品，如此多的内容代表的是背后各异的用户群体和商业形态。

我们会在后续通过更多元的方法去兼顾内容设计面对用户的千人千面，将前台展示的权利交给用户。例如将关注的店铺通过Widget展示在首屏，让你时时关注店铺上新。

▲ 店铺的前台透传

将直播以媒体流的方式进行推送，让你不再担心会错过关注的直播内容，更或者是你爱豆的时装秀哦～

▲ 直播&短视频流样式

One More Thing

iPad的淘宝用户们理所当然的也能体验到这些特性哟，这次可真的没把你们这群人给忘记  

▲ iPad Widgets x Taobao

注：

1、以上设计稿为创意表达，淘宝设计部拥有最终解释权；

2、设计稿中所用素材仅用于创意演示，实际商品、店铺信息以线上为准。