制作网页导航栏的步骤,导航栏的设计要点有哪些

导航栏设计操作怎么做（超实用!网页顶部导航栏设计方法总结）

本文将《材料设计标准》中底部导航栏的标准摘要翻译成中文，希望能给你带来不少帮助。备注:以下几点在翻译过程中根据阅读习惯相对调整。如有不规范之处，热烈欢迎大家根据官网查看。

本文将《材料设计标准》中底部导航栏的标准摘要翻译成中文，希望能给你带来不少帮助。

本文将《材料设计标准》中底部导航栏的标准摘要翻译成中文，希望能给你带来不少帮助。

备注:以下几点在翻译过程中根据阅读习惯相对调整。如有不规范之处，热烈欢迎大家根据官网查看。

在手机程序运行中，底部的导航栏可以在整体目标选项之间自由切换。

使用方法

在显示屏的底部，底部导航栏显示3至5个总体目标选项，每个选项由一个徽标和一个文本徽标显示。当您单击底部的导航图标时，您会将客户带到与其有关系的主视图。

标准

人体工程学:底部导航栏在手持移动终端上非常容易触摸。

一致性:当应用时，底部导航栏在每个显示的底部显示信息。

相关:底部导航栏上的选项必须同样重要。

什么时候应用

底部导航栏应用于:

在移动程序需要运行的任何地方浏览顶部总体目标。

3到5个总体目标选项

只在手机或者平板上。

底部导航栏不适用于:

单独的日常任务，如查询单独的电子邮件地址。

客户偏好或设置。

底部导航栏(而不是徽标菜单栏)不需要应用于三个总体目标下的选项。

防止应用五个总体目标之外的选项(在这种情况下，试试菜单栏或抽屉柜的导航栏)。

底部导航栏和菜单栏的应用会造成混乱。因为它们与内容没有明确的关联，所以菜单栏的主题风格是一样的，而底部的导航条起着顶部的作用，彼此没有关系。

分析

导航栏

固定标志

固定文本

主题标记

主题文本

总体目标展现

在底部导航栏中显示总体目标选项的方法在于总体目标选项的应用总数:

三个通用目标:所有通用目标选项均以符号和字符显示；

四个通用目标:活动目标显示标牌和文字标牌，固定通用目标显示标牌，建议应用文字标牌；

五个通用目标:活动目标显示牌和文字牌，固定通用目标显示牌，文字牌可以在室内空房间显示。

这个底部导航条有三个总体目标，每一个目标都有标记，并标有文字。

标志

底部导航栏的总体目标是从头到尾包含一个徽标。最好的方法是将徽标与文本徽标一起显示，尤其是在徽标没有既定含义的情况下。

与标志字符和标志融合显示

文字标识

为底部导航功能标记简洁且更有意义的文本。

短文本的应用

防止文本提取，这会模糊关键的整体目标信息内容。

防止小单行文本

防止文本断开并显示信息。

标志和文字标识色调

主题、非主题活动标志和它们的文本标志应该与导航栏的底部块进行显著对比。主题活动标志要用应用运行的主题色或者选择韧性高的色调来展示，其实在于组件的配色。非主题活动标志和文字标志可以以中等抗压强度的选定色调显示。

底部导航栏主题活动标识应用程序主题颜色或高韧性选定色调显示信息。

防止使用不同的色调或抗压强度低的选定色调来显示信息标志和文本标志，因为这将使客户无法区分主题活动标志并导航到总体目标的其他主视图。

个人行为

与安卓系统软件底部导航栏显示的信息不同，如果选择底部导航栏选项(今天没有选择)，每个系统软件会有不同的信息显示结果:

安卓:

使用导航栏进入总体目标的顶部主视图页面；重置所有以前的客户交互和临时显示，如翻转零件、菜单栏选择和内嵌搜索。

iOS:

到达站反映了客户之前的交互。如果客户之前浏览过这部分程序，他会返回到上次查询的最后一个主视图(如果是，保存他之前的情况)；否则，程序将导航到顶部主视图。

必要时可以覆盖默认服务平台的导航栏，以改善客户体验。比如必须在各个部分之间频繁转换的Android程序，就可以保存每个部分。或者，运行iOS程序可以让客户返回到顶部主视图(或者重置其翻转位置)，如果更适合测试用例的话。

在Android上，再次浏览某个部分将重置应用程序，并将客户返回到其顶部主视图。

在iOS上，当客户再次浏览某个页面时，会回到该页面结束的地方，比如详细信息的主视图页面。

在程序运行的结构分析中下移时(从父显示到子显示)，信息底部的导航条可以长时间显示，方便在程序运行的各个部分之间快速导航。

肩章:

底部的导航图标的右上角可以应用一个肩部标签。该标识可以包括动态信息内容，例如等待处理的一些请求。

肩章；

包含标识符的肩部标签；

具有较大标识符的肩部。

翻转:

翻转时，底部导航栏可以显示或隐藏信息。

向下翻转加载的内容时隐藏底部导航栏；

翻回到顶部时，邮件底部的导航栏会再次显示。

内聚性:

建议用淡出淡入的动画来衔接底部导航栏的整体目标。交叉健身运动(侧对侧)会代表新项目之间不会存在的平等关系，或者欺骗客户认为他们可以用手来导航每个部分中间的导航栏。

淡入动画应该应用于链接和转换主题活动和非主题活动底部导航栏的总体目标。

防止侧身运动的应用在主视图中间发生变化。保持水平健身练习之间的导航条与总体目标一致。

合理布局 1. 遮盖

底部导航栏可以暂时被提示框、底部表格、抽屉柜的导航栏、屏幕键盘或执行步骤所需的其他元素所覆盖。他们不能在所有屏幕上永久显示信息。

“收音机”显示屏的搜索功能打开屏幕键盘，并暂时覆盖底部导航栏，直到执行搜索步骤。

2. 固定不动导航条

底部导航栏的整体目标选项有固定的部分，不容易翻转或水平移动。

防止应用程序翻转底部导航栏。

3. 视觉效果提升

在移动终端(全屏)或平板电脑上，底部导航栏的总体目标可以保持垂直模式下应用的相同间隔，而不是均匀分布在底部导航栏上。

在移动终端(全屏)或平板电脑上，底部导航栏可以水平放置，而不是折叠。在这种情况下，建议的选项均匀分布在底部导航栏上。

情况

底部导航栏的总体目标可以是主题化的、非主题化的、聚焦的或选择的。

当项目被激活时，底部导航栏根据不透明度和文本显示信息以供选择。情况用于显示信息保持、焦点和未选择的情况。

非活动目标降低清晰度，而活动目标显示所有信息。

非主动目标选项；

活动选项。

如果自始至终没有显示文本标志，则只显示信息活动目标的文本。

没有文本的非活动目标选择；

带文本的活动目标选项。

实施方案 移动终端

标记为:

最小宽度

整体宽度更大

合理布局

今天的分享内容已经告一段落，很多延伸内容可以在官网查询。

全文:https://material . io/design/components/bottom-navigation . html #行为

翻译地址:https://mp.weixin.qq.com/s/Q1Pw0aw2nTCqdIhFYDY2Aw

编译器创作者:limo Limo，微信微信官方账号:线的视觉特效。

文章由@ limo Limo中文翻译发布。人人都是产品运营，未经创作者同意，严禁转让。

标题来自Unsplash，根据CC0协议。