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

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

優(yōu)點： 容易實現(xiàn) 兼容性（無需 JavaScript） CSS 改動小：由于采用了絕對或固定位置，將底部導(dǎo)航移到大屏幕的頂部簡直太容易了

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

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

徹底隱藏

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

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

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

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

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

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

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

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

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

結(jié)語

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