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

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

文章目录[隐藏]

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

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

往期回顾:

  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

相关推荐

  • Push!请给用户一个打开APP的理由

    大多数APP的推送都是使用不当的。

    2016-04-21
  • 现在!极限UI设计的时间到了

    毫无疑问,数字设计其增长突飞猛进超过过去五年和服务设计更是如此。合并用户体验、 客户体验、 交互设计和技术创新有助于更好,并协助组建健壮的规则、 模式和人民已经认识到的用户界面语言。然而,我不禁感到东西死了前进的道路。

    2014-12-28
  • 在现代网页设计中,动效常见的几种用法

    在逐步的探索和发展过程中,动效在网页和APP中的运用方法与技巧已经逐步成熟,形成了一套相对系统的模式。今天的文章我们通过一系列实例,来展示一下动效是如何改善整个用户体验的。如果你无法将等待的时长缩短,那么尽量令这个过程有趣。动效让滚动式的交互充满了趣味。

    2017-05-08
  • BRD、MRD 和 PRD 之间的区别与联系有哪些

    今天看到一篇讲述产品设计中几种文档的文章(一个老外的blog,Michael on Product Management & Marketing),感觉很好,结合工作的实际整理一下。按照那篇文章的思路,从产品的抽象到具体主要产出的文档有BRD…

    交互设计WiKi 2015-11-09
  • 交互设计之搜索框设计

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Younger NowMiley Cyrus - Younger Now- 期待你的关注和收藏 -耳朵们要好好收藏原文:Behance作者OTT UI  |  编辑:程琳琳在交互设计中,各个不同的场景需要不同的搜索框设计。搜索框一种常见的交互插件,用于精准提取海量信息中的准确内容。搜索框几乎存在所有的网站和App中,尤其是海量内容为导向的产品之中,例如音乐库、电商类网站,做好搜索...

    2018-02-12
  • 提升用户体验 抢占用户心智

    马云提出的新营销是连接线上线下的全新核心载体,超越单纯线上或者线下的全网营销概念。但华帝李洋认为,线上和线下只是连接用户的媒介,核心仍然是用户体验。抢占用户的心智,提升用户认知,是“新零售”的前提。打造新型厂商关系 构建全新服务体系在产品端,最初的模式是线上采用完全与线下独立的产品线,无论价格、卖点、功能配置都与线下产品区隔,线上和线下营销团队完全独立,各说各话。但随着时间的推移和互联网的蓬勃发展,这种割裂式的操作手法已经成为过去式。企...

    2018-03-29
  • 别逗了,真正的“用户体验”并不如你们所说!

    User Experience is “a person’s perceptions and responses that result from the use or anticipated use of a product, system or service”.— ISO 9241-210The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.— ISO 9241-11— Baekdal, T., 2006. The Battle Between Usability and User-Experience [Online] Available at: The Battle Between Usability and User-Experience–Nielsen Norman Group, 2007. User Experience – Our Definition [Online] Available at: http://www.nngroup.com/about/userexperience.htmlBy Alan Penn, director of the Virtual Reality Centre for the Built Environment at University College LondonReference:Why User Experience Cannot Be DesignediA | Can Experience be Designed?文章一:Eric Baczuk, Design and the (Ir)Rational Mind: The Rise of Affective Sensing
    https://designmind.frogdesign.com/2014/05/design-irrational-mind-rise-affective-sensing-2;
    文章二:Daniel H. Pink, A Whole New Mind Moving from the Information Age to the Conceptual Age
    http://www.goodreads.com/book/show/99315.A_Whole_New_Mind“做项目久了,难免就会职业病发,没成想现在最大的爱好就是拆字玩儿,总想着能从字本身的意思去弄点洞察出来。现在哪哪儿都在说用户体验,说实话,这个概念本人听的是真有点腻了,凡是个东西都要扯上“体验”二字。顺手在网上搜了下在线词典,这下面倒是有对于体验的几种原生态解释:1.亲自处于某种环境而产生认识2.指通过亲身实践所获得的经验3.所谓亲身经历与实地领会4.也含有查核,考察的意思
    从这些个解释里不难看出,从1,2,3的解释中,体验是包含有时间概念的:体验当下的那一刻,体验后的回想总结,以及建立下一次体验的心理预期和评判标准,其中反复强调的是“亲身”一词,这个时候,人的概念就被带出来了,不难看出所谓“体验”又包含了多少亲历者的主观意识;从4的解释中,个人觉得特有嚼头,这似乎是来了个总结:大多数的人都是带着“挑刺儿”的情怀去走完整个时间线的。
    最后,简单的总结下我想说的1.体验设计的who 是别人,体验包含太多主观因素,设计师要懂得如何充分提炼每个人情怀背后的深层共性。2.体验设计是围绕过去,现在和将来这条完整时间线的设计,绝对不是一锤子买卖。3.只要是人,就会对你为他们所架构的体验进行“审核”,所以作为设计师,千万要宽容要大度,那个被“骂”的点或许就是支撑前行的机会。文章中揭示的“互联网产业中对于User Experience和Interaction Design的混淆”可谓是一针见血。作为一名有着一点用户体验sense的互联网从业者,我往往会花费很多时间去说服决策者将投入更多地精力去研究用户,用更加宏观的角度去看待用户体验,但由于自己对于用户体验理解和阐述的局限性,这样的尝试往往无疾而终。我觉得这篇文章提供了很好的逻辑结构和对比佐证,让设计师能够更好地理解用户体验的同时也可以更好地把这个概念传输给别人。
    对于文章中提到的两个工具,Customer Journey Map和User Experience Questionnaire,在我看来虽然被证明在设计咨询和设计用户研究领域非常有效。但是在产品迭代迅速的互联网行业,决策者往往会更倾向于快速地推出产品、快速地试错、快速地更新迭代这样的“野蛮”方式来获取更加直接与准确的用户反馈。在这样的一种大环境下,相对传统的用户研究工具似乎因为周期长与结论的不确定性显得有些“笨重”,这也间接导致了部门互联网公司的决策者对于类似调研方式的抵触。如何做出改变,让这些有效地工具和理论在这样相对“野蛮”的环境中显得“接地气”,我觉得是作为一名设计师需要思考的问题。这篇文章很是解答了大家对于“用户体验”,“易用性”,包括“体验设计”的差别。非常赞同对于未来设计世界和人类世界对于情感化消费需求的方向,很多时候人们看似理性的消费实际上也是出于背后难以明状的亦或是潜意识亦或是外界的多重的信息刺激。神经科学(neuro science) 主张的决策下达从来都不是由内而外的,而是由外而内的。从这一点看,似乎“体验“还是可以被”设计“的,这种预设,结果当然越接近最终的现实越好。在《Thinking fast and slow》这本书中提到了诸多人们下决定的包括背后存在的偏见,所谓主观的意见实际也掺杂了背后潜意识的,本能的,直觉的迅速的判断,在这样的情况下,消费者的“体验”可以”被操控”的因素也大大增加了。说到底,人都是很有同理心(empathy)的动物,再正经地挣扎表现出理性的样子,也不过是那层薄如蝉翼的外壳罢了。“用户体验”就是在不停地触碰这层外壳,让“体验”直入你心。作为一个Service Design背景的设计策略师,用户体验之与我并不是虚拟产品中的手势,按钮,和A/B测试。用户体验融合在一整套服务系统里无形或有型的用户触点中。正如文章所提到的,实体体验的内容层级要远远超越互联网产品的易用性,它是一个更加复杂而庞大的系统,它需要深入挖掘人类需求的本源与动机,而并非只是依照某种需求本身位用户提供某类的便捷工具。
    正如Pine II和Gilmore在The Experience Economy一书中所述,任何企业在喝消费者互动时都是在导演体验,以一种个性化,令人难忘的方式与消费者建立联系,以服务为舞台,产品为道具,以品牌故事为剧本,当我们购买的是体验时,我们花钱享受的事商家为我们提供的一场难忘的回忆,就如同参与一场戏剧演出,其价值将长久地存在于我们的心里。
    试想一下MM巧克力世界,乐高积木世界,苹果体验中心,以及把体验做到极致的迪斯尼。他们永远不可能收到互联网产品的冲击。许多人说随着互联网服务的发展,电影院,商场,美容院,餐厅,所有的产业都将受到影响。然而,良好的体验是在一个人心理,生理,智力和精神水平处于高度刺激状态下形成的,这并非是互联网产品的良好易用性就可以轻易满足的需求。
    对于“用户体验”而言,“易用性”是衡量整个体验过程中所需要的某一工具的标准之一,而体验则应该思考如何通过全方位的营造让服务变乃至于整个生活状态变的更加丰满和人性。“用户体验”被广泛的使用和探讨,说明随着经济发展,消费者的需求已不再单薄。以设计为主导商业创新挑战才刚刚开始,作为这个时代的设计师,我们更应该以开放和学习的心态来迎接新的挑战!关于用户体验的未来的展望非常有趣。说到底是对人的更深入的了解是用户体验的根本。传统上来说,用户体验是基于对于用户更深切的研究,是以用户研究为基础的。也就是根据用户的所说,所做,所想,甚至所感挖掘出真实的用户的能力,需求和期待。而从上文用户体验不能被设计上来说,Context of use和User两个都是影响的因素。也就是说,未来对于User本身的了解的加深, 以及Context of use的改变也会对用户体验本身有着极大的影响。

    2017-06-03
  • 在网页设计中,如何运用方框/方形元素?

    如何让方正方框/方形元素不死板有创意?今天这篇好文总结了超多的设计方法和实战案例,建议阅读。

    2017-05-07
  • 国际用户体验设计论坛邀请函

    点击上方蓝字关注我们国际用户体验设计论坛暨中国工业设计协会用户体验产业分会第一届理事会预备会!  开始报名啦  !官方海报如下👇报名方式一👇长按识别下方二维码,通过报名页面报名👇报名方式二点击文章最底部“阅读原文”,通过H5报名页面完成报名了解我们关注我们长按下图二维码关注“UXE优艺智造”这里有最新的行业动向最前沿的学术研究来一探用户体验的商业价值吧联系我们电话15868193198邮箱uxestudy@126.com欢迎投稿

    2018-03-30
  • 2016天猫双11背后的品牌故事:全民剁手“All in one”

    2016 双11,“All in 1” 主标识,意为“精彩不止一点”。让我们随着阿里小编一起了解2016天猫双11背后的品牌故事。All in 1!将全平台、全品牌、全球融合到一点,迸发出更精彩的世界!

    2017-05-17