網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計發(fā)布者：本站     時(shí)間：2021-12-24 12:12:08

每個(gè)網(wǎng)站有屬于自己的個(gè)性——它能反射出背后的個(gè)人或者團隊。如何做到讓自己的網(wǎng)站顯得與眾不同、卓爾不群，讓用戶(hù)流連忘返或者立馬下單?

為了讓你的網(wǎng)站脫穎而出，不僅需要有豐富的高質(zhì)量?jì)热?，同時(shí)也要兼顧網(wǎng)站的創(chuàng )新性和功能性。從用戶(hù)的角度出發(fā)好好想一下，怎樣讓你的網(wǎng)站用戶(hù)體驗更友好?簡(jiǎn)單的搜索功能是需要的，或者你也可以精心設計一下網(wǎng)站的導航。同時(shí)，要注意保持整個(gè)網(wǎng)站設計語(yǔ)言的一致性。在這個(gè)html5狂潮涌進(jìn)的時(shí)代，誕生了很多優(yōu)秀的網(wǎng)頁(yè)設計作品，他們都有卓越的導航設計，接下來(lái)整理的這些網(wǎng)站將喚起你關(guān)于導航的極限創(chuàng )意，快來(lái)親自體驗下吧!

Toybox

在需要的時(shí)候導航欄應該一直在那里，而當用戶(hù)想要專(zhuān)注于某個(gè)特定的任務(wù)時(shí)，導航欄則應該優(yōu)雅的隱藏起來(lái)。比如說(shuō)，在設計一個(gè)網(wǎng)上商店的出納頁(yè)面時(shí)，網(wǎng)站的導航應該可以隨時(shí)都易于使用，但同時(shí)也要注意突出像出納表單和按鈕控件之類(lèi)的鮮明功能。Toybox的導航設計就恰好滿(mǎn)足了這些。

如下圖示，這個(gè)側邊導航給人的感覺(jué)就像是你在窺視頁(yè)面背后或者是掀開(kāi)了一個(gè)玩具盒的蓋子看看里面到底有些什么。這個(gè)側邊導航非常方便使用，鼠標懸停在瀏覽器左側即可出現，主體部分即時(shí)出現的旋轉效果也很帶感，可以很好的引導用戶(hù)的注意力。將導航隱藏起來(lái)同時(shí)也實(shí)現了界面的簡(jiǎn)潔，使網(wǎng)站的瀏覽體驗非常的愉悅，因為網(wǎng)站并沒(méi)有留下太多無(wú)用的信息去分散用戶(hù)的注意力。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

至于其他你想知道的信息，比如說(shuō)Toybox公司的主營(yíng)業(yè)務(wù)和地址，可以在頂部的一個(gè)直接呈現的導航欄里找到。首頁(yè)的磁貼鼠標hover效果也非常的有趣，當鼠標懸停于某個(gè)項目的縮略圖時(shí)，其余的項目縮略圖都后退變暗并且產(chǎn)生景深的效果。

Olivier Bossel

交互設計師Olivier Bossel的個(gè)人作品博客非常有趣。該網(wǎng)站的導航元素在鼠標hover狀態(tài)下會(huì )產(chǎn)生像素爆炸式的效果(譯者注：火狐瀏覽器測試通過(guò)，chrome測試無(wú)效果)。這個(gè)效果相對于網(wǎng)站其余的簡(jiǎn)潔設計來(lái)說(shuō)非常有動(dòng)感，由此產(chǎn)生強烈的對比效果。作為一個(gè)視覺(jué)元素它非常有效的促進(jìn)了用戶(hù)繼續閱讀該網(wǎng)站，統一的視覺(jué)語(yǔ)言也彰顯了品牌的特點(diǎn)。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

Tsto

Tsto是一家有著(zhù)簡(jiǎn)單而創(chuàng )新的設計方法的設計機構，它的導航設計出乎我們的意料。屏幕的四個(gè)角都固定著(zhù)一個(gè)導航元素，以框架的形式讓作品展示出來(lái)。視覺(jué)識別元素是由大粗的品紅色字體來(lái)體現。網(wǎng)站的層級結構非常清晰，”Work”標簽在左上角，”Contact”和”About”標簽則分布在底部。為了保持風(fēng)格的一致性，作品的標題也同樣采用了大粗的品紅色字體。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

當用戶(hù)瀏覽案例作品的時(shí)候，這些作品以幻燈片的形式展示出來(lái)，當鼠標懸停在箭頭上的時(shí)候會(huì )出現下一個(gè)作品的預覽圖。案例展示圖很大，占據了頁(yè)面的大部分空間。當用戶(hù)瀏覽這些大圖的時(shí)候，就能對Tsto的公司形象和作品有深入的了解。

Derek Boateng

Derek Boateng的作品集網(wǎng)站在頁(yè)面加載完成后用一個(gè)禮貌的”Hi”來(lái)問(wèn)候訪(fǎng)客，并且有一個(gè)向下的箭頭指引訪(fǎng)客鼠標向下滾動(dòng)。頁(yè)面的總體設計非常低調，它并沒(méi)有對用戶(hù)吼叫，而是優(yōu)雅的引導用戶(hù)去查看作品。當頁(yè)面滾動(dòng)到歡迎界面以下時(shí)，網(wǎng)站的頭部和導航欄開(kāi)始收縮，讓用戶(hù)能有更大的空間去查看作品。這個(gè)網(wǎng)站是導航清晰易用，主要內容得到充分體現的好例子。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

Second Story

擦，流碧的橫向滾動(dòng)!Second Story的網(wǎng)站工作起來(lái)像一個(gè)平板上的雜志app。它的革新之處在于它給人的感覺(jué)并不是一個(gè)典型的網(wǎng)站頁(yè)面，它是水平滾動(dòng)的。內容以分欄的形式布局，每一欄內容則垂直滾動(dòng)。導航欄固定在左側，這有利于控制網(wǎng)站的結構。在你查看作品詳情的的時(shí)候，左側的導航欄最小化，鼠標懸停再次放大。對于作品集的瀏覽用戶(hù)可以選擇列表形式和幻燈形式。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

Mostly Serious

正如它的名字所暗示的那樣，Mostly Serious有它好玩的地方。打開(kāi)網(wǎng)站迎接你的是搖擺飄浮的氣球，而這些氣球正是該網(wǎng)站導航。友好細膩的動(dòng)畫(huà)配上豐富的色彩建立了網(wǎng)站品牌的基調。進(jìn)入子頁(yè)面以后，通過(guò)右上角的圖標你可以隨時(shí)回到主頁(yè) ，頁(yè)面底部同時(shí)出現一個(gè)次級導航。這個(gè)網(wǎng)站功能性很強，符合頁(yè)面交互靈動(dòng)的特征。事實(shí)上，這個(gè)網(wǎng)站讓我想起了過(guò)去美好的日子里絢麗的flash動(dòng)畫(huà)(EYE4U，還有嗎?)。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

Minimal Monkey

在如此簡(jiǎn)約大方的頁(yè)面中滾動(dòng)瀏覽文章標題列表，讓我感覺(jué)自己在使用一個(gè)書(shū)架(不信你試試看)。每一本的鼠標懸停效果都將一本書(shū)籍獨立出來(lái)使用戶(hù)可以更加專(zhuān)注。網(wǎng)站對于”About”和”Contact”部分的設計也匠心獨運：當你點(diǎn)擊其中一個(gè)標簽的時(shí)候，會(huì )出現一個(gè)下拉的頁(yè)面來(lái)顯示信息。這是一個(gè)減少頁(yè)面跳轉的簡(jiǎn)單方法。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

然而，要查看往期的文章并不簡(jiǎn)單，因為網(wǎng)站沒(méi)有搜索功能。當用戶(hù)要找特定的一篇文章時(shí)，他必須要一直滾動(dòng)下去才能找到。這時(shí)候搜索功能在不破壞總體設計的前提下顯得非常有用。

LayerVault

通過(guò)這個(gè)網(wǎng)站我們可以看到，一個(gè)簡(jiǎn)單干凈的布局，加上好玩的色彩以及有趣的動(dòng)畫(huà)，能帶來(lái)如此驚人的效果!LayerVault這個(gè)網(wǎng)站平衡了留白和微妙的動(dòng)畫(huà)來(lái)吸引它的用戶(hù)。動(dòng)畫(huà)可以用來(lái)闡明一個(gè)觀(guān)點(diǎn)，引導用戶(hù)瀏覽整個(gè)網(wǎng)站，甚至給出使用指南。雖然動(dòng)畫(huà)并不總是起到這些作用，然而LayerVault恰如其分的使用了它，只有當用戶(hù)瀏覽到頁(yè)面的一個(gè)特定區域的時(shí)候才會(huì )出現這些動(dòng)畫(huà)。結果怎樣呢?一個(gè)布局優(yōu)雅的頁(yè)面配上優(yōu)美的注解!

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

Escape Flight

Escape Flight設計得非常精妙!新頁(yè)面的loading動(dòng)畫(huà)中，logo中火箭的火焰尾氣動(dòng)態(tài)效果非常好，顯得新穎時(shí)尚。導航欄固定在頂部，就像一個(gè)即將啟程的港口或者甲板，就好像你已經(jīng)來(lái)到了飛機場(chǎng)。下拉菜單看起來(lái)就像是一張旅行清單，和主題很搭。當你選擇了一個(gè)地點(diǎn)后，鼠標往下滾，所有重要的信息都會(huì )固定在頂部，對于旅行者來(lái)說(shuō)這樣使用起來(lái)會(huì )更簡(jiǎn)便舒適。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

網(wǎng)站充分的利用了漂亮的攝影圖片，Escape Flight使圖片全屏顯示，或許這正是你從一個(gè)旅行類(lèi)網(wǎng)站想要得到的。它讓你略微感受到即將到來(lái)的旅程，并且優(yōu)雅的展示出目的地的美景。當你鼠標懸停在某個(gè)地點(diǎn)的縮略圖上方時(shí)，你將發(fā)現所有你想要知道的：票價(jià)、天氣狀況、航班時(shí)間以及旅行時(shí)長(cháng)。你還想知道更多嗎?

aSCIIaRENa

這個(gè)網(wǎng)站無(wú)需多言，黑客專(zhuān)屬。極致的導航，內容區域任你怎么堆砌。只要你有一顆黑客的新，你會(huì )發(fā)現它的美。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

The Sartorialst

照片是這個(gè)網(wǎng)站的中心，整個(gè)網(wǎng)站的設計顯得很自然。更重要的是，網(wǎng)站照片的hover效果做得非常之優(yōu)雅，每張照片的標題隨著(zhù)光標從邊上滑入滑出，美觀(guān)流暢。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

SilkTricky

SilkTricky 網(wǎng)站背后的工作人員在現實(shí)生活中都很牛X，他們的網(wǎng)站也沒(méi)有讓我們失望。當鼠標移到圖片上的時(shí)候會(huì )產(chǎn)生一個(gè)有趣的效果，磁貼會(huì )改變顏色并且圖片發(fā)生位移。在這個(gè)只有一個(gè)頁(yè)面的網(wǎng)站上，用戶(hù)不需要在多個(gè)頁(yè)面之間點(diǎn)來(lái)點(diǎn)去的跳轉，只需要點(diǎn)擊”View”，然后被選中的磁貼就會(huì )展開(kāi)，同時(shí)其余的磁貼移動(dòng)空出適當的區域。這樣的布局同樣適用于圖片作品集的展示。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

SumAll

SumAll的布局簡(jiǎn)潔，沒(méi)有任何不必要的信息去轉移用戶(hù)的注意力。鼠標hover效果以一個(gè)簡(jiǎn)單的動(dòng)畫(huà)效果展示更多的信息，頁(yè)面過(guò)度效果則是hover效果的一個(gè)擴展。當你點(diǎn)擊一個(gè)按鈕的時(shí)候，簡(jiǎn)介和選項將出現在下面。我非常喜歡這樣的體驗，就是當我點(diǎn)擊一個(gè)選項后沒(méi)有被帶到一個(gè)新的頁(yè)面，而是讓信息整潔的出現在按鈕下方。但這個(gè)網(wǎng)站也有一個(gè)缺點(diǎn)：導航磁貼不是響應式的，在更小的分辨率下磁貼會(huì )有錯位。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

Potluck

如果你是對這個(gè)網(wǎng)站的新穎界面充滿(mǎn)期待的話(huà)那么我要說(shuō)聲抱歉了，它的界面乍看上去很普通，但是Potluck的用戶(hù)體驗做得非常的好。大膽的留白讓用戶(hù)在需要的時(shí)候立即找到自己需要的東西。表單和按鈕有非常清新的設計，讓用戶(hù)很方便的發(fā)現和使用。所有的文本和圖形都是按照引導用戶(hù)瀏覽網(wǎng)站的原則來(lái)布局的。按鈕和圖標配合得非常好，所有的按鈕和輸入表單看起來(lái)有很強的視覺(jué)一致性，并且很吸引人。對于簡(jiǎn)潔頁(yè)面的排版布局以及配色，這是一個(gè)很好的例子!

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

Lowdi

這個(gè)簡(jiǎn)單的響應式布局顯得相當漂亮。Lowdi用線(xiàn)條和形狀來(lái)劃分頁(yè)面的區域，這是一個(gè)很好的方式來(lái)打破傳統四四方方的布局。我喜歡”Order Now”按鈕融入到這個(gè)滿(mǎn)是線(xiàn)條和形狀的設計中的方式。這些元素能很好的適應你的屏幕分辨率，整個(gè)設計也保持了高度的流暢性，使閱讀體驗非常好。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

Barcamp Omaha

Barcamp Omaha是一個(gè)在線(xiàn)邀請別人加入某次活動(dòng)的網(wǎng)站。這個(gè)單頁(yè)非常高效的用統一的視覺(jué)風(fēng)格來(lái)引導用戶(hù)瀏覽網(wǎng)站內容?；顒?dòng)最重要的信息，時(shí)間、地點(diǎn)、事件都放在了頁(yè)面的頭部，但網(wǎng)站的設計讓用戶(hù)有強烈欲望的往下滾，看看還能發(fā)現什么。我非常喜歡twitter和facebook在這個(gè)頁(yè)面中的變體圖標。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

當用戶(hù)往下滾的時(shí)候，通過(guò)大膽的標題設計，更多的信息被系統的呈現出來(lái)，網(wǎng)頁(yè)布局依然很簡(jiǎn)潔整齊。會(huì )議內容的目錄則是以簡(jiǎn)單的動(dòng)畫(huà)來(lái)吸引用戶(hù)的眼球。當用戶(hù)滾動(dòng)到頁(yè)面底部的時(shí)候，聯(lián)系信息出現了，唾手可得。

Combadi

當網(wǎng)站家在完成的一瞬間，這個(gè)網(wǎng)站給人的感受就是非常的穩定、安靜，這是嚴謹設計的結果。雖然沒(méi)有態(tài)度的留白，但網(wǎng)站卻不讓人感覺(jué)壓抑。標簽在鼠標hover的時(shí)候展開(kāi)，展示了更多的信息并且提升了可用性。和其他元素一起，這個(gè)效果傳達了一種通透的、平靜的感覺(jué)。這個(gè)設計也映射瀏覽網(wǎng)站的詞匯，其余元素也組合起來(lái)傳達了連貫和統一的設計風(fēng)格。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

Waller Creek Conservancy: The Final Four

一個(gè)完美的Hover效果不應該只是簡(jiǎn)單的呈現更多的信息，也應該為網(wǎng)站的視覺(jué)體驗做出貢獻。在這個(gè)網(wǎng)站中，當用戶(hù)鼠標懸停在圖片上時(shí)，圖片擴張，并且由灰度照片恢復飽和度成全彩圖片，同時(shí)呈現標題。這個(gè)效果讓我和我的小伙伴們都著(zhù)迷了。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

Lift

在網(wǎng)站中對產(chǎn)品和信息進(jìn)行列表布局的時(shí)候，我們經(jīng)常會(huì )做出一個(gè)靜止的傳統列表頁(yè)。Lift網(wǎng)站的書(shū)本列表則給書(shū)本的hover效果添加了一個(gè)簡(jiǎn)單的3維旋轉動(dòng)畫(huà)。這個(gè)簡(jiǎn)單的視覺(jué)效果讓網(wǎng)站增色不少。給用戶(hù)一種感覺(jué)就是他在和網(wǎng)站交流。你可以從這里獲取這個(gè)3維效果。

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

Snowbird

Snowbird是一個(gè)用戶(hù)交互較多的動(dòng)態(tài)網(wǎng)站。當前的天氣情況被直接展示出來(lái)，當用戶(hù)鼠標懸停的時(shí)候橫向展開(kāi)顯示這一周的天氣預報?！盕ULL REPORT”按鈕的hover效果則是大圓角變小圓角，這種按鈕狀態(tài)的變化很微妙有效，可以直接用css3圓角屬性實(shí)現，在扁平化時(shí)代可以考慮采用。廣告圖片是三角形的，隱喻雪鳥(niǎo)的翅膀，當鼠標懸停的時(shí)候，廣告圖片的另一部分展開(kāi)形成完整的圖片。(譯者注：值得一提的是，頁(yè)面加載中時(shí)網(wǎng)站的logo會(huì )像翅膀一樣折疊展開(kāi)扇動(dòng)著(zhù)，和網(wǎng)頁(yè)里的交互動(dòng)畫(huà)有很好的一致性)

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計,PS教程,

Etch

整個(gè)界面由方塊磁貼緊密排列構成，但卻不顯得擁擠。頂部的導航欄占據了一點(diǎn)空間，但這些圖標都是用于細致的分類(lèi)。當然，你點(diǎn)擊菜單欄也可以隱藏這些圖標。另外，這個(gè)網(wǎng)站也是響應式設計的，不同的分辨率不能影響它的顯示和功能