創(chuàng)新設(shè)計(jì)導(dǎo)航增強(qiáng)用戶體驗(yàn)的6種方式

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

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

菜單無論采用哪種形式，都為導(dǎo)航提供路標(biāo)。它告訴用戶他們?cè)诰W(wǎng)站上的位置以及如何到達(dá)其他地方。

約翰·加爾

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

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

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

遺憾的是，由于桌面行為被屏幕頂部的上一個(gè)，下一個(gè)和索引按鈕所取代，因此在移動(dòng)設(shè)備上有點(diǎn)令人失望。令人失望的是，桌面行為在移動(dòng)設(shè)備上可以很好地運(yùn)行。

這種剝離式的樣式很難完全拉開，因?yàn)樗耆Q于作品的質(zhì)量。如果要使用這種方法，請(qǐng)確保所呈現(xiàn)的作品質(zhì)量最高。

約旦撒種

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

至少就用戶所知，移動(dòng)設(shè)備上的行為是相同的，這很高興看到。

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

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

開放大陸

Open Continents收集了來自世界各地的短片，并且緩慢旋轉(zhuǎn)的地球構(gòu)成了導(dǎo)航的基礎(chǔ)。左上方的圖標(biāo)可在Globe導(dǎo)航和簡單的水平鏈接列表之間切換視圖。

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

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

移動(dòng)版本不使用旋轉(zhuǎn)地球儀，而是使用（這是垂直的）故事列表進(jìn)行滾動(dòng)和選擇。

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

Glamuzina建筑師

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

由于整個(gè)頁面都是菜單，因此無需在移動(dòng)設(shè)備上訴諸漢堡菜單。盡管在布局上存在一些必要的差異，但移動(dòng)體驗(yàn)在視覺上與臺(tái)式機(jī)一致。

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

到處都有導(dǎo)航的混亂感，瀏覽不同的項(xiàng)目很容易迷失方向。不過，這并不是真正的問題，因?yàn)槊總€(gè)頁面都有指向其父部分頁面和主頁的鏈接。

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

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

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

負(fù)責(zé)任的導(dǎo)航

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

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

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

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

在移動(dòng)設(shè)備上，使用了漢堡菜單圖標(biāo)，但在這種情況下，它實(shí)際上符合整體視覺樣式。 

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

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

薩格邁斯特與沃爾什

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

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

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

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

結(jié)論

導(dǎo)航是站點(diǎn)UX不可或缺的一部分，因?yàn)閷?dǎo)航的創(chuàng)建為用戶的體驗(yàn)創(chuàng)建了框架。導(dǎo)航應(yīng)根據(jù)網(wǎng)站的目的，以邏輯或敘述的方式引導(dǎo)用戶瀏覽內(nèi)容。

網(wǎng)站設(shè)計(jì)制作的站點(diǎn)已經(jīng)不僅僅是“單擊此處獲取x”，而且還嘗試為用戶創(chuàng)造令人愉悅，令人難忘的體驗(yàn)。好的導(dǎo)航并不引人注目，好的導(dǎo)航可以創(chuàng)造令人難忘的用戶體驗(yàn)。