3分钟带你掌握11个最常用的交互控件

本文作者将来总结一下各个控件的特点,方便各位更好的理解这些控件。(更具体的说明请参考:iOS和Android规范解析——警告框(Alerts)对比)(更具体的说明请参考:iOS和Android规范解析——简易菜单、简易对话框和弹出框 )(更具体的说明请参考: iOS和Android规范解析——简易菜单、简易对话框和弹出框 )
(更具体的说明请参考: iOS和Android规范解析——底部浮层(上))
(更具体的说明请参考: iOS和Android规范解析——底部浮层(下))(更具体的说明请参考: iOS和Android规范解析——确认弹框、全屏弹框和模态视图)


本文作者将来总结一下各个控件的特点,方便各位更好的理解这些控件。

3分钟带你掌握11个最常用的交互控件

之前的一系列文章,为大家介绍了iOS和Android规范中,各种弹出物(不要乱联想~~)的用法,罗列如下:

  • 警告框(Alerts)
  • 弹出框(Popovers,iOS独有)
  • 简易菜单(Simple Menus,MD独有)
  • 模态视图(Modal Views,iOS独有)
  • 确认弹框(Confirmation Dialogs,MD独有)
  • 全屏弹框(Full-screen Dialogs,MD独有)
  • 上拉菜单(Action Sheets,iOS独有)
  • 简易弹框(Simple Dialogs,MD独有)
  • 活动视图(Activity Views,iOS独有)
  • 底板(Bottom Sheets,MD独有)
  • 提示框(Toasts)

既然各个控件都出过场了,也是时候让它们合个体了!

3分钟带你掌握11个最常用的交互控件

弹出类控件比较表格(工具栏不是弹出类控件,之前没有介绍)

模态

观察上表,左边iOS这一栏,从警告框到活动视图,它们构成了一个听起来很高大上的词汇——模态(Modal,不是Model)。iOS设计规范对模态的定义是这样神儿的:模态让用户聚焦到某一个任务、消息或者视图上而不能做别的事情,直到用户完成了当前的任务。比如警告框,用户必须必须选择警告框里的一个选项,警告框才会消失,否则用户什么也做不了。这个警告框,就创造了“模态”的体验。

3分钟带你掌握11个最常用的交互控件

模态示例1——警告框

3分钟带你掌握11个最常用的交互控件

模态示例2——模态视图

关于如何使用模态,苹果有以下几点建议:

  1. 尽量少使用。因为一般来说,人们使用应用的时候不是线性的,不是先做A再做B这样,是想到啥做啥。而模态是线性的,比较强制。苹果建议,只在某个任务特别重要,必须引起用户的注意、或者某个任务必须被完成才能继续使用应用、或者需要应用需要保存数据时,才使用模态这种设计。
  2. 使用模态时需要提供一个清楚明白的退出模态的通道。需保证用户总能知道他们在一个模态中操作后的结果。
  3. 保持模态里的任务简单、简短、单一。如果要在模态视图中创建带有多层级关系的任务,一定要慎重!因为用户很容易忘记它们操作的来龙去脉。
  4. 只在展示很重要的提示信息时,才考虑使用警告框。最理想的情况是,警告框可以让用户采取行动。警告框比较打扰用户,所以有必要让用户觉得这种打扰是值得的。
  5. 不要在一个弹出框上面使用模态视图。弹出框之上唯一可以出现的,是警告框(警告框权限真的很大啊!)如果非要在弹出框上面展示一个模态视图,那么请先让弹出框关闭,再展现模态视图。

在Material Design(简称为MD,下同)中,没有与模态相对应的概念。但其实,对话框和底板(除了固定底板),构成的也是模态的体验。

控件对比总结

不知不觉中,对比了这么多控件。下面我们来总结一下各个控件的特点,方便各位更好的理解这些控件。

警告框

3分钟带你掌握11个最常用的交互控件

左:iOS警告框; 右:MD警告框

左图展示了iOS中警告框的几种形式,右图展示了MD中警告框的包含元素,其中标题不是必须的。对于警告框,苹果规范和MD都建议尽量少使用,必须是告知很重要的信息才出现。另外,对于警告框的按钮,应尽量告知用户操作的结果,而尽量避免使用“是/否”这样的文案。

(更具体的说明请参考:iOS和Android规范解析——警告框(Alerts)对比

弹出框 & 简易菜单

3分钟带你掌握11个最常用的交互控件

左:iOS弹出框; 中、右:MD简易菜单

对于iOS的弹出框,原本是针对iPad这样的大屏设备设置的控件,近两年由于手机屏幕越来越大,也开始应用于手机,需要注意iOS的弹出框是自带箭头的,箭头指向入口。MD的简易菜单,需要注意菜单没有箭头,并且菜单是压住入口的,这一点经常被用错。

(更具体的说明请参考:iOS和Android规范解析——简易菜单、简易对话框和弹出框

上拉菜单 & 简易弹框

3分钟带你掌握11个最常用的交互控件

左:iOS上拉菜单; 右:MD简易弹框

上拉菜单和简易弹框,都是用于提供一些列选项的控件。不同的是,上拉菜单必须包含“取消”按钮;上拉菜单可用于毁灭性操作(比如“删除”)等的二次确认。而简易弹框没有“取消”按钮,在选项中可加入头像、icon等元素,另外还有如上图中的“添加联系人”这样的操作按钮。

上拉菜单 & 活动视图 & 模态底板

3分钟带你掌握11个最常用的交互控件

左:上拉菜单; 中:活动视图; 右:模态底板

细心的朋友可能已经发现了,这里又出现了上拉菜单。事实上,这里要跟大家总结一下,上面提到的弹出框、上拉菜单、活动视图、简易弹框、简易菜单、模态底板,功能上其实非常相近,都是提供当前环境下的一系列选项。区别是展现形式的不同,还有个别控件有其独特的功能点。在MD中,有这样一句介绍:Modal bottom sheets are alternatives to menus, or simple dialogs, and can display deep-linked content from another app(模态底板与简易弹框、简易菜单可以互相替换使用,唯一的区别就是模态底板中可以承载深层链接)。铛铛,模态底板把这一串控件都串起来了。

(更具体的说明请参考: iOS和Android规范解析——简易菜单、简易对话框和弹出框

(更具体的说明请参考: iOS和Android规范解析——底部浮层(上)

(更具体的说明请参考: iOS和Android规范解析——底部浮层(下)

确认弹框 & 全屏弹框 & 模态视图

3分钟带你掌握11个最常用的交互控件

左:MD确认弹框; 中:全屏弹框; 右:模态视图

确认弹框用于确定一个选项。全屏弹框和模态视图,可用于较为复杂的任务,它们可以调起别的控件。

(更具体的说明请参考: iOS和Android规范解析——确认弹框、全屏弹框和模态视图

另外,还有工具栏(下一篇会介绍)、模态底板和提示框,就不一一列举了。感兴趣的朋友还可查看以下文章:

讨论使人认识更加深刻。欢迎留言。

#专栏作家#

新设计青年,微信公众号:新设计青年。人人都是产品经理专栏作家,爱奇艺高级交互设计师。德国海龟一枚,曾任职于腾讯微生活、网易、宜信等公司。

本文由 @新设计青年 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22101/

(0)
CatherineCatherine
上一篇 2017-04-30 12:52
下一篇 2017-04-30 15:01

相关推荐

  • 7个设计技巧,让内容和用户体验无缝地配合起来

    好的设计往往需要好的内容作为基础支撑。无论是内容还是设计,想要让两者最大化的搭配,往往是需要进行调整和优化才行。“不要总是玩弄算法,创造用户想看的内容才是正途。”

    2017-08-04
  • 聊聊意见反馈,小功能也有大门道

    反馈是几乎所有应用的标配功能,往往藏在“设置”或者“关于”里面的小角落。意见反馈在产品开发中的作用是不能忽视的,这几乎是所有应用最好的用户意见收集入口,但是不同应用对意见反馈的处理各不相同。最近在做反馈系统的梳理工作,也包括意见反馈页面优化,将这一段的分析整理成此文。

    2017-06-01
  • 英国各大院校交互设计专业的侧重点!

    随着网络和新技术的发展,人们越来越重视交互的体验,许多公司、网站、APP都开始注意到交互设计在品牌的创建、客户回头率、客户满意度等方面的影响,交互设计师也越来越受到重视。因此,许多同学在选择留学时,都会考虑英国的交互设计专业。交互设计专业在英国已经有半个世纪的历史,教学模式是:用心理学发现问题,用数学证明问题,用计算机解决问题。英国交互设计专业分为两个方向:1.Human Computer Interaction(HCI,人机交互设计)...

    2018-04-27
  • 018. 内部框架——axure线框图部件库介绍

    网页框架代码<iframe border=0 name=lantk src="要嵌入的网页地址" width=400 height=400 allowTransparency scrollbars=yes frameBorder="0"></iframe>      看到上面这段代码,很多人肯定认出这是htm…

    2014-09-12
  • 双11的电商设计风格:5个角度分析天猫视觉页

    天猫官方的双十一预热页面刚刚上线,本文作者就帮大家分析双十一电商设计的流行趋势,包括场景、配色、角度、标题、辅助性元素等。干货+趋势,绝对值得一读!

    2017-05-17
  • 未来所有的产品都要围绕人性去思考

    过去的记忆 回顾计算机和互联网的发展,计算机的编程语言从C语言开始,到C++,到最近的go语言,不断地进化,趋势是Code越来越接近人的方面,Code是从计算机端向人端的进化,计算机的编程语言也诠释了科技的发展,以…

    交互设计 2014-12-17
  • Sketch49-原型设计才刚刚开始

    官方说明:草图49已经到来,在我们的图书馆更新之后,我们又为Sketch增加了另一个巨大且备受期待的功能。我们了解设计,所以我们知道你不能总是根据静态屏幕判断是否有效。有时你需要看到整个流程的实际运行情况,最好的方法是将你的设计变成交互式原型。通过我们的最新更新,我们正在使整个过程无缝 - 在Sketch中与原型设计师打招呼。Sketch 49带给我们的是最值得期待的功能之一:能够在本地创建和分享快速交互式原型当我听到这个消息时候,脑子...

    2018-03-02
  • 阅读好体验的准则:100% Easy-2-Read

    阅读好体验的准则:100% Easy-2-Read | 艾欧交互设计 译者:前两天看到一篇文章,觉得挺不错的,就简单翻译一下分享给大家。   大多数网站都挤满了小号的文字,使人阅读起来感到很痛苦。产生这个问题的原因是…

    2014-11-13
  • 交互设计延伸阅读:格式塔心理学5项法则的学习与思考

    格式塔心理学5项法则的学习与思考 最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非…

    交互设计WiKi 2015-08-27
  • 浅析手机交互设计中的“拇指法则”

    你有没有遇到过一款APP让你用的很不舒服?你的拇指必须要伸得老远才能够得到菜单,或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受,或者更学术化点说,没有考虑到“拇指法则”。

    2017-05-02