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