網(wǎng)站創(chuàng)新導航增強用戶體驗的6種方式

設計導航有兩個方面：如何構造內(nèi)容，以及如何將結構呈現(xiàn)給用戶。顯然，這些不是分開的，并且結構（通常）有助于表示。

導航涉及策展（即使可能已經(jīng)確定了需要包括的內(nèi)容），該內(nèi)容是如何組成，如何相互關聯(lián)以及用戶如何在它們之間移動的內(nèi)容。

菜單無論采用哪種形式，都為導航提供路標。它告訴用戶他們在網(wǎng)站上的位置以及如何到達其他地方。

約翰·加爾

約翰·加爾（ John Gall）可能以其書籍封面設計而聞名，他的網(wǎng)站以此為榮。除了標準菜單外，我們還有“平裝本”網(wǎng)格，每個網(wǎng)格都是可單擊的縮略圖，可打開有關所選項目的信息。帶有他首字母縮寫的縮略圖可打開有關他的信息。

這是一個非常簡單的基本設計，無論在視覺上還是行為上。除了有關每件精選作品的最簡短信息以及外部和社交媒體鏈接之外，它的文字內(nèi)容很少。這個網(wǎng)站是關于工作的全部；如果您需要意見和解釋，那么還有其他地方。

但是，它并不感到冷漠，過于正式或缺乏個性。這樣的導航不會感到困難或晦澀。內(nèi)容就是導航，它給人以動手，身臨其境的感覺。

遺憾的是，由于桌面行為被屏幕頂部的上一個，下一個和索引按鈕所取代，因此在移動設備上有點令人失望。令人失望的是，桌面行為在移動設備上可以很好地運行。

這種剝離式的樣式很難完全拉開，因為它完全取決于作品的質(zhì)量。如果要使用這種方法，請確保所呈現(xiàn)的作品質(zhì)量最高。

約旦撒種

Jordan Sowers的作品集網(wǎng)站是導航工作縮略圖的另一個很好的選擇。在這里，圖像彼此疊加，用戶滾動以移動整個堆棧。單擊任何項目都會打開一個模態(tài)，其中包含更多圖像和一些詳細信息。滾動到最底端會顯示出最簡短的職業(yè)和聯(lián)系信息。

至少就用戶所知，移動設備上的行為是相同的，這很高興看到。

由于每個模態(tài)還包含指向所有其他內(nèi)容模態(tài)的鏈接，以及關閉按鈕，因此所有內(nèi)容都可以在任何地方立即訪問。導航簡單明了，易于使用，但與通常的導航有所不同，使該網(wǎng)站令人難忘。通過模仿輕拂一堆實物投資組合印刷品的動作，不僅可以簡單地單擊按鈕，還可以喚起用戶的參與感。

實際上，網(wǎng)站設計的巧妙之處以及優(yōu)美的執(zhí)行效果，給它所展示的任何作品都留下了深刻的印象。

開放大陸

Open Continents收集了來自世界各地的短片，并且緩慢旋轉的地球構成了導航的基礎。左上方的圖標可在Globe導航和簡單的水平鏈接列表之間切換視圖。

該列表為用戶提供了一個更簡單的過程，但似乎缺乏信心。可訪問性是提供簡化選項的一個很好的理由，但是就可訪問性而言，此處兩者之間幾乎沒有什么區(qū)別。地球下面的指令還表明對導航設計缺乏信心，或者也許是對用戶的情報缺乏信心。

這真令人失望。導航永遠都不應如此晦澀，以至于用戶無法自行解決，但事實并非如此。不需要幫助。動畫地球儀看起來像是要與之互動的。在沒有傳統(tǒng)菜單的情況下，用戶將瀏覽屏幕。

移動版本不使用旋轉地球儀，而是使用（這是垂直的）故事列表進行滾動和選擇。

一方面，在這里使用地球儀似乎很明顯，但是效果很好，而且做得很好。“探索”地球會產(chǎn)生一種聯(lián)系感；土地上可見的光以及地球上空的云層是吸引用戶的迷人細節(jié)。其效果是讓您仿佛置身于故事所在的國家。

Glamuzina建筑師

Glamuzina Architects使用整個主頁作為菜單，其中三個主要部分的鏈接分布在屏幕上。項目主頁列出了特色項目，包括文本鏈接和大縮略圖。

由于整個頁面都是菜單，因此無需在移動設備上訴諸漢堡菜單。盡管在布局上存在一些必要的差異，但移動體驗在視覺上與臺式機一致。

總體而言，這里的體驗很好，菜單也很有趣，并且與網(wǎng)站的整體外觀完美融合。但是，有幾個問題會稍微降低您的注意力。

到處都有導航的混亂感，瀏覽不同的項目很容易迷失方向。不過，這并不是真正的問題，因為每個頁面都有指向其父部分頁面和主頁的鏈接。

更具問題的是，外部鏈接和一些（非菜單）內(nèi)部鏈接會在當前窗口中打開，除了瀏覽器后退按鈕之外，沒有其他返回方法。充其量，這會中斷內(nèi)容流，導致脫節(jié)的體驗，最壞的情況是使用戶離開站點。

用戶可以告訴瀏覽器在新選項卡或窗口中打開鏈接，但實際上他們不必這樣做。

盡管如此，它仍然是一個不錯的網(wǎng)站。點紙背景和等寬字體的使用創(chuàng)造了一種剝離的，骨架的感覺，使作品真正脫穎而出。導航和菜單大膽，以開放而不是線性的方式呈現(xiàn)現(xiàn)代感。

負責任的導航

到目前為止，精選的網(wǎng)站都是用來展示創(chuàng)意作品的，這自然允許甚至要求采用更具創(chuàng)意的方法。那更多的企業(yè)風格網(wǎng)站呢？

為丹麥航運公司創(chuàng)建了“負責任的導航”，以概述其成員為減輕航運業(yè)對環(huán)境的影響所做的工作。因此，它涉及許多事實和數(shù)據(jù)，盡管這些事實和數(shù)據(jù)很重要，但卻可以構成相當干燥的內(nèi)容。

該網(wǎng)站的內(nèi)容被組織成一個頁面，并分為多個部分，并提供了閱讀更多內(nèi)容或案例研究的鏈接。每個部分都可以滾動到菜單或通過菜單訪問。

菜單的視覺提示來自Danish Shipping的徽標，該徽標代表DK的莫爾斯電碼（丹麥的ISO 2字母代碼）。開頭的加載動畫成為菜單，指示現(xiàn)在可以瀏覽該站點了。通過將鼠標懸停在文本上并在向下狀態(tài)下更改顏色，菜單破折號在功能上既清晰又視覺上極少。

在移動設備上，使用了漢堡菜單圖標，但在這種情況下，它實際上符合整體視覺樣式。 

這個網(wǎng)站在組織和展示內(nèi)容方面做得非常好，并且吸引了動畫愛好者。因為動畫主要用于增強導航（定義節(jié)標題并向菜單移動），所以它是有目的的，而不僅僅是裝飾性的。

架構經(jīng)過精心設計，整體感覺井井有條，井井有條，清晰。菜單添加了一個有趣的元素，其動作讓人聯(lián)想到魚在游泳，而該節(jié)的標題動畫類似于波浪。結果，設計達到了同時成為公司和人的通常難以捉摸的效果。

薩格邁斯特與沃爾什

這最后一個不是創(chuàng)新導航的例子，但是它確實令人信服。在大多數(shù)情況下，該站點在粘性頁眉中使用了一個相當沼澤的標準水平菜單，在需要的那些頁面上，第二級菜單在其下方向下滑動。到目前為止，特別是當它更改為在移動設備上顯示為hamburger-icon-opens-to-list的列表時。

主頁上有個有趣/有點古怪和不舒服的地方。Sagmeister＆Walsh辦公室的一部分可以看到外觀和工作情況，例如頂部添加了菜單按鈕。 

如果您在格林尼治標準時間上午9:30首次看到此頁面，則至少是這樣。在美國東部標準時間上午11:30再次查看它，您將意識到那些“按鈕”是發(fā)光的跡象，并且您看到的是真正的人在工作，生活（幾乎）。單擊右側將更改視圖，以顯示辦公室的另一部分，并且在桌面的前部繪制菜單。

高端網(wǎng)站設計，它根本沒有增強導航功能，但令人難忘。坐在電腦前的辦公桌旁看著別人坐在電腦前聽起來很奇怪，但我保證即使5分鐘也能做到。以前的網(wǎng)站都介紹了用戶參與的級別，但這完全在另一個級別上。您實際上是在看著它們工作。