广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

B端界面设计---导航
发布日期:2025-04-19 14:25:39 浏览次数: 839 来源:构建产品思维
         用户可以通过导航来对系统的功能进行组合和拆分,同时通过导航能快速了解B端系统的整体功能,用户也可以通过导航快速找到目标功能。所以导航在系统中是很重要。下面介绍导航的构成基本要素和基本形式,以及如何选择导航进行分析。
1. 导航构成元素
        导航一般是由:菜单文本,辅助图表,交互图标和操作按钮四个部分组成,如下图所示。
                导航元素构成
菜单文本:用来说明此菜单链接的目标功能。用户通过此菜单来了解系统的功能
交互图标: 一般是一个小箭头的形式,响应用户的点击操作,当菜单层级超过2级及以上时使用
辅助图标:用来辅助说明菜单文本,使用图形化的方式来描述菜单信息,一定程度上可以提升用户体验和信息获取效率。
操作按钮:对导航进行一些操作:比如:展开,关闭,折叠等。
2. 导航的样式
        用户在日常使用B端产品时,大家用过各种各样的导航,它们大概可以分为三种类型:顶部导航,侧边栏导航和浮标导航
2.1 顶部导航
         固定在各种页面的顶部,作为系统的一级菜单,一些信息展示类网站大部分都采用这种方式。例如常见的公司官网,下面是上市公司拓尔思的导航页面。
2.2 侧边栏导航
       侧边栏导航可以和顶部导航搭配使用,作为顶部导航的二级菜单。当然也可以单独使用,在B端系统中,单独使用侧边栏导航一般作为PC端web页面产品。
2.3 浮标导航
       一般浮标导航都位于页面的右下角,作为一些辅助功能的展示。阿里云帮助中心页面的【在线咨询】和【AI助理】。
3.如何选择导航
        上面的三种导航方式,在设计系统的时候,该如何为自己的产品选择导航呢?一般是通过下面的7条准则来进行选择:
a. 系统层级简单,如果功能模块较少时,使用顶部菜单。
b. 当系统层级比较复杂时,且功能模块比较多时,使用侧边栏菜单,竖向排列的结构可以收纳更多的功能。
c. 使用侧边栏时,如果二级菜单内容比较多,为了更好的用户体验,可以采用侧边栏左右结构的导航。
d.使用侧边栏时,为了让页面更加简洁,可以采用侧边栏选项结构或是导航收缩功能。
e. 如果系统层架非常复杂,包含功能非常多,可以使用顶级菜单,侧边栏的混合使用方式,可以收纳更多的功能。
f. 当需要涉及一些全局辅助功能时,可以使用浮标导航的方式。
g. 如果是新系统上线,请遵循以上6条原则,如果是老系统的新功能上线,还需要考虑到已有用户的使用习惯。尽量延续老系统的导航结构。
     由于篇幅有限,上述简单介绍了B端产品界面设计中的导航组件的设计。

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!