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

相关文章

来自专栏RESTART POiNTER

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

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

3141
来自专栏听雨堂

微信小程序:字体保持大小

小程序和网页差不多,前台用wxml把内容摆好,然后用css调整样式。所以和web一样,必须要能够精确控制每一个元素的大小。在Web中,通过CSS基本达到了像素级...

3857
来自专栏思衍 Jax 专栏

企鹅辅导课程详情页毫秒开的秘密 - PWA 直出

随着近几年的前端技术的高速发展,越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例,从性能角度,其最重要的指标...

3379
来自专栏编程

也许 vue+css3 做交互特效更简单

1.前言 做项目就难免会开发交互效果或者特效,而我最近开发的项目一直在使用 ,开发技术栈方面,理所当然就使用了 + 开发,过程中发现使用 + 开发特效,和 / ...

18810
来自专栏王大锤

iOS各种调试技巧豪华套餐

3779
来自专栏ytkah

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

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

3038
来自专栏编程

5个最好的开源Javascript图表库

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

3098
来自专栏angularejs学习篇

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

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

733
来自专栏练小习的专栏

从前端界面开发谈微信小程序体验

这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程。

16.6K15
来自专栏ionic3+

【技巧】ionic3视频播放

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

1633

扫码关注云+社区