2015年網(wǎng)頁導航設(shè)計的十大趨勢
不管你喜歡不喜歡,漢堡圖標反正已經(jīng)是大勢所趨了。今年無數(shù)的網(wǎng)站將這個小元素納入到界面中來,成為頁面導航的重要組成部分。不過漢堡圖標并不是今年唯一的導航設(shè)計趨勢。
全屏導航、底部導航等許多設(shè)計手法都是網(wǎng)頁設(shè)計師們的心頭好。今天這篇文章將會對今年所流行的十個導航設(shè)計趨勢進行總結(jié)。
1、全屏導航
當導航是整個網(wǎng)頁設(shè)計的核心的時候,頁面會是怎么樣的?只要合理地策劃整合,全屏導航其實是一種非常有效的技術(shù),用戶可以更加便捷地切換到不同的頁面,內(nèi)容成為更加觸手可及的東西。
全屏導航式頁面可以做的非常明顯,也可以以更加微妙的方式呈現(xiàn)出來。用戶是否真的非得清楚地意識到它是導航呢?并不一定,如果你設(shè)計的夠合理,用戶會在無意識間充分運用起它的導航功能。
2、底部導航
絕大部分的導航會置于網(wǎng)頁的頂部,這也是最常見的方式。頂部的導航符合用戶的閱讀習慣,也符合通常的網(wǎng)頁設(shè)計的邏輯。
但是置于底部的導航欄更有意思,它的設(shè)計不再拘泥于頂部導航設(shè)計的規(guī)程,它可以設(shè)計得更大,在許多單頁式頁面中這種導航的樣式還可以更加自由多樣。
不過這種導航設(shè)計最好是常駐于底部,避免用戶迷失,方便定位也易于回到首頁。
3、垂直導航菜單
打破常規(guī)設(shè)計的手法有很多,其中之一就是將導航菜當設(shè)計成縱向的。垂直的導航設(shè)計并不是簡單的將橫向變?yōu)榭v向的就成,你需要結(jié)合內(nèi)容重新思考整個網(wǎng)站的布局和空間的使用。
最流行的兩種這類排版,一種是使用漢堡菜單的隱藏式的導航菜單,另外一種使用的是固定的側(cè)邊欄來承載菜單。
第二種菜單的有趣之處在于,它為網(wǎng)站設(shè)計提供了一種新的視覺設(shè)計可能性。同時,這種導航在小屏幕上可以做成懸停隱藏式的,需要的時候點擊顯示。
4、無導航模式
有些規(guī)模較小的網(wǎng)站會選擇使用無導航的輕量級框架來設(shè)計網(wǎng)站,這里需要的注意的是,這類網(wǎng)站通常是單頁網(wǎng)站。這種設(shè)計其實是可行的,尤其是用作預告、預覽或者介紹功用的時候。
如果你的網(wǎng)站包含諸多頁面,其實并不推薦這種設(shè)計,盡管有的網(wǎng)站還真就是這么做的,并且做的不錯。Quincy Requin & Associes 的Q&A頁面就是這么設(shè)計的,每個問題鏈接到一個獨立的頁面。這種功能的獨特性使得這種設(shè)計顯得并不突兀。
5、滑出菜單
滑出式導航菜單已經(jīng)流行了一陣子了,這種設(shè)計讓移動端的頁面設(shè)計體驗更加優(yōu)秀,當用戶打開頁面的時候第一眼看到的會是主要的內(nèi)容而非菜單,給用戶更好的第一印象。耳熟能詳?shù)臐h堡圖標在這種場合下出鏡率也非常之高。
當然,這種滑出菜單的設(shè)計也可以非常靈活的運用在大屏幕上,響應式全屏滑出導航也可以給人愉悅的體驗,畢竟很少有桌面網(wǎng)頁會享有如此“移動端”的設(shè)計福利。
6、巨型菜單
這種大型的導航菜單設(shè)計在幾年前有短暫的流行,并且大多運用在擁有大量細分內(nèi)容的企業(yè)站點。由于這種導航菜單的設(shè)計并不適宜于移動端的顯示,因此并未大規(guī)模流行。不過現(xiàn)在設(shè)計師開始重新考慮這種巨型菜單在今天使用的可能性。
作為大型零售企業(yè)的Target ,目前就采用的這樣的設(shè)計。這個巨型菜單的完成度極高,兩級式的菜單設(shè)計,第一級常駐于頁面,第二級菜單占據(jù)的空間是固定的,這樣一來看起來頗為整齊。這樣的設(shè)計會讓頁面看起來整齊而干凈。
7、動畫導航元素
動效是近年來的設(shè)計重頭戲,而它在導航中得到更多的運用也是自然的事情。當動效融入導航設(shè)計中的時候,并不需要過于復雜的展現(xiàn)。
漂亮的懸停動效,或者利落的跳躍效果,都可以用來引導用戶。案例中的導航設(shè)計也非常貼心,導航借助動效延展成為彩色的線條,增加用戶點擊的面積。動效不僅讓用戶知道他們在哪里,而且以更加清晰的方式引導他們?nèi)c擊。
小巧微妙的動效不僅帶來不錯的視覺加成,而且為用戶帶來驚喜,鼓勵用戶操作,提示用戶界面的邊界。
8、卡片式導航選項
Pinterest 就是典型,它所使用的卡片式導航幾乎存在于網(wǎng)站的所有角落,清晰直觀,簡單大氣,幾乎所有用戶都可以在這種導航下找到他們想要的東西。
每個卡片可以承載一個特定的種類,也可以容納若干小的分支,這種設(shè)計自由而充滿延展性,你可以在這樣的網(wǎng)站里面來回點擊探索一整天。
9、無按鈕導航
在絕大多數(shù)用戶對互聯(lián)網(wǎng)并不熟悉的階段,擬物化的按鈕設(shè)計是引導大家點擊的重要手段,而隨著網(wǎng)絡(luò)的大規(guī)模普及和扁平化/現(xiàn)代風的流行,無按鈕的文字導航也擁有了越來越大的市場。
無按鈕導航和大圖背景配合起來非常不錯,這個時候無按鈕導航設(shè)計足夠簡單,也具有極強的可讀性,可以和背景形成鮮明的對比??刂坪梦淖值拈g距,確保用戶有足夠的空間閱讀和點擊。
10、單頁滾動導航
當網(wǎng)站使用單頁設(shè)計的時候,它的導航就是你的手指和鼠標。只需要你翻下去,內(nèi)容就會持續(xù)不斷地到你的眼前。
對于不含有大量內(nèi)容的網(wǎng)站而言,單頁式的導航的效果其實非常不錯。這樣的網(wǎng)站只需要簡單的向下滾動操作就可以搞定,用戶也期待滾動瀏覽的結(jié)果。不過這樣的頁面需要給予用戶足夠的刺激和吸引力,才能鼓勵他們?yōu)g覽下去,所以請務(wù)必將有趣的內(nèi)容呈現(xiàn)給他們。
-
2021/12/28
-
2021/12/23
-
2021/12/17

- 愛華仕斬獲“2021年度中國廚衛(wèi)行業(yè)年度智能
- 回首2021,迎戰(zhàn)2022 彩虹線開啟新征程!
- 福臨板材|福滿2021,圓夢2022
- 美特照明:2022年照明新趨勢,經(jīng)銷商如何做大
- 會自己“洗澡”的集成灶,帥康自動清洗集成灶
- 帶你設(shè)計一款功能多變,簡單實用的休閑露臺陽
- 世紀豪門吊頂:破防了!原來顏值+實力=H20
- 裝修木門選的好,噪音統(tǒng)統(tǒng)沒煩惱
- 寒潮來了,有淋浴房洗澡更保暖舒服
- 元旦特輯:歐意電器述說生活的點滴與美好
- “中國十大品牌”獲獎名單出爐,賽戈水漆榮耀
- 2021值得消費大賞 凱迪仕智能鎖榮摘兩項桂冠
- 益恩家居:新年新氣象,愛自己從好好睡覺開始
- 元旦伊始:健康新生活,從精格管道直飲水開始
- 喜迎元旦|新年新燈飾 箔晶智能照明讓酒店暖
- 吉美幫的2021 “專精特新” 深耕屋面防水體
- Aqara攜手京東成立燈光設(shè)計聯(lián)盟 打造燈飾照
- 年底廚房煥新顏,如何選擇廚電?好太太智能來
- 全鋁家具全屋莫蘭迪色系,這款美式輕奢范贏鄰
- 順趨勢·筑鳳巢·贏未來 鳳梧居門窗2021年會隆
