移动端设计模式——常见的几种导航形式

Posted 2023-05-16

参考技术A 在移动端，导航是APP最重要的区别。根据不同的内容，选择不同的导航方式。没有完美的导航，只有合适的导航。根据具体的场景与需求，去选择最合适的导航形式，是设计师需要去考虑的。

那么什么是导航，导航就像书的目录一样，它会讲哪些内容，以及这些内容又是怎样排布的，导航可以让你在页面中不迷路，告诉你当前处于什么位置。

下面介绍移动端几种常见导航形式。

一.标签式导航（也叫Tab导航）

大多数app会选择标签式导航，标签式导航结构如下图所示。底部标签导航是ios页面布局中比较推崇的一种导航方式。而顶部标签式导航是安卓常用的导航模式，它可以避免导航与底部虚拟按钮之间发生冲突，引起误操作。

二.滚动式标签式导航

前面介绍标签式导航使用时，任务切换不超过5个。那么任务较多时候，这时候应该使用滚动式标签导航。使用该导航往往需要给他们提示，告诉他们页面之外还有一些标签存在。如图2.1所示，会露出界面外的一部分文案，表示界面之外还有内容。

三、分段式导航

四、 舵式导航

舵式导航可以看为底部标签式导航的一种变体。它在后者的基础上，突出强调了一个标签并且放在中间的位置，样子看起来像攒了一个舵，所以取名为舵式导航。如图3.1所示，中间的标签作为重要且操作频繁的入口，一般都用图形或者颜色凸显出来。

五、抽屉式导航

抽屉式导航的核心就是“藏”，：隐藏不重要的功能，从而让你的核心功能更加突出。菜单隐藏在当前页面后，只要单击入口就能将它拉出来，大大减少了主界面中的导航控件的数量。让你的主界面更加干净利落。常用于社交类app，例如QQ我的页面。

此外，随着大屏的普及，一是：减少页面控件，节省页面空间，变得没那么重要。二是：屏幕变大，左上角的抽屉式导航按钮反而用一只手去操作的时候很难按到，故而网易新闻客户端之前的抽屉式导航，最后变成了标签式导航。抽屉式导航常用于突出一个核心功能，其他不重要藏，例如打车app，核心功能是打车，其他功能没有那么重要就可以藏。

六、下拉式导航

七、列表导航

7.1垂直列表导航

7.2轮播列表导航

7.3宫格式导航

功能扁平化，例如桌面导航，这种展现形式让我们以一种上帝视角去看整个页面的情况。所以所有的图标都是以平铺的形式去逐一的摆布。如果说列表式导航还有等级的区分，那么宫格式导航更佳扁平。除了运用于桌面上，也常用于app中，常用于二级导航，例如支付宝和微信。在界面上平铺使用频率相近但彼此又相互独立的功能条目。

参考： 移动导航篇

关于导航框架的那些破事

网易交互微专业

《交互设计精髓》

《术与道-移动应用UI设计必修课》

谈谈移动端屏幕适配的几种方法

谈谈移动端屏幕适配的几种方法

移动端web开发相对于PC端web开发，我们可以庆幸不用兼容那么多浏览器了，但是随之而来的却是各种屏幕尺寸的适配，个人觉得，比PC端还要费精力。在使用了腾讯优测进行软件测试后，问题得到了有效解决。

响应式布局

简而言之，就是页面元素的位置随着屏幕尺寸的变化而变化，通常会用百分比来定位，而在设计上需要预留一些可被“压缩”的空间。

 

如上图，其实就相当于页面被压矮了。

Cover布局

就跟background-size的cover属性一样，保持页面的宽高比，取宽或高之中的较小者占满屏幕，超出的内容会被隐藏。此布局适用于主要内容集中在中部，边沿无重要内容的设计。

 

如上图，第一张是原设计稿，第二张把左右隐藏掉了一部分，第三张则是把上下隐藏掉了一部分。

Contain布局

同样，也跟background-size的contain属性那样，保持页面的宽高比，取宽或高之中的较大者占满屏幕，不足的部分会用背景填充。个人比较推荐用这种方式，但在设计上需要背景为单色，或者是可平铺的背景。

 

如上图，红框部分为原始宽高比，根据不同屏幕尺寸进行缩放，并加背景填充。 

好了，接下来再说说常用的实现方法吧。

样式缩放

最省事的适配方法，直接用px为单位按视觉进行开发，然后通过计算屏幕与网页的宽高比，用transform:scale来对网页进行全局缩放。

不过此方法会有一个小问题，就是如果网页内有动画的话，缩放后会稍微降低页面性能，在低配的安卓机器上表现的比较明显，iOS上没发现有性能问题。

Rem缩放

Rem是个好东西呀，谁用谁知道，这里就不多做解释了。原理跟上面的样式缩放相通，只不过是通过Rem为单位来进行视觉开发，然后通过计算后改变html的front-size来对页面进行缩放。

关于以Rem为单位进行开发，目前比较流行Font-size=62.5%，而后1rem=10px的这种方法，有试过直接换成px也是可以的，就看个人的计算习惯吧。