了解5種常見UI導(dǎo)航設(shè)計

UI導(dǎo)航設(shè)計對互聯(lián)網(wǎng)產(chǎn)品設(shè)計來說十分重要。如果忽視UI導(dǎo)航設(shè)計，甚至設(shè)計不當(dāng)?shù)?UI 導(dǎo)航都會對UI設(shè)計產(chǎn)生災(zāi)難性影響。

可訪問的導(dǎo)航將引導(dǎo)用戶瀏覽 UI 中的信息流，并幫助他們完成任務(wù)、提高用戶體驗、 Web/移動轉(zhuǎn)化率，如果用戶無法在網(wǎng)站或app找到方向，那么該網(wǎng)站/app對他們毫無用處 —— 糟糕的導(dǎo)航設(shè)計會使用戶體驗不佳，并導(dǎo)致用戶流失。

那些用戶體驗極佳的UI導(dǎo)航的秘訣始于導(dǎo)航菜單。 為了讓用戶從網(wǎng)站/app的A點到達B點，用戶需要一張圖來指導(dǎo)他們，這張圖就是——導(dǎo)航菜單。

讓我們來看看5種常見的 UI 模式。

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

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

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

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

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

二、抽屜式漢堡菜單

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

何時使用？

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

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

三、固定位置菜單Web UI模式

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

什么時候使用它？

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

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

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

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

何時使用？

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

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

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

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

什么時候使用它？

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

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

在設(shè)計過程中應(yīng)優(yōu)先考慮導(dǎo)航菜單的設(shè)計。開發(fā)前對導(dǎo)航菜單進行原型設(shè)計，從一開始就將產(chǎn)品可視化，以便可以實時體驗產(chǎn)品的交互方式。

分享標(biāo)題：了解5種常見UI導(dǎo)航設(shè)計
標(biāo)題網(wǎng)址：http://www.bm7419.com/news/18819.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、標(biāo)簽優(yōu)化、手機網(wǎng)站建設(shè)、面包屑導(dǎo)航、服務(wù)器托管、關(guān)鍵詞優(yōu)化

廣告

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