关于PC端网页菜单UI界面的设计技巧

设计营销   2022-02-24

随着技术发展,PC电脑逐步转向B端用户市场,比如系统界面设计、数据驾舱界面、企业信息化办公等领域,菜单对于PC界面来说非常重要,那么今天来介绍一下关于PC端网页菜单UI界面的设计技巧。

1、扩大悬停热区:
悬停热区是鼠标在保持菜单打开的同时必须进行导航的路径。如果它太窄,菜单可能会在用户到达他们想要的链接之前消失。

2、避免意外误打开其他内容:
如果用户在前往页面上另一个位置的途中尝试浏览悬停菜单,则很容易无意中打开悬停菜单。设置一个短暂的延迟可以解决这个问题,但是当用户确实想要打开菜单时可能会导致挫败感。

3、和触摸屏设备用户体验保持一致:
悬停菜单在触摸屏上不起作用。他们需要代码修复来检测触摸屏并切换到点击打开;随着笔记本电脑和平板电脑之间的界限越来越模糊,这些变通办法可能会过时。

4、关于什么是可点击的问题:
使用悬停菜单,用户在尝试点击之前并不总是知道父链接是否可点击,这与直觉相反。

5、选择合理的下拉菜单方式及布局:
下拉菜单与超级菜单,如果桌面站点使用传统的菜单布局(位于页面顶部的水平菜单栏),您可以考虑两种类型的子菜单:标准的单列下拉菜单或多列巨型菜单。如果父类别包含的链接少于八个,请考虑使用下拉菜单。如果下拉菜单足够长以至于需要垂直滚动,您应该考虑以不同的方式组织信息——可能是作为一个大型菜单或通过细化父类别。超级菜单是一种嵌套菜单,通常使用可以扩展浏览器宽度的宽布局。如果子菜单包含许多可以按列分组的不同链接,您应该使用这种类型的菜单。通常,您会在大型电子商务网站上看到这样的菜单。

设计大型菜单时,请考虑以下几点:
添加图像或图标以使信息更易于扫描。 将标题添加到分组相关页面。 如果类别名称不言自明,请添加说明。 大型菜单在移动设备上可能难以阅读和导航,但有时在更大屏幕上的 UX 改进使得为移动设备重新配置信息做额外的工作是值得的。

6、添加清晰的悬停状态
即使使用点击打开菜单,包括所有可点击元素的清晰悬停状态,也可以使交互令人满意,并使用户确信链接处于活动状态。您可以使可点击区域的背景稍微变暗以指示悬停状态。只要确保悬停区域与可点击区域匹配。如果测试表明用户需要更多指导或上下文,请考虑添加更多描述性标签名称或工具提示,前提是不阻止任何重要内容。


7、在桌面上启用键盘导航
不是每个人都使用鼠标导航,因此菜单应允许用户仅使用键盘进行导航,这意味着所有链接都应具有不同的焦点状态,以便用户一眼就能看到其所在的位置。通常深色的风格可以很好地指示聚焦状态。



维好维可-用户体验体验创新设计

联系我们:

关注我们微信

关注我们,持续输出与分享

+86-21-51115850
©2010-2022 维好维可 | 用户体验创新设计咨询公司-版权所有
沪ICP备19006116号-1

请留下您的联络方式
我们将在两个工作日内安排专人与您联系

合作咨询
+86-21-51115850
© 2010-2022  维好维可 | 用户体验创新设计咨询公司
沪ICP备19006116号-1
维好维可-微信二维码