loading请求处理中...
手机版 新型创意托付式服务平台 全国站
一品知识产权专利活动×
当前位置: 首页 > 威客攻略 > 软件架构

免费发布需求,获取报价与方案

  • 平面设计
  • UI设计
  • 工业设计
  • 软件开发
  • APP开发
  • 微信开发
  • 网站开发
  • 影视制作

导航类设计组件——软件架构

2018-11-08 22:35:53 阅读 10011次 0 标签: 软件架构 作者: chenxi0

根据组件的用途,可以分为六大类:Feedback 反馈、form 表单、basic 基础、data 数据 、

navigation 导航、other 其他。



导航系统相当于整个网站的主架构,导航系统起着组织内容和功能的作用,让它们按照产品

的信息架构图进行连接,展现在在用户面前,导航将零散的内容和功能组织成了一个完成的

有结构的系统。



NavMenu导航菜单


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

息。


使用场景:


1.需要提供一个流量分发的入口时


2.网站各个功能聚合时


例如,拉钩网顶部导航,分为首页、公司、校园、言职。



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

有个人中心。


如果导航里面存在二级导航则可以聚合在下拉菜单里面,鼠标hover出现下拉菜单,选择下

拉菜单里面的选项,则导航栏的标题变为对应选择的导航标题。




侧边栏导航:多用于二级导航。侧边栏导航里面的功能一般会进行分组,一般默认展示出

来。为了节省内容区域空间,有的侧边栏会提供点击收起左侧栏功能。


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




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

分类。




Breadcrumb面包屑


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


使用场景:


1.当系统拥有超过两级以上的层级结构时;


2.告诉用户所处于的层级关系;


3.灵活的在各个路径层级中切换


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




基本样式:这是是常见的面包屑样式。主要使用场景是针对于路径较短。




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





Tabs标签页

定义:并列层级切换的导航组件


使用场景:


1.非主导航


2.切换页面视图


3.并列层级切换的小导航类


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




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




侧边栏样式:这种可定位页面内容,即点击图中的标签页2则页面固定到标签页2的内容,

也可以用于在不同视图的切换。



pagination分页

定义:用于列表、feed流分步加载的组件


使用场景:


1.信息量过大,加载时间过长时


2.进行快速切换其他加载部分的组件


例如百度搜索,底部就有分页组件,有了分页组件,不需要一次性把所有的信息全部加载

拉出,提升产品的性能,同时用户可以在不同部分的信息进行切换,高效快捷。




基本样式:分页组件中最简单的样式,通过点击页码、上一页和下一页完成切换。当在第

一页时,没有上一页操作。保持分页有6个跳转页,同时选中态的页保持在第2个。




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



自定义页面列表样式:可以自定义一个页面的列表可以展示多少条




steps步骤条


定义:引导用户按照流程完成任务的导航条。


使用场景:


1.复杂任务需要分拆步骤时


2.不低于两步


横向样式:适用于多个步骤的业务场景。



纵向样式:适用于较多步骤的业务场景。





dropdown 下拉菜单



定义:将功能入口聚合并隐藏,通过下拉菜单调出。


使用场景:


1.操作聚合


2.功能入口隐藏,点击或者hover出现


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



买创意 买设计 上一品威客网

公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

留言(0 展开评论

您需要注册登录才能发表言论

服务排行榜
SERVICE LIST 更多
全案VI设计 LOGO 名片 QQ...
价格面议 成交481
新萝卜-最实惠 QQ2108760...
【普通设计师】LOGO设计 2...
¥668元 /件 成交356
新萝卜-最实惠 QQ2108760...
【资深设计师】LOGO设计 2...
¥1500元 /件 成交322
新萝卜-最实惠 QQ2108760...
牛人设计总监 全网中标最...
¥3000元 /件 成交315
新萝卜-最实惠 QQ2108760...
logo设计
¥100元 /件 成交278
兰灵视觉
画册、企业手册、宣传手册...
¥200元 /页 成交266
新萝卜-最实惠 QQ2108760...
【资深设计师】包装设计 ...
¥1500元 /件 成交265
新萝卜-最实惠 QQ2108760...
【久铭乐】商标、网站、企...
¥399元 /起 成交233
久铭乐广告传媒-QQ3491095...
logo设计 于德星logo设计 ...
¥100元 /件 成交187
于德星科技
微信公众号推广微信推广微...
¥300元 /起 成交181
利宏营销策划