「这个控件叫什么」系列之动作菜单/动作面板

@龙爪槐守望者 :鉴于国内交互设计 名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计 发展,做出一点微小的贡献。

文章目录[隐藏]

「这个控件叫什么」系列之动作菜单/动作面板

@龙爪槐守望者 :鉴于国内交互设计名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计发展,做出一点微小的贡献。

往期回顾:

  1. 《「这个控件叫什么」系列之小红点+索引导航+分段控件》
  2. 《「这个控件叫什么」系列之加载占位图+页面指示器》
  3. 《「这个控件叫什么」系列之步进器+SWITCH》
  4. 《「这个控件叫什么」系列之TOAST》
  5. 《「这个控件叫什么」系列之虚拟键盘/软键盘/SOFT KEYBOARD》

Action Sheet(动作菜单/动作面板/行动列表)是由用户操作后触发的一种特定的模态弹出框 ,呈现一组与当前情境相关的两个或多个选项。用户可以使用Action Sheet启动某个任务,或者确认是否开始执行某个可能具有破坏性的操作。Action Sheet属于iOS规范,近年来Android平台也出现了类似功能的控件。

「这个控件叫什么」系列之动作菜单/动作面板

△  Action Sheet

如何使用

提供完成一项任务的多个选项

移动设备屏幕空间是宝贵的,不可能把所有选项都罗列在一个页面上,如果反其道而行把相关程度非常高的操作分割到多个页面上,又会造成操作繁琐体验不连续的感觉。Action Sheet能承载较多内容,而且仅覆盖当前屏幕的一部分,即不会对用户心流有很大的干扰,操作也非常便捷。适合呈现与当前任务相关的多个选项。

「这个控件叫什么」系列之动作菜单/动作面板

△  列表模式和宫格模式

选项较少可使用列表模式,选项过多时,不建议在列表模式中滚动,因为选项的触发横向区域很大,在滚动过程中很容易不小心误点了其中一个。
宫格模式适用于选项非常多的情况,并且能以图标形式展现选项,常见于分享到其他社交App或使用第三方App打开文件的场景。使用宫格模式建议将相关选项分组,如果某组的数量太多,可以在屏幕右边缘露出部分图标,暗示可以横向滑动查看更多选项。
注意:Action Sheet中的选项点击后会立即执行任务,而不是仅仅填写一个选项,它不能用在表单中,表单单选应当使用Picker、Segment Control、Radio Button等控件。

危险操作二次确认

用户在使用过程中,出现删除、未保存退出等可能产生潜在风险的行为时,应当弹出Action Sheet,让用户有机会停下来充分考虑当前操作可能导致的危险结果,并将危险操作用红色标注,为他们提供其它替代的安全选项。Action Sheet是可以连续弹出的,例如第一个Action Sheet中选择删除,第二个Action Sheet中确认删除。此外,如果危险的情况并非由用户主动发起或者严重影响系统本身的完整性,应该使用Alert(这是Alert和Aciton Sheet最大的区别)。

「这个控件叫什么」系列之动作菜单/动作面板

△  Action Sheet和Alert

不同屏幕尺寸的呈现样式

在iPhone屏幕上,为了便于单手持握时操作,Action Sheet通常占据屏幕底部区域。在屏幕较大的iPad上,如果继续显示在屏幕底部,注意力切换和手指移动的路径会很长,频繁使用会比较累,因此iPad的Action Sheet通常在触发区域附近以Popover(弹出式气泡)呈现。
关闭Action Sheet可以通过点击“取消”按钮和空白区域。Action Sheet以Popover呈现时不需要“取消”按钮,因为点击宽广的空白区域关闭更方便。

「这个控件叫什么」系列之动作菜单/动作面板

△  iPhone和iPad的Action Sheet

清晰准确的描述

如果一个页面有多个唤起Action Sheet的对象,例如文件列表,点击某个文件弹出Action Sheet后遮盖了页面,用户不知道当前操作的文件是哪个,也许就会引发误操作。因此,在页面有多个唤起对象或选项本身不够明晰的情况下,提供清晰准确的描述是非常有必要的。

「这个控件叫什么」系列之动作菜单/动作面板

△  Dropbox对操作对象(文件)的图文描述

合理的视觉强调手法

出于业务方面的考虑,有时我们希望用户更多的点击其中某个选项。例如豆瓣为了更好的把内容引入广播里传播,特地在Action Sheet把“推荐广播”放到第一位独占一行,但是线性图标和浅色的文字比起下面的面性图标看上去反倒是让“推荐广播”像Action Sheet的描述说明而不是可以点击的按钮。

「这个控件叫什么」系列之动作菜单/动作面板

△  豆瓣App改版前后

还有LOFRER把最重要的选项“转载到我的LOFTER”做成了纯文字样式,下面的彩色图标比较抢眼,用户会误以为“转载到我的LOFTER”是描述而不是选项。

「这个控件叫什么」系列之动作菜单/动作面板

△  LOFTER改版前后

好在后来的版本豆瓣和LOFTER都改过来,想要某个选项更突出应该采取合理的视觉强调手法。

相关资料

  • Android对应的控件

Android有2个使用场景和Action Sheet相似的控件。第一个是Modal Bottom Sheet(模态底部菜单),和Action Sheet最大的区别是没有“取消”按钮,因为Android有物理Back导航键。
(详见:https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-modal-bottom-sheets

「这个控件叫什么」系列之动作菜单/动作面板

△  Modal bottom sheet

另一个是Simple dialogs(简易对话框),从屏幕中央弹出,没有“取消”按钮,通过点击空白区域关闭。微博、豆瓣的Android版使用了这个控件。
(详见:https://material.io/guidelines/components/dialogs.html#dialogs-simple-menus

「这个控件叫什么」系列之动作菜单/动作面板

△  微博iOS和Android对比

  • Action图标不等同于分享图标

吆喝科技曾用A/B Test帮助墨迹天气优化分享按钮的点击率,在准备的4个分享图标方案中,方案2拨得头筹,相对于原始方案点击率暴涨近20%!(详见http://www.appadhoc.com/blog/mojitianqi-fenxiangtubiao/

「这个控件叫什么」系列之动作菜单/动作面板

△  墨迹天气优化分享按钮的4个方案

一方面我们可以得出用户对分享图标认知比较集中,对Apple原生的图标很熟悉的结论。事实上Apple规范中对此图标的定义是唤起模态视图(Modal View)的Action图标,并非特指分享功能。

「这个控件叫什么」系列之动作菜单/动作面板

△  Apple对Action图标的定义

  • iOS支持非相册文件上传

普遍认为iOS上传内容时,Action Sheet只有选择相册、打开摄像头拍照这两个选项。事实并非如此,网盘类App使用标准的API,能从在Action Sheet中选择iCloud或者其他网盘跨云传输,突破了只能上传本机内容的限制。

「这个控件叫什么」系列之动作菜单/动作面板

△  跨云传输

  • 为什么把Activity View称为宫格模式

熟读iOS规范的读者会发现,iOS 10规范新增了Activity View控件( https://developer.apple.com/ios/human-interface-guidelines/ui-views/activity-views/ ),通过阅读多个版本的iOS规范,我发现Activity View是从Action Sheet演化出来的,除了由系统本身使用,布局是宫格而非列表外,并没有其他不同。再考虑到用于分享功能的宫格Action Sheet大家非常熟悉,因此把Activity View归为宫格模式。

「这个控件叫什么」系列之动作菜单/动作面板

△  从Action Sheet演化出Activity View

欢迎关注作者的微信公众号:

「这个控件叫什么」系列之动作菜单/动作面板

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

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

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

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

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

(0)
震天下震天下
上一篇 2017-08-10 15:59
下一篇 2017-08-15

相关推荐

  • 当卡片式UI不再流行,列表式UI将是王牌

    作为设计师,虽然我们都喜欢最新的流行趋势,额外的白色空间和大图像,但对于新闻和数据,列表式是更好地解决基本的用户目标的方法。卡片是提供详细信息的入口。——来源:Google Material DesignGoogle的搜索结果可能会更加丰富多彩,但每页提供的信息较少。——来自:GreenBot

    2017-05-13
  • 用户体验是玄学吗?

    恍恍惚惚又是一年年底。又到了设计师们的“季节性迷茫期”,最近我的公众号后台经常接到好多朋友的信息,自己行间透露着迷茫和不自信。大的趋势和节奏还是和去年一样,有些视觉设计师询问我如何转UI,有些UI设计师问我如何才能培养产品思维…其实大家都在迷茫,在这里我想分享一个用户体验相关的综述给大家,希望能对大家找准自家的定位有帮助。我最初是一名UI/视觉设计师,然后随着一步一步的发展,给自己的目标也在发生变化,我现阶段给自己的最终定位是成为一名用...

    2018-02-06
  • ArtCenter 2018交互设计本科详解

    交互设计无处不在,从手机应用到游戏,再到可穿戴设备和数字环境。交互设计领域正在经历着巨大的增长,市场对有经验的数字设计师的需求也在激增。专业简介ArtCenter在交互设计领域的丰富历史跨越了平面设计、交通设计、娱乐设计、工业设计和媒体设计等领域,毕业生现在在苹果、谷歌、微软和IDEO等公司担任领导职位。ArtCenter的前沿课程致力于创新。我们的学习过程强调核心方法、工具和过程,使学生在新技术出现的时候能继续前进。但这一课程并不全是...

    2018-05-07
  • 交互案例:文件下载过程中的细节问题

    细节思考是交互设计师的基本素养 今天给大家分享关于文件下载过程中所需要思考的细节问题 说到文件下载,就是下载前、下载中、下载后三种状态 可是三种状态不代表以上三张页面,还有背后种种的细节思考 首先,交互…

    IxD案例 2017-03-21
  • [译]UX设计之商品详情页

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

    2016-06-30
  • 2016必掌握的交互设计趋势

    设计趋势是什么样的,出于各种原因,很多设计趋势在演进中逐渐消失,有的则甚正蜕变成为主流。作为一个专注于网页和平面设计的设计机构,我们对所有相关的技术和设计趋势都极度敏感。通过多位设计师们对2015的总结…

    2016-01-10
  • loading做成什么样子,我才会等!

    文/Seven 来源/数英网 毫无疑问,每个人都不喜欢等待。尤其是在浏览自己喜欢的页面或电影时,对着千篇一律、毫无新意的加载页面,简直枯燥乏味无聊极了! 实际上,有研究表明,普通用户能够忍受的最长的加载页面的…

    2016-04-21
  • 用户行为预判的交互设计研究

    #交互原型##预判设计#主要有两类目的:一是在用户初次体验某种功能时引导用户,避免用户陷入困惑;二是提前判断#用户行为#,缩短行为路径。 作为“剁手党”,闲暇功夫刷淘宝已经是消磨时间的习惯行为。某天看中了一件…

    2016-11-03
  • 基于任务的导航设计

    对于不同平台导航的交互形式与视觉样式,相信有不少的文章来介绍与总结。本文所介绍的是关于导航规划思路。一个比较小众的领域,基于任务的导航(Task based Navigation)。 目前产品主要使用基于对象的导航和基于…

    2015-11-03
  • Reading Your User | 设计心理学书籍推荐

    研究大众的心理学对于设计是很有帮助的。用户在围绕着你的产品所进行的一系列行为举止背后的动机是什么,与之互动时进行过哪些心理活动,外部的哪些因素能够成功影响用户的决策……这些都能够设计师完成更好的设计。

    2017-05-20