與其他用戶界面細(xì)節(jié)一樣，菜單的設(shè)計也在隨著當(dāng)今的潮流改變。一些變化能帶來積極的效果，改善用戶體驗，還有一些卻會破壞有利的形象。追隨潮流是件棘手的事，尤其是在菜單上。

比如，隱藏式菜單和極簡式導(dǎo)航欄最近正處于風(fēng)口浪尖。但是，它們并不適用于所有網(wǎng)站。相比之下，全屏菜單多數(shù)時候幾乎都適用于所有項目。后者正在匯聚人氣，因為它靈活易變，能夠提升而非破壞用戶體驗。它在不經(jīng)意間呈現(xiàn)了很多數(shù)據(jù)，整潔地排布文字與多媒體內(nèi)容。當(dāng)然，這使得主頁又多了一層點擊，但有時為了更好的用戶體驗，應(yīng)該做這樣的犧牲。

今天我們進(jìn)行一場頭腦風(fēng)暴，來看20個新穎絕妙的全屏導(dǎo)航網(wǎng)頁設(shè)計案例。

全屏菜單案例

Maecia

Maecia采用了討人喜愛的蒸汽朋克外觀，增添了一分獨特的精細(xì)和機(jī)械感。基于圖片的導(dǎo)航占據(jù)整個屏幕，與動態(tài)主頁和主題高度吻合。

Olcese

Olcese有好幾個菜單，便于用戶更徹底地探索這個網(wǎng)站，同時也強(qiáng)化了品牌識別。基于圖片的網(wǎng)格式全屏導(dǎo)航中，充滿了有趣的照片、漂亮的圖表和令人愉快的效果。這些元素的結(jié)合扮演著至關(guān)重要的角色。

Moeko ABE

攝影師的在線作品集還能是什么樣？以照片為核心的主頁明亮耀眼，導(dǎo)航運用了多媒體，為這位藝術(shù)家高調(diào)代言。菜單在整個頁面投下柔和的陰影，呈現(xiàn)出美麗的照片鏈接。

Conference Awwwards

頗具開創(chuàng)性的主頁，一流的HTML/CSS/JS動畫立刻引人注目，讓人印象深刻。簡單的導(dǎo)航占據(jù)了整個屏幕，視覺聚焦于導(dǎo)航鏈接。這是非常合理的方案。

Drygital

Drygital的主菜單流露出歡樂積極的情感。華麗鮮艷的漸變背景，非常有利于展現(xiàn)亮白色的導(dǎo)航。一如往常，菜單覆蓋了整個主頁。不過得益于半透明的背景，用戶可以在著陸頁欣賞一段視頻。

Aleman’s Design

Aleman’s Design有著無縫式的導(dǎo)航，與整個場景搭配良好，對美感有重大貢獻(xiàn)。這個團(tuán)隊采用了非同尋常的方案，利用動畫背景來強(qiáng)調(diào)菜單項。

Mas Industries

Mas Industries的特點是基于圖片的全屏導(dǎo)航菜單，它從“漢堡”菜單中優(yōu)美地展開。對金屬部件的完美渲染散逸著冰冷嚴(yán)肅的氛圍。雖然前景與背景的反差很弱，但另一方面，這種方案對系列設(shè)計有強(qiáng)調(diào)作用。

Danne Olsson

壯觀的照片背景，映入Danne Olsson的用戶的眼簾，充滿自然意象。為了弱化如此吸引眼球的核心元素，將視線引向更簡單樸實的導(dǎo)航，他采用了很直接的解決方法，將全屏菜單與純色背景相結(jié)合。

Impossible Bureau

在這里，主導(dǎo)航將首頁劃分為4列，讓網(wǎng)站的主要部分充滿全屏。為了使外觀鮮活明亮，不至于讓主頁看起來黑暗陰沉，每個鏈接都帶有美麗的漸變背景，還有絕佳的字體和配圖。

Voisins

Voisins的主頁是個龐大的導(dǎo)航體系，有兩個菜單組成。其中之一如我們所料，迎合了當(dāng)今網(wǎng)頁設(shè)計趨勢，通過“漢堡”菜單觸發(fā)。另一個則占據(jù)全屏，可以更高效地處理視頻鏈接。

Fornace Studio

Fornace Studio采用了一種非常規(guī)方案，主菜單由小小的導(dǎo)航圖標(biāo)觸發(fā)顯示。它從一個特別的角度滑入，模糊并覆蓋整個主頁，立刻吸引了用戶的注意力。

Webgriffe

Webgriffe的設(shè)計很精細(xì)，文案、極細(xì)的雅致字體、幽靈按鈕、強(qiáng)烈而現(xiàn)代的圖形和趣的背景，共同構(gòu)成了視覺焦點。菜單與主題的配合非常好。

Moma

全屏導(dǎo)航讓用戶很自然地點擊首頁的圖片，進(jìn)入主菜單中的其他功能。這個方案相當(dāng)整潔優(yōu)雅，完全適用。

Giaco Morelli

和上一例類似，這個全屏菜單帶有輕微的半透明背景。厚實圓潤的字體轉(zhuǎn)移了訪客的注意力，從迷人的交互式主頁，轉(zhuǎn)向網(wǎng)站更重要的部分。

Gianluca Bocchi

雖然極簡式設(shè)計缺乏豐富的裝飾，但這家畫廊的官網(wǎng)散發(fā)著典雅、精美的藝術(shù)氣息。在這里，第一印象尤為重要，莊嚴(yán)的菜單巧妙含蓄地將著陸頁分成3部分。

Elliot Lepers

Elliot Lepers有著全屏式輪播，一列列呈現(xiàn)信息。盡管這并非菜單的傳統(tǒng)形式，但它是純正的導(dǎo)航，使其得以充分運用。

Fahrenheit

Fahrenheit的菜單由4個基本的鏈接構(gòu)成，這適用于多數(shù)小型在線作品集。盡管如此，這個團(tuán)隊仍然在其中傾注心血，將整個頁面讓給導(dǎo)航列表，證明了它的重要性。

N3RD

首頁就是個導(dǎo)航頁面。最棒的一點是，這個團(tuán)隊?wèi)?yīng)該不會擔(dān)心平板和移動端的變化，因為這個方案全平臺適用。簡單而優(yōu)雅，盡管相當(dāng)原始。

ivxvixviii

ivxvixviii有著相當(dāng)精致的幾何體，壯麗的圖片和微妙的效果豐富了造型。精巧獨特的導(dǎo)航足以激發(fā)興趣，迫使用戶深入其中。

The Colors of Motion

這個網(wǎng)站的特色是奇異的無字導(dǎo)航，一眼看去使人迷惑。設(shè)計師采用了打破常規(guī)的方案。在這種方式中，菜單與名稱相結(jié)合，支撐著整個主題。

結(jié)論

受趨勢影響，導(dǎo)航可以采用不同形式。全屏菜單是種雙贏的做法，可以解決很多網(wǎng)頁設(shè)計的問題。

原文鏈接

譯文鏈接