网页首页目录导航设计 第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端产品设计全能班即将十一放假结束就开课了,有提升需要的同学记得联系我~