E5.03.3icon rail recognizability设计研究

折叠为图标后需保留可辨识性

别名: 导航轨 · collapsed sidebar · 图标侧栏

概念解释

侧边栏收成窄轨后,文字标签消失,每一项只剩一枚图标。图标轨的可辨识性(icon rail recognizability)问的是:在已经知道这些目的地存在的前提下,人能否单凭图形把它们分开,并且对上正确的地方。它不是在问「三道杠背后藏了什么」——窄轨上的图标仍是露在外面的目的地,只是少了名字。

机制

识图和读名走的是不同通道。全宽侧栏里,名称承担区分,图标只是加速。收成轨之后,名称没了,区分全部压到图形上:形状要两两可分,含义要和目的地对得上,还要扛得住选中、未读、禁用这些状态叠加。许多业务目的地没有稳定的视觉惯例——「结算」「工单」「素材库」用通用齿轮、文件夹、文档图标时,窄轨上会变成一排相近的方块。人要么悬停等工具提示,要么把轨重新展开,折叠省下的宽度立刻被来回操作吃掉。

可辨识性还依赖学习。常用三项可以靠位置记住,但位置在个性化、权限和实验分组下会变,位置记忆并不稳。新用户、偶尔使用的入口、以及看起来像的相邻项,都会把错误点到邻项上。图标加小圆点徽标可以提示「有事」,但不能补上「这是哪一项」。

怎么研究

盲命名:把窄轨截图打乱顺序(或挡住工具提示),让熟手和新手分别说出每一项是什么。自变量是有无文字、图标是否成套、项数。因变量是正确率、相邻项混淆率、以及展开侧栏的次数。

比再认更狠的是指向任务:口述一个目的地,让人在窄轨上点。熟手若仍去展开,说明图形通道没有接上,折叠只对设计师成立。

边界

目的地是跨应用稳定惯例(首页房子、消息气泡、设置齿轮)时,窄轨可以工作。内部业务对象、名称会变的工作区、以及用户自定义的列表,几乎都会在折叠后失辨。数量很少(三到四项)且位置固定时,位置可以补图形的不足。屏幕阅读器不读图形,必须另有名称;可辨识性是视觉折叠的问题,不能靠无障碍名称来宣称「折叠成功」。悬停出全称只对指针设备成立,触摸窄轨没有等价物。

怎么落地

  • 折叠前做一次无文字辨认:去掉标签,只留图标,让未参与绘制的人配对目的地。配对失败的项在窄轨上必须保留文字,或根本不要折叠。
  • 优先折叠那些有稳定惯例的项;业务对象、同形图标的一组,保持全宽或用短文案而不是硬改成图形。
  • 窄轨要提供不靠悬停的全称:长按、焦点时的可见名称,或一键展开。不要把工具提示当成触摸设备上的标签替代。
  • 验证:熟练用户完成「去某项」时,若超过一次去展开侧栏才找得到,该项的折叠就失败了。记录相邻项误点,误点集中在同一对图标上就重画这一对,而不是加更小的字。

延伸

  • 同组E5.03.1 侧边栏适合层级多、条目多的结构 · E5.03.2 常驻侧边栏挤占内容宽度
  • 相邻E5.04 汉堡菜单 · E1.04 图标按钮的歧义
  • 站内检索icon rail · collapsed sidebar · icon recognizability

同组卡片

快捷操作

分享

分享当前页面

ios_share

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