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

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

文章目录[隐藏]

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

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

往期回顾:

  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

相关推荐

  • Axure RP 7.0安装教程

    Axure RP 7.0Win版/64位下载地址:https://pan.baidu.com/s/1qN-SzT5g9U-O9OSzCMEnEw密码:8b6sAxure RP简介:Axure RP是一个专业的快速原型设计工具。使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。适用系统:win7,win8,win10安装有问题或需要远程安装请联系:...

    2018-04-30
  • Axure原型设计:京东官网滚动界面

    91运营社群招募中,勾搭小编微信号:yueyingzheng88入社群每周91公开课,91风暴,全员参与,实际案例实际分析问题答疑,你提问题我解答行业专场,互联网金融,电商,新媒体运营等专场各地分站交流资源及人脉共享其他的。。。。欢迎各行业互联网运营达人加入我们91运营大家庭,会运营的人都来这里了!导读:作者分享了自己制作京东官网滚动界面原型的具体操作过程,希望大家可以从中受到些启发。正文先上京东官网原图(也可以自己搜素京东官网查看)先...

    2018-03-04
  • 心得分享:正确对待所面临的一切

    前面一直在和大家分享我在自学的过程当中所学到的知识,其实每次在写文章之前,我都会自己提前做好准备工作,然后再整理出来一个完好的结果呈献给大家,但是自从结束实习到回到学校的这段时间,产出率几乎为零,今…

    交互设计 2015-08-24
  • 译文 | 用户体验要素之连接性

    科技推动社会的发展,也改变着人机交互的模式和服务方式。科学家创造了先进的科技,设计师们则将这些前沿的科技融合在服务日常民生的产品中,更好的为用户服务。当人工智能技术逐渐成熟后,设计师就将AI技术整合到汽车中来辅助司机驾驶;当低功耗蓝牙技术成熟后,设计师就将iBeacon连接到商场的销售服务体系中… 如何将不同的技术、产品连接在一起来创造更好的用户体验,就是下面译文中将要阐述的。下面进入译文。

    2017-05-29
  • 【炫酷动效设计】这就是为什么你的产品需要做动效设计

    随着国际大品牌苹果和谷歌的引领,最近越来越多的国内公司开始关注动效设计了,越来越多的团队已经意识到动效在产品用户体验中的重要性了,更多的射鸡师们也开始投身动效设计领域。 但是说到底,我们到底为什么需要…

    2015-08-13
  • ”交互设计“菜鸟如何入门?

    大多数新手初次自学设计时有两大难关要过:我适合干这行吗?我该如何入门?带着这两种疑问上路,学习效果很难保证。今天小编特地分享亲身经历以及多年设计经验,为你解答这两大难题! 1. 我适合干这行吗? “我不是…

    2015-08-27
  • 怎么让引导不再是无用小透明?

    在接触一款新应用的时候用户常常会看到一些引导页,但在操作的时候直接当透明的就快速滑过或跳过了,这种时候,大家一定会有 “这些引导好无用啊”的无力感,目前甚至有着“如果一个产品需要引导,说明该产品缺乏友好…

    2015-11-19
  • UI风水学:你该知道的9个UI设计门道

    好风水称之“顺”,其中一元叫气,精气/气场在于风水之中:“气遇风则走,遇水则停。”讲究个气顺心畅;
    好交互称之“理”,其中一元叫情,情感/情怀在于场景之中:“情遇杂则乱,遇简则通。”讲究个通情达理。好风水称之“顺”,其中一元叫气,精气/气场在于风水之中:“气遇风则走,遇水则停。”讲究个气顺心畅;
    好交互称之“理”,其中一元叫情,情感/情怀在于场景之中:“情遇杂则乱,遇简则通。”讲究个通情达理。

    2017-05-12
  • 交互师们,每日高效的一天开启了吗?看看别家的交互怎么过今天~!

      编者按:教你高效利用工作时间!今天的主角是曾经在美国雅虎中国腾讯工作现在在华为人设计总监的尤原庆同学,他分别列出了自己在美国、德国和中国的交互设计工作,全都井井有条且轻重得当,最后还附上设计师…

    2014-11-26
  • 交互设计的两个核心问题:用户体验和以用户目标为导向

    设计师和用户如同在跳交际舞,既要顺应着对方的步伐,也要进行一定的引导。对方是一个人,不只是你感受的到他的温度,他也闻得到你身上的味道,对你时时刻刻进行着评价。

    2017-05-21