網站(zhàn)開(kāi)發6種實驗性的(de)網頁導航模式

來(lái)源：lexintech.com 發布時(shí)×$間(jiān)：2017-08-17

雖然絕大(dà)多(φ↕γduō)數(shù)的(de)設計(jì)都(‍♥dōu)遵循設計(jì)規則和(hé)用(yòng)戶的∏↑(de)使用(yòng)習(xí)慣，但(÷§ ®dàn)是(shì)标新立異的(de)設計(jì)仍然非常有(yǒu)市(‌•shì)場(chǎng)。獨特的(de)設計(jì)更容易讓人(rén)難忘，α≠這(zhè)一(yī)點是(shì)毋庸置疑的(de)。在網™<頁的(de)導航欄設計(jì)上(shàng)，也(÷©✔yě)是(shì)如(rú)此。随著(zhe)越來(lái)越多(duō) ₩α的(de)網頁開(kāi)始采用(yòng)加粗的(de)非襯線字體(tǐ•Ω× )置于網頁頂部作(zuò)為(wèi)導航，¶↔λ許多(duō)有(yǒu)想法的(de)設計(jì)✘↔₽師(shī)開(kāi)始有(yǒu)意識的(de)打破這(zhè)一(y>αβī)規律，别出機(jī)杼，采用(yòng)不(bù)一(yī)樣的(de)導₩ε♠•航模式。下(xià)面這(zhè)些(x∏β<βiē)獨特的(de)導航設計(jì)應該能(n×♦éng)激發你(nǐ)的(de)靈感。

1、側邊欄導航
&§× 側邊欄導航的(de)設計(jì)多(duō)種 ∑₽÷多(duō)樣，它可(kě)以是(shì•↕)靜(jìng)态的(de)也(yě)可(kě)以是(shì)動态的(de)，♦λ'≈寬度可(kě)大(dà)可(kě)小(xi↓∑ǎo)，幾乎可(kě)以随心所欲地(dì)進行(xíng)設置。

　　但(dàn)是(shì)如(rú)果你(nǐ)仔細審視(shì‍↕ )會(huì)發現(xiàn)，它不(bù)僅僅是(sh∏∏¥αì)單純的(de)将原本的(de)頂部導航旋轉 90 度放(fàng)到¶σγ(dào)側面就(jiù)好(hǎo)了(le)，對(duì)₽∏β于正常的(de)上(shàng)下(xià)滾動的(de)頁面而言，常駐•‌的(de)側邊欄導航意味著(zhe)整個(gè)頁面其他(>€tā)部分(fēn)的(de)長(cháng)寬比和(£∏hé)以往截然不(bù)同了(le)。

　　所以，不(bù)論側邊欄導航的(de)寬窄如(rú☆✘ )何，你(nǐ)都(dōu)需要(yào±←)重新審視(shì)，尤其是(shì)它在不(bù)©←同尺寸、比例的(de)屏幕下(xià)的(de)顯示效果，并且進ε≠行(xíng)合理(lǐ)的(de)重設計(jì)。同時(s♦ hí)，導航中的(de)文(wén)字如(rú)果太長(cháng)，在側邊©₹δ欄中還(hái)存在展示上(shàng)的(de ®¥)問(wèn)題，那(nà)麽你(nǐ)要(yà↕≠παo)怎麽解決呢(ne)?

　　需要(yào)考慮的(de)問(wèn)題非常‍ ↕之多(duō)。

　　最優的(de)導航設計(jì)通(tōn∑ε∞★g)常都(dōu)不(bù)會(huì)使用(yòng)太長(chá←‌ng)的(de)詞彙，并且占據的(de)空(kōng)間(jσ≤×πiān)也(yě)相(xiàng)對(duì)固定。導航項目₹ 最好(hǎo)不(bù)要(yào)太多(duō)，如(rú)果導航欄需要(β♣ε♣yào)滾動浏覽那(nà)就(jiù)太過了(le)。

2、隐藏和(hé)彈出式導航

漢堡圖标的(de)流行(xíng)讓隐藏式導航大(dà)行(xín♠↕★g)其道(dào)，而隐藏式的(de)設計(j★↔ì)所帶來(lái)的(de)另外(wài)一(yī)個(gè)結果就(jiù$₩ ↑)是(shì)彈出式導航。

　　在桌面端上(shàng)，隐藏/彈♥ ☆∏出式導航很(hěn)少(shǎo)會(huì)占據整個(gè)屏幕，而在Ω×移動端設備上(shàng)，為(wèi)了(le)保證可(kě)用(yòng)™←性，不(bù)少(shǎo)的(de)彈™∞‌出菜單會(huì)選擇做(zuò)成全屏式的(de)。

　　隐藏/彈出式導航嚴格意義上(shàng)算(σ↓€≥suàn)不(bù)上(shàng)是(sh≠'φì)非常實驗性的(de)設計(jì)，但(dàn)是(shì)它可(§πkě)以玩(wán)的(de)非常多(d∑ σuō)樣。對(duì)于一(yī)部分(fēn)用(yòng)戶而言，漢÷ φλ堡圖标并不(bù)是(shì)那(nà)麽®•φ✘直觀，也(yě)不(bù)夠熟悉。設計(jì)師(shī)可(kě‌☆)以在彈出效果、樣式和(hé)位置甚至圖标樣式上(s₩×↑hàng)，多(duō)花(huā)點心思，玩(wán)出花(huā) ©♥頭。

3、水(shuǐ)平滾動
當你(nǐ)首次浏覽一(yī)個(gè)需要(yào)水(€"™shuǐ)平滾動的(de)網站(zhàn)的(de)時(sh¥±í)候，體(tǐ)驗會(huì)非常的(de)奇怪。首先它'→£★的(de)物(wù)理(lǐ)和(hé)∞☆≤©視(shì)覺運動方向和(hé)常規的(de)縱向滾動不(bù)σπ∑ 同，而且當你(nǐ)使用(yòng)鼠标滾♣δπ輪滾動的(de)時(shí)候，這(zhè)種交互的(de)錯(cuò)位感會→≈φ(huì)極其強烈。

4、無導航模式

有(yǒu)些(xiē)網站(zhàn)摒✘₹↑除了(le)導航這(zhè)個(gè)模塊，而是(sh✔←ì)選擇将所有(yǒu)的(de)內(nèi)容平鋪在整"✔個(gè)頁面之上(shàng)。這(zhè)種設計(jì)其實挺棘手的(de≈ ∞$)，因為(wèi)如(rú)何頁面所承載的(de)內(nèi)容過于複雜(zá≠γ♣)的(de)話(huà)，這(zhè)種模式可(kě)能(néng)會✘‌≈(huì)讓用(yòng)戶覺得(de)無所适從(cóng)，難以下(xià) ≥γ手。

　　無導航模式其實最适合一(yī)些(☆♠ xiē)小(xiǎo)型的(de)、目的(de)直 δ♦接而簡單的(de)網站(zhàn)，比如(δ♦∏rú)一(yī)些(xiē)&ldquo$'₽;Comming Soon”的(de)網站(zhàn∏&₹∑)頁面，就(jiù)不(bù)需要(yào∏Ω&)導航。還(hái)有(yǒu)一(yī)些(xiē≤$)特定工(gōng)能(néng)的(de)小(xiǎo)網站(zhàn₹δ )，隻需要(yào)簡單的(de)滾動浏覽，幾乎不(bù)需要(yào)太多 π∞(duō)點擊就(jiù)能(néng)完成信息的(d≈₽♣e)獲取。

5、帶标記的(de)單頁式設計(jì)

許多(duō)優秀的(de)實驗性的(de)網↕≤頁設計(jì)都(dōu)采用(yòng)單頁式設計(jì)作(zuò)∑↑•§為(wèi)主要(yào)載體(tǐ)。而這(zhè)種選擇也(♦δ yě)是(shì)有(yǒu)道(dào)理(lǐ)的(de)：用₹<∞Ω(yòng)戶不(bù)會(huì)在單頁式設計(jì)中÷λ迷失。

　　而與此同時(shí)，長(cháng)單頁設計(jì)中，用(y∏♦òng)戶需要(yào)通(tōng)過不(bù)斷向下(xià'✘)滾動來(lái)浏覽信息，浏覽到(dào)什(shén)麽程度，用(yònλ♦βπg)需要(yào)通(tōng)過标記、目錄λ☆和(hé)進度條這(zhè)樣的(de)視(shì)λ®$σ覺标識來(lái)判斷，而這(zhè)本質上(shàng)和(héλ₩∏)導航的(de)功能(néng)異曲同工(gōng)。

6、微(wēi)妙的(de)邊緣導航

和(hé)側邊欄導航不(bù÷∏)同，這(zhè)種完全旋轉 90 度到(dào)右側的(de)§♦Ω文(wén)字導航，設計(jì)的(de)更加微(wēi)妙，通(tōng)£₩✘δ常出現(xiàn)在小(xiǎo)型的(de)作(zuò)品展示型₽σ的(de)網頁上(shàng)。

　　這(zhè)種風(fēng)格♥↔的(de)導航隻會(huì)使用(yòng)文(wén)字，并且條目通(tε¥> ōng)常會(huì)非常少(shǎo)，字體(tǐ)也(yě)相> (xiàng)對(duì)會(huì)少(shǎo)。這(zhè)種 ≥×導航元素會(huì)随著(zhe)界面、元素的(de)變化(huà×✘☆γ)而發生(shēng)改變，甚至在某些(xiē)界面中會(huì)消失。

上(shàng)一(yī)篇：如(rú)何開(kāi)發一(yī)個(gè)用(yòng)戶體(tǐ)驗∏♥ε•好(hǎo)的(de)網站(zhàn)
下(xià)一(yī)篇：電(diàn)商類型的(de)網站(zhàα✘σπn)常用(yòng)顔色搭配