<em id="l4gxk"><noframes id="l4gxk">

<em id="l4gxk"></em>
      
      

         手機版 微信公眾號 新浪微博 友情鏈接
        當(dāng)前位置: 網(wǎng)站首頁 > 建站設(shè)計 > 設(shè)計文章 > 文章 當(dāng)前位置: 設(shè)計文章 > 文章

        導(dǎo)航設(shè)計:不要在移動端菜單設(shè)計中犯這些錯誤

        時間:2015-05-01    點擊: 次    來源:網(wǎng)絡(luò)    作者:佚名 - 小 + 大

        當(dāng)我們想要讓移動網(wǎng)站的用戶導(dǎo)航更加直觀時,會遇到這樣的挑戰(zhàn):內(nèi)容太多,空間太小。

        移動電商平臺設(shè)計中的最新趨勢是使用“漢堡包圖標(biāo)”來展示分類菜單,這或許能增強主頁的擴展性,實現(xiàn)主頁和菜單之間的跳轉(zhuǎn)。

        導(dǎo)航菜單設(shè)計 移動網(wǎng)站設(shè)計 移動網(wǎng)站導(dǎo)航

        可切換的菜單鍵是一種很好的把導(dǎo)航合并到每個頁面中去的方式。考慮到移動端搜索需求的增長,并且43%的手機上的郵箱是打開的(數(shù)據(jù)來源Litmus),因此維護那些直接進入到你的網(wǎng)站內(nèi)頁和不熟悉你的移動網(wǎng)站的用戶是至關(guān)重要的。 這種漢堡包菜單是一個好點子——且約定俗成的,但問題是如何將它應(yīng)用到你的設(shè)計中去。

        要做的事:告訴用戶從哪里開始

        Buckle可以識別到首次訪問的訪客并將他們的注意力吸引到菜單鍵上。即使訪客不知道漢堡包菜單的作用,他們知道這是一個很好的起點,并且很快會發(fā)現(xiàn)它是用來控制分類導(dǎo)航的。

        導(dǎo)航菜單設(shè)計 移動網(wǎng)站設(shè)計 移動網(wǎng)站導(dǎo)航

        不能做的事:分不清“漢堡包”菜單和網(wǎng)站logo

        盡管移動端正在日益普及,互聯(lián)網(wǎng)用戶已經(jīng)習(xí)慣桌面網(wǎng)頁的分布方式,認(rèn)為左上角是logo的位置,把“漢堡包菜單”放到logo的左側(cè)是一個很大的禁忌。

        首次訪問的用戶,如何得知“DISCOUNT DANCE SUPPLY”是導(dǎo)航,而不是品牌logo。

        導(dǎo)航菜單設(shè)計 移動網(wǎng)站設(shè)計 移動網(wǎng)站導(dǎo)航

        Forever 21 logo右側(cè)的導(dǎo)航是很容易理解的,但是左側(cè)的漢堡包菜單看起來不像是可點擊的元素。

        導(dǎo)航菜單設(shè)計 移動網(wǎng)站設(shè)計 移動網(wǎng)站導(dǎo)航

        Ditto Spanx,看看這個網(wǎng)站,你該明白了。

        導(dǎo)航菜單設(shè)計 移動網(wǎng)站設(shè)計 移動網(wǎng)站導(dǎo)航

        不能做的事:太多留白

        我賭你一杯雙倍大份的焦糖瑪奇朵,眼球追蹤研究將顯示用戶的大部分注意力的都在圖片的部分,而不是浮動神秘的漢堡包菜單。把菜單圖標(biāo)遠(yuǎn)遠(yuǎn)的放在右側(cè)和把它放在logo左側(cè)一樣危險。

        導(dǎo)航菜單設(shè)計 移動網(wǎng)站設(shè)計 移動網(wǎng)站導(dǎo)航

        需要做的事:將分類圖標(biāo)和其他導(dǎo)航元素組織好

        Softchoice的漢堡包菜單作為導(dǎo)航菜單的一部分,用戶很容易就識別出它是可操作的。

        導(dǎo)航菜單設(shè)計 移動網(wǎng)站設(shè)計 移動網(wǎng)站導(dǎo)航

        另外,Lowe’s 把漢堡包菜單和搜索放在一起。

        導(dǎo)航菜單設(shè)計 移動網(wǎng)站設(shè)計 移動網(wǎng)站導(dǎo)航

        當(dāng)你決定圖標(biāo)的順序時,請牢記桌面網(wǎng)頁中一些約定俗成的慣例。eBags的漢堡包菜單在右上側(cè),這個位置是傳統(tǒng)的放置登錄和購物車的位置。 把漢堡包菜單放到賬戶和購物車的左側(cè),或者把它和搜索放在一起, eBags或許會更好。

        導(dǎo)航菜單設(shè)計 移動網(wǎng)站設(shè)計 移動網(wǎng)站導(dǎo)航

        Green Mountain 把漢堡包菜單和搜索放在一起,但是把它放在搜索的左側(cè)可能會更直觀,畢竟,垂直類的菜單約定俗成的出現(xiàn)在左側(cè),而“搜索”按鍵則出現(xiàn)在搜索框的右側(cè)。

        導(dǎo)航菜單設(shè)計 移動網(wǎng)站設(shè)計 移動網(wǎng)站導(dǎo)航

        需要做的事:標(biāo)注圖標(biāo)

        設(shè)計師——我聽到你在哭泣,但是標(biāo)注圖標(biāo)可以更好的闡明這些圖標(biāo)是做什么的。例如,CVS漢堡包菜單上增加了“菜單”兩個字。

        導(dǎo)航菜單設(shè)計 移動網(wǎng)站設(shè)計 移動網(wǎng)站導(dǎo)航

        如果你覺得這太擁擠了,你可以直接把“菜單”兩個字設(shè)計在按鍵上,直到漢堡包菜單成為約定俗成的菜單圖標(biāo)。

        導(dǎo)航菜單設(shè)計 移動網(wǎng)站設(shè)計 移動網(wǎng)站導(dǎo)航

        注意:Harry and David的搜索圖標(biāo)可能會和PayPal的logo混淆,因為PayPal的logo看起來類似一個搜索框。

        Ross Simons菜單按鍵上的加號大喊著“展開我”。這種放在搜索框左側(cè)的方式要比和購物袋圖標(biāo)放在一起,或者是放在搜索框右側(cè)更加有效。

        導(dǎo)航菜單設(shè)計 移動網(wǎng)站設(shè)計 移動網(wǎng)站導(dǎo)航

        但是Ross Simons 的購物袋圖標(biāo)是和logo混在一起的,而且混的有點過了。事實上,如果沒有適當(dāng)?shù)脑O(shè)計,任何導(dǎo)航圖標(biāo)都可能被忽視。

        一如既往,用戶測試和A/B測或者多變量測試可以告訴你,你的設(shè)計是否有效。測試導(dǎo)航應(yīng)該是移動優(yōu)化策略中的首要任務(wù)之一,使空間使用的有效性與移動網(wǎng)站架構(gòu)清晰相互均衡。

        上一篇:2015年在網(wǎng)頁設(shè)計中運用圖片的六大趨勢

        下一篇:扁平化設(shè)計與Material Design區(qū)別在哪里?

         推薦閱讀
      1. Copyright © 2009—2025 ,www.julong-ads.com,All Rights Reserved. |  黔ICP備2023009491號-1  |  貴公網(wǎng)安備52010302003427號
      2. 關(guān)于本站  |  網(wǎng)站聲明  |  網(wǎng)站導(dǎo)航  |  留言交流  |  友情鏈接  |  祝福頻道  |  微信公眾號  |  新浪微博  |  我的大學(xué)  |  我的高中  |  簡歷2009
      3. 版權(quán)聲明:凡注明本站原創(chuàng)文章、作品,未經(jīng)本人許可,任何人或機構(gòu)不得以任何形式對本站內(nèi)容進行復(fù)制作商業(yè)用途.
      4. 本站部分文章、資源來自互聯(lián)網(wǎng),版權(quán)歸原作者及網(wǎng)站所有,如果侵犯了您的權(quán)利,請及時致信告知我站.
      5. 地址:中國·貴州·貴陽  郵編:550018   微信公眾號:WEBZZQ  郵箱:admin@zouzhiqiang.com
      6. QQ:470870191 歡迎各位站長加入個人網(wǎng)站交流討論QQ群: 15410235
      7. 訪問統(tǒng)計:
      8. 大蕉久久伊人中文字幕| 欧美麻豆久久久久久中文| 国产亚洲欧美成人久久片 | 九九久久精品国产| 久久这里都是精品| 国内精品久久久久影院免费| 国产三级观看久久| 99久久99久久精品免费看蜜桃| 91精品婷婷国产综合久久| 亚洲精品99久久久久中文字幕 | 久久久久国产一区二区| 伊人久久大香线蕉亚洲五月天| 国产69精品久久久久99| 婷婷综合久久中文字幕蜜桃三电影 | 久久精品国产网红主播| 怡红院日本一道日本久久| 国产成人精品综合久久久| 手机看片久久高清国产日韩| 伊人丁香狠狠色综合久久| 久久久久久国产精品无码超碰 | 久久91精品国产91久久小草| 久久国产精品无| 久久精品国产99久久丝袜| 精品久久久久久国产潘金莲| 久久精品国产久精国产一老狼| 国产毛片久久久久久国产毛片 | 亚洲欧美日韩久久精品第一区| 久久青青国产| 热久久国产欧美一区二区精品| 精品久久久久久国产三级| 99精品伊人久久久大香线蕉| 久久综合九色综合97_久久久| 狠狠色丁香久久综合婷婷| 国产精品久久自在自线观看| 久久久国产精品福利免费| 久久国产乱子精品免费女| 99久久综合狠狠综合久久| 精品久久久久久无码中文野结衣| 精品人妻伦一二三区久久| 蜜臀久久99精品久久久久久| 伊色综合久久之综合久久|