超实用!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

相关推荐

  • 关于微交互动效的“六脉神剑”

    好的产品必备的两点要素:功能和细节设计。功能吸引用户使用你的产品,细节设计塑造产品的差异化,将你的用户留下。功能满足需求,细节打动人心。

    2017-05-22
  • iOS 9人机界面指南(一):UI设计基础

    译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。

    2017-06-02
  • 阿里巴巴UED的设计团队究竟为双11贡献了什么?

    在11月11日这个日子的前后一段时间,当你发现如下症状之一:当你被机场、地铁、公交站牌和网页里频繁出现的双11提醒,感觉重要的时刻就要来临;当你心跳加速,不管什么都先放到购物车里再说;当你最终等待在11号这天的凌晨用风一样的速度支付成功,并长吁一口气;当你认为一切都那么的简单、自然、纯粹,不过是一场轻松的购物。只能说你Too young,Too simple。你的一举一动已经被一个神秘的组织所引导,它让你下单时够快、够准、够狠,并且你毫...

    2018-02-01
  • 关于用户体验

    产品不被喜欢的原因是漏了什么?答案是用户体验。如果你是一个产品经理,是否有深刻思考过这个问题呢?有人会说思考过,但似乎没什么用,产品还是不被喜欢。那是用户体验不重要,还是我们思考的不够呢?答案是后者。首先我们提出本篇要解决的核心问题:如何让产品被喜欢?(说明一下,这个产品可以是某种实物性的产品,也可以是一种服务性的产品。)这个问题提出后,很多人的脑海中会蹦出质量好、外观精致、用的舒服、服务周到等,但想到这些的人,一定还会有一个感受,就是...

    2018-04-09
  • 交互设计:如何避免业务需求的遗漏

    笔者在春节期间在被七大姑八大姨问的比较多的一个问题有:你现在是做什么工作的啊?看着眼前的火锅实在不知道怎么解释,就问了他们一个问题“你觉得我们在春节期间怎么能吃上火锅?”他们的回答大概可以归类为:买材料 —— 火锅底料烧开 ——-放吃的 —— 完成而我的回答是:“如果今天的客人不敢吃辣,而你准备的是辣锅呢?”“如果你买的火锅料大家不是大家想要吃的呢?”“如果客人太多,而锅太小呢?”我目前的工作就是这个,让客人在各种状况下都能享受到这顿火...

    2018-03-06
  • Adobe放大招!Sketch有的功能都上了!

    (本文内容来源知友:不知语冰,感谢~)关于 Photoshop的UI-DNA工具很久就有传闻了!昨天据MICU了解,这个强大的工具终于开放测试啦~~虽然说很多设计师比较推荐sketch,可是这回了不得!sketch有的功能,PS都能实现了!也许有很多同学还不太了解 UI-DNA 是个什么样的工具,说白了,就是 Photoshop 上拥有更强大的属性编辑功能。现在来说说UI-DNA都有神马强大的功能。打开Photoshop 中的UI-DN...

    2018-03-02
  • UI交互设计只需掌握这3点

    说到交互设计,就不能不提需求,因为所有的交互设计的工作都是基于需求,这也是交互设计的第一个着力点。因此,只有深刻理解需求以后,才有可能做出好的交互设计。举一个饱含血泪的例子:在做一个项目的过程中,有一个需求是要将一个应用的数据展示做一下调整,使之能够查看在三个月之内的该数据。当时,自以为已经很了解需求,只是将时间限制放开到三个月,同时,数据的展示限制在一个月内。也就是说,可以查看三个月内任意小于三十天的时间段。优点是:1)满足了需求;2...

    2018-02-27
  • 如何避免交互设计中的「刻板印象 」

    之所以有“刻板印象”,是因为有categorical thinking(类别型思维),它往往使我们产生对事物的固有看法和理解,是在看到某些特定人、事、物时第一时间想到的,这些就形成了“刻板印象”。那到底该如何避免它的消极作…

    2017-08-01
  • 设计一个界面动效时,需要明确价值、遵循原则和实现交付

    坦白来说,虽然我之前在项目里做过一些小动效尝试,但一直没有什么系统的方法和原则指导,大多在原型软件里凭「感觉」随意调调了事,而说不清楚为什么要做成这样。刚好最近有在和团队的小伙伴们一起进行动效设计的研究与实践,对动效设计的价值、原则和实现交付开始有了更多的了解,在本文中浅薄地总结一下。

    2017-05-12
  • 深度长文|如何输出一份让团队满意的交互设计交付物

    本篇是系列小结的第二篇,简单总结一下自己对如何提高交互文档质量的一些思考。

    2017-05-16