Human Interface Guidelines — Widgets

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

Widgets

Human Interface Guidelines链接:Widgets

Widget 是一种扩展,可及时显示少量并且有用的信息或app的特定功能。

 例如,“新闻” widget 显示最重要的标题。 “日历”提供了两个 widget ,一个显示当前的事件,另一个显示下一个事件。 “Notes”可让您预览最近的笔记并快速创建新的笔记、提醒、照片和绘图。 Widget 的高度是可定制的,并且可以包含按钮、文本、定制布局、图像等。

使用3D Touch将压力施加到主屏幕上的 app 图标时,widget 会出现在快速操作列表的上方。 人们还将他们关心的窗口 widget 添加到搜索屏幕,通过在主屏幕和锁定屏幕上向右滑动来访问搜索屏幕。 你的目标应该是设计一个人们想要添加到搜索屏幕的 widget。

左:搜索屏幕上的widgets    右:主屏幕上的快速操作widget

·设计一个可快速浏览的体验

人们使用 widget 来获得快速的更新并执行非常简单的任务,因此提供适量的信息和交互非常重要。可能的话,提供可以一次点击就能完成的任务。在 widget 中不支持平移和滚动

·快速显示内容

人们花很少的时间来查看 widget,并且不需要等待内容加载。本地缓存信息,以便在更新时始终显示最新信息。

·提供充足的 margins 和 padding

避免将内容扩展到 widget 的边缘。通常,在每个边缘与内容之间提供至少几个像素的 margin。使用 widget 顶部的 app 图标进行对齐指导。当与这个图标的中心对齐时,内容往往能展示良好。如果 app 提供了网格式布局,请确保在网格项之间提供了足够和相等的 padding 。如果可能,将图标和按钮的网格限制为每行四个。

·有适应能力

Widget 的宽度被设备与其方向影响而有所不同。 Widget 显示的高度和信息取决于窗口是否折叠或展开(并非所有 widget 都支持展开)。折叠的 widget 是大约两个半 table rows 的高度。理想情况下,扩展的 widget 不会高于屏幕的高度。快速操作列表仅显示处于折叠状态的 widget 。当展开时,一个 widget 显示可以独立存在的重要信息。展开后, widget 会显示增强主要信息的其他信息。例如,“天气” widget 折叠时会显示的当前天气状况,但会在展开时添加小时预测。

·避免自定义 widget 的背景

系统提供的浅色,模糊的 widget 背景旨在保持一致性和清晰度。请使用系统背景,不要使用照片作为背景,因为它可能与锁定和主屏幕壁纸发生冲突。

·通常,使用黑色或深灰色的系统字体作为文本

系统字体的设计更加清晰,且深色字体与标准 widget 背景配合良好。

·适当时,让用户跳转到app进行更多操作

您的 widget 应该独立于您的 app 运行。但是,如果人们需要的比 widget 提供的操作更多,让人们可以很轻易的做到。不要包含一个占空间的“打开app”按钮,而是让用户自己点击内容后即可在 app 中查看或修改内容。例如,在日历 widget 中,您可以点击事件以在日历 app 中打开它。切勿使用 widget 打开其他 app。

 ·为 widget 起一个好名字

每个 widget 的内容上方都会显示 app 图标和标题。一般来说,widget 的名称应该与 app 的名称相匹配。如果您的 app 提供多个 widget ,请考虑使用您 app 名称作为最重要的一个 widget 的名称,并为其他 widget 提供简洁明了的名称。如果您使用自定义标题,请考虑在 app 名称前加上前缀。例如,用于显示附近位置的Map 的 widget 标题为“Maps Nearby”。包含 app 名称会让用户确信该 widget 实际上是由对应 app 提供的。

·让用户知道认证何时增加价值

如果您的 widget 在某人登录您的 app 时提供了其他功能,请确保人们知道这一点。例如,显示即将到来的预订的 app 可能会包含一条消息,说明未登录时“登录 app 以查看您的预订”。

·为快速操作列表选择一个 widget 

如果 app 有多个 widget ,请选择一个出现在使用3D Touch在主屏幕上向 app 图标施加压力时显示的快速操作菜单中。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏做全栈攻城狮

小白学编程实战项目-利用Winform开发美女音乐播放器

这是小白学习软件开发系列课程,旨在帮助对电脑编程感兴趣的朋友学习并熟悉C#技术。其中基础部分已经讲解完毕,可以查看:电脑编程入门(10)-C#面向对象编程浅聊,...

1613
来自专栏angularejs学习篇

angularjs学习第五天笔记(第二篇:表单验证升级篇)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

813
来自专栏王大锤

iOS各种调试技巧豪华套餐

4029
来自专栏编程

5个最好的开源Javascript图表库

在这篇文章中,我向大家介绍前5名最好的开源JavaScript图表库。每个站点的仪表板都是不完整的,因为他们缺少图表,所以为我们的站点找到正确的图表库是非常重要...

3648
来自专栏ionic3+

【技巧】ionic3视频播放

一般视频的展示方式有两种:缩略图和直接播放,分别对应下面两种效果(可参考直播应用和今日头条视频):

2103
来自专栏逸鹏说道

无图片字体icon

W3C 仍然在对 CSS3 规范进行开发。不过,现代浏览器已经实现了相当多的 CSS3 属性。CSS3也从前几年的初试探到如今的广泛应用。最近折腾这方面的东西其...

3579
来自专栏RESTART POiNTER

Web动态图片合成与分享——html2canvas方案实践

在web侧运营活动中,分享传播是重要的一环。普通的h5链接/结构化消息分享已经不能满足产品越来越大的脑洞。在很多场景下,我们需要将个性化内容(如帐号信息,头像,...

7901
来自专栏理论坞

UI(用户界面)设计规则和规范

界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具...

1443
来自专栏腾讯社交用户体验设计

微信小程序初体验(上)

1592
来自专栏ytkah

微信小程序开发教程第五章:微信小程序名片夹详情页开发

今天加了新干货!除了开发日志本身,还回答了一些朋友的问题。 闲话不多说,先看下「名片盒」详情页的效果图: ? ? 备注下大致需求:顶部背后是轮播图,二维码...

3398

扫码关注云+社区