7寸导航是多少厘米(汽车导航7寸是多少厘米)

3.1.2 顶部导航栏

将菜单栏放置在顶部，页面布局上基本为上下结构，顶部导航早期出现于各类门户网站，比如企业官网，各种咨询类的网站经常会采取这样的导航形式。顶部导航通常在B端产品中也是十分常见的，但还是以国外产品最为集中。

3.1.3 混合导航栏

将顶部导航与侧边导航进行结合。通常将一级导航菜单放置顶部，通过一级菜单的点击后，展示侧边的二、三级菜单。在一些产品拥有复杂的逻辑关系，菜单之间关系分明的产品中，混合导航也是一个不错的选择。

3.2.1 拇指热区

移动端的交互都在手掌上完成，因此，在对移动端产品进行设计时，手势是不可忽略的一部分。

拇指热区概念来源于交互大神 Steve Hoober 的一个观察实验，他发现在手机大屏时代，大部分的用户是以下图的方式抓握手机：以拇指的底部为支点，抵在手机的右下角。

设计导航系统的时候，也会遵循拇指热区的原则，把主要功能放在绿色区域，辅助功能放在黄色或者红色区域。

3.2.2 底部导航栏

APP最常使用的导航模式，用于一级目录的导航，位于页面底部，无论用户单手还是双手操作都能轻松点击，能告诉用户当前位置及用户切换统一层级之间的不同模块。底部Tab栏具有很强的包容性，可以形成最基本的信息框架，然后用其他的导航模式来承载具体的功能和内容。展现形式有文字 + icon，也有纯icon形式，大部分是文字+icon，可能是减少用户记忆负担。

优点：可以在第一时间让用户了解使用频率最高、最重要的功能和信息，同时能够支持用户在不同模块之间的快速切换。

缺点：底部导航栏超过5个就容易引起误点操作，同时在底部会占据一定的屏幕空间。

3.2.3 底部（舵式）拓展栏

为了突出中间的功能，把Tab做的比较突出，鼓励用户更多使用该功能。常见的APP如某鱼、某乎等使用了这种导航栏，把第三个Tab标签做的更加突出，放进了一些常用的功能。

优点：可以提高导航栏趣味性，让用户贡献更多的内容。

缺点：此类导航也是一种二级导航，既然是重要功能为什么会放在二级导航呢？把重要功能放在二级界面，会增加用户的记忆负担以及操作负担。

3.2.4 顶部Tab栏

用于展示同一模块下不同类别的信息或者筛选不用模块的信息，一般二级导航且支持左右滑动。

优点：可以很好地扁平化信息层级，让用户可以迅速实现同一模块下不同类别信息之间的切换并且不会迷失方向。

缺点：位于顶部切换起来不是很方便，同时占据空间，导致屏幕可展现区域变少。

3.2.5 侧边（矩式）导航栏

通常针对产品偏沉浸式阅读的情况下使用，主导航模块切换频率低，放入其中的模块使用频率低。常与底部标签式导航组合使用，将一级页面内的信息再细分，给人以清晰的呈现方式。通过把非核心功能的低频操作都放到一个抽屉里，使得用户获得沉浸式的体验，而且能够集中用户的注意力，让用户去更好地完成核心功能，不被打扰。

优点：用户可以将注意力放在首页，减少其他类型的导航带来分散用户注意力的情况，给用户更沉浸式的操作感和阅读感，同时可以最大限度利用屏幕空间。

缺点：侧边导航属于二级导航，用户使用的频率会降低，不利于产品页面流量的最大化，越放在下面的功能点击率越低，如果产品框架比较大，有很多功能需要推广时，一般不用此类导航。

3.2.6 列表式导航栏

通常用来展示某个具体模块内容的信息进行分类，以列表的形式呈现大量的条目。多用于辅助主导航来展现信息甚至更多层次的内容，有时候需要一些提示信息。

优点：

缺点：承载的信息种类比较单一，容易引起用户的单调感，很难让用户长时间停留，如果列表中蕴含的信息量比较庞大，往往需要加入搜索功能或者索引，否则用户会遇到寻找信息的困难。

3.2.7 宫格式导航栏

一般作为信息或平台的入口，为产品或项目信息提供聚合的载体，适合承载订阅类产品或众多属性差异非常明显的分类信息，此类导航信息的呈现内容比较少，但是每个项目选取的效率比较高。

优点：

缺点：

3.2.8 卡片式导航栏

宫格式导航的一种延展形式，通过增加内容的可视化程度让每个条目呈现更多的信息。它能根据页面内容的变化及时更新图片，适合以图片为主的内容，像新闻、美食、旅行、视频图片等经常使用，常作为二级导航。

优点：对运营量的要求比较低，而且单个条目的转化率会相应的提高。

缺点：当运营量较大的时候，这种结构会降低用户寻找信息的效率。

3.2.9 轮播（平铺）式导航

适用于足够扁平化的内容和随意浏览的阅读模式，将所有信息平铺在一个页面，很容易带来高大上的视觉体验。

优点：最大程度的保证了页面的简洁性和内容的完整性，且一般都会结合滑动切换的手势，操作起来也非常方便。

缺点：用户只能切换的相邻页面，很难跳转到非相邻的页面，容易迷失位置。

制定出一个能满足层级显示和操作的交互结构出来，值得注意的是，导航选项中，并不是所有的选项都是用来跳转的，有的菜单是用来辅助区分内容和用来展开的，我们可以在菜单上标注说明。

现状：一级菜单11个，二级菜单37个，最多有三级，产品经理反馈二期会有新增功能

分析：一级菜单目前11个已经超过顶部导航的显示范围，且后续会不定数量新增，考虑到导航的扩展性及容纳性，侧边导航可能更适合产品本身

整理好上方的内容层级，到具体设计步骤里，首先要做的，就是制定出一个能满足层级显示和操作的交互结构出来。

再整理一遍，侧边栏的内容包含：

而可交互的元素，对应的交互状态就包括：

先用原型做个示意，它的状态包含了默认、选中一级、选中二级三种情况：

菜单的选中样式是指示用户当前所处位置的重要因素

设计时要注意：

前面提到，产品二期会有新功能上线，后面还会有三期、四期…需要考虑导航栏的可拓展性，功能太多该怎么调整？

思考方向：侧栏如何容纳超过一屏的菜单？如何快速找到我想要的功能？

解决方案1：单一用户或角色所需要使用的功能菜单一般只有几个，管理员可以针对角色或用户进行权限配置，特定角色展示特定菜单；

解决方案2：可以增加搜索栏，对菜单进行快速查找。