激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

5種常見的UI導(dǎo)航設(shè)計(jì)，哪個(gè)最適合你的產(chǎn)品?

發(fā)布時(shí)間：2024-03-19 18:49:27 瀏覽量：151次

為Web和移動(dòng)設(shè)計(jì)UI模式，以優(yōu)化用戶體驗(yàn)并提高產(chǎn)品價(jià)值。

可訪問的導(dǎo)航將引導(dǎo)用戶瀏覽 UI 中的信息流，并幫助他們完成任務(wù)、提高用戶體驗(yàn)、 Web/移動(dòng)轉(zhuǎn)化率。同樣，如果用戶無法在網(wǎng)站或app找到方向，那么該網(wǎng)站/app對(duì)他們毫無用處 —— 糟糕的導(dǎo)航設(shè)計(jì)會(huì)使用戶體驗(yàn)不佳，并導(dǎo)致用戶流失。因此，忽視UI導(dǎo)航設(shè)計(jì)，甚至設(shè)計(jì)不當(dāng)?shù)?UI 導(dǎo)航都會(huì)對(duì)UI設(shè)計(jì)產(chǎn)生災(zāi)難性影響，這并不奇怪。

那些用戶體驗(yàn)極佳的UI導(dǎo)航的秘訣始于導(dǎo)航菜單。 為了讓用戶從網(wǎng)站/app的A點(diǎn)到達(dá)B點(diǎn)，用戶需要一張圖來指導(dǎo)他們。 這張圖就是——導(dǎo)航菜單。在設(shè)計(jì)過程中應(yīng)優(yōu)先考慮導(dǎo)航菜單的設(shè)計(jì)。開發(fā)前對(duì)導(dǎo)航菜單進(jìn)行原型設(shè)計(jì)，從一開始就將產(chǎn)品可視化，以便可以實(shí)時(shí)體驗(yàn)產(chǎn)品的交互方式。

讓我們來看看5種常見的 UI 模式。以下圖片示例均有墨刀制作。

順暢網(wǎng)站設(shè)計(jì)的導(dǎo)航菜單——下拉菜單

下拉菜單是一個(gè)可擴(kuò)展的 UI 導(dǎo)航，具有多個(gè)值，用戶可以選擇這些值，并從那里被帶到網(wǎng)站的另一個(gè)區(qū)域。下拉列表是一種網(wǎng)站導(dǎo)航設(shè)計(jì)，可讓用戶跳轉(zhuǎn)到網(wǎng)站中的新位置，并根據(jù)用戶所選的最后一個(gè)選項(xiàng)來執(zhí)行操作的命令菜單。

何時(shí)設(shè)計(jì)下拉菜單？

當(dāng)你有許多顯示選項(xiàng)并希望節(jié)省空間時(shí)，下拉菜單是一種好的導(dǎo)航方式。

好的下拉菜單對(duì)用戶來說很熟悉，而且方便瀏覽，能提高點(diǎn)擊率。 不過它有時(shí)間和區(qū)域的限制，所以要考慮你的用戶體驗(yàn)?zāi)Ｊ健?/strong> 菜單需要包含足夠的導(dǎo)航選項(xiàng)，以便用戶知道如何與其交互；但又不能太多選項(xiàng)，避免產(chǎn)生不好的閱讀體驗(yàn)。 好好利用下拉菜單，它會(huì)為你的UX UI設(shè)計(jì)大大加分。

抽屜式漢堡菜單

抽屜式漢堡菜單，是一個(gè)常見的Android和iOS移動(dòng)菜單，用于顯示多個(gè)鏈接。在"隱身"狀態(tài)的時(shí)候，抽屜式漢堡菜單是隱藏在屏幕上。通過觸發(fā)漢堡圖標(biāo)，用戶可以訪問呈現(xiàn)出來的導(dǎo)航鏈接。

何時(shí)使用？

抽屜式漢堡菜單適用于 響應(yīng)式網(wǎng)頁設(shè)計(jì)。例如，Android Gmail郵箱，YouTube和Facebook中的Android抽屜導(dǎo)航。

抽屜式漢堡菜單非常適合隱藏導(dǎo)航，在移動(dòng)端屏幕上整理好大量導(dǎo)航鏈接。

固定位置菜單Web UI模式

固定位置菜單或粘性菜單是一種Web UI模式，當(dāng)你向下滾動(dòng)時(shí)，標(biāo)題區(qū)域（菜單，網(wǎng)站標(biāo)題和徽標(biāo)）仍然可見，頁面內(nèi)容在其下方流動(dòng)。粘性標(biāo)題已成為Web UI模式標(biāo)準(zhǔn) ——Google +和Dropbox都有粘性菜單。

什么時(shí)候使用它

固定位置菜單應(yīng)該用于目標(biāo)意識(shí)明確的網(wǎng)站頁面，例如零售，電子商務(wù)網(wǎng)站。用戶可以在幾秒鐘內(nèi)跳轉(zhuǎn)至導(dǎo)航選項(xiàng) - 固定菜單在這方面非常有用。在瀏覽網(wǎng)站時(shí)，速度對(duì)用戶來說是最重要的。事實(shí)上，根據(jù) Akamai 和Gomez.com研究，79% 的在線購物者如果遇到性能問題，就不會(huì)返回網(wǎng)站。

Web中的大幅網(wǎng)頁菜單導(dǎo)航

大幅網(wǎng)頁菜單（mega menu）是一個(gè)可擴(kuò)展的多級(jí)菜單。它有二維面板，分為多組導(dǎo)航選項(xiàng)（標(biāo)簽），每個(gè)標(biāo)簽下都有各自的跳轉(zhuǎn)鏈接，因此不需要滾動(dòng)。用戶單擊或鼠標(biāo)懸停在選項(xiàng)上可查看其包含的鏈接。

與下拉列表一樣，大幅網(wǎng)頁菜單可使用圖標(biāo)來呈現(xiàn)結(jié)構(gòu)，以及提升子菜單可見性。它們還可以在導(dǎo)航鏈接旁邊添加圖像或彩色字體，來吸引用戶注意值得注意的內(nèi)容。

何時(shí)使用

大幅網(wǎng)頁菜單能很好地節(jié)省空間，隱藏內(nèi)容，等到用戶將鼠標(biāo)懸停在菜單欄上時(shí)才顯示所有導(dǎo)航鏈接。尼爾森·諾曼集團(tuán)的一項(xiàng)研究顯示，網(wǎng)頁上需要顯示的鏈接越多，大幅網(wǎng)頁菜單就越受歡迎。

此菜單最適合 Web 設(shè)計(jì)，適用于有視覺障礙的用戶或高齡的 Web 用戶。它們同樣適合需包含許多不同主題的雜志式博客。

用于響應(yīng)式導(dǎo)航的卡片網(wǎng)格

網(wǎng)格是在Web和移動(dòng)端導(dǎo)航中使用的導(dǎo)航模式。 網(wǎng)格包含一系列可展開可收縮的圖像。它是另一種視覺上出彩的結(jié)構(gòu)，讓你可以組合相關(guān)元素，把主題和用戶體驗(yàn)流程可視化。

什么時(shí)候使用它

網(wǎng)格中的圖像提供了大面積的可點(diǎn)擊對(duì)象，使網(wǎng)格成為移動(dòng)UI導(dǎo)航的理想形式。 它們還用于許多以展示圖片為主的網(wǎng)站，例如圖像共享網(wǎng)站Pinterest和音樂流服務(wù)Spotify。

由于其邏輯，適應(yīng)強(qiáng)的布局，卡片網(wǎng)格非常適合響應(yīng)式導(dǎo)航！

本文由墨刀翻譯自 Justinmind的 5 UI Patterns: Navigation That Makes Good UX Sense。

墨刀作為一款在線原型設(shè)計(jì)與協(xié)同工具，已經(jīng)幫助眾多產(chǎn)品經(jīng)理和設(shè)計(jì)師們輕松做出交互原型，展現(xiàn)和驗(yàn)證設(shè)計(jì)想法，還支持多人協(xié)作編輯，分享和評(píng)論。新注冊(cè)用戶即可獲得墨刀高級(jí)企業(yè)版的15天免費(fèi)試用！開始體驗(yàn)一下吧！

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定