IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

交互实战|覆盖层设计:弹出式半屏页面和弹出式气泡(下)

Catherine • 2017-05-05 06:44 • 交互设计

上篇《交互实战|覆盖层设计:对话框&浮层(上)》讨论了“对话框”和“浮层”两种覆盖层中最为常见的样式:对话框主要分为提示型和输入型两大类;浮层主要分为Toast和Snackbar两类。在下篇中,想要讨论一些不那么常用的覆盖层交互形式:弹出式半屏页面和弹出式气泡。

文章目录[隐藏]

  • 1. 弹出式半屏页面
    • 1.1 ActionSheets
    • 1.2 BottomSheets
  • 2. 弹出式气泡
  • 3. 上下文菜单篇小结
    • 相关文章

上篇《交互实战|覆盖层设计:对话框&浮层(上)》讨论了“对话框”和“浮层”两种覆盖层中最为常见的样式:对话框主要分为提示型和输入型两大类;浮层主要分为Toast和Snackbar两类。在下篇中,想要讨论一些不那么常用的覆盖层交互形式:弹出式半屏页面和弹出式气泡。

交互实战|覆盖层设计:弹出式半屏页面和弹出式气泡(下)

1. 弹出式半屏页面

弹出式半屏页面其实并不是一种官方既有的交互形式,而是本文对iOS和Android平台中相似交互形式的统称。顾名思义,它通过弹出的半屏覆盖层来反馈用户操作,弹出式半屏页面优势在于它既能承载较多内容,又能保持上下文关系。

1.1 ActionSheets

交互实战|覆盖层设计:弹出式半屏页面和弹出式气泡(下)

ActionSheets是iOS平台上的交互形式,在使用场景上与提示型对话框相似(提示型对话框的相关介绍见覆盖层设计上篇),它可以用于二次确认或呈现与当前操作相关的多个选择等。

触发时,ActionSheets从下往上弹出;操作完成后从上往下收起。需要注意的是虽然点击空白处也能够退出ActionSheets,但iOS规范仍然建议始终为ActionSheet提供取消按钮。

优点:相比对话框而言,Action Sheets对用户打扰程度较小。一般的对话框要求用户必须做出选择,当用户点击了某功能按键或取消后对话框才消失;而ActionSheets 允许用户点击空白处取消操作。

建议尽量减少对话框的使用,如二次确认和选择菜单等场景,ActionSheets是很好的代替品。

1.1.1 二次确认提示

交互实战|覆盖层设计:弹出式半屏页面和弹出式气泡(下)

(1)使用场景

通常用于在执行毁灭性操作前,让用户进行二次确认。

(2)内容

一般由操作会造成的结果描述,继续执行操作的按钮和取消按钮构成。点击空白区域和取消都等同于取消操作。

(3)设计Tips

一般用红色等警惕颜色来体现毁灭性操作的确认按钮;当按钮本身的描述清晰明确时,可以不需要额外相关描述。

1.1.2 选项列表

交互实战|覆盖层设计:弹出式半屏页面和弹出式气泡(下)

(1)使用场景

通常用于展示上下文相关的2个或多个选项,每个选项可以帮助用户执行对应的任务;

(2)内容

在界面中可以通过“一个功能键”或“更多按钮”承载多个相关且使用频率不高的选项。点击对应功能键后通过ActionSheets弹出全部选项,一般ActionSheets由选项列表+取消按钮构成。点击空白区域和取消都等同于取消操作。

(3)设计Tips

  • 选项数量不宜过多,AnctionSheets中不能出现滚动操作;
  • iOS规范建议菜单项居中显示且不带图标;

1.1.3 选项网格

交互实战|覆盖层设计:弹出式半屏页面和弹出式气泡(下)

(1)使用场景

主要有以下4种场景,网格比列表更适合:

  1. 更多选项相互之间的相关性不大;
  2. 选项分别属于多种类别;
  3. 选项数量过多,一般多于5个时;
  4. 需要强调选项的图标,如分享时强调第三方平台logo等。

(2)内容

在网格式的ActionSheets中,每个选项以icon+标题的形式展示;当选项较多时,以相关性分行展示,最多不超过2行为宜,当选项有2行时,每行可以单独横向滑动。

(3)设计Tips

每项的标题最好简介明了、不宜过长,当标题较长时可以通过缩小字体的形式展示,若仍然过长则截断标题。

1.1.4 小结

针对3种不同的ActionSheets类型,主要有以下差异:

交互实战|覆盖层设计:弹出式半屏页面和弹出式气泡(下)

1.2 BottomSheets

交互实战|覆盖层设计:弹出式半屏页面和弹出式气泡(下)

BottomSheets是Android Material Design规范中建议的一种交互形式。严格来讲BottomSheets分为两类,一类是模态Bottomsheets,其滑出时在页面内容上方;一类是内嵌式,其与页面内容在同一层级,滑出时会将页面内容往上推移;由于本文主要讨论覆盖层设计,所以此处也只考虑模态BottomSheets的应用场景。

1.2.1 常规的BottomSheets

交互实战|覆盖层设计:弹出式半屏页面和弹出式气泡(下)

(1)使用场景

BottomSheets的使用场景与iOS中选项列表和选项网格的使用场景相同。BottomSheets也既可以通过列表和网格两种形式展示。

(2)设计Tips

在设计BottomSheets时最需要注意的是与iOS端ActionSheets的区别:

  • Android 端的BottomSheets中不需要展示“取消”选项,因为Android软键盘中的返回按钮等效于取消;
  • ActionSheets中不能出现滚动操作,但BottomSheets中可以,由于没有“取消选项”,BottomSheets底部是与屏幕联通的,所以在实际应用中BottomSheets也有更大的发挥空间。

1.2.2 更多BottomSheets

交互实战|覆盖层设计:弹出式半屏页面和弹出式气泡(下)

(1)使用场景

当页面中操作涉及到更多上下文信息时,则适合通过这种类似BottomSheets的形式进行展示。适用于展开筛选项、更深层级分类等场景。

这类交互形式并不算是严格的BottomSheets,而是借用了BottomSheets理念的一种自定义样式。它既能保证用户在使用过程中的上下文连贯性,又能展示大量信息。

(2)设计Tips

  • 与常规的BottomSheets类似,点击空白处时等效于取消操作,菜单需要收起;
  • BottomSheets高度不宜过高,顶部不应超过标题栏。

2. 弹出式气泡

交互实战|覆盖层设计:弹出式半屏页面和弹出式气泡(下)

弹出式气泡在iOS规范中称为“Popover”,它在使用方式上与ActionSheets/BottomSheets类似,弹出时处于页面层级的最上方,点击气泡外任意地方收起。

其实iOS规范中并不建议在手机端使用Popover,这种交互形式更适合在iPad等大屏应用中使用,它相当于分割了页面中部分视图用于完成一个临时任务,完成后关闭气泡并在当页进行刷新。

但由于国内大量主流App都使用了Popover,似乎又为这种交互形式赋予了新的生命。现在常用Popover的形式来呈现页面中折叠的一些额外信息,或在首页位置呈现一些常用操作的快速入口。如下图所示。

设计Tips:

  • Popover弹出时是模态的,需要将用户的注意力聚焦到气泡上,并向用户传达“请先选择气泡中的内容再进行其它操作”的意思,所以最好在气泡下方增加蒙层。
  • 气泡不易过长且不能滚动,当内容实在很多时应当考虑采用BottomSheets或全屏弹层的形式。

3. 上下文菜单篇小结

本篇主要讨论了“弹出式半屏页面”和“弹出式气泡”两类覆盖层样式,它们最大的应用场景即是“展示更多上下文相关信息”。

既然气泡和ActionSheets / BottomSheets都能承载展示页面中更多信息的功能,那么什么时候用哪个更合适呢?

交互实战|覆盖层设计:弹出式半屏页面和弹出式气泡(下)

但总的来说这点并没有定论,主要以尊重应用的统一性和设计风格为准。

参考文献:

  1. iOS Human Interface Guidelines https://developer.apple.com/ios/human-interface-guidelines
  2. Google Material design https://material.google.com/

图片来源:主要来自手机截图和以上文献,少量来自google搜索

相关文章

交互实战|覆盖层设计:对话框&浮层(上)

 

作者:蒋蕊遥(Jerria),网易UEDC ToB业务交互设计师,商业目标与用户体验就像美食与身材,要找到其中的平衡点才能完美!对,我就是爱吃又想瘦!所以,学习奋斗吧!

本文由 @蒋蕊遥 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23386/

GoogleGUIioslogoMaterial designPSUEDUIUXVR交互交互形式交互设计交互设计师产品产品经理分享图标场景字体用户用户体验覆盖层设计设计设计师设计技巧转载
赞 (0)
CatherineCatherine
0
生成海报
帮助视觉设计师高效工作的三大招
上一篇 2017-05-05 05:32
一只设计师的工作小结:在想好之前,先克制你的表达欲
下一篇 2017-05-05 07:52

相关推荐

  • 如何设计可交互的email,调动用户的参与感? 交互设计

    如何设计可交互的email,调动用户的参与感?

    Email营销通常与市场推广活动挂钩,是帮助你达到推广目标的最有效途径之一。但如何确保你的营销邮件的内容与品牌紧密相连?这一直是营销人员面临的一个挑战。用来克服这一挑战的战术多如牛毛,而可交互的email正迅速崛起为最具创新性、动态性和最流行的方式,他们让用户深深着迷、参与其中,相关设计师和开发人员都应该引以为豪哦!

    2017-05-17
  • 在网页设计中兼顾所有用户和场景的3个技巧 交互设计

    在网页设计中兼顾所有用户和场景的3个技巧

    用户可能是新手、专家或介于两者之间,要根据用户情况设计界面。△ 使用适当的新人引导(四种主要的新人引导策略)

    2017-05-23
  • 场景化体验设计的新思路:语音交互 交互设计

    场景化体验设计的新思路:语音交互

    语音交互在场景化的体验中能发挥更好的效果,是因为语音本身就是一个对话的过程。当你置身于特定场景下时,你的语音指令才具备特殊的意义!当你在骑行的时候,Siri在你耳边提醒你临近会议的准确时间和地点,并为你语音导航,同时为你口述刚刚收到的短信息—所有的动作都没有打断你的骑行运动。第二个倒计时设定40分钟,现在开始倒计时。你的倒计时已经运行,还有9分42秒,想要更改它吗?引导强于记忆。User: Alexa, add milk to the shopping list.
    Alexa: I’ve added milk to your shopping list.
     
    User: Alexa, add eggs to the grocery list.
    Alexa: Eggs added to your shopping list.
     
    User: Alexa put butter on the shopping list.
    Alexa: I’ve added butter to your shopping list.
     
    User: Alexa add cereal to the shopping list.
    Alexa: I’ve added cereal to your shopping list.
     
    User: Alexa put cheddar cheese on the shopping list.
    Alexa: Cheddar cheese added to your shopping list
     
    User: Alexa put sugar, flour and salt on the shopping list.
    Alexa: I’ve added sugar flour salt to your shopping list.

    2017-05-17
  • 设计师的知识管理 交互设计

    设计师的知识管理

    作者: shareboy 人们每谈到设计很自然的就会联想到创意、想法。作为设计师,好像我们的大脑里就理所应当地充满了各种创意,然而这些创意是本来就存在于大脑里的吗?显然不是。 有人说创意来自冥想,我不否认有些天…

    2015-04-22
  • 提示信息的情感化设计,做一个有故事的淘宝 交互设计

    提示信息的情感化设计,做一个有故事的淘宝

    未来的故事还可能会将情感化设计延伸到不仅仅是异常的场景中去,从而覆盖整个淘宝,真正地实现做到一个“有故事的淘宝”。

    2017-05-05
  • 交互设计

    苹果旧金山字体的秘密

    iOS 9如今已公开发布。带来了一些细微的变化,但iOS 9的系统字体变成了苹果新推出的旧金山字体,代替了之前用的Helvetica Neue。

    2017-06-03
  • 交互设计

    机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 2 部分: 深入推荐引擎相关算法 - 协同过滤

    本系列的第一篇为读者概要介绍了推荐引擎,下面几篇文章将深入介绍推荐引擎的相关算法,并帮助读者高效的实现这些算法。 在现今的推荐技术和算法中,最被大家广泛认可和采用的就是基于协同过滤的推荐方法。它以其方…

    2015-12-22
  • 【产品分析】微信拼手气红包的贪嗔痴 交互设计

    【产品分析】微信拼手气红包的贪嗔痴

    春节期间火爆的“拼手气”红包,让用户疯狂点击拼手速网速,拼rp看金额,每一个环节都深深戳着用户的G点,高潮迭起。“拼手气”就是拼人品,那么,最佳手气者是不是有机可循呢?微信红包这样的设计目的在何处? Aaron毛…

    2015-03-05
  • 微信热点

    用户体验 | 6个细节成就了今天的X1 Carbon 2018(上篇)

    时光穿梭回到2012年,第一代ThinkPadX1 Carbon发布的时候的心情我清晰的记得。Think的意志清晰而明确,效率大屏+高强度轻薄+黑色商务气质。对于未来移动办公的理解,高端ThinkPad是什么样?如今的ThinkPad X1 Carbon 2018(Gen6)便是答案。Yonemochi San曾经坦言,曾经打造的ThinkPad X300正是如今X1 Carbon系列的“祖父”。碳纤维材料的应用,如出一辙的轻薄,不一味...

    2018-03-10
  • 从用户体验设计的角度,学习服务设计的思考方式和闪光点 交互设计

    从用户体验设计的角度,学习服务设计的思考方式和闪光点

    初学服务设计,读了一本好书——《This is Service Design Thinking: Basics, Tools, Cases》(by Marc Stickdorn,Jakob Schneider),推荐并笔记。而本文基本描述了我对服务设计的初步理解,以及服务设计给我带来的在用户体验设计领域的灵感触发。“服务设计是有效的计划和组织一项服务中所涉及的人、基础设施、通信交流以及物料等相关因素,从而提高用户体验和服务质量的设计活动。…… 服务设计将人与其他诸如沟通、环境、行为、物料等相互融合,并将以人为本的理念贯穿于始终。…… 简单来说,服务设计是一种设计思维方式 ,为人与人一起创造与改善服务体验。…… 服务设计强调合作以使得共同创造成为可能,让服务变得更加有用,可用,高效,有效和被需要 ,是全新的、整体性强、多学科交融的综合领域。…… 服务设计的关键是“用户为先 + 追踪体验流程 + 涉及所有接触点 + 致力于打造完美的用户体验”。”——百度百科“When you have two coffee shops right next to each other, and each sells the exact same coffee at the exact same price, service design is what makes you walk into one and not the other.” – 31 volts service design, 2008“However, creativity is not so much a gift as a process of listening to the ideas “flowing” through one’s head and being prepared to articulate them.”

    2017-05-07
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress