Intro 简介
动作菜单由一系列选项组成,用户可从中进行选择以完成操作。如果屏幕上没有足够的空间,可对选项进行归类。
警告:此控件的使用有着诸多限制,通过引入「菜单按钮」可解决这些限制。所以,请尽可能使用「菜单按钮」,而不是「动作菜单」。
Usage 用法
使用动作菜单:
- 当需要一个提供多个操作的选择时。
- 在手机上,使用户保持在一个上下文环境中非常重要。
- 只有少量的操作时。
不使用动作菜单:
- 菜单中仅提供一个选项。在这种情况下,请考虑使用「按钮」。
- 需要显示一个分层级的菜单时。在这种情况下,请考虑使用「菜单按钮」。
- 对用户来说,「分割按钮」更有效。分割按钮提供了易于访问的默认操作,并提供了包含其他操作的选项。
Responsiveness and Adaptiveness 响应性和适应性
动作菜单是完全响应的。在智能手机上,操作以列表的形式显示在对话框中。在平板电脑和桌面设备上,操作显示在气泡弹出框中。![](https://img.haomeiwen.com/i13451650/a93ea0f9cf5882bc.png)
![](https://img.haomeiwen.com/i13451650/f29a720bf9c8dfa3.png)
![](https://img.haomeiwen.com/i13451650/c25373d86c2e3f0d.png)
Layout 布局
动作菜单中的所有元素都是左对齐的。操作总是按重要程度从上至下排列。「取消」按钮使用负向按钮样式,并且居中以区别于其他操作。操作中按钮的点击区域包含动作菜单的整个宽度 (反过来,这个宽度又取决于最长的按钮)。![](https://img.haomeiwen.com/i13451650/6d6f71e9b627a6cd.png)
![](https://img.haomeiwen.com/i13451650/67ce8f3870296818.png)
Components 组件
以下元素可被放置在动作菜单中:
- 按钮
- 图标
Behavior and Interaction 行为与交互
点击(Clicking/Tapping)
根据设备的不同,点击溢出按钮(「…」)可打开气泡弹出框或者对话框。用户可通过点击屏幕上的其他任何地方来触发操作或者关闭动作菜单。在智能手机上,只能通过「取消」按钮关闭对话框。
![](https://img.haomeiwen.com/i13451650/9c456cd503e4be8a.gif)
Guidelines 指南
- 切勿在动作菜单中只使用图标。仅显示文本或图标与文本的结合。
- 在智能手机上,提供「取消」按钮以便用户在不触发任何操作的情况下关闭对话框。
- 避免在动作面板中进行滚动。如果一个动作菜单中按钮过多,用户就不得不通过滚动来查看列表中的所有操作。这不仅增加了用户区分操作的时间,而且在滚动的过程中非常容易误操作。
原文:Action Sheet | SAP Fiori Design Guidelines
备注:文章内容翻译自 SAP - Fiori Design Guidelines。翻译包含个人理解,仅作为个人学习笔记使用。如有错误,求指正呀,非常感谢 ^^
网友评论