隱藏式菜單和極簡(jiǎn)式導(dǎo)航欄最近正處于風(fēng)口浪尖,相比之下,全屏菜單多數(shù)時(shí)候幾乎都適用于所有項(xiàng)目。因?yàn)樗`活易變,能夠提升而非破壞用戶體驗(yàn)。直接看優(yōu)秀案例 >>>
與其他用戶界面細(xì)節(jié)一樣,菜單的設(shè)計(jì)也在隨著當(dāng)今的潮流改變。一些變化能帶來積極的效果,改善用戶體驗(yàn),還有一些卻會(huì)破壞有利的形象。追隨潮流是件棘手的事,尤其是在菜單上。
比如,隱藏式菜單和極簡(jiǎn)式導(dǎo)航欄最近正處于風(fēng)口浪尖。但是,它們并不適用于所有網(wǎng)站。相比之下,全屏菜單多數(shù)時(shí)候幾乎都適用于所有項(xiàng)目。后者正在匯聚人氣,因?yàn)樗`活易變,能夠提升而非破壞用戶體驗(yàn)。它在不經(jīng)意間呈現(xiàn)了很多數(shù)據(jù),整潔地排布文字與多媒體內(nèi)容。當(dāng)然,這使得主頁(yè)又多了一層點(diǎn)擊,但有時(shí)為了更好的用戶體驗(yàn),應(yīng)該做這樣的犧牲。
Maecia
Maecia采用了討人喜愛的蒸汽朋克外觀,增添了一分獨(dú)特的精細(xì)和機(jī)械感?;趫D片的導(dǎo)航占據(jù)整個(gè)屏幕,與動(dòng)態(tài)主頁(yè)和主題高度吻合。
Olcese
Olcese有好幾個(gè)菜單,便于用戶更徹底地探索這個(gè)網(wǎng)站,同時(shí)也強(qiáng)化了品牌識(shí)別?;趫D片的網(wǎng)格式全屏導(dǎo)航中,充滿了有趣的照片、漂亮的圖表和令人愉快的效果。這些元素的結(jié)合扮演著至關(guān)重要的角色。
Moeko ABE
攝影師的在線作品集還能是什么樣?以照片為核心的主頁(yè)明亮耀眼,導(dǎo)航運(yùn)用了多媒體,為這位藝術(shù)家高調(diào)代言。菜單在整個(gè)頁(yè)面投下柔和的陰影,呈現(xiàn)出美麗的照片鏈接。
Conference Awwwards
頗具開創(chuàng)性的主頁(yè),一流的HTML/CSS/JS動(dòng)畫立刻引人注目,讓人印象深刻。簡(jiǎn)單的導(dǎo)航占據(jù)了整個(gè)屏幕,視覺聚焦于導(dǎo)航鏈接。這是非常合理的方案。
Drygital
Drygital的主菜單流露出歡樂積極的情感。華麗鮮艷的漸變背景,非常有利于展現(xiàn)亮白色的導(dǎo)航。一如往常,菜單覆蓋了整個(gè)主頁(yè)。不過得益于半透明的背景,用戶可以在著陸頁(yè)欣賞一段視頻。
Aleman’s Design
Aleman’s Design有著無縫式的導(dǎo)航,與整個(gè)場(chǎng)景搭配良好,對(duì)美感有重大貢獻(xiàn)。這個(gè)團(tuán)隊(duì)采用了非同尋常的方案,利用動(dòng)畫背景來強(qiáng)調(diào)菜單項(xiàng)。
Mas Industries
Mas Industries的特點(diǎn)是基于圖片的全屏導(dǎo)航菜單,它從“漢堡”菜單中優(yōu)美地展開。對(duì)金屬部件的完美渲染散逸著冰冷嚴(yán)肅的氛圍。雖然前景與背景的反差很弱,但另一方面,這種方案對(duì)系列設(shè)計(jì)有強(qiáng)調(diào)作用。
Danne Olsson
壯觀的照片背景,映入Danne Olsson的用戶的眼簾,充滿自然意象。為了弱化如此吸引眼球的核心元素,將視線引向更簡(jiǎn)單樸實(shí)的導(dǎo)航,他采用了很直接的解決方法,將全屏菜單與純色背景相結(jié)合。
Impossible Bureau
在這里,主導(dǎo)航將首頁(yè)劃分為4列,讓網(wǎng)站的主要部分充滿全屏。為了使外觀鮮活明亮,不至于讓主頁(yè)看起來黑暗陰沉,每個(gè)鏈接都帶有美麗的漸變背景,還有絕佳的字體和配圖。
Voisins
Voisins的主頁(yè)是個(gè)龐大的導(dǎo)航體系,有兩個(gè)菜單組成。其中之一如我們所料,迎合了當(dāng)今網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì),通過“漢堡”菜單觸發(fā)。另一個(gè)則占據(jù)全屏,可以更高效地處理視頻鏈接。
Fornace Studio
Fornace Studio采用了一種非常規(guī)方案,主菜單由小小的導(dǎo)航圖標(biāo)觸發(fā)顯示。它從一個(gè)特別的角度滑入,模糊并覆蓋整個(gè)主頁(yè),立刻吸引了用戶的注意力。
Webgriffe
Webgriffe的設(shè)計(jì)很精細(xì),文案、極細(xì)的雅致字體、幽靈按鈕、強(qiáng)烈而現(xiàn)代的圖形和趣的背景,共同構(gòu)成了視覺焦點(diǎn)。菜單與主題的配合非常好。
Moma
全屏導(dǎo)航讓用戶很自然地點(diǎn)擊首頁(yè)的圖片,進(jìn)入主菜單中的其他功能。這個(gè)方案相當(dāng)整潔優(yōu)雅,完全適用。
Giaco Morelli
和上一例類似,這個(gè)全屏菜單帶有輕微的半透明背景。厚實(shí)圓潤(rùn)的字體轉(zhuǎn)移了訪客的注意力,從迷人的交互式主頁(yè),轉(zhuǎn)向網(wǎng)站更重要的部分。
Gianluca Bocchi
雖然極簡(jiǎn)式設(shè)計(jì)缺乏豐富的裝飾,但這家畫廊的官網(wǎng)散發(fā)著典雅、精美的藝術(shù)氣息。在這里,第一印象尤為重要,莊嚴(yán)的菜單巧妙含蓄地將著陸頁(yè)分成3部分。
Elliot Lepers
Elliot Lepers有著全屏式輪播,一列列呈現(xiàn)信息。盡管這并非菜單的傳統(tǒng)形式,但它是純正的導(dǎo)航,使其得以充分運(yùn)用。
Fahrenheit
Fahrenheit的菜單由4個(gè)基本的鏈接構(gòu)成,這適用于多數(shù)小型在線作品集。盡管如此,這個(gè)團(tuán)隊(duì)仍然在其中傾注心血,將整個(gè)頁(yè)面讓給導(dǎo)航列表,證明了它的重要性。
N3RD
首頁(yè)就是個(gè)導(dǎo)航頁(yè)面。最棒的一點(diǎn)是,這個(gè)團(tuán)隊(duì)?wèi)?yīng)該不會(huì)擔(dān)心平板和移動(dòng)端的變化,因?yàn)檫@個(gè)方案全平臺(tái)適用。簡(jiǎn)單而優(yōu)雅,盡管相當(dāng)原始。
ivxvixviii
ivxvixviii有著相當(dāng)精致的幾何體,壯麗的圖片和微妙的效果豐富了造型。精巧獨(dú)特的導(dǎo)航足以激發(fā)興趣,迫使用戶深入其中。
The Colors of Motion
這個(gè)網(wǎng)站的特色是奇異的無字導(dǎo)航,一眼看去使人迷惑。設(shè)計(jì)師采用了打破常規(guī)的方案。在這種方式中,菜單與名稱相結(jié)合,支撐著整個(gè)主題。
受趨勢(shì)影響,導(dǎo)航可以采用不同形式。全屏菜單是種雙贏的做法,可以解決很多網(wǎng)頁(yè)設(shè)計(jì)的問題。