美文网首页UX ArkenstoneUI/交互设计规范@产品
GUI 常用元素中英对照表 / 4. Menu 附彩蛋

GUI 常用元素中英对照表 / 4. Menu 附彩蛋

作者: LynetteL | 来源:发表于2017-02-07 00:42 被阅读55次
    • macOS 把一般菜单栏叫作 Hierarchical Menu,主要是为了和另一种 Contextual Menu 呼应。

    • Windows 或者说 Office 的基础元素里有一种特殊案例 Ribbon,主要面向操作特别繁复的办公应用。

    • 和一般菜单的操作范围指向整个应用不同,Contextual Menu 只指向特定元素,比如 macOS 的右键选中后弹出菜单,再比如 Material 的点击 Overflow 图标弹出对应菜单。

    • iOS 中有一类特殊 Contextual Menu,针对文本编辑的Edit Menu。

    • 对应译名:
      Menu Bar —— 菜单栏
      Contextual Menu —— 语境菜单
      Edit Menu —— 编辑菜单

    Menu

    *彩蛋: Hamburger Menu 的前生今世

    大多数情况,用户不理解 Hamburger Menu 是什么,剩下的情况,用户不喜欢这个设计。对他们来说,看不到的基本就等于不存在。默认隐藏在「更多」、「展开」里的内容就是薛定谔那只亦生亦死的猫,在没点开之前,一切皆有可能。Hamburger Menu / 汉堡菜单被诟病的根本原因在于,1、被隐藏的选项、操作是否应该被隐藏;2、如果是,那么可以被隐藏的选项、操作是否有必要存在。

    Photo Courtesy of Vanessa Grass

    现下的汉堡菜单多见于移动端应用,点击图标后呼出侧边栏。但设计者 Norm Cox 最开始对它的定义是语境菜单——在有限空间里作为一个「容器」收纳其他操作——而非导航。

    I designed that symbol many years ago as a "container" for contextual menu choices. It would be somewhat equivalent to the context menu we use today when clicking over objects with the right mouse button.

    Xerox Star

    Xerox Star 的录像即证明了这一点。点击 Hamburger Icon 后左侧出现针对文档的菜单列表。

    Hamburger + Overflow

    最早出现在 Android 系统上的「纵向三点」 (Action) Overflow ,也被昵称为 Dango,其实就是原始 Hamburger Menu 的简化形式。也许是为了避免语义上的冲突,Material 在定义规范中把普遍理解的 Hamburger Menu 改作了定义更为清晰直观的 Navigation Drawer。

    References:

    1. Menus. (n.d.). Retrieved Feb 6, 2017, from https://developer.apple.com/library/prerelease/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/MenuAppearanceBehavior.html
    2. Menus. (n.d.). Retrieved Feb 6, 2017, from https://material.io/guidelines/components/menus.html
    3. Menus and context menus. (n.d.). Retrieved Feb 6, 2017, from https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/menus
    4. ContextualMenu. (n.d.). Retrieved Feb 6, 2017, from https://dev.office.com/fabric#/components/contextualmenu
    5. Who Designed the Hamburger Icon? Retrieved Feb 6, 2017, from http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787

    相关文章

      网友评论

        本文标题:GUI 常用元素中英对照表 / 4. Menu 附彩蛋

        本文链接:https://www.haomeiwen.com/subject/fhfuittx.html