折叠菜单看起来只是标题旁的一枚小图标,却同时承担了告知状态、提示动作和组织内容的任务。Vitaly Friedman 的新文章讨论了不同图标与分离点击行为带来的理解差异。兰亭妙微借这一问题,整理一套面向企业官网和业务后台的评审方法;下面的场景为应用建议,并非原作者对这些产品的测试结论。
先把菜单项分成两类:进入页面,或展开内容。应用建议是让同一行的文字与图标表达同一个动作。如果“产品服务”文字进入介绍页,而右侧小箭头展开下级列表,用户就必须在很近的两个目标之间做判断。评审时应把两种点击分别写进交互说明,而不是只画一个静态展开态。
图1 原文引用的 DHL 移动导航示例。图片来源:Smashing Magazine;界面版权归相关权利人。
例如企业官网需要保留栏目总览时,可以在展开后的列表里设置明确的“查看全部服务”链接。这样既能继续浏览子项,也能知道如何到达汇总页。是否采用这一结构,仍应结合具体导航层级和用户任务验证。
图标之外,还要检查内容出现的位置、标题样式与展开状态是否同步。应用建议:点开费用说明后,正文紧接标题出现,图标和辅助技术状态一起变化;收起时返回可预期的位置。若用户需要滚动查找刚出现的内容,即使图标正确,反馈也可能不足。
对多级菜单,应明确哪些层级可以同时打开。不要在用户进入第三层时悄悄收起仍需要参考的上层信息。复杂后台中的分组筛选,还要检查关闭面板后是否保留已选条件。
应用建议:在触摸设备上,以整行作为清晰的操作目标,并预留稳定的间距;在桌面上,检查键盘是否能进入、展开和离开该区域。图标只是提示,真正的操作控件仍需要可理解的名称、焦点样式和状态描述。
图2 原文展示的 Lens.org 折叠内容示例。图片来源:Smashing Magazine。
寻找交互设计公司或进行方案验收时,可以要求现场演示“展开、选择、返回、再次展开”四个步骤。观察内容和焦点是否留在合理位置,比仅比较箭头的线条粗细更能发现问题。
菜单设计的验收,应同时覆盖动作含义、状态反馈与操作路径。把这三件事写清楚,后续的视觉设计和开发协作才有共同依据。