Human Interface Guidelines — Modality

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

Modality

Human Interface Guidelines链接:Modality

Modality让人们必须在完成一项任务或关闭一个消息或 view 之后才能做其他事情。Action sheets、alerts 和 activity views 能提供 modal 体验。当一个 modal view 出现在屏幕上时,用户必须通过点击按钮做出选择或以其他方式退出 modal 体验。有些 app 使用 modal view ,比如在日历中编辑事件或在Safari中选择书签。Modal view 将占据整个屏幕,和整个父级视图,例如 popover 或屏幕的一部分。Modal view 通常包括退出 view 的完成和取消按钮。

·尽量减少 modality 的使用

一般来说,人们喜欢用非线性的方式与 app 交互。只有当必须要用户注意时 / 要继续使用 app ,一个任务必须完成或放弃 / 保存重要的数据时才考虑创建一个 modal 环境。

·为退出 modal 任务提供一种明显而安全的方法

当人们关闭一个 modal view 时,确保他们知道自己的行为的结果。

·保持 modal 任务简单、简短且集中

不要在 app 中创建 app。如果一个 modal 任务太复杂,人们可能会在进入 modal 环境时看不到他们暂停的任务。特别要小心的创建包含层次结构的 modal ,因为用户可能会迷失方向,忘记如何沿之前的步骤返回。如果 modal 任务必须包含子视图,则提供单一与清晰的路径来遍历层次结构,避免在完成任务之外使用“Done”按钮。

·如果合适的话,显示能明确任务的标题

您还可以在 view 的其他部分提供文本,以更全面地描述任务或提供指导。

·Alert 用于传递重要且可以操作的信息

一个 alert 会打断体验,并且需要一个点击来关闭,所以对用户而言来说,最好能证明这个打扰是有价值的。

·尊重通知偏好

在设置中,人们会明确说明他们希望如何从 app 接收通知。遵守这些偏好,这样用户就不会想要完全关闭 app 的通知。

·不要在 popover 上方显示 modal view 

除了 alert 之外,popover 上不应该出现任何内容。在很少的情况下,当您需要在 popover 中执行动作后显示一个 modal view 时,请在显示 modal view 之前关闭 popover 。

·与 app 协调 modal view 的外观

Modal view 可以包括一个 navigation bar。如果是这种情况,请使用与 app 中的 navigation bar 相同的外观。

·选择合适的 modal view 样式

您可以使用以下任何一种样式:

Full screen:覆盖整个屏幕。用于可在 modal view 环境中完成的潜在的复杂任务。

Page sheet:部分覆盖了在横向持有或较大设备的内容。所有未覆盖的区域都被调暗以防止与它们的交互。在屏幕在较小的纵向持有设备要覆盖整个屏幕。用于可在 modal view 环境中完成的潜在的复杂任务。

Form sheet:显示在屏幕中央,但如果键盘是可见的,则可以重新定位。所有未覆盖的区域都被调暗以防止与它们的交互。在较小的设备上可以覆盖整个屏幕。这种样式用于收集信息。

Current context:表现出与其父级视图相同的大小。用于在 split view 窗格、popover 或其他非全屏 view 中显示 modal 内容。

·选择合适的过渡样式来显示 modal view

使用与 app 协调的转换样式来增强对临时环境转换的认识。默认的转换是垂直地从屏幕底部向上滑出 modal view ,并在取消后向下滑出。Flip-style 的转换是水平翻转视图,以显示 modal view ,此时在视觉上,modal view 看起来像当前 view 的反面。关闭时会翻转回来。在整个 app 中使用一致的 modal 转换风格。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏钱曙光的专栏

一周极客热文:一个7岁女孩告诉你的关于计算机编程的本质

一个七岁的女孩子,在花了一个小时学习编程后,她对编程得出了令人赞叹的体会。(如上图) 计算机很傻,它只会做那些你让它做的事。 编程真的很难!(你必须非常的认真!...

23590
来自专栏前端新视界

浅谈 Angular 项目实战

我不是 Angular 的布道者,但如今自称 Angular 派,使用 Angular 做项目让我有一种兴奋感。目前的三大主流前端框架都研究过,博客中也有三者的...

18800
来自专栏娱乐心理测试

vue开发类似淘宝商品评价页面(星级,上传多张图片)

最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!实现效果图如下所示:

21120
来自专栏伪君子的梦呓

推荐几个油猴脚本

油猴,也就是 Tampermonkey 是我每一台电脑都会安装的东西,也是我会给熟人介绍和安装的东西。没什么好说的,就是好用。

7K20
来自专栏章鱼的慢慢技术路

Unity入门教程(上)

62770
来自专栏数据小魔方

学会自定义主题,让你的仪表盘瞬间高逼格~

今天这一篇跟大家介绍如何在PowerBI和Tableau中自定义主题来更换默认主题,让你的仪表盘随心所欲的变换主题。 关于Excel的主题配色相关内容已经推送过...

57670
来自专栏破晓之歌

vue的video插件vue-video-player

在线视频文件格式转化工具:https://cloudconvert.com/wmv-to-mp4

1.5K30
来自专栏jerryteng的专栏

js播放音频文件总结

最近在做一个英语听力的个人玩的项目,需要用js来播放mp3文件。从网络上搜到了好多种解决方案。

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

Demoo使用秘籍,比好用更好用 - 腾讯ISUX

19940
来自专栏ytkah

微信小程序添加悬浮在线客服会话按钮

  微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用。客服会话按钮,用于在页面上显示一...

50520

扫码关注云+社区

领取腾讯云代金券