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

之前的一系列文章,为大家介绍了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,iOS独有),活动视图(Activity Views,iOS独有),底板(Bottom Sheets,MD独有),提示框(Toasts)。既然各个控件都出过场了,是时候让它们合个体了!!

往期回顾:

  1. 高手帮你学规范!iOS和Android规范解析之提示框+警告框
  2. 高手帮你学规范!IOS和ANDROID规范解析之简易菜单+弹框

超实用!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都建议尽量少使用,必须是告知很重要的信息才出现。另外,对于警告框的按钮,应尽量告知用户操作的结果,而尽量避免使用“是/否”这样的文案。

弹出框 & 简易菜单

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

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

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

上拉菜单 & 简易弹框

超实用!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(模态底板与简易弹框、简易菜单可以互相替换使用,唯一的区别就是模态底板中可以承载深层链接)。铛铛,模态底板把这一串控件都串起来了。

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

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

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

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

另外,还有工具栏(下一篇会介绍)、模态底板和提示框,就不一一列举了。

欢迎关注作者微信公众号:新设计青年

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

「如何看懂iOS 10 的设计规范指南」

  1. 看趋势变化丨《从IOS 10设计指南变化看设计的新趋势》
  2. 看交互启示丨《从IOS 10 的交互设计中学到的3个设计启示》
  3. 看使用方法丨《一份超详细的「IOS 10 UI KIT」使用手册(附源文件)》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/20436/

(0)
震天下震天下
上一篇 2017-05-31 15:08
下一篇 2017-05-31 16:10

相关推荐

  • Designing in color

    色彩是设计师手中强大的力量,它吸引你的眼球,调动你的情绪,让沟通更为有效。为了让你能够认识到色彩是多么重要,在一篇广泛被引用研究的报告-“The Impact of Color on Marketing”,研究者们发现对一些产品来说,90%的人仅仅基于它的颜色对一款产品下决定。

    2016-07-11
  • 通知邮件,潜移默化地影响着用户体验

    在打造一个产品的过程中,创业公司往往会把绝大多数的财力和精力用在开发应用或者搭建网站上,很少投入到给用户发的提醒邮件上。

    2017-05-31
  • 2016年最值得关注的16个网页设计趋势

    设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流。作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都…

    2015-12-23
  • 交互设计师应该了解的心理学理论:认知心理学、格式塔心理学和心流

    问:贴满一张卡需要多久,A和B是否相同?答案当然是不同,尽管同样需要买10杯咖啡,但往往B方案会更快地贴满。

    2017-05-20
  • 有效地运用UI动效的4种方法

    约在10年之前,在用户界面使用的动效,大部分是一些广告和闪烁的弹窗。然而到了今天,已经发生了翻天覆地的变化。设计不仅是外形和感觉,设计关乎如何运作。

    2017-08-04
  • 未来,设计师的核心价值在哪里?我总结了4个进阶方法

    在 Web/iOS/Android 等旧平台成熟稳定、VR/AR 等新平台尚未全面兴起,设计标准化成为趋势的当下,作为用户体验设计师的核心价值又有哪些?本文作者将自己反思的一些经验总结了出来,一起来看看。

    2017-05-10
  • Axure RP 8软件安装视频教程

    Axure RP 8下载地址:链接:https://pan.baidu.com/s/1smi2vvf密码:l2oj安装中有问题请咨询私人微信:152374906801、双击打开此文件2、点击next3、选择i  agree然后点击next4、点击bowse更改存储位置建议不要放在C盘然后点击next5、点击next6、点击next7、等待安装8、取消勾选Run Axure RP 8,然后点击Finish9、打开软件的安装目录把复制的la...

    2018-03-04
  • [译]UX设计之商品详情页

    现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能利于用户的整个体验过程(我们也应该以利于用…

    2016-06-30
  • 好的产品经理是什么样的?

    互联网界自从出了几个大神级的产品之后,产品背后的产品经理被捧红了,一时间产品经理成了诸多行业从业者追求的目标,每个人都期望有一天也能做出一个很牛的产品来,这种影响导致了很多刚毕业的学弟学妹,都认为产…

    2014-11-12
  • 交互设计中的人为本与用户需求究竟谈的是什么?

    以人为本和建立用户需求,是开展交互设计的首要任务。以人为本指的是:理解用户,理解人的感知和认知的本质,分析用户的思维模型。如何理解以人为本以人为本的两种理解:人本工具论之说和人本实质伦之说。人本工具论:这是从统治者角度出发的,出于实现自身利益的需要,把以人为本作为实现其利益的一种手段。这是伪以人为本、虚假的以人为本。人本实质伦:这是从人的立场出发,以人的自身角度研究问题的“人本观”作为出发点。在满足人的需求时,还应考虑对交互系统可持续发...

    微信热点 2018-02-26