帮你全方位掌握导航栏设计知识点.docxVIP

帮你全方位掌握导航栏设计知识点 APP的顶部导航栏（以下简称〃导航栏〃）对我们来说再熟悉不过了， 它是UI设计中必不可少的组成局部，几乎每一个页面都会使用到。虽 然看起来很简单，感觉不需要花费多少精力，但设计一个与产品需求、 用户目标匹配度较高的导航栏并非那么容易，这里面有很多需要注意的 设计细节。 导航栏集合了用户常用或必用一些功能，复用率极高，当用户在进行部 分路径操作时，导航栏就像黑暗中的一盏〃明灯〃，指引着用户进入下 一步或回到上一步操作，所以做好用户体验是非常重要的。 我们每天都在跟导航栏打交道，如果仔细观察就会发现，不同应用的顶 部导航栏都或多或少的存在一些差异，为了让大家对导航栏有一个更清 晰、全面的认识，本文将对导航栏的设计风格、组成结构、样式、交互 等多方面做出总结，希望能帮到大家，一起来看看吧。 一、导航栏基本介绍1.导航栏在哪里？ 在UI设计组件中，如标签栏、菜单栏、Tab栏、应用栏、标题栏、导 航栏……等诸多类型和叫法中，有很多新人设计师难以区分这些重复叫 法以及对应的所在区域。 当全面屏设备逐渐普及后，屏幕的高度得到了进一步扩展，导航栏的可 发挥空间必然增加，大标题风格开始兴起，随后也被引入了设计平台规 范。大标题导航栏主要取决于产品定位与功能影响，并不单单是设计风 格的问题，毫无疑问，大标题能让页面头部有更多的留白空间，呼吸感 更强，非常适合产品结构不深、功能单一且体量级别较轻的应用，也就 是我们常说的「小而美」，人人都是产品经理平台在这方面做的相当出 色。 大标题导航栏的容器高度为192px ,字号通常设定在56Px?68Px （栅 格所需、笔者常用64px ）的范围，页面上滑后，会恢复到88px的常 规高度，标题字号也随之减小。 早报07月26日 早报 07月26日 文章 活动订阅Q 【起点课堂早报】B站哗哩哗哩A|好看视频PC 好看视频PC站浏览体验 百度MEUX 好看视频PC站浏览体验百度MEUX全面上线”展示账号IP属地”功能3. 好看视频PC站浏览体验 百度MEUX 主页面导航栏中的图标比拟多元化，例如左侧常见的定位、品牌log。、 抽屉菜单入口等，右侧例如搜索、消息、扫一扫、更多……二级及以后的页面导航图标相对固定，左侧必定有一个返回到上级页面 的〃回退〃图标，可以是向左剪头、向下剪头、关闭按钮等。需要注意 的是，不管设计什么样式，都需要符合〃回退〃样式预期，确保用户不 会产生疑惑。右侧一般放置功能图标，如次级功能延展、信息提交、删 除等,最多不超过两个操作入口，防止造成功能层级混乱。 11：53-7主页面 附近??01 ? ??? Q蓝牙耳机无线美妆电脑办公生鲜个护清3 ； 4.按钮导航栏的左侧已被「返回」图标占领，按钮基本只能放在右侧，且以文 字按钮样式居多，主要用于承载页面的辅助操作、功能入口。 当导航有足够的纵向空间时，也可使用如圆形、方形、圆角矩形类型的 容器按钮，需通过按钮的形状、大小、填充、描边等样式来确定在页面 中的视觉权重，灵活区分主次层级关系，好的导航按钮总能抓住用户的 注意力。 矩形按钮??it? ??? ??it ? ??? ??it? ???12：00 3推荐 ??it ? ??? 5.搜索框当搜索功能权重较高，用图标、按钮作为入口已不能满足用户频繁的搜 索需求时，就会以输入框的方式占据导航栏大局部区域，不仅能突出搜 索功能、向用户推荐搜索内容标签，还能提升产品的可操作性，随着搜 索框区域的扩大，用户无需精准点击，触手可及。 对于内容较多的首页，导航栏需要承载如标题、分类、头像、按钮等诸 多信息，这是可适时增加导航栏的高度，搜索框放在第二行展示，可避 免过度弱化搜索框给用户带来操作上的影响，例如京东、淘宝等电商类 型的应用。如果想节省页面整体纵向空间，假设条件允许，可在页面上滑 后缩小导航栏高度，只显示搜索框，例如美团外卖。 单行〉双行、您滥）首页附近需0Q蓝牙耳机@ H 单行〉双行 、您滥）首页附近需0 Q蓝牙耳机@ H 福奈?巍一年瓦苏武 -薮百 匡拜?说T不 京东秒杀 爆教轮?多 京东直播排行榜 Q老碗会?陕西手工面鞫舲9R9起 湘柒 潮英木桶彷何“浏阳猿英 3 B 9 ： 美食 甜点饮品 超市便利 嬴菜水果 年3浣渴跳〃低昭睇金 平酒 .用户头像很多社交类产品，会在导航栏的左、右侧放置用户的头像信息，方便随 时调用与用户相关的功能。例如点击后进入个人设置、个人信息展示、 会员中心、个人主页等。 左上角14：23 Nanci加壹438 O 通日. .标签/分类导航栏的分类菜单包括分段控件和标签导航，分段控件通常包含2 ~4 个标签，直接点击进行内容切换，不支持左右滑动；标签导航那么相对灵 活，很适合分类较多的内容，可通过左右滑动来查看所有分类，实现更 方