admin 管理员组文章数量: 1087649
2024年3月14日发(作者：location的属性)
电商app侧边分类导航栏布局结构
整个导航栏通常分为左、中、右三部分，左侧和右侧主要用来放置功能控件，中间部
分主要用来放置文字标题，接下里展开分析左中右三部分的构成。
1. 左侧导航
放置在APP顶部导航栏左侧的控件很多都跟动作相关，例如执行返回动作、关闭动作
或者点击汉堡菜单进行展开动作等。
除了在左侧放置表示动作的控件，还可以在放置头像框、消息提示等优先级较高的内
容，用来引起用户的注意。
在网页端的顶部导航栏中，左侧都会放置品牌logo，因为网页端顶部的空间更大，所
以还可以在LOGO周围结合徽标、搜索框、下拉菜单等空间。
2. 中间部分
APP顶部导航栏的中间部分主要用于放置标题，当然根据使用场景的不同，还可以放
置头像、搜索框、下拉框、导航等控件。
（1) 标题
最常见的是在中间使用加粗的文字作为标题，也可以使用主标题+副标题的形式来展
示更多的信息。
还可以把标题区域做成支持下拉的样式，扩展更多的功能全。
（2) 用户头像
在社交类产品或对话框中，会在中间部分放置用户的头像和信息，用来展示用户的详
细信息。
（3) 产品Logo
有些产品还会将Logo放在导航栏的中心位置用来展示品牌形象，在APP的首页可以
考虑这样设计，起到强调作用。
（4) 分段控件
在移动端产品中，还可以在中间部分放置分段控件，通常2-3个标签，在早期的网易
云音乐APP中就用到了这样的设计，通过点击标签或者左右滑动页面完成内容切换。
（5) 搜索框
导航栏中间经常能看到搜索框，然后搜索框左右两边放置其他的控件。当导航栏的内
容太多，比如有文字标题、头像、按钮等控件，搜索栏和这些控件可能无法并排放置时，
可以将搜索栏横向拉长，放在下一行单独展示。
现在淘宝APP首页的导航栏就做成了两行，上一行用来放置文字标题和功能图标，搜
素栏集合扫码、拍照等功能单独作为一行。
（6) 导航选项
在网页中，标签、按钮、面包屑导航等常见的导航组件，通常会固定在网页导航的中
心位置。当页面缩小到移动端时，考虑到移动端尺寸较小，如果顶部导航内容太多，可以
尝试把功能组件放到第二层级。
3. 右侧导航
相对于左侧和中间，APP导航栏的右侧部分更加灵活，没有固定的要求说必须放哪些
内容，根据需求放置各种类型的功能控件。
（1) 头像
如果想调用与用户属性相关的功能，就可以将头像放在导航栏的右侧区域，点击弹出
相关的选项。
版权声明：本文标题：电商app侧边分类导航栏布局结构 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1710345611a568782.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论