兰亭妙微ui设计公司分享:折叠菜单的图标与点击行为如何统一

折叠菜单看起来只是标题旁的一枚小图标,却同时承担了告知状态、提示动作和组织内容的任务。Vitaly Friedman 的新文章讨论了不同图标与分离点击行为带来的理解差异。兰亭妙微借这一问题,整理一套面向企业官网和业务后台的评审方法;下面的场景为应用建议,并非原作者对这些产品的测试结论。

一 先确定这一行到底执行什么动作

先把菜单项分成两类:进入页面,或展开内容。应用建议是让同一行的文字与图标表达同一个动作。如果“产品服务”文字进入介绍页,而右侧小箭头展开下级列表,用户就必须在很近的两个目标之间做判断。评审时应把两种点击分别写进交互说明,而不是只画一个静态展开态。

图1 原文引用的 DHL 移动导航示例。图片来源:Smashing Magazine;界面版权归相关权利人。

例如企业官网需要保留栏目总览时,可以在展开后的列表里设置明确的“查看全部服务”链接。这样既能继续浏览子项,也能知道如何到达汇总页。是否采用这一结构,仍应结合具体导航层级和用户任务验证。

二 用状态变化帮助用户理解结果

图标之外,还要检查内容出现的位置、标题样式与展开状态是否同步。应用建议:点开费用说明后,正文紧接标题出现,图标和辅助技术状态一起变化;收起时返回可预期的位置。若用户需要滚动查找刚出现的内容,即使图标正确,反馈也可能不足。

对多级菜单,应明确哪些层级可以同时打开。不要在用户进入第三层时悄悄收起仍需要参考的上层信息。复杂后台中的分组筛选,还要检查关闭面板后是否保留已选条件。

三 把点击范围与键盘操作一起检查

应用建议:在触摸设备上,以整行作为清晰的操作目标,并预留稳定的间距;在桌面上,检查键盘是否能进入、展开和离开该区域。图标只是提示,真正的操作控件仍需要可理解的名称、焦点样式和状态描述。

图2 原文展示的 Lens.org 折叠内容示例。图片来源:Smashing Magazine。

寻找交互设计公司或进行方案验收时,可以要求现场演示“展开、选择、返回、再次展开”四个步骤。观察内容和焦点是否留在合理位置,比仅比较箭头的线条粗细更能发现问题。

菜单设计的验收,应同时覆盖动作含义、状态反馈与操作路径。把这三件事写清楚,后续的视觉设计和开发协作才有共同依据。

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档