本文旨在介绍 Material Design 上下文菜单的设计指导原则，帮助开发者了解如何设计优秀的上下文菜单界面。
在 Material Design 中，上下文菜单（Context Menu）是指在用户长按某个控件或者对象时弹出的快捷操作菜单。相比于传统的菜单，上下文菜单更为轻量化、简洁明了，因此在现代应用中被广泛使用。为了让用户得到更好的体验和使用感受，我们需要遵循一些设计原则，下面将一一阐述。
1. 显示菜单项
在展示上下文菜单时，首先要求开发者必须展示菜单项，不能隐藏或省略条目。因此，开发者应该准备好所需的所有菜单项，并始终显示它们以便于用户进行操作。如果某个菜单项不适用于此上下文，请将其禁用而不是隐藏。
代码实现，示例：
-- -------------------- ---- -------
------- --------------------
--- -------------------- ----------
------ --------------------
------ --------------------
------ --------------------
--- ------------------- --------------------
-----
--------
--- --- - -------------------------------
--- ---- - --------------------------------
----------------------------------- -------- --- -
-------------------
------------------ - --------
--------------- - --------- - -----
-------------- - --------- - -----
---
-------------------------------- -------- --- -
------------------ - -------
---
---------2. 显示图标
在 Material Design 的开发中，图标承担着非常重要的角色。使用图标来增加菜单项的可读性和可理解性。此外，它们以视觉上区分不同的动作。
代码实现，示例：
-- -------------------- ---- -------
------- --------------------
--- -------------------- ----------
------ ---------------------------------- --------------------
------ ----------------------------------------- --------------------
------ ------------------------------------------ --------------------
------ ----------------------------------- --------------------
-----
--------
--- --- - -------------------------------
--- ---- - --------------------------------
----------------------------------- -------- --- -
-------------------
------------------ - --------
--------------- - --------- - -----
-------------- - --------- - -----
---
-------------------------------- -------- --- -
------------------ - -------
---
---------3. 显示副标题
在需要额外解释或者带有更多信息的菜单项上，需要提供副标题以帮助用户了解此菜单项的功能。此设计原则可以帮助用户更好的理解和使用菜单项，从而提高体验。
代码实现，示例：
-- -------------------- ---- -------
------- --------------------
--- -------------------- ----------
------ ---------------------------------- --------------------
------ --------------------------------- ------------------------------------------------------
------ ------------------------------------- ------------------------------------------------
------ ----------------------------------- --------------------
-----
--------
--- --- - -------------------------------
--- ---- - --------------------------------
----------------------------------- -------- --- -
-------------------
------------------ - --------
--------------- - --------- - -----
-------------- - --------- - -----
---
-------------------------------- -------- --- -
------------------ - -------
---
---------4. 显示分隔符
当菜单项的数量较多时，为了方便用户理解和使用，我们可以使用分隔符来帮助用户分组和定位。分隔符使得菜单项更有条理和易于操作。
代码实现，示例：
-- -------------------- ---- -------
------- --------------------
--- -------------------- ----------
------ ---------------------------------- --------------------
------ ------------------------------------------ --------------------
------ ----------------------------------------- --------------------
--- ---------------------
------ ------------------------------------------ --------------------
------ ---------------------------------------- --------------------
--- ---------------------
------ ----------------------------------- --------------------
-----
--------
--- --- - -------------------------------
--- ---- - --------------------------------
----------------------------------- -------- --- -
-------------------
------------------ - --------
--------------- - --------- - -----
-------------- - --------- - -----
---
-------------------------------- -------- --- -
------------------ - -------
---
---------5. 显示键盘快捷键
为了帮助用户快速定位和使用菜单项，我们可以为每个菜单项提供键盘快捷键。这一设计原则在需要快速操作或缩短操作时间时很有用，可以显著提高用户的效率和准确性。
代码实现，示例：
-- -------------------- ---- -------
------- --------------------
--- -------------------- ----------
------ ---------------------------------- ---------------- ----------------------------------
------ ----------------------------------------- ---------------- ----------------------------------
------ ------------------------------------------ ---------------- ----------------------------------
------ ----------------------------------- ---------------- ----------------------------------
-----
--------
--- --- - -------------------------------
--- ---- - --------------------------------
----------------------------------- -------- --- -
-------------------
------------------ - --------
--------------- - --------- - -----
-------------- - --------- - -----
---
-------------------------------- -------- --- -
------------------ - -------
---
---------总结
在 Material Design 设计中，上下文菜单作为一个非常重要的组件，被广泛应用于各类应用和网站。因此，设计出好的上下文菜单对于提高用户体验和效率是至关重要的。本文从展示菜单项、显示图标、显示副标题、显示分隔符和显示键盘快捷键等方面，深入分析了设计上下文菜单时需要遵循的指导原则。希望能够帮助到各位开发者更好的为用户提供优秀的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f8081980a9b385b8f6028