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 条评论
登录 后参与评论

相关文章

来自专栏互联网开发者交流社区

SEO-搜索引擎高级搜索指令

1295
来自专栏听雨堂

Morris图表使用小记

挺好用的,碰到几个问题,有的是瞎试解决了的: 1、我想折线图能够响应单击事件,即点击某个节点后,就能加载进一步的信息,帮助没找到,参照另外一个地方的写法,居然支...

2168
来自专栏Material Design组件

Material Design — 提示框( Dialogs)

3479
来自专栏程序员的碎碎念

利用Ajax提升网页渲染速度——以Highcharts为例

先来看看速度优化对比(这里用了 Django的 DebugToolbar库来查看状态)

873
来自专栏徐江伟的专栏

Vue.js 实战总结

最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑。本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来...

2.5K1
来自专栏web前端教室

前端开发就是这样,“看似简单的东西,反而会很复杂。”

今天的零基础前端课讲到了一个tab地址切换的菜单,就下面这个东西, ? 第一眼看起来超级简单,无非是点击上面的title显示下面的菜单,然后点省市区把内容选上去...

1876
来自专栏守候书阁

移动web开发问题和优化小结

到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这...

992
来自专栏性能与架构

web安全 - CSP

CSP 全名 内容安全策略(Content Security Policy) 主要用来防御:XSS CSP 基本思路 定义外部内容引用的白名单 例如 ...

3377
来自专栏Material Design组件

Human Interface Guidelines — Modality

1213
来自专栏xiaoxi666的专栏

【开源项目】扫雷

项目地址:https://github.com/xiaoxi666/mines_sweeper

672

扫码关注云+社区