020-29815005
预约专线时间:09:00-23:59

决定导航菜单的深度和宽度。

新闻来源:本站 日期:2021-06-26
设计B端导航时,面对复杂多样的任务,当遇到导航范围过大(平级功能太多)或层次太深时怎么办?
    导航表菜单宽度:每一级别导航菜单包含的菜单数量是很广的,数量越多,宽度越大;

    浏览菜单深度:导航菜单的层次都是深度,层次越多,深度越大。

    一、广度。

    在此,我们将运用“交互设计四策略”中的四种方法:合理删除,分层组织,适时隐藏,巧妙转移。

    1."删除"

    删去特性:平庸的产品设计往往堆砌更多的特性而忽略用户的主要目的。在功能与用户目标背道而驰时,可主动与产品沟通,消除冗余功能,寻求符合用户目标的精简方案。

    简单化的风格:删除多余的文字,精简按钮风格,去除分散用户注意力的元素,减轻用户的认知负担。

    2.分组方式

    信息层次化经常被用来保证图像的清晰度。下图为阿里云产品导航设计中,阿里云产品导航设计时,根据服务内容对不同产品进行分组,便于查询和检索。

    3.“隐藏”

    阿里云和腾讯云有很多服务,涉及数百种产品。这个时候隐藏是一种很好的方法,当用户鼠标悬停时,会扩展临时模式选项区,可以充分利用屏幕空间。

    下面是:

    4."转让"

    如果功能既不能删除、分组,也不能隐藏,则可以使用转移方法。包含:设备转让,软件转让,向用户转让。

    移动设备:由于屏幕大小影响某些产品的高级特性在手机端常常被简化隐藏,高级功能只在电脑上呈现;

    相互转换:tableau数据分析软件简化了数据准备阶段的功能,并抽离了生成数据清理的软件—TableauPrep,既满足了用户数据准备阶段的需求,又可以单独购买产品的服务,提高公司的收益;

    转到用户:这里的向用户传递可以理解为“用户自定义”,产品提供了很多功能,但常用的功能往往都是几个,如下图,腾讯云产品列表提供了自定义常用软件快捷功能,体验更佳。


UI设计


    二、深度。

    1.根据用户角色需求和使用场景对产品架构进行梳理。

    如果功能的层次太深,可以根据用户角色和使用场景对功能进行分组,例如:哪些功能需求是相互关联的,(创建会议邀请时,需要查看与会者的日程是否安排好)这里需要考虑将所有功能集成到同一个页面视图中。

    2.是利用面包屑导航。

    多层次导航使用“面包屑”:一般页面层数大于2层的页面,可以尝试使用面包屑导航,其优点是可以查看当前页面的位置轨迹,并且可以返回任意想要返回的位置。

    用背景颜色和文字粗细等视觉表现手法突出当前页面。

    3.减少页面跳跃。

    在页函数有关联的情况下,可以使用覆盖层弹窗来减少跳跃。下面的图表显示了用户查看模型训练任务列表的细节,显示了采用覆层弹窗,减少了页面层次的跳跃。