越來(lái)越多的用戶抱怨網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)變得無(wú)聊無(wú)趣了。高端的技術(shù)和流行的趨勢(shì)已經(jīng)為網(wǎng)頁(yè)設(shè)計(jì)構(gòu)建起了一套約定俗成的規(guī)則，而開(kāi)發(fā)者和設(shè)計(jì)師在社區(qū)中依然不停地探索新的可能性，尋求下一個(gè)病毒式流行的新熱點(diǎn)。

雖然新設(shè)計(jì)和新界面層出不同，但是許多看起來(lái)和之前流行的設(shè)計(jì)大同小異。

說(shuō)道UI界面，這幾年最深入人心的應(yīng)該就是漢堡圖標(biāo)了。前年，對(duì)于漢堡圖標(biāo)是否會(huì)成為大勢(shì)所趨的撕逼一直沒(méi)停過(guò)，而在去年，針對(duì)漢堡圖標(biāo)的討論核心就變成了使用漢堡圖標(biāo)的技巧有哪些?，F(xiàn)在，漢堡圖標(biāo)已經(jīng)談不上是“熱潮”了，說(shuō)它是使用過(guò)度也不為過(guò)。

漢堡圖標(biāo)的優(yōu)勢(shì)很明顯，它緊湊，直觀，便捷。它的“缺陷”也相當(dāng)突出：太熟悉，“無(wú)聊”。我的意思是，每一個(gè)APP都有三條橫線在UI的頂端告訴你“我是菜單”，有沒(méi)有更加有趣，讓人眼前一亮的替代方案呢?有。今天我們就聊四種不錯(cuò)的漢堡圖標(biāo)替代方案。

1、垂直字母縱向?qū)Ш?/font>

將整個(gè)導(dǎo)航連同字母方向都翻轉(zhuǎn)90度，這樣的設(shè)計(jì)比起漢堡圖標(biāo)看起來(lái)要新鮮得多。這種設(shè)計(jì)占用的空間更少，它看起來(lái)更像是一條縱向的線，在視覺(jué)上，它幾乎和屏幕等高，視覺(jué)形式感上也很強(qiáng)，結(jié)構(gòu)緊湊，內(nèi)容也足夠豐富，可以說(shuō)，它是一種非常符合現(xiàn)代設(shè)計(jì)風(fēng)格的一種呈現(xiàn)形式。這種設(shè)計(jì)對(duì)于絕大多數(shù)的用戶而言，都沒(méi)有識(shí)別度上的問(wèn)題，如果說(shuō)它真有什么缺陷的話，大概就是治好了我多年的頸椎病吧……

VR Sessions 這個(gè)網(wǎng)站就選取了這種導(dǎo)航設(shè)計(jì)。他們將這種縱向的導(dǎo)航和他們的LOGO排布在了一起，看起來(lái)漂亮又精巧。

你剛剛打開(kāi) Snake River Interiors 的網(wǎng)站的時(shí)候，它的導(dǎo)航看起來(lái)相當(dāng)普通，可是當(dāng)你向下滾動(dòng)的時(shí)候，整個(gè)導(dǎo)航會(huì)變成縱向排列的，并且懸浮在屏幕左側(cè)，隨時(shí)待命幫你導(dǎo)航，這種設(shè)計(jì)思路非常有趣。

2、位于屏幕邊角的菜單

這種設(shè)計(jì)明顯不是一個(gè)被廣泛使用的解決方案，通常它會(huì)用于中心式布局的網(wǎng)頁(yè)，這樣用戶會(huì)清晰的感知到中心周圍的空間，這種導(dǎo)航就是為此而生的。也許你會(huì)認(rèn)為，在頁(yè)面的四個(gè)角上做導(dǎo)航已經(jīng)很離奇了，但是接受了這一設(shè)定的設(shè)計(jì)師，還有其他的玩法：

Proud & Punch 這個(gè)頁(yè)面的設(shè)計(jì)師將LOGO、社交媒體分享、菜單和關(guān)于我們分別置于四角，這樣的設(shè)計(jì)讓整個(gè)頁(yè)面看起來(lái)整潔又不羈，自由而高效的利用空間。而Kygo-Life 這個(gè)網(wǎng)站則盡可能將邊邊角角的位置都用了起來(lái)，讓網(wǎng)站看起來(lái)更加飽滿。

3、超窄滑出式菜單

側(cè)邊欄式的設(shè)計(jì)又回歸了。這種回歸并非大張旗鼓，它悄無(wú)聲息地出現(xiàn)在了APP和網(wǎng)頁(yè)設(shè)計(jì)中，它比以往更加輕量級(jí)，更加單薄，盡量顯得緊湊而優(yōu)雅。新的側(cè)邊欄設(shè)計(jì)通常不會(huì)太復(fù)雜，僅包含幾個(gè)基本的元素，LOGO、菜單和社交媒體按鈕等幾個(gè)基本的元素。和往常一樣，設(shè)計(jì)師常常會(huì)將這種側(cè)邊欄置于頁(yè)面的左側(cè)，絕大多數(shù)時(shí)候是隱藏的，在用戶打開(kāi)的時(shí)候或者鼠標(biāo)移動(dòng)到其上的時(shí)候會(huì)顯示。

設(shè)計(jì)師 Maison Ullens 的個(gè)人作品頁(yè)當(dāng)中，就采用了這樣的超窄側(cè)邊欄。頁(yè)面主要的視覺(jué)內(nèi)容是右側(cè)大篇幅的內(nèi)容主體，輕量級(jí)的側(cè)邊欄以一種低調(diào)的形式置于左側(cè)，當(dāng)光標(biāo)移動(dòng)到上面的時(shí)候會(huì)有動(dòng)效提示。主次分明，還不失功能性。

4、垂直導(dǎo)航

和第一種導(dǎo)航設(shè)計(jì)不同，這種垂直導(dǎo)航不會(huì)讓字母也跟著一同翻轉(zhuǎn)，只是采用了縱向的排版。在漢堡圖標(biāo)還是潮流的時(shí)代，這種設(shè)計(jì)也不算多見(jiàn)。這種垂直排版的導(dǎo)航通常會(huì)用純色或者透明的背景，這種垂直導(dǎo)航可以和LOGO一起搭配，和現(xiàn)在的極簡(jiǎn)設(shè)計(jì)風(fēng)可以很好的搭配，優(yōu)雅也富有形式感。

以Linmark 這個(gè)頁(yè)面為例，設(shè)計(jì)團(tuán)隊(duì)將垂直排布的導(dǎo)航置于屏幕右上角，為了保證這一部分的正常顯示，有目的地讓背景的幻燈片每一張都盡量使用淺色，確保對(duì)比度。

而Trihorf 這個(gè)頁(yè)面的設(shè)計(jì)則采用了更加穩(wěn)妥的設(shè)計(jì)，頁(yè)面中垂直導(dǎo)航作為整個(gè)頁(yè)面的心臟而存在，用戶的注意力只會(huì)被導(dǎo)航所吸引。整個(gè)頁(yè)面設(shè)計(jì)得足夠整潔干脆，微妙又如何目前的商業(yè)氛圍。

結(jié)語(yǔ)

細(xì)節(jié)決定成敗，作為網(wǎng)站的必須的組成部分，菜單和導(dǎo)航總能夠很好的體現(xiàn)網(wǎng)站的設(shè)計(jì)美學(xué)，出人意表又合乎情理的設(shè)計(jì)無(wú)疑能夠強(qiáng)化用戶體驗(yàn)。這四種類型的設(shè)計(jì)并不復(fù)雜，但是能夠給用戶帶來(lái)不一樣的體驗(yàn)，根據(jù)你的需求，酌情使用吧。