設計知識!響應式導航有哪幾類設計方式?
- 2022-12-24 22:47:36
- 來源/作者:互聯網/佚名
- 己被圍觀次
在大屏幕上,導航置頂或導航居左是兩種典型的設計模式,然而,這兩種模式在小屏幕上卻遭遇挑戰。在響應式設計日漸流行的今天,我們更有必要重新審視針對小屏幕環境下的導航設計模式。這些通過移動設備訪問的頁面導航,必須既方便用戶快速訪問,又不能過于突出。
缺點:
樣式不統一:不同瀏覽器會呈現不同樣式的下拉菜單 可能會讓用戶困惑:大部分用戶只在填寫表單時才會看見下拉菜單,而將下拉菜單用作導航,擔心用戶一下子無法理解 下拉菜單內容的處理方式比較奇怪:因為在下拉菜單中,子項目會自動縮進,這樣雖然可用,但從視覺上看十分混亂; 可能會依賴瀏覽器調用 JavaScript
開關

開關的實現方式類似頁腳錨點,但不是點擊跳轉至頁腳,而是點擊后將菜單區域滑動展開。同樣也是比較容易實現的設計模式。
優點:
易于理解:相較于頁腳錨點突然間的跳轉,開關這種是位置不變的交互方式更容易讓用戶接受 交互更優雅(相比跳轉而言) 拓展性強:你唯一要做的就是在PC端隱藏開關,在適當的斷點處顯示它,這一切的一切都能通過 CSS 來實現。
缺點:
動畫可能不夠平滑:Android 對于動畫的支持一直不好,因此,可能得到你想要的效果 非常依賴 JavaScript:正因為打開開關的動畫需要 JavaScript 來實現,所以它的兼容性不太好(作者的黑莓設備就不支持);
側滑導航

側滑是在 Facebook 的大力推廣下流行起來的。之所以叫抽屜源于它的交互動效,當點擊菜單按鈕后,導航模塊會像抽屜一樣從頁面邊緣滑動出現。
優點:
空間充裕:因為從邊緣滑出,這些內容被理解為在底層或屏幕外的無限區域內 好看:簡潔就是美,而且動畫效果驚艷。
缺點:
小眾:與其他簡單的設計模式比起來,從側面滑動展開導航欄的效果需要若干復雜的動畫來實現,這樣就將一些低端設備擋在門口。因此,如果你的項目是面向大眾而設計的,需要謹慎。 適配性不好: 這種模式僅適合移動設備,在大屏幕上的表現并不好(也沒有必要)。 可能存在迷惑:當我(作者)第一次看到 Facebook 采用這種設計時,我還以為頁面出錯了呢!在屏幕右側露出一些信息對于我本人而言還是很奇怪的(純屬作者個人看法)
只在頁腳放置導航

*PSjia.COM 傾力出品,轉載請注明來自PS家園網(m.sz-xdd.com.cn)
上一篇:ps大師之路:選區的存儲與載入
下一篇:Duang!給設計稿特技加特技?








