400-611-9921
2019-04-08
2961
網(wǎng)站設(shè)計(jì)的一個(gè)元素,你并不總是首先想到的是導(dǎo)航。(雖然你可能應(yīng)該這樣做。)用戶如何在設(shè)計(jì)中移動(dòng)?他們?nèi)绾握业綄?duì)他們來(lái)說(shuō)不明顯的元素?
網(wǎng)站導(dǎo)航趨勢(shì)發(fā)生了很大變化; 從壓倒性的大型菜單轉(zhuǎn)向更輕松的更小的選擇。這個(gè)想法有一些價(jià)值 - 太多選擇可能會(huì)壓倒用戶。在他們需要的空間內(nèi)提供他們所需的信息,以提高參與度。不要把廚房水槽扔到他們身邊!
今天,我們將看一些現(xiàn)代網(wǎng)站導(dǎo)航技巧和想法,以幫助您做到這一點(diǎn)。
1.微妙的動(dòng)畫(huà)
乍一看,您甚至可能看不到Buttermilk和Maple網(wǎng)站頂部的導(dǎo)航菜單。但是有很多小動(dòng)畫(huà)可以確保你不會(huì)完全錯(cuò)過(guò)它。
當(dāng)鼠標(biāo)懸停在屏幕頂部時(shí),會(huì)出現(xiàn)一個(gè)黑暗的覆蓋層。
時(shí)間軸滾動(dòng)條隱藏在屏幕的右側(cè),滾動(dòng)時(shí)有彈出到屏幕的點(diǎn)。
導(dǎo)航在滾動(dòng)時(shí)折疊成主頁(yè)徽標(biāo)(帶有漢堡包),然后在懸停時(shí)彈回到完整導(dǎo)航。(我喜歡你實(shí)際上不必點(diǎn)擊漢堡圖標(biāo)來(lái)取回菜單。)
每個(gè)元素都包含簡(jiǎn)單的動(dòng)畫(huà),可以強(qiáng)調(diào)導(dǎo)航中發(fā)生的事情,這樣您就不會(huì)迷失在設(shè)計(jì)中。這種設(shè)計(jì)具有高度的視覺(jué)效果,這些簡(jiǎn)單的提示是增強(qiáng)可用性的重要獎(jiǎng)勵(lì)。
2.提供大量線索
隱藏導(dǎo)航時(shí) - 與許多網(wǎng)站設(shè)計(jì)趨勢(shì)一樣 - 您需要為用戶提供大量提示。
Rally網(wǎng)站滾動(dòng)條目中的時(shí)間線樣式導(dǎo)航可幫助用戶了解他們?cè)趦?nèi)容流中的位置(提示1)。
右箭頭告訴用戶水平點(diǎn)擊可以探索一些東西。
漢堡菜單告訴用戶,如果他們沒(méi)有立即看到解決方案,還有更多可以找到。
3.使其成為唯一選擇
如果導(dǎo)航是屏幕上最重要的元素怎么辦?使其成為視覺(jué)設(shè)計(jì)的焦點(diǎn)。
JYBH擁有漂亮的簡(jiǎn)約設(shè)計(jì),背景為紋理動(dòng)畫(huà),屏幕中間有三個(gè)簡(jiǎn)單的導(dǎo)航選項(xiàng)。這告訴用戶他們接下來(lái)要做什么。
這個(gè)或那個(gè)
沿著同樣的思路創(chuàng)建一個(gè)設(shè)計(jì),要求用戶做出選擇:你想做這個(gè)還是那個(gè)?這個(gè)二進(jìn)制導(dǎo)航選項(xiàng)應(yīng)該可以幫助人們快速獲得他們想要的設(shè)計(jì)。
如果設(shè)計(jì)具有兩個(gè)具有不同用戶路徑的目標(biāo)受眾,則它可以非常好地工作。
Seedlip Drinks可以相當(dāng)有效地購(gòu)買(mǎi)產(chǎn)品或使用他們的產(chǎn)品。這是一種聰明的零售方法。
該設(shè)計(jì)還包括一個(gè)微妙的漢堡圖標(biāo) - 我們可以繼續(xù)稱它為趨勢(shì)已經(jīng)轉(zhuǎn)移到兩行,而不是三行? - 附加信息。
5.簡(jiǎn)單而傳統(tǒng)
有時(shí),趨勢(shì)的最佳用途是堅(jiān)持一個(gè)有效的經(jīng)典例子。簡(jiǎn)單,傳統(tǒng)的導(dǎo)航菜單永遠(yuǎn)不會(huì)過(guò)時(shí)。
Chou Wen-Chung的方法為全屏幕照片上的主導(dǎo)航提供了靜態(tài)位置,而不會(huì)妨礙。一些菜單元素包括帶有附加信息的“超級(jí)風(fēng)格”卡片。(這幾乎似乎妨礙了。)
6.超大彈出
移動(dòng)設(shè)計(jì)實(shí)踐也在許多桌面版本中占主導(dǎo)地位。超大彈出菜單(幾乎總是來(lái)自漢堡風(fēng)格的圖標(biāo))模仿小型設(shè)備上的體驗(yàn)。
這種方法沒(méi)有錯(cuò)。(我永遠(yuǎn)不會(huì)因?yàn)橐恢碌挠脩趔w驗(yàn)而對(duì)任何人造成錯(cuò)誤。)
實(shí)現(xiàn)這一目標(biāo)的關(guān)鍵因素是確保彈出窗口顯而易見(jiàn),包含所有必要信息,并且不存在可用性問(wèn)題(一切都很容易點(diǎn)擊或點(diǎn)擊)。
7.嘗試四角
這是僅適用于特定用例的導(dǎo)航創(chuàng)意之一 - 您需要四個(gè)主要位置才能將用戶發(fā)送到。
但是如果你這樣做,屏幕每個(gè)角落的一個(gè)導(dǎo)航元素可以成為規(guī)劃和設(shè)計(jì)現(xiàn)代導(dǎo)航風(fēng)格的有趣而有趣的替代方案。
由于簡(jiǎn)單的整體美感和易于理解的導(dǎo)航選項(xiàng) - 公司名稱,關(guān)于,工作和聯(lián)系,它在上面的設(shè)計(jì)中工作得非常漂亮。(毫無(wú)疑問(wèn),您將從這些點(diǎn)擊元素中獲得什么。)
8.垂直堆疊
垂直導(dǎo)航菜單看起來(lái)像是一個(gè)在顯示器不斷變寬時(shí)真正起飛的想法。雖然更多設(shè)計(jì)開(kāi)始再次出現(xiàn)這種設(shè)計(jì)趨勢(shì),但它并沒(méi)有完全實(shí)現(xiàn)。
TMC使用屏幕左側(cè)的垂直主導(dǎo)航(這是一個(gè)很好的選擇,因?yàn)槿藗儚淖蟮接议喿x)與主要內(nèi)容區(qū)域,然后是一個(gè)截?cái)鄡?nèi)容區(qū)域,提示用戶與設(shè)計(jì)水平移動(dòng)。
設(shè)計(jì)的其余部分使用時(shí)間軸點(diǎn)和箭頭來(lái)引導(dǎo)用戶瀏覽內(nèi)容。這是一個(gè)有趣的設(shè)計(jì)。唯一的缺點(diǎn)是如果你太深入了,那就沒(méi)有辦法了。
9.“Skinny Flip”
你偶爾會(huì)遇到一些非常出色的意想不到的元素。這就是我們稱之為上面的“瘦子翻轉(zhuǎn)”導(dǎo)航菜單的情況。
前三個(gè)導(dǎo)航元素堆疊在屏幕的右側(cè)。它們采用時(shí)間軸樣式格式,可通過(guò)滾動(dòng)或單擊進(jìn)行切換。
漢堡包圖標(biāo)實(shí)際上隱藏在右下角,并打開(kāi)到屏幕底部的完整導(dǎo)航菜單。這是我見(jiàn)過(guò)的最不尋常的下頁(yè)導(dǎo)航版本之一,但似乎有效。(也許是因?yàn)橛泻芏嘁曈X(jué)線索,從顏色和元素開(kāi)始,從左到右穿過(guò)屏幕,然后到達(dá)角落里的那個(gè)漢堡包。)
10. Downpage Nav
由于我們深入了解了頁(yè)面導(dǎo)航的概念,因此最好看一下這個(gè)概念的高度可用的方法。
續(xù)訂有四件事要在網(wǎng)站上深入研究。每個(gè)都在主頁(yè)的左下角注明。這種導(dǎo)航方式的優(yōu)點(diǎn)在于它根本不是隱藏的,不會(huì)妨礙上面的內(nèi)容,并且位于自然位置。
它還可以作為準(zhǔn)時(shí)間軸元素,因?yàn)閷?dǎo)航是更大滑塊的一部分,可幫助用戶了解所有四個(gè)內(nèi)容路徑。
結(jié)論
在考慮現(xiàn)代導(dǎo)航時(shí),請(qǐng)記住它不僅僅是一個(gè)菜單。導(dǎo)航是用戶輕松移動(dòng)設(shè)計(jì)所需的一切。
它可能從某種類(lèi)型的主導(dǎo)航菜單開(kāi)始,但可以包括時(shí)間軸和滾動(dòng)提醒以及幫助用戶找到所需內(nèi)容的任何其他內(nèi)容。
本文來(lái)自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天科技
標(biāo)簽:公司網(wǎng)站制作,廣州建設(shè)網(wǎng)站,官網(wǎng)建設(shè),網(wǎng)頁(yè)制作公司,建網(wǎng)站公司,企業(yè)建站,廣州網(wǎng)站建設(shè)公司,廣州網(wǎng)頁(yè)設(shè)計(jì)公司,廣州網(wǎng)站設(shè)計(jì)公司,廣州企業(yè)網(wǎng)站建設(shè)
400-611-9921
020-29860991
地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場(chǎng)16F
業(yè)務(wù) QQ: 3561401262
E-mail: sales@zomsky.com
立即與縱天項(xiàng)目顧問(wèn)通話
400-611-9921
您也可以咨詢我們的在線客服或預(yù)約資深顧問(wèn)