2014-02-02 分類(lèi): 網(wǎng)站建設(shè)
UI導(dǎo)航設(shè)計(jì)對(duì)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)來(lái)說(shuō)十分重要。如果忽視UI導(dǎo)航設(shè)計(jì),甚至設(shè)計(jì)不當(dāng)?shù)?UI 導(dǎo)航都會(huì)對(duì)UI設(shè)計(jì)產(chǎn)生災(zāi)難性影響。
可訪問(wèn)的導(dǎo)航將引導(dǎo)用戶瀏覽 UI 中的信息流,并幫助他們完成任務(wù)、提高用戶體驗(yàn)、 Web/移動(dòng)轉(zhuǎn)化率,如果用戶無(wú)法在網(wǎng)站或app找到方向,那么該網(wǎng)站/app對(duì)他們毫無(wú)用處 —— 糟糕的導(dǎo)航設(shè)計(jì)會(huì)使用戶體驗(yàn)不佳,并導(dǎo)致用戶流失。
那些用戶體驗(yàn)極佳的UI導(dǎo)航的秘訣始于導(dǎo)航菜單。 為了讓用戶從網(wǎng)站/app的A點(diǎn)到達(dá)B點(diǎn),用戶需要一張圖來(lái)指導(dǎo)他們,這張圖就是——導(dǎo)航菜單。
讓我們來(lái)看看5種常見(jiàn)的 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)來(lái)執(zhí)行操作的命令菜單。
何時(shí)設(shè)計(jì)下拉菜單?
當(dāng)你有許多顯示選項(xiàng)并希望節(jié)省空間時(shí),下拉菜單是一種好的導(dǎo)航方式。
好的下拉菜單對(duì)用戶來(lái)說(shuō)很熟悉,而且方便瀏覽,能提高點(diǎn)擊率。 不過(guò)它有時(shí)間和區(qū)域的限制,所以要考慮用戶體驗(yàn)?zāi)J健?菜單需要包含足夠的導(dǎo)航選項(xiàng),以便用戶知道如何與其交互;但又不能太多選項(xiàng),避免產(chǎn)生不好的閱讀體驗(yàn)。 好好利用下拉菜單,它會(huì)為你的UX UI設(shè)計(jì)大大加分。
二、抽屜式漢堡菜單
抽屜式漢堡菜單,是一個(gè)常見(jiàn)的Android和iOS移動(dòng)菜單,用于顯示多個(gè)鏈接。在"隱身"狀態(tài)的時(shí)候,抽屜式漢堡菜單是隱藏在屏幕上。通過(guò)觸發(fā)漢堡圖標(biāo),用戶可以訪問(wèn)呈現(xiàn)出來(lái)的導(dǎo)航鏈接。
何時(shí)使用?
抽屜式漢堡菜單適用于 響應(yīng)式網(wǎng)頁(yè)設(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))仍然可見(jiàn),頁(yè)面內(nèi)容在其下方流動(dòng)。粘性標(biāo)題已成為Web UI模式標(biāo)準(zhǔn) ——Google +和Dropbox都有粘性菜單。
什么時(shí)候使用它?
固定位置菜單應(yīng)該用于目標(biāo)意識(shí)明確的網(wǎng)站頁(yè)面,例如零售,電子商務(wù)網(wǎng)站。用戶可以在幾秒鐘內(nèi)跳轉(zhuǎn)至導(dǎo)航選項(xiàng) - 固定菜單在這方面非常有用。在瀏覽網(wǎng)站時(shí),速度對(duì)用戶來(lái)說(shuō)是最重要的。事實(shí)上,根據(jù) Akamai 和Gomez.com研究,79% 的在線購(gòu)物者如果遇到性能問(wèn)題,就不會(huì)返回網(wǎng)站。
四、Web中的大幅網(wǎng)頁(yè)菜單導(dǎo)航
大幅網(wǎng)頁(yè)菜單(mega menu)是一個(gè)可擴(kuò)展的多級(jí)菜單。它有二維面板,分為多組導(dǎo)航選項(xiàng)(標(biāo)簽),每個(gè)標(biāo)簽下都有各自的跳轉(zhuǎn)鏈接,因此不需要滾動(dòng)。用戶單擊或鼠標(biāo)懸停在選項(xiàng)上可查看其包含的鏈接。
與下拉列表一樣,大幅網(wǎng)頁(yè)菜單可使用圖標(biāo)來(lái)呈現(xiàn)結(jié)構(gòu),以及提升子菜單可見(jiàn)性。它們還可以在導(dǎo)航鏈接旁邊添加圖像或彩色字體,來(lái)吸引用戶注意值得注意的內(nèi)容。
何時(shí)使用?
大幅網(wǎng)頁(yè)菜單能很好地節(jié)省空間,隱藏內(nèi)容,等到用戶將鼠標(biāo)懸停在菜單欄上時(shí)才顯示所有導(dǎo)航鏈接。尼爾森·諾曼集團(tuán)的一項(xiàng)研究顯示,網(wǎng)頁(yè)上需要顯示的鏈接越多,大幅網(wǎng)頁(yè)菜單就越受歡迎。
此菜單最適合 Web 設(shè)計(jì),適用于有視覺(jué)障礙的用戶或高齡的 Web 用戶。它們同樣適合需包含許多不同主題的雜志式博客。
五、用于響應(yīng)式導(dǎo)航的卡片網(wǎng)格
網(wǎng)格是在Web和移動(dòng)端導(dǎo)航中使用的導(dǎo)航模式。 網(wǎng)格包含一系列可展開(kāi)可收縮的圖像。它是另一種視覺(jué)上出彩的結(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和音樂(lè)流服務(wù)Spotify。
由于其邏輯,適應(yīng)強(qiáng)的布局,卡片網(wǎng)格非常適合響應(yīng)式導(dǎo)航!
在設(shè)計(jì)過(guò)程中應(yīng)優(yōu)先考慮導(dǎo)航菜單的設(shè)計(jì)。開(kāi)發(fā)前對(duì)導(dǎo)航菜單進(jìn)行原型設(shè)計(jì),從一開(kāi)始就將產(chǎn)品可視化,以便可以實(shí)時(shí)體驗(yàn)產(chǎn)品的交互方式。
分享標(biāo)題:了解5種常見(jiàn)UI導(dǎo)航設(shè)計(jì)
標(biāo)題網(wǎng)址:http://www.rwnh.cn/news/18819.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、標(biāo)簽優(yōu)化、手機(jī)網(wǎng)站建設(shè)、面包屑導(dǎo)航、服務(wù)器托管、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(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)
猜你還喜歡下面的內(nèi)容