第一节：底部标签栏

 

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

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

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

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

按类型分

1.图标+文字式

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

2.纯图标式

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

3.文字+短线式

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

交互说明：

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

4.图标+文字+驼式

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

 

交互说明：

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

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

标签布局说明

1.屏幕等分

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

2.图标左右间距相等

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

3.减去左右间距等分

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

第二节：分段式导航

 

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

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

按类型分

1.胶囊式

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

2.文字+短线式

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

3.纯文字式

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

4.标签式

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

其他样式说明

1.结合筛选分类

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

2.结合汉堡导航

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

3.结合提示信息

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

第三节：宫格式导航

 

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

按类型分

2列宫格

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

3列宫格

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

4列宫格

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

 

5列宫格

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

宫格扩展

对宫格状态的展示、说明

第四节：侧边式导航

 

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

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

按类型分

1.卡片式

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

2.列表式

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

交互说明：

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

第五节：下拉菜单

 

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

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

按类型分

1.图标+文字

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

交互说明：

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

2.纯文字

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

交互说明：

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

第六节：列表式导航

 

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

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

它的导航效率高，可以引入字母索引；

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

按类型分

1.有箭头

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

2.无箭头

Android一般不带有右箭头

第七节：抽屉式导航

 

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

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

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

按类型分

1.半遮罩

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

2.全遮罩

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

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