利来国际娱乐官方网站-业界公认的最权威网站,欢迎光临!

利来国际娱乐官方网站_利来国际娱乐网站_利来国际网上娱乐

Web端设计组件篇:导航类

时间:2019-07-20 16:13来源:未知 作者:admin 点击:
导航系统相当于整个网站的主架构,导航系统起着组织内容和功能的作用,让它们按照产品的信息架构图进行连接,展现在在用户面前,导航将零散的内容和功能组织成了一个完成的有

  导航系统相当于整个网站的主架构,导航系统起着组织内容和功能的作用,让它们按照产品的信息架构图进行连接,展现在在用户面前,导航将零散的内容和功能组织成了一个完成的有结构的系统。

  导航系统相当于整个网站的主架构,导航系统起着组织内容和功能的作用,让它们按照产品的信息架构图进行连接,展现在在用户面前,导航将零散的内容和功能组织成了一个完成的有结构的系统。

  定义:将网站的信息架构分组归类并以导航的形式展示给用户,方便用户查找所要获取的信息。

  顶部导航:顾名思义导航在顶部,这也是目前网站最常见的主导航模式,顶部导航一般会含有个人中心。

  如果导航里面存在二级导航则可以聚合在下拉菜单里面,鼠标hover出现下拉菜单,选择下拉菜单里面的选项,则导航栏的标题变为对应选择的导航标题。

  

  侧边栏导航:多用于二级导航。侧边栏导航里面的功能一般会进行分组,一般默认展示出来。为了节省内容区域空间,有的侧边栏会提供点击收起左侧栏功能。

  侧边栏的一级标题根据是否有承载的页面,如果没有的话,通常置灰,点击无交互事件。

  混合式导航:一般用于复杂的多类目的网站结构。鼠标hover一级分类,出现对应的下一级分类。

  定义:显示当前页面在系统层级导航中的结构和层级,并能进入各个路径结构的导航。

  例如美团web,通过北京美食进入某一个产品的详情页,就出现如下图的面包屑导航。

  超长路径情况:全路径很长,需要收起,用三个点表示,点击三个点可展开全部。

  例如美团网站后台的我的订单,tabs标签页,用户可以快速的进行切换不同导航下的视图。

  基本样式:有含icon和不含icon两类。含有icon则导航的视觉感知更明显。

  侧边栏样式:这种可定位页面内容,即点击图中的标签页2则页面固定到标签页2的内容, 也可以用于在不同视图的切换。

  例如:百度搜索,底部就有分页组件,有了分页组件,不需要一次性把所有的信息全部加载拉出,提升产品的性能,同时用户可以在不同部分的信息进行切换,高效快捷。

  基本样式:分页组件中最简单的样式,通过点击页码、上一页和下一页完成切换。当在第一页时,没有上一页操作。保持分页有6个跳转页,同时选中态的页保持在第2个。

  跳转样式:和基础样式唯一的不同是增加了输入页数跳转,同时处于第1页时上一页置灰。

  鼠标hover出现下拉菜单样式,点击下拉菜单里面的选项,进入对应选项的界面。

  UX,微信公众号:吴轶,人人都是产品经理专栏作家。前华为ITUX交互组组长,现美团点评高级交互设计师。

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
最新评论 进入详细评论页>>
推荐内容