UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

第一节:底部标签栏

 

位于页面底部,用于一级目录的导航,提示用户当前位置及用户切换统一层级之间的不同模块,一般最多不超过五个标签。

它可以承载重要性和频率处于同一级别的功能模块、信息或任务

它能第一时间支持使用者获取重要性较高、频率较大的信息或任务

它能支持用户在不同模块、信息和任务之间快速切换。

按类型分

1.图标+文字式

图标+文字更能突出底部标签栏,95%的App都采用这种方式

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

2.纯图标式

图标含义清晰明确,适 合小众有气质的产品

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

3.文字+短线式

更直观的让用户进行操作;但样式单一、标签栏感知度不足

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

交互说明:

用户点击标签tab,跳转到新界面,标签文字从未选中状态变成选中状态,并有一条短线作指示。

4.图标+文字+驼式

特殊底部标签栏,常见的为一个加号或者相机形状的驼峰导航

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

 

交互说明:

1.用户点击标签tab,跳转到新界面,标签图标和文字从未选中状态变成选中状态。

2.用户点击驼式标签,跳转到新界面,驼式标签没有未选展示状态。

标签布局说明

1.屏幕等分

最常见,计算方法:列宽=屏宽/标签个数

2.图标左右间距相等

多数用在3栏情况下,布局更集中

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

3.减去左右间距等分

较少使用,布局前先预留左右两侧间距,布局更紧凑

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

第二节:分段式导航

 

位于页面顶部,一般作为二级导航,点击切换到对应的页面视图。

将页面内容按照不同视图进行分类,用户点击可切换到不同视图。

按类型分

1.胶囊式

分段导航的名称长度尽量保持一致,为使选项更易点击,分段个数一般控制在在2-3个

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

2.文字+短线式

最常见的分段导航,短线可根据产品特性调整成圆点式、细线式、粗线式、长条式

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

3.纯文字式

iOS11下流行的产物,其特点是大标题导航,文字居左排列

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

4.标签式

通过按钮,增加分段导航的感知度,让用户更直观的操作

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

其他样式说明

1.结合筛选分类

适合该导航下有很多子分类的情况使用

2.结合汉堡导航

适合导航类别众多的情况使用

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

3.结合提示信息

适合有消息提示、信息更新的情况使用

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

第三节:宫格式导航

 

以宫格的形式提供功能的入口和内容的展示,宫格内容包含图片+文字信息,为其他独立业务提供入口。

按类型分

2列宫格

宫格列数为2列,宫格内包含图片、文字

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

3列宫格

宫格列数为3列,宫格内包含图片、文字

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

4列宫格

宫格列数为4列,宫格内包含图片、文字

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

 

5列宫格

宫格列数为5列,宫格内包含图片、文字

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

宫格扩展

对宫格状态的展示、说明

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

第四节:侧边式导航

 

用于提供快速到达其他功能入口的导航,默认收起,点击出现。

快速导流到其他重要的功能上,为了能让更多用户在有限的屏幕空间上做更多的动作,减少用户查看信息的干扰。

按类型分

1.卡片式

卡片式更适合功能模块固定的情况

2.列表式

列表式能够用户自定义排序

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

交互说明:

1.点击对应的导航,定位到对应的导航内容上

第五节:下拉菜单

 

用于提供快速到达其他功能入口的导航,默认收起,点击出现。

快速导流到其他重要的功能上,为了能让更多用户在有限的屏幕空间上做更多的动作,减少用户查看信息的干扰。

按类型分

1.图标+文字

大多数App都采用这种方式,图标辅助文字理解功能含义

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

交互说明:

1.用户点击顶部导航栏上的“+”,出现下拉菜单。

2.纯文字

一般在产品功能相近或图标无法清晰表达产品功能的场景下使用

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

交互说明:

1.用户点击顶部导航栏上的“+”,出现下拉菜单。

第六节:列表式导航

 

通常针对具体某个模块内容的信息进行分类,以列表的形式去呈现。

列表式结构具有很强的延展性,可以不断地增强信息。而且一般来讲,它的信息格式都比较一致;

它的导航效率高,可以引入字母索引;

它可以很方便地进行分组分类。

按类型分

1.有箭头

iOS一般带有右箭头,代表可进入下一页

2.无箭头

Android一般不带有右箭头

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

第七节:抽屉式导航

 

通常针对产品偏沉浸式阅读的情况下,其他模块切换频率低,可采用此导航形式。

常与底部标签式导航组合使用,将一级页面内的信息再细分,给人以清晰的呈现方式。

若该产品追求核心内容的突出。可弱化其他信息的展示时,即可采用此导航形式。

按类型分

1.半遮罩

导航占据界面大半部分,点击遮罩处,导航消失

2.全遮罩

导航占据整个界面,点击叉号,导航消失

UI设计规范导航栏篇,底部标签栏/分段式导航设计规范

UI设计规范导航栏篇到这里就讲完了,后期我们会更新按钮类、操作反馈类、表单类、提示类、列表类、加载类、缺省页等相关设计规范,敬请期待吧~

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
快速搜索
在线客服
关注我们
  • 扫码打开当前页

  • 小程序

  • 关注关注号

返回顶部