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

相关文章

来自专栏ytkah

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

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

3998
来自专栏王大锤

iOS各种调试技巧豪华套餐

4239
来自专栏angularejs学习篇

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

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

913
来自专栏ionic3+

【技巧】ionic3视频播放

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

2873
来自专栏我和我大前端的故事

2018 我所了解的 Vue 知识大全(一)

Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的...

1023
来自专栏思衍 Jax 专栏

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

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

99311
来自专栏web前端教室

风继续吹&&先行者成员:王广铎(duo 二声)的作业分析,从他的作业理解“React单向数据流”

他的作业:“分页组件”React版,写的很好,主要是思路很清晰。本来是想上周日视频课程直播的时候讲一下了,现在只能是放在文章中大概的说说了。先看截图, ? 很...

2068
来自专栏编程

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

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

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

微信小程序初体验(上)

3152
来自专栏做全栈攻城狮

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

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

2543

扫码关注云+社区

领取腾讯云代金券