設(shè)計(jì)趨勢(shì):側(cè)面導(dǎo)航無(wú)處不在,但它有效嗎?

2022-06-25    分類(lèi): 網(wǎng)站建設(shè)

網(wǎng)站設(shè)計(jì)導(dǎo)航中有一個(gè)熱門(mén)話題:側(cè)欄菜單。更多的設(shè)計(jì)師正在為項(xiàng)目開(kāi)展垂直側(cè)向?qū)Ш焦ぷ?,其中許多網(wǎng)站設(shè)計(jì)的左側(cè)都有一個(gè)特定的位置。
雖然它看起來(lái)不錯(cuò),并且可以幫助簡(jiǎn)化整個(gè)畫(huà)布中的混亂,但它確實(shí)有效嗎?用戶(hù)是否會(huì)回應(yīng)側(cè)面導(dǎo)航?這是你應(yīng)該考慮的設(shè)計(jì)趨勢(shì)嗎?今天,我們將嘗試用一些實(shí)用而有用的答案來(lái)解答問(wèn)題的核心。
側(cè)面導(dǎo)航無(wú)處不在
側(cè)面導(dǎo)航是隱藏和有趣菜單樣式演變的一部分。響應(yīng)式設(shè)計(jì)幾乎迫使設(shè)計(jì)人員考慮替代導(dǎo)航模式,以便在小屏幕上輕松瀏覽。漢堡菜單圖標(biāo)誕生了。
這是演變?yōu)楦嗟膹棾鍪綐邮?,以漢堡圖標(biāo)開(kāi)始。其中一些導(dǎo)航菜單完全打開(kāi),而其他導(dǎo)航菜單則提供了一個(gè)完整的用戶(hù)選項(xiàng)調(diào)色板下拉或下降樣式。常見(jiàn)的主題是許多漢堡圖標(biāo)打開(kāi)垂直滑動(dòng)導(dǎo)航。
完整的側(cè)邊欄導(dǎo)航似乎是該想法的延伸。
目前迭代的趨勢(shì)主要是左側(cè)導(dǎo)航側(cè)欄。它們往往很簡(jiǎn)單,只有單一的純色(或疊加),并包含一些可供選擇的項(xiàng)目。導(dǎo)航欄可以包含徽標(biāo)或品牌標(biāo)記,文本鏈接和社交媒體或其他圖標(biāo)和搜索的組合。
使這一趨勢(shì)發(fā)揮作用的關(guān)鍵是確保側(cè)邊欄包含足夠的對(duì)比度,以便與屏幕的其他部分保持清晰可見(jiàn),它必須在移動(dòng)設(shè)備上工作(這可能相當(dāng)棘手),并且足夠?qū)捯匀菁{字體是可讀的。
在考慮垂直導(dǎo)航時(shí),還有一點(diǎn)建議:不要試圖填充太多元素,以填補(bǔ)標(biāo)準(zhǔn)分辨率屏幕的深度。作為這種格式的設(shè)計(jì)工具,空白是完全可以接受的 - 甚至是強(qiáng)烈推薦的。查看本文中的示例,您可以看到在項(xiàng)目之間留出空間或者將元素與空間的頂部,底部或中心對(duì)齊可以分別具有吸引力。導(dǎo)航欄中的額外空間將有助于吸引眼球,有助于增加整體可用性。
側(cè)面導(dǎo)航優(yōu)點(diǎn)
側(cè)面導(dǎo)航有很多美學(xué)價(jià)值。雖然這個(gè)概念在網(wǎng)絡(luò)的早期階段經(jīng)常使用,但今天的垂直導(dǎo)航菜單時(shí)尚而時(shí)尚。
使用垂直側(cè)面導(dǎo)航的優(yōu)點(diǎn)包括:
左側(cè)垂直導(dǎo)航屬于F形的長(zhǎng)行程,讀者首先在頂部,然后在左側(cè)作為自然閱讀模式
菜單項(xiàng)目最初并不像其他時(shí)髦風(fēng)格(如漢堡菜單)那樣隱藏
項(xiàng)目在滾動(dòng)上方保持相同的權(quán)重
當(dāng)元素之間有足夠的間距時(shí),自頂向下讀數(shù)很容易掃描
剩下的設(shè)計(jì)留下整齊的帆布
提供不同的形狀畫(huà)布,可以增加視覺(jué)興趣或使用戶(hù)更容易地使用某些圖像或視頻內(nèi)容
可能會(huì)以干凈的方式包含更多鏈接

側(cè)面導(dǎo)航缺點(diǎn)


有很多人不喜歡垂直導(dǎo)航。雖然可用性方面的大抱怨與右側(cè)導(dǎo)航有關(guān),但一些設(shè)計(jì)師認(rèn)為,垂直導(dǎo)航風(fēng)格為用戶(hù)和開(kāi)發(fā)人員增添了一定程度的復(fù)雜性。
使用垂直側(cè)面導(dǎo)航的原因包括:
垂直導(dǎo)航在響應(yīng)式框架中正常工作可能很困難
導(dǎo)航中的單詞必須足夠短,以適應(yīng)窄列而不使用不可讀的字體
垂直導(dǎo)航使用的空間可能對(duì)其他內(nèi)容更有價(jià)值。
使用更寬的屏幕時(shí),滾動(dòng)更高,某些導(dǎo)航元素可能會(huì)“丟失”。> / li>
來(lái)自垂直導(dǎo)航的額外“空間”可能會(huì)鼓勵(lì)一些設(shè)計(jì)人員過(guò)度沉迷導(dǎo)航菜單; 與頂級(jí)的水平導(dǎo)航一樣,只能堅(jiān)持站點(diǎn)內(nèi)的前四個(gè)或五個(gè)鏈接。
許多鼠標(biāo)用戶(hù)(右手)必須穿過(guò)屏幕才能點(diǎn)擊導(dǎo)航元素。這可能是一個(gè)繁瑣且最終令人討厭的用戶(hù)模式。
垂直導(dǎo)航需要滾動(dòng)并“粘”到屏幕上,以便用戶(hù)不會(huì)丟失它。通常,垂直導(dǎo)航在單頁(yè)設(shè)計(jì)中效果很好,但使用范圍更廣時(shí)會(huì)變得很笨拙。
它真的有用嗎?
垂直側(cè)面導(dǎo)航是否真的有效?
陪審團(tuán)仍然在那個(gè)之外。
這個(gè)趨勢(shì)很引人注目,讓你看起來(lái)很漂亮。所以,這有一些價(jià)值,因?yàn)橛脩?hù)會(huì)看到它。如果您的導(dǎo)航是點(diǎn)擊模式和用戶(hù)流程的重要組成部分,則可以考慮此選項(xiàng)。
總的來(lái)說(shuō),這種導(dǎo)航風(fēng)格似乎對(duì)于只有少數(shù)導(dǎo)航選項(xiàng)和有限內(nèi)容的小型網(wǎng)站來(lái)說(shuō)是最有效的。本文中的許多例子似乎都是針對(duì)房地產(chǎn)綜合體(完全是偶然的),而它似乎也適用于創(chuàng)意組合或代理網(wǎng)站。任何帶有大量?jī)?nèi)容的設(shè)計(jì)都可能會(huì)讓人感覺(jué)側(cè)面導(dǎo)航在設(shè)計(jì)和內(nèi)容層次上過(guò)于嚴(yán)格。
關(guān)于其他導(dǎo)航位置怎么樣?
非傳統(tǒng)的導(dǎo)航風(fēng)格可能是一種有趣的方式來(lái)打破一些相同的舊設(shè)計(jì)模式。垂直選項(xiàng)只是幾個(gè)想法之一。
任何非標(biāo)準(zhǔn)用戶(hù)模式的問(wèn)題在于您冒著使用戶(hù)混淆的風(fēng)險(xiǎn),導(dǎo)致他們完全放棄網(wǎng)站。任何這樣的實(shí)驗(yàn)對(duì)于具有簡(jiǎn)單整體視覺(jué)流的較小站點(diǎn)來(lái)說(shuō)都是最好的。
另外兩種正在開(kāi)始吸引力的導(dǎo)航風(fēng)格包括Aurora使用的水平漢堡包彈出窗口(上圖)以及AndCulture使用的90度傾斜文本導(dǎo)航(下圖)。
這兩種風(fēng)格都提供了一些意想不到的效果,并且在各自的環(huán)境中運(yùn)行良好,但它們可能很難用不同的設(shè)計(jì)理解。與任何設(shè)計(jì)技術(shù)一樣,如果您在正常用戶(hù)模式之外執(zhí)行某些操作,請(qǐng)務(wù)必經(jīng)常關(guān)注分析和測(cè)試。如果存在奇怪的點(diǎn)擊模式,或者用戶(hù)停止通過(guò)導(dǎo)航進(jìn)行移動(dòng),則可能會(huì)遇到非傳統(tǒng)設(shè)計(jì)方面的問(wèn)題,需要重新考慮。
結(jié)論

有一點(diǎn)是肯定的,當(dāng)涉及到導(dǎo)航趨勢(shì)時(shí),用戶(hù)和設(shè)計(jì)人員似乎厭倦了完全隱藏的樣式和需求選項(xiàng),這些選項(xiàng)在臺(tái)式機(jī)和移動(dòng)設(shè)備上以類(lèi)似的格式工作。這可能是縱向格局趨勢(shì)的原因之一。


本文來(lái)自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(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è)

文章名稱(chēng):設(shè)計(jì)趨勢(shì):側(cè)面導(dǎo)航無(wú)處不在,但它有效嗎?
文章源于:http://www.muchs.cn/news48/171398.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序、面包屑導(dǎo)航、電子商務(wù)、網(wǎng)站策劃、企業(yè)網(wǎng)站制作做網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)