<noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>

    <noframes id="jjr3b"><span id="jjr3b"><span id="jjr3b"></span></span>

    <noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>
    <form id="jjr3b"></form>

    <noframes id="jjr3b">
      18868949445

      東莞網絡公司:美味還是淡淡的設計趨勢?

      日期:2020-04-17 閱讀:260   作者:東莞網站設計開發公司

      UI設計環境總是隨著新趨勢和新技術的變化而變化。響應導航趨勢但在這篇文章中,我想特別關注一個有爭議的趨勢:漢堡包菜單。

      你可能會意識到這是一個帶有三欄圖標的滑出菜單,它看起來像一個很小的數字漢堡包。在過去的幾年里,它在UI和用戶界面的各個方面都得到了迅速的應用。但是它在網頁設計中有多好呢?

      我將深入研究漢堡包菜單的歷史——研究它來自何處,它是如何移動到網絡上的,以及它將來可能走向何方。

      漢堡包的歷史

      原來的三桿圖標從來沒有被稱為漢堡包圖標,但它的工作原理和今天一樣。這個圖標的歷史可以追溯到Xerox Star從1981開始,它是由Norm Cox創造的,只在施樂8010上運行。


      你可以看到這個圖標幾次這段舊影片在施樂公司推出后不久,該圖標就消失了幾十年,到了21世紀后期,隨著智能手機市場的蓬勃發展,它再次出現。

      Norm Cox分享了他的想法。簡短訪談小商業趨勢討論圖標和它是如何發生的。Cox說:“我不得不咯咯地笑,”漢堡包“象征性的最近”的所有關注,并分享他對圖標最近復蘇的想法。

      它始終是一個非常簡單的圖標,具有明顯的視覺提示。它以列表格式表示文本行。這對于垂直導航菜單來說是有意義的,它當然適合智能手機屏幕。


      大約在智能手機淘金熱的同時,我們也跌跌撞撞進入了世界。響應設計.Ethan Marcotte wrote a迷人的一塊回到2010五月討論如何響應設計工作,以及它如何改變網絡。

      網站很快就被設計成更小的屏幕,他們也開始采用漢堡包菜單。隨著時間的推移,這個小圖標變成了任何隱藏菜單的自然解決方案,并從此變成了我們今天看到的龐然大物。

      現代漢堡包菜單

      如今,設計界對漢堡包圖標菜單有著不同的感受。雖然這些圖標能很好地保持頁面上的鏈接,但它們可以導致可發現性問題 .

      然而,越來越多的人正在學習這個圖標的含義,所以越來越難與之抗爭。不可否認的是漢堡包圖標越來越受歡迎,他們在這里待了一段時間。


      但我認為每個東莞網絡公司設計師都需要考慮這個圖標的價值,并選擇它是否適合每個項目。

      讓我們看看一些利弊,看看它們是如何堆積起來的。

      贊成的意見:

      • 在小屏幕上處理大型菜單的最簡單方法
      • 年復一年變得越來越容易辨認
      • 最適合博客,其中Nav鏈接并不重要

      欺騙:

      • 普通游客更難找到菜單
      • 漢堡圖標對每個人都不清楚。
      • 菜單訪問總是需要額外點擊。


      我將這一切歸結為漢堡包菜單沒有完全被識別為可能導致混亂的非頁面菜單這一事實,甚至那些識別圖標的人可能不想每次點擊訪問菜單鏈接,這可能會導致更高的彈跳率。

      我個人喜歡漢堡包菜單,但只有在適當的上下文中使用。它在所有網站上都不太好,它可能不是每一個Web項目的最佳解決方案。

      但它確實起作用。越來越多的人開始熟悉這個符號所代表的東西。

      如果你想對漢堡包滑動菜單的UX生存能力有不同的意見,那么查看這些文章:

      • 漢堡菜單在網頁設計中的有效性分析

      • 為什么使用漢堡包圖標完全可以

      • 漢堡包圖標的天才和潛在危險

      漢堡包菜單設計趨勢


      很容易討論漢堡包菜單應該如何運作,或者為什么它會以某種方式工作。但是當你看一些例子的時候,你就可以真正看到這個圖標是如何在現實世界中運作的。

      以…為例喜劇中心他們的全導航菜單是超級容易使用的,當它在全景中,它跨越整個頁面寬度。

      但是當尺寸變小時,菜單消失,隱藏在一個小的三巴漢堡包圖標后面。當你點擊它時,它仍然在幻燈片菜單中提供相同的鏈接,但是如果你以前從未使用過這個菜單,那么它們可能很難訪問。


      我在網上看到了很多這些幻燈片菜單,喜劇中心的執行是最好的。它有很高的對比度,使用多層次的鏈接,并在所有設備和屏幕大小上工作。

      一個偉大的設計的目標是理想地取悅每個人。不幸的是,這是一個幻想,從來沒有發生過,所以接下來最好的事情是盡可能多的用戶用他們所理解的菜單。

      另一個例子可以在卡通釀造這個博客的鏈接比喜劇中心少,所以導航欄會下降到頁面,而不是從屏幕上滑動。


      但是因為它很簡單,而且混合得很好,我認為用戶體驗非常適合。很多用戶甚至懶得瀏覽導航,所以這個菜單也沒有那么直接的價值。

      從另一面看菜單杠鈴服裝電子商務網站必須仔細考慮導航,因為這些鏈接與簡單的博客導航相比是必不可少的。

      我喜歡這個設計是在漢堡包圖標旁邊加上“菜單”這個詞,這有助于指導那些不認識這個符號的訪問者,而且不會占用額外的空間。


      如果你擔心一些用戶不會識別圖標,那么試著用“菜單”來替換它。這樣做也很好,它仍然使用相同的技術來獲得NVC鏈接,以放置主要內容的前部和中心。

      最佳免費資源

      讓我們總結一下一些最好的漢堡包/滑動抽屜插件,你可以使用它來進行Web項目。這些都是免費的和開源的,所以你可以重新使用并編輯它們。

      加上新的插件得到釋放,所以如果你不喜歡任何這些都可以自由地打擊谷歌尋找另一種選擇。

      jQuery mmenu


      這可能是最古老的滑動菜單插件之一,它也提供了一些最大的支持。jQuery mmenu插件帶有一個純粹的jQuery解決方案,甚至還有一個WordPress插件來啟動。

      當你到達一個特定的視口時,它會把你的導航轉換成一個滑動的導航,你可以自定義很多的特性。完整文檔在插件網站上

      SlickNav

      一個鮮為人知的解決方案是SlickNav它使用一個與漢堡包圖標綁定的下拉功能。通過這個插件,你可以添加隱藏在頁面頂部的隱藏菜單。


      它確實有jQuery支持,但是你也可以在純JavaScript上運行它。它是非常通用的,甚至支持下拉菜單的多層次導航鏈接。

      jPanelMenu

      我已經用過jPanelMenu有幾次,它總是超級容易實現。它是建立在jQuery之上的,它使滑動漢堡包菜單瘋狂簡單。

      我個人認為這個插件對于移動Web應用程序更好,而不是完整的網站。它使用自定義滾動條,它更適合WebApp設計美學,但是它可以在任何大型網站上運行,適用于任何大小的導航菜單。

      WordPress響應菜單

      WordPress是最常用的CMS,有很好的理由。它有成千上萬個免費的主題/插件,其中之一是響應菜單插件這是一個幻燈片菜單,并且總是為WordPress的當前版本更新。

      你可以在下面找到生動的例子和更多的信息。官方網站隨著文檔自定義菜單

      包扎

      東莞網絡公司在我的經驗中,漢堡包菜單什么也沒做,只是成長和接管反應設計世界。我看不出這種趨勢很快消散,直到有一個更好的解決方案密集響應型導航,我不希望看到任何主要的網站轉移到另一個趨勢。


      网赚团队