設(shè)計(jì)知識(shí)！響應(yīng)式導(dǎo)航有哪幾類設(shè)計(jì)方式？(3)

只在頁腳放置導(dǎo)航和頁腳錨點(diǎn)類似，只是它不在頁眉放置錨點(diǎn)。這種模式的理念是內(nèi)容優(yōu)先、導(dǎo)航其次。 這種方式需要用戶將頁面滑動(dòng)至底部才能看見導(dǎo)航

優(yōu)點(diǎn)： 容易實(shí)現(xiàn) 兼容性（無需 JavaScript） CSS 改動(dòng)�。河捎诓捎昧私^對(duì)或固定位置，將底部導(dǎo)航移到大屏幕的頂部簡直太容易了

缺點(diǎn)： 難以發(fā)現(xiàn)：無論在大屏或小屏上都很難發(fā)現(xiàn)頁腳會(huì)有導(dǎo)航； 難以使用：移動(dòng)端用戶需要不斷滾動(dòng)頁面至底部，才能使用頁腳導(dǎo)航，十分不便

相關(guān)案例： Pears Fray

徹底隱藏

將導(dǎo)航隱藏，得到最大化的空間。

這種設(shè)計(jì)模式遵循了該法則：不要懲罰那些通過移動(dòng)端訪問你網(wǎng)站的用戶。 移動(dòng)端用戶到底想得到或不想要哪些信息仍舊是個(gè)謎。移動(dòng)端用戶會(huì)做任何桌面端用戶都會(huì)做的事情，因此，僅針對(duì)移動(dòng)端用戶提供某些核心功能是很有必要的。

優(yōu)點(diǎn)： 屌爆了（原文 Sexy as hell 求大神信達(dá)雅的翻譯）

完美的利用有限的屏幕空間

對(duì)于移動(dòng)端設(shè)備有很大優(yōu)勢，只用向下滑動(dòng)就能查看更多。

缺點(diǎn)： 去掉了針對(duì)移動(dòng)端用戶的核心功能或內(nèi)容 將鏈接或內(nèi)容隱藏的做法并不好。響應(yīng)式的鼓吹者認(rèn)為這種做法會(huì)導(dǎo)致移動(dòng)端頁面與桌面端形成內(nèi)容上的差異，以及體驗(yàn)上的災(zāi)難。

增加頁面額外的開銷 使用命令 display: none 僅能在頁面上隱藏該元素。頁面的代碼、圖片或別的文件依舊在后臺(tái)下載，這最終導(dǎo)致了頁面訪問緩慢。

難以維護(hù) 兩個(gè)完全分離的導(dǎo)航體系將成為后期維護(hù)時(shí)的負(fù)擔(dān)。

可能存在迷惑 移動(dòng)端用戶向下滑動(dòng)頁面來刷新列表時(shí)，并不會(huì)意識(shí)到 當(dāng)我（作者）第一次看到 Facebook 采用這種設(shè)計(jì)時(shí)，我還以為頁面出錯(cuò)了呢！在屏幕右側(cè)露出一些信息對(duì)于我本人而言還是很奇怪的（純屬作者個(gè)人看法）

結(jié)語

移動(dòng)導(dǎo)航就像你真正的朋友一樣：彼此需要，但又給彼此空間；而那些假裝跟你很要好的朋友總是在你需要的時(shí)候消失（當(dāng)你需要導(dǎo)航的時(shí)候找不到）或者占據(jù)你的個(gè)人空間而讓你抓狂（比如：擦，從我床上滾下去）；因此，針對(duì)響應(yīng)式導(dǎo)航進(jìn)行設(shè)計(jì)，需要在訪問的便攜性和空間上做一個(gè)平衡。