在大屏幕上，导航置顶或导航居左是两种典型的规划形式，但是，这两种形式在小屏幕上却遭受应战。在呼应式规划日渐盛行的今天(译者注：其完成已盛行了好几年了)，咱们更有必要从头审视针对小屏幕环境下的导航规划形式。这些经过移动设备拜访的页面导航，有必要既便运用户快速拜访，又不能过于杰出。
以下，我列出了 7 种常见的呼应式导航的规划形式，它们分别是：
置顶(或“任其自然”)
页脚锚点
菜单挑选
开关
侧滑
置底
彻底躲藏
上述每种规划形式都各有利弊，咱们在挑选导航规划方案时，需求依据项目的实际状况作出判别。
置顶(或“任其自然”)
将导航置顶或让导航随布局恣意活动(任其自然)是一种最简略的导航完成方法。正是因为这种易于完成的方法，它也成为了当下许多呼应式网页的“标配”。
长处
易于完成：在大屏幕和小屏幕上的完成方法共同
不依靠 JavaScript：这样就最大程度上保证了兼容性
无需打破原有 CSS 款式
无需打乱内容原本的次序：这种方法保证了它是完彻底全的流体布局，无需一丁点的人为干涉
缺陷
占用空间：高度问题在移动端是中心问题。Luke 在自己的书中表达的“内容优先，导航其次”是典型的移动端网页体会。咱们都希望用户可以以最快的速度获取内容，这久意味着咱们需求移除导航以保证用户重视的焦点一向保持在中心信息上。而当导航高度过大，导致屏幕内的中心信息无法展现的时分，就会引起用户的疑问。如下图，当咱们翻开一个页面时，整个屏幕都被导航占有，用户无法获取有用信息。 ![置顶导航在小屏幕上主动折行显现][2]
扩展性差：当你的导航刚好在一行内展现时，若要再添加章节的时分会呈现什么状况呢?假如客户忽然要求再添加一个名为“产品和服务”的导航类目呢?或许将导航标题翻译成其他言语后导致字符长度的改变呢?这些状况都会损坏原有的规划方案。
粗手指：导航全挤在一同，粗手指心急如焚，怎样点也点不到自己想要拜访的导航链，这样就添加了误操作的几率(不合适小屏幕上经过手指进行点击操作)
跨设备的问题：不同设备烘托的方法各异，在 iPhone 上很棒的页面或许在其它渠道上体现得很糟糕。 ![不同设备上烘托的差异][3]
页脚锚点
在页面头部只保存一个去底部的锚点，将导航放在页脚是一种讨巧的做法。它节省了头部名贵的空间，一起又满意了拜访导航的需求。
长处： 简略完成：页眉锚点，导航置底，没有比这更简略的了! – 不依靠 JavaScript：这意味着更少的测验和更好的浏览器支撑 CSS 改动小：因为选用了肯定或固定方位，将底部导航移到大屏幕的顶部几乎太简略了
缺陷： 用户利诱：快速跳转至页脚这一动作简略让用户利诱 缺少高雅：这样说很古怪(译者也有同感)，但我(作者)认为相似开关的交互方法更性感一些。这种选用锚点跳转的方法尽管有用，但不高雅，比较那些经过精心规划的移动端运用的交互方法而言过分粗糙。
菜单挑选
将导航收纳在一个挑选菜单的控件傍边是一个不错的方法。它避免了导航置顶所占用的屏幕空间。
长处：
腾出了满足的空间：一个挑选菜单不管是在横向或纵向上都特别省空间 契合用户习气：比较置底的方法，用户更习气导航被放置在页面头部 简略辨认：下拉菜单的控件款式非常显眼，及其简略发现 支撑本地化的交互方法：因为选用规范控件，使得操作非常本地化，这种本地化是指对设备本身特点的支撑，比方，在接触设备上可以经过点击操作，而在轨迹球上支撑翻滚操作;
缺陷：
款式不一致：不同浏览器会呈现不同款式的下拉菜单 或许会让用户困惑：大部分用户只在填写表单时才会看见下拉菜单，而将下拉菜单用作导航，忧虑用户一会儿无法了解 下拉菜单内容的处理方法比较古怪：因为在下拉菜单中，子项目会主动缩进，这样尽管可用，但从视觉上看非常紊乱; 或许会依靠浏览器调用 JavaScript
开关
开关的完成方法相似页脚锚点，但不是点击跳转至页脚，而是点击后将菜单区域滑动翻开。相同也是比较简略完成的规划形式。
长处：
易于了解：相较于页脚锚点忽然间的跳转，开关这种是方位不变的交互方法更简略让用户承受 交互更高雅(比较跳转而言) 拓展性强：你仅有要做的便是在PC端躲藏开关，在恰当的断点处显现它，这全部的全部都能经过 CSS 来完成。
缺陷：
动画或许不行滑润：Android 关于动画的支撑一向欠好，因而，或许得到你想要的作用 非常依靠 JavaScript：正因为翻开开关的动画需求 JavaScript 来完成，所以它的兼容性不太好(作者的黑莓设备就不支撑);
侧滑导航
侧滑是在 Facebook 的大力推广下盛行起来的。之所以叫抽屉源于它的交互动效，当点击菜单按钮后，导航模块会像抽屉相同从页面边际滑动呈现。
长处：
空间富余：因为从边际滑出，这些内容被了解为在底层或屏幕外的无限区域内 美观：简练便是美，并且动画作用冷艳。
缺陷：
小众：与其他简略的规划形式比起来，从旁边面滑动翻开导航栏的作用需求若干杂乱的动画来完成，这样就将一些低端设备挡在门口。因而，假如你的项目是面向群众而规划的，需求慎重。 适配性欠好： 这种形式仅合适移动设备，在大屏幕上的体现并欠好(也没有必要)。 或许存在利诱：当我(作者)第一次看到 Facebook 选用这种规划时，我还认为页面出错了呢!在屏幕右侧显露一些信息关于我自己而言仍是很古怪的(纯属作者个人观点)
只在页脚放置导航
只在页脚放置导航和页脚锚点相似，仅仅它不在页眉放置锚点。这种形式的理念是内容优先、导航其次。 这种方法需求用户将页面滑动至底部才干看见导航
长处： 简略完成 兼容性(无需 JavaScript) CSS 改动小：因为选用了肯定或固定方位，将底部导航移到大屏幕的顶部几乎太简略了
缺陷： 难以发现：不管在大屏或小屏上都很难发现页脚会有导航; 难以运用：移动端用户需求不断翻滚页面至底部，才干运用页脚导航，非常不方便
相关事例： Pears Fray
彻底躲藏
将导航躲藏，得到最大化的空间。
这种规划形式遵从了该规律：不要赏罚那些经过移动端拜访你网站的用户。 移动端用户究竟想得到或不想要哪些信息仍旧是个谜。移动端用户会做任何桌面端用户都会做的工作，因而，仅针对移动端用户供给某些中心功用是很有必要的。
长处： 屌爆了(原文 Sexy as hell 求大神信达雅的翻译)
完美的运用有限的屏幕空间
关于移动端设备有很大优势，只用向下滑动就能检查更多。
缺陷： 去掉了针对移动端用户的中心功用或内容 将链接或内容躲藏的做法并欠好。呼应式的鼓吹者认为这种做法会导致移动端页面与桌面端构成内容上的差异，以及体会上的灾祸。
添加页面额定的开支 运用指令 display: none 仅能在页面上躲藏该元素。页面的代码、图片或其他文件依旧在后台下载，这终究导致了页面拜访缓慢。
难以保护 两个彻底别离的导航系统将成为后期保护时的担负。
或许存在利诱 移动端用户向下滑动页面来改写列表时，并不会意识到 当我(作者)第一次看到 Facebook 选用这种规划时，我还认为页面出错了呢!在屏幕右侧显露一些信息关于我自己而言仍是很古怪的(纯属作者个人观点)
结语
移动导航就像你真实的朋友相同：互相需求，但又给互相空间;而那些伪装跟你很要好的朋友总是在你需求的时分消失(当你需求导航的时分找不到)或许占有你的个人空间而让你抓狂(比方：擦，从我床上滚下去);因而，针对呼应式导航进行规划，需求在拜访的便携性和空间上做一个平衡。
上一年今天运营文章2023:一页纸搞定项目办理及操作过程(0)2023:一文读懂腾讯的安排架构(0)2022:建立商业运营常识系统书单：商业形式16本(0)2022:2021抖音数据陈述（完整版）(0)2022:启示录(0)
微信扫一扫 
支付宝扫一扫 
