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

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

文章目录[隐藏]

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

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

往期回顾:

  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

相关推荐

  • 从单线走向双线,第三代用户体验即将到来?

    双十一在即,加之今年的新零售狂潮,零售业从线上到线下可以说纷纷摩拳擦掌。京东天猫剑指双十一已是老生常谈,值得注意的是,今年的双十一迎来了更多样化的全民购物盛事,比如飞凡推出的“2017飞凡狂逛节”。据了解,与京东天猫等电商大促有所区别的是,“2017飞凡狂逛节”重点是线下逛,与众多剁手党网上拼杀对比,着实令人耳目一新。新零售改革加速,用户体验核心发生质变可喜的是,我们看到零售业巨头和创业者们都在深挖线下。比如今年爆红的无人便利店和无人货...

    2018-02-03
  • 未来交互设计:初心未变,可用的新视角

    Terry Cao是UXPin(一款线框图与原型制作APP)的内容策略专家。要了解如何掌握现在交互设计的艺术,可以参考免费的电子书籍《Interaction Design Best Practices》。这本书中含AirBnB、 Google、 Apple、Etsy 以及…

    2015-11-08
  • 有用户体验落地方法,才能让销售额增长

    图片设计 | 宗宗;编辑 | 海悦如果你觉得本期学霸有链接价值,请在【学霸十三妹】微信公众号后台回复"黄胜山"即可获取学霸联系方式。在物品富足时代,如何吸引用户的青睐,抓住用户的眼球,是很多商家不得不探索的课题。今天,在上海洽客in,学霸十三妹请来了学霸黄胜山,专注研究用户体验十年的老司机,带你揭秘用户体验那点事!黄胜山:唐硕体验创新咨询 管理合伙人,浙江大学心理学硕士,上海交大MBA和混沌商学院,14年用户体验咨询和设计经验,服务客户...

    2018-03-21
  • Axure画产品原型最新常用组件分享(一)

    画产品原型是产品经理必备的一项硬技能,一般使用axure进行制作,很多人可能都知道axure,但是怎么利用axure把产品原型画的又快又好并不是一件容易的事;原型要画的好,最重要的不是你掌握多复杂的功能,而是要制定好设计规范;下面我把移动产品原型制作中常见的一些元素按照一定的设计规范制作成组件分享给大家,你只要把相应的元件拖动到自己的工作界面,简单修改文字就可以使用了,这是第一个部分,包括以下内容:一. 手机外壳二. 空页面模板三. 常...

    2018-04-05
  • 做产品也离不开哲学,你必须读一读:十个有趣的哲学故事

    来源:市场部 作者:佚名    【送茶叶的小故事】 张三一直喜欢喝20块钱的茶叶。新开茶店里每次张三去买茶叶,老板都送他半两好茶。 张三将好茶攒着待客。一天闲来无事泡壶好茶,竟喝上瘾。喝完免费的好茶,张…

    2014-09-21
  • 产品设计师的自我重启

    有几个月没喝威士忌了,半年都有了,今天又捡起来了。这两周因为喵的事焦虑万分了,恢复的不太稳定,几乎每天都有不同的状况,让人揪心。揪到后面自己也不好了,各种代表焦虑的梦算是梦了个一溜够。那么让自己放松…

    2014-12-13
  • 从周星驰的电影出发,浅谈用户体验的四个特点

    周星驰电影很受大众欢迎,而且具有很强的生命力却是一个不争的事实。而大众欢迎,生命力强正是我们在用户体验所追寻的目标。只有用户知道你核心性能和速度直接超越暴风影音,差异化才出得来。
    ——马化腾

    2017-05-03
  • 这是三种有趣的网页设计趋势,却被低估了

    今天要聊的三种设计趋势其实已经出现一阵子了,但是作为一种相对综合的设计手法,他们并没有引起广泛的关注。只需要使用现有的元素、色彩和排版手法,就可以实现这三种设计效果,但是它们不论是从美学特征上,还是从功能性上,都不输于其他的趋势。有兴趣么?不妨来看看吧。

    2017-05-06
  • 改善电商网站用户体验的6个技巧

    电子商务是一个复杂的系统,作为电子商务的典型模式之一,B2C网上零售网站要考虑的因素很多,甚至一些看似不起眼的因素都可能决定一个用户最终是否在该网站完成购物。 在消费者注意力越来越分散的今天。如果您希望潜在客户更多的停留在自己的网页上,进而产生购买行为,就需要牢牢吸引他们的注意力,并且提供简便愉快的购物体验。做到以下这6点,相信没有用户会拒绝从你的网站购买商品,甚至会带来更多的返购和忠实用户。1.提升网站的加载速度落地网页的速度通常是转...

    2018-05-08
  • 用户体验是玄学吗

    XINYI00梁欣怡2018年3月5日用户体验的解释有很多种,我比较倾向的一种是“用户体验是人对于使用一个产品、系统、服务时的预期和反应。”首先明确第一个概念,体验是一个过程,生活中的一切皆是体验,我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。从广义上来看,体验的主体是人,客体可以是一切物体和事情,媒介是我们的感官;当我们的感官作用在一切事物上,会产生相应的心理行为,比如预期,比如反馈,比如情绪,着所有的一切一...

    2018-03-06