网页首页目录导航设计 第1篇
navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数： 参数与路径之间使用 ? 分隔 参数键与参数值用 = 相连 不同参数用 & 分隔
调用 (Object object) 方法跳转页面时，也可以携带参数，代码示例如下：
通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到，
网页首页目录导航设计 第2篇
tabBar 页面指的是被配置为 tabBar 的页面。 在使用 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中： url 表示要跳转的页面的地址，必须以 / 开头 open-type 表示跳转的方式，必须为 switchTab
非 tabBar 页面指的是没有被配置为 tabBar 的页面。 在使用 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和 open-type 属性， url 表示要跳转的页面的地址，必须以 / 开头 open-type 表示跳转的方式，必须为 navigate 示例代码如下： 注意：为了简便，在导航到非 tabBar 页面时， open-type=“navigate” 属性可以省略。
如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中： open-type 的值必须是 navigateBack ，表示要进行后退导航 delta 的值必须是数字，表示要后退的层级 示例代码如下： 注意：为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1 。
调用 (Object object) 方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下：
调用 (Object object) 方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下：
调用 (Object object) 方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下：
网页首页目录导航设计 第3篇
如果要统一一二级菜单的选中样式，那么设计过程中，就要保证一二级菜单实际占用空间区域是一致的，间距也进行统一，才能合理添加悬浮和选中效果。
如果不统一一二级菜单悬浮和选中样式，那么高度就不需要统一，但是设计起来会更难。如果不统一交互效果，那么就尽量保证对比差异，其中一级悬浮和选中采取背景填充，另一级仅仅是文字样式变更。
把要使用哪种方案确定下来，然后再去优化细节，添加对应的图标内容和优化字体、分割线等等。
我们在上面用的案例，逻辑层级是 3 级，但是有的项目中，包含的可能有 4 级、5 级，那么必然会呈现出更复杂的交互体系。
常见的做法，就是将侧边栏做成两列，一列是顶级菜单，一列是其它次级菜单，类似有赞的这种做法。层级越多带来的挑战也就越大。
导航的设计，对细节调节并不仅仅是为了好看，而是提供更直观的交互和一致性。仅仅完成样式依旧是不够的，具体使用上还可能会碰到什么问题我们要尽可能多进行思考。
比如：
原设计中展开 1 级分类只能展开一个，开启第二个就会关闭第一个，如果我们改成展开不关闭会有什么区别呢？
高度超出一屏高以后怎么显示，如果滚动的话跳转后显示在哪里？
这样的问题，就留给大家自己思考了。
导航栏的设计细节是很次要的因素（虽然对整体样式很重要），重点是给出合理的信息展示和交互方法。
如果导航不能帮助用户快速、简洁的进行页面的选择和跳转，即使做的再好看也是一个失败的导航。
本次分享到这里结束，我们下篇再贱～
新一期B端产品设计全能班即将十一放假结束就开课了，有提升需要的同学记得联系我～