良好的導航是網(wǎng)站設(shè)計有效的基石

垂直視差的背景與影響滾動導航

在?耐克?頁，效果是明顯的，當用戶滾動頁面垂直。?背景圖片看起來重疊，因為如果他們在甲板上堆放的幻燈片。?這種效果是特別強大的時候，你圈點擊該網(wǎng)站右側(cè)的面積。?注意水平和垂直虛線線，頁面顯示為您滾動。?他們生動地Connect網(wǎng)站部分，并幫助建立一個更加一致的用戶體驗。

這里的一個缺點是導航的導航控制是非常微妙。?事實上，在這許多網(wǎng)站使用這種技術(shù)，強勁的重點是富有的，這使得它更具挑戰(zhàn)性的一點實際的導航找到詳細的插圖。?在這個例子中，感知上的導航右側(cè)的圓點，而不是當成設(shè)計可能需要一段時間的一部分。?盡管如此，一個非常獨特的，令人難忘的設(shè)計。

羅索Carmilla

動畫水平視差

水平滾動的視差動畫

羅索Carmilla?特點是滾動導航有趣的轉(zhuǎn)折和視差的組合效應(yīng)。?設(shè)計者采用了水平，而不是垂直方向，與在頂部經(jīng)典的導航菜單。?隨著對視覺元素的用戶停留，他們似乎移動，創(chuàng)造深度錯覺。?有限的色彩和原創(chuàng)插畫作品非常好，動畫，創(chuàng)造一個難忘的經(jīng)歷。?微妙的動畫可見只有在內(nèi)容區(qū)域用戶懸停。

這個想法是非常有趣的，執(zhí)行是做得相當好。?然而，更大的字體大小和一節(jié)之間的平穩(wěn)過渡額外導航控制可以提高網(wǎng)站的整體可用性：水平滾動頁面的底部欄是不容易察覺，是不是很舒適的使用。

田納西州的滑雪道和小道探索

水平滾動導航，澄清。

水平滾動的動畫，并澄清與視差導航

田納西州的滑雪道和小道探索?納入“線索查看器”為他們的用戶導航。?該網(wǎng)站的設(shè)計者使用水平視差的動畫滾動導航與一個同樣的想法的，但他們決定首先向用戶解釋如何使用該網(wǎng)站的導航。?通常，這不是一個導航注冊一個有效的，但它工作在這個例子非常好，尤其是整體設(shè)計顯得十分新穎，活潑和實驗反正用戶。?在技術(shù)的案件，特別是不常見或創(chuàng)新的設(shè)計，該指令種可能是必要的模式，直到用戶理解范式的新的導航。

當一個用戶點擊圖標拖車，進一步的相關(guān)詳細信息顯示在一個燈箱。?還要注意如何在“地圖”與拖車右側(cè)移動，當用戶使用的主要“線索查看器”導航。?其他有趣的網(wǎng)站上的導航菜單是在頁面底部顯示一個，當用戶選擇一個區(qū)域，中學選項在菜單顯示在右側(cè)，這個選擇只要不改變用戶的鼠標。?這種導航菜單也非常不錯，整體綜合網(wǎng)站的設(shè)計。

Siebennull

'混亂的辦公桌，符合視差

采取一種獨特的和原始的'凌亂辦公桌風格

引人注目的是原始的，?Siebennull?功能a'cluttered辦公桌風格的木制的主題，以及一個三維的感覺頁面提供現(xiàn)實的一部分陰影和其他圖形和全部分由視差效果，這是適用的。?整體效果感到非?；ヂ?lián)，沒有太多的混亂。

一個使用動畫背景的陷阱，然而，就是背景不一定仍持有，而用戶正在查看詳細的東西無論是在模型箱，或一個簡單的放大中。這可以使之更難以閱讀大量文本塊。?該頁面不覺得有點難以集中，由于強大的視差效應(yīng)。?這可能是一個視差效應(yīng)的例子是使用過于強烈，從而惡化導航的目的。

評書

這是常見的做法是保持盡可能簡單和直觀的設(shè)計，使它非常方便用戶從一個網(wǎng)頁點擊到下一個，幾乎是盲目地- “不要讓用戶覺得”是規(guī)則。?但是，您可以參與網(wǎng)站的用戶，以及對你的，讓他們思考正在發(fā)生的事情在頁面中，涉及他們在更深的層次上的經(jīng)驗。?例如，你可以采用講故事來?增加接觸?或互動的網(wǎng)站，告訴你一個故事，你的用戶希望的追求。

一個辦法讓訪問者參與感是把該網(wǎng)站的互動旅程。?當用戶與頁面交互，他們可以學習的東西前進的道路上，正由創(chuàng)意和網(wǎng)站的不確定性感到困惑。?這種技術(shù)可能是最適合的促銷目標網(wǎng)頁，而不是內(nèi)容為主的網(wǎng)站。?如果一個有趣的故事和有趣的，也許非傳統(tǒng)的方式呈現(xiàn)，這將捕捉用戶的注意力，encourange他們繼續(xù)通過您的網(wǎng)站的行動呼吁。?一個這種類型的航行幾個例子強調(diào)了以下的罰款。

本保鏢

敘述一個登陸頁面

一個令人興奮的用戶體驗，創(chuàng)建用戶的參與和效果與設(shè)計

的設(shè)計者?本保鏢?到達網(wǎng)頁已選擇了一個非常難忘的主角比喻。?而不是提出一個描述即將到來的服務(wù)的通用頁“即將推出”，該網(wǎng)站有效地講述了一個故事。?該網(wǎng)頁的主要口號是“一個法國人保護你的秘密。?是的，認真對待?！敖酉聛磉@句話，一個工具的描述，提出了?微妙的?。?神秘的字符顯示在后臺，但它很好地捕捉用戶的注意力和興趣。

實際的頁面有趣的部分發(fā)生在你慢慢地滾動頁面。?如果你留意插圖和閱讀所有的細節(jié)介紹，你可以看一個故事展開。?雖然敘述者走在街上，他給你一些解釋，但只夠提高你的興趣。?當你不斷滾動，故事達到高潮，有突出的號召性動作按鈕結(jié)束。?請注意，反應(yīng)靈敏，設(shè)計插圖調(diào)整到用戶的視口。?從總體上看，它不是典型的導航，但它不是一個傳統(tǒng)的網(wǎng)站之一。?本保鏢是一個了不起的網(wǎng)站和講故事的作品相當不錯，在這方面的宣傳作品。?這就是為什么該網(wǎng)站已收到這么多的關(guān)注時，它最初發(fā)布的原因。

Youzee

平滑，溫和的講故事

平滑，溫和的視差動畫

Youzee?講故事的另一個例子是一個平滑，垂直單頁滾動導航的員工。?該網(wǎng)頁有頂部的主通航，但它沒有鏈接到單獨的頁面，而是這一小節(jié)中加載的。?事實上，每節(jié)片整齊，用動畫位，但不足以使用戶頭暈?zāi)垦！?/span>

仔細注意如何用講故事的設(shè)計師參與故事的用戶和參與有關(guān)的工具學習。?本對面的保鏢，在設(shè)計上并不過分依賴一個字符，而是使用比較熟悉，現(xiàn)有的比喻來展開故事。?在頂部的主要領(lǐng)域是不是說什么服務(wù)是有關(guān)的;用戶學習一路走來，它作為他滾動頁面。?還要注意如何使用好設(shè)計師“打開”比喻為在頁面頂部的按鈕，它看起來好像要被點擊并適當?shù)鼗貞?yīng)一個點擊。?干得好，伙計們，干得不錯。

滾動導航

審判和真實的，滾動的導航是一個簡單而優(yōu)雅的方式來引導用戶通過您的內(nèi)容。?許多設(shè)計人員正在試驗用滾動的單頁設(shè)計可容納在一張紙上，而不是分散在多個頁面，將它分裝在一個網(wǎng)站的全部信息導航。?可用性研究，以確定是否需要這種導航模式是一個典型的多有效，這將是第一個沒有驗證其實用性錯將它應(yīng)用到環(huán)境。?使你的滾動導航獨特的一些方法如下。

波爾卡特

回的基本知識

簡單固體滾動導航

波爾卡特?是一個滾動的導航網(wǎng)站還不錯的單頁的一個例子。?右上角導航上主要是極少，純文字差不多，但它運作良好，因為它并不像它的清晰可用，使用戶感覺他們確切地知道他們在哪里。?獨特的插圖和吸引力。?當你第一次訪問該頁面的，你可能會感到不知所措了你們許多投擲項目的信息，但這種感覺就會消失后不久，該網(wǎng)站更詳細的探討。

當一個導航項目被點擊后，頁面順利滾動到頁面的選擇部分。?有趣的是，該網(wǎng)頁的各個部分都分得很清楚使用獨特的背景顏色，因此用戶總是知道究竟在何處一節(jié)開始，并在那里結(jié)束。?此外，每節(jié)生動地說明了，留下一個持久的和令人難忘的印象。它具有比同類網(wǎng)站當中又有一個投資組合的網(wǎng)站更有趣，引人入勝的設(shè)計。

主要缺點：乍一看，這不是很清楚哪些元素是可以點擊和如何導航工程，可在第一有點混亂。

Cornerd

簡單的垂直滾動導航

簡單的垂直滾動導航

很喜歡波爾卡特，?Cornerd?功能糖果大量的說明眼。?怪物的主題是工作非常好，細微的怪物眼球運動創(chuàng)造一個溫馨，有趣的氛圍。?設(shè)計師丹尼斯錢德勒沒有考慮自己太當回事，這正是在網(wǎng)站上調(diào)用移情和同情，從而更容易開展工作信任設(shè)計師的能力產(chǎn)生吸引力和吸引力。

在頁面的theop工作，而是一個固定的導航的部分可能真正有助于建立長期投資組合的部分更象一節(jié)，尤其是在一個意義上的自由。?相反的是，用戶只提供了選擇遷回?了?。

好奇發(fā)電集團

與一捻單頁滾動

與一捻單頁滾動

雖然清潔和有組織的，?好奇的發(fā)電集團?感到有點意外其豐富多彩的形狀圓。?一個簡單的在頂部的靜態(tài)導航欄是微妙和播放以及與本網(wǎng)站的整體設(shè)計。?有時，一個固定的導航欄可以感覺到笨重和分心，但是這一個感覺，其透明度光線和通風。?內(nèi)容定位的行之有效的滾動動畫的網(wǎng)站，并做了很好的工作，通過領(lǐng)先的眼睛。?請注意，所有單領(lǐng)域相互關(guān)聯(lián)的：每個區(qū)域，有一個側(cè)邊欄導航顯示進一步的導航選項。?一個非常生動，豐富多彩，令人難忘的設(shè)計。

埃里克約翰遜

騎在摩托車

騎摩托車，具有視差動畫

埃里克約翰遜?做了用戶對夫婦的事情，使探索為他的網(wǎng)站感興趣。?該網(wǎng)頁提供了導航微妙的線索就如何使用而且也是一個水平）滾動條（種內(nèi)出現(xiàn)的頁面的上下文。?這是一個小的差異，有一個滾動瀏覽器窗口的滾動條本身不是使用幾個像素以上的底部，但它提供幾乎足以區(qū)分的明確表示，用戶應(yīng)該單擊并拖動。

隨著用戶滾動頁面，他們需要尋求箭出并處理需要點擊導航顯示，以便進行進一步的設(shè)置的人。?Eric是玩的用戶，所以沒有辦法在一個非常獨特。?用戶不舒服的感覺它不過是提供了選項，?查看擴展與“正?！钡木W(wǎng)站?。?頁面上的圖像上可以改進一下，使設(shè)計看上去有點現(xiàn)實，但也許這是設(shè)計這個目的的方法上。?但是，這將是巨大的，如果用戶可以滾動（見頁頁，而不必使用集成滾動欄上底部的?水平滾動頁面使用鼠標滾輪?）。

鬧鬼Cathouse

垂直滾動導航圖形與故事書

垂直滾動導航與插圖故事書

鬧鬼Cathouse?是一個又一個，很詳細，很說明網(wǎng)頁，打破了該網(wǎng)頁板塊之間的流動插圖顯示了獨特的一頁。?當用戶滾動垂直，他可以看到當前節(jié)，跳轉(zhuǎn)到上一個或下一個。

就在右下角的小貓頭鷹為您服務(wù)點擊顯示在導航欄幻燈片不管你是在網(wǎng)站上，一個較好的指標但游客可節(jié)省一些時間。?雖然一些用戶可能會高興地開始了他們的鼠標滾動才能到內(nèi)容，在此特別設(shè)計的，它可能是有用的，提供多種選擇。?頂級導航欄還提供了一種方法來突出一種什么樣的內(nèi)容用戶可以期望找到以下。

山姆網(wǎng)站

在水平滾動水平滾動

在橫向水平滾動滾動嵌套

山姆Web的?水平滾動板，而一個相當經(jīng)典的導航模 ??型，都是非常干凈執(zhí)行。?這也不錯，有些路段幻燈片水平，而聯(lián)系人鏈接滾動至底部，因為該元素是目前全球。

有趣的是這里的嵌套組合頁面上的水平滾動條。?由于滾動在面積為主要內(nèi)容的方向相同，但并非由相同的導航控制，它具有一些潛在的來迷惑用戶。?左，右箭頭是視覺的東西是不同的指標，這個部分，但它也可能會受益于一個滾輪稍有不同的，或者使用一些其他的交互瀏覽該內(nèi)容。?這是一個棘手的事情，找到一個漂亮的方式來增加導航subcontent一些互動導航排序已經(jīng)在里面。

丹尼的餐廳

太多太多東西是對你不好

水平和垂直滾動組合

設(shè)計師的?丹尼餐館?可能超越搜索內(nèi)容時，一種方式，以容納了許多。?滾動組合的橫向和縱向比較迷惑不僅僅是幫忙。?沒有家的小屏幕上的提示，用戶甚至可能錯過的內(nèi)容只有通過額外到達垂直滾動。?其他內(nèi)容是隱藏在滑塊，它似乎很容易迷路。?除了 ??是混亂的，該網(wǎng)站是不是很友好的移動用戶，希望找到一個令或去餐廳的。?該網(wǎng)站上創(chuàng)建一個感覺可能“流體內(nèi)容”這是一個有點難以把握和焦點，因為一切正，一切是互動的，一切正在發(fā)生變化。?該設(shè)計可以用多一點平靜。

實驗導航菜單

看來，設(shè)計師往往感到經(jīng)典導航模式和發(fā)明新的方法或航行只需要添加一個新的轉(zhuǎn)折方便的設(shè)計模式深刻的印象一點。?這些網(wǎng)站的特色低于目前的一些有趣的方式導航。

兇猛季刊

非傳統(tǒng)的標簽越多

有趣的插圖

兇猛季度的?網(wǎng)站在標簽的上半部分是一個普通的小出來的。?單事實上，他們以不同的方式呈現(xiàn)，創(chuàng)造一個深度錯覺，使設(shè)計突出了一下。?一個很好的例子更有趣的一個小細節(jié)，如何能作出否則很引人注意的設(shè)計看起來有點。

該死Alors

彈出最佳躁狂癥在其?[警告：?一五秒鐘可能導致頭痛！?]

前面和中心標簽導航

總體而言，?承擔浙江工業(yè)ALORS！?是非常前衛(wèi)，非常阿旺非傳統(tǒng)。?大前沿和中心信函是唯一的網(wǎng)頁內(nèi)容，他們導航。?每個字母彈出打開的網(wǎng)頁內(nèi)容安排一系列徹底隨后彈出的UPS。

雖然這種方法是獨一無二的，必將脫穎而出，它也將阻止普通用戶。?短，目標網(wǎng)頁上的簡單的聲明是不是很豐富，使用戶感到困惑。?在彈出的二級頁面可能會適得其反，但：如果用戶有很多的窗戶打開，在新開的并不一定是主要的焦點，這可能使設(shè)計混亂。?雖然它有可能那是擺在首位設(shè)計師的意圖。?一個很奇怪，嘈雜，非常令人難忘的設(shè)計。?請不要在家里嘗試。

方法設(shè)計實驗室

截至最新消息

圖形均衡器選擇

方法設(shè)計實驗室的?菜單跟隨他們的飼料是獨一無二的。?繼其網(wǎng)站上的活動是由簡單的圖形均衡器一樣的角落，在歷史上的右手。?在一個小時的點擊帶來的所有職位，媒體發(fā)布和小時鳴叫過去。?區(qū)分不同類型之間很容易，因為每個被分配一個特定的顏色。?新聞點擊一個泡沫持久性有機污染物之一，打開一個消息窗口與實際。?無論是理念和實施是非常清爽，不會過度緊張的旅客耐心。

Web標準夏爾巴

通過內(nèi)容跳繩

簡潔易用 - 只要內(nèi)容是有限的

Web標準夏爾巴人?基本上沒有出現(xiàn)太大的導航。?提出了基于內(nèi)容的幻燈片，可以跳過通過。?箭頭清楚地表明了之前和之后的文章。?雖然它仍然是通過文章管理跳過不到十個，這個導航型是沒有更大的使用一旦超過二十篇的看法注冊。?該功能鏈接發(fā)表的所有文章的列表，以及搜索借此照顧。?一個更深層次的網(wǎng)站進入，水平導航僅包含三個選項清楚他們的下落，大約不留黑暗中的一個。

BonLook

畫報下拉菜單

提供選擇的形狀使用象形圖

BonLook?功能下拉菜單很好的例子說明了一個清潔，簡單的輟學。?選擇品牌眼鏡的形狀，而不是使產(chǎn)品目錄瀏覽器更容易任何客戶的。?一般而言，使用上下文菜單中的圖標，幫助客戶簡化方向找到他們所期待的。

計算機智能設(shè)計

右側(cè)動態(tài)導航標簽

右側(cè)導航改變其外觀

球員在該?設(shè)計計算機智能?目前在其投資組合的右側(cè)標簽導航網(wǎng)站與風格。?有趣的是，導航圖標滾動時更改外觀到各自的范圍內(nèi)部分小頁面，取代原來的菜單與文字。?一個圖標點擊帶來的用戶返回到每個部分的頂部，給他們一個快速提示該圖標的風格是一個簡單的內(nèi)容部分小版本的主菜單，子菜單不具體的。

一般來說一個很好的和直觀的菜單風格值得適應(yīng)和容易地擴展到涵蓋內(nèi)容小節(jié)。

伯納特Fortet Unanue

一個創(chuàng)意和有趣的方式介紹你的工作

清晰明確的菜單設(shè)計和有趣

Fortet?功能的按鈕圓形的導航22類工作的形式。?完整菜單再次出現(xiàn)在頁末的每一個，使網(wǎng)站易于瀏覽。?即使是很密集的空間，用戶已經(jīng)習慣了它的外觀并確認訪問類別。?另一個例子說明一個明確的視覺作出積極貢獻的外觀和感覺的網(wǎng)站。

尕，尕

與翻車職稱直觀，清晰圖標

直截了當導航

在?尕-尕?是結(jié)構(gòu)簡單和流暢。?菜單只包括七類，每間均設(shè)有一個單獨的層。?只有減：水平滾動條很容易被誤認為是布局的一部分，而不是被確認為滾輪。?添加鼠標經(jīng)過效果可能會解決這個問題。?一個簡單的導航網(wǎng)站與清潔，容易-你肯定不會迷路了。

Bluecadet互動

清潔子

讓用戶選擇的類別

Bluecadet?樹立了一個子菜單的例子在實施為主的干凈版本的圖形。?該設(shè)計采用了側(cè)滑塊的權(quán)利;為用戶瀏覽滑塊的項目，背景圖像的變化，以及。?一旦導航項在選定后，頁面顯示上一個和下一個項目，以及提供了一個鏈接，回到主菜單。?此外，用戶可以親自檢查所顯示的類別。

達尼洛Iurlaro

創(chuàng)意動畫效果

創(chuàng)意動畫效果

達尼洛Iurlaro?具有創(chuàng)造性地使用動畫效果的滾動，當然它在人群中脫穎而出。?然而，文本從跳下只要點擊頂部導航項目是真正惱人的分心。?首先，它給人的印象是，這個文本是網(wǎng)頁的標題，不只是一個過渡性的圖形，這實際上并非如此。?讓用戶手動向下滾動，以查看大航區(qū)的實際內(nèi)容是這樣一個相當大的挑戰(zhàn)。

當使用新的導航技術(shù)，許多用戶可能不熟悉，它是真正重要的是利用清晰的標簽，以幫助他們找到他們的方式通過該網(wǎng)站。

幻想制圖

的導航地圖

的導航地圖

幻想制圖?是一個網(wǎng)站展示的地圖導航，本身就是仿照地圖。?而內(nèi)容部分基本上都是采取滾動導航，組織和選擇布局的導航是不尋常。?該網(wǎng)站還插圖充滿'軟的影響，這與配合得很好。

清除視覺指示使用鏈接相關(guān)的對應(yīng)點的顯示的內(nèi)容與活動標簽。?標簽是在非典型導航局勢的關(guān)鍵。

C＆C的咖啡公司

迷人的動畫

簡單，有趣，更可以增加動畫從它分心導航

導航上的?C＆C的咖啡公司?是一個導航的例子就是最小的動畫，簡單，雖然是動態(tài)的，并不強制用戶本身上。?動態(tài)導航元素很好地適應(yīng)到頁面的整體設(shè)計，其中還包含其他的“手寫”分子，給啤酒廠一個更個性化，友好的觸摸。?不過，有一次看到了動畫，可足以使一些游客。

面包屑

一氧化氮合酶

上下文敏感的面包屑

互動式面包屑

在這個例子中的導航頂層很簡單，但很聰明。?NOS的?顯示子類別的被點擊右側(cè)每個頂層類時，面包屑，幾乎像一個。?這是一個非常有趣的需要和良好的方式來處理網(wǎng)站與很多類別的大而重內(nèi)容。?它很適合在博客格式，其中一類很多不同的新可能是人來人往不斷。

MDM的銀行

持續(xù)面包屑

持續(xù)面包屑