E5.04.2hamburger icon opacity设计研究

图标本身不表达内部内容

别名: 三道杠 · navicon · 汉堡图标无语义

概念解释

汉堡按钮上的图形是三条横线。汉堡图标不透明(hamburger icon opacity 这里的 opacity 指语义不透,不是视觉透明度)是说:这枚图标只声明「这里有一个可打开的容器」,并不预告容器里是目的地、设置、账号还是筛选。人看见它,不能根据图形推断里面有什么;要知道内容,必须打开,或事先已经学过这个产品把什么塞进去。

机制

图标能被认出,靠的是图形与所指之间的稳定映射:信封指向消息,放大镜指向搜索。三条横线来自「列表」的象形,最多映射到「有一组东西」,映射不到任何具体名词。没有名词,就无法支持「我要去收藏,所以去点那个看起来像收藏的东西」这种目标驱动的寻找。用户要么把三道杠当成惯例入口(需要先前经验),要么忽略它。惯例还在分裂:有人以为是导航,有人以为是筛选,有人以为是更多操作,同一枚图标在不同应用里指向不同容器,跨产品迁移帮不上忙。

因为图形不携带内容清单,菜单内部的信息架构再清晰,也要等打开之后才开始工作。未打开时,顶栏上那一枚图标和其他图标按钮外观相近,却不能像它们那样被「读出功能」。把三道杠换成「菜单」二字,语义会立刻变厚——不是因为容器变了,而是因为文字把「这是菜单」说出来了,尽管仍未列出内部项。

怎么研究

图标释义:单独出示三道杠(不给产品上下文),问「点下去会发生什么、里面会有什么」。自变量是有无文字标签、所在位置(左上 / 右上 / 底栏)、以及被试是否为智能手机重度用户。因变量是「导航菜单」类回答的比例、与筛选/更多/设置的混淆、以及愿意在没有任务书时主动点开的比率。

对照条件很关键:同一位置改成房屋、头像或「目录」文字,看释义是否收窄。若只有三道杠继续发散,问题就在图形本身,而不在隐藏或频率。

边界

长期使用同一产品的人会把三道杠学成该产品的目录按钮,释义问题会减弱,但不等于图标开始表达内部内容——他们记得的是位置和习惯,不是三条线画出了「收藏」。平台若在系统级把这枚图标登记为「打开导航抽屉」,辅助技术可以读出角色,视觉用户仍看不到内容预告。用动画把三道杠变成箭头或叉,只说明容器开着,仍然不说明里面有什么。当菜单里只有与当前页相关的少量操作(更像溢出菜单)时,人们有时会按「更多」来猜,猜对不是因为三道杠更表意,而是因为位置在页级动作区。

怎么落地

  • 不要指望三道杠传达内部清单。需要让人知道「这里是目录」时,在图标旁加「菜单」或当前分区名,而不是只放大线条。
  • 若内部是一组异质入口,考虑用更能指向内容的入口替代这枚通用容器图标:头像进账号、放大镜进搜索,各走各的可见按钮。
  • 打开后的第一屏要立刻给出内容结构,补偿图标没做的预告;不要再加一层空白或再一个折叠。
  • 验证:把按钮从界面里裁出来,问没见过这个产品的人里面有什么。答案发散到导航、筛选、设置、更多,就说明图形没有承担内容预告。再给加上文字标签的版本,看释义是否收束到「菜单」。

延伸

  • 同组E5.04.1 隐藏入口显著降低内部功能的使用率 · E5.04.3 高频功能不应放入其中
  • 相邻E5.03 侧边栏导航 · E1.04 图标按钮的歧义
  • 站内检索hamburger icon · navicon · semantic opacity

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E5.04.2