何時使用漢堡包菜單設計

来源:http://www.cnblogs.com/thomas2/archive/2017/07/25/7233222.html
-Advertisement-
Play Games

漢堡包菜單,也叫側邊欄菜單。它由三個堆疊線條(你可以形象的想象成漢堡包中上下的兩個麵包和中間的肉)的圖標用於表示菜單。點擊圖標時,會顯示可用的導航選項。很多設計師寫的有關漢堡包菜單設計的文章,都不看好這種設計。總結其缺點,主要體現在:1.可發現性較低;2.效率較低;3.與系統的導航模式衝突;4.不夠 ...


漢堡包菜單,也叫側邊欄菜單。它由三個堆疊線條(你可以形象的想象成漢堡包中上下的兩個麵包和中間的肉)的圖標用於表示菜單。點擊圖標時,會顯示可用的導航選項。很多設計師寫的有關漢堡包菜單設計的文章,都不看好這種設計。總結其缺點,主要體現在:1.可發現性較低;2.效率較低;3.與系統的導航模式衝突;4.不夠一目瞭然。大家如果感興趣的話,可以搜索相關文章詳細瞭解一下。但究其根本,並不是圖標本身,而是隱藏在圖標後面導航選項。

儘管如此,在某些情況下,漢堡包菜單設計可能是一個不錯的選擇。

如:漢堡包菜單作為輔助導航

由於漢堡包菜單的主要缺點是其低可發現性,因此不推薦將其使用為主導航菜單。但是,在設計輔助導航選項時,這種模式可能是一個合適的解決方案。如果主導航選項在屏幕上以CTA按鈕(即用戶響應行動或叫用戶行為召喚)或其他形式展現,在輔助導航中使用漢堡包菜單設計會是一個好的方法。

下麵以Uber主屏幕作為例子:

1-D1EZn4iJeN6m3UCXcvVF0w.png

地圖和搜索(Uber屏幕的兩個重要導航元素)始終是可見的。

由於主屏幕的所有內容都是為了打車,所以諸如歷史記錄和設置等次要選項可以隱藏在漢堡菜單的後面(這些功能在每個人打開應用程式時不太可能都去使用)。這個漢堡包圖標不會分散用戶打車的註意力,而且仍然允許他們訪問裡面的輔助功能。

在這種特殊情況下:

導航元素越少意味著當用戶與應用程式交互時受到的干擾就越少。而且,最小化導航使用戶的註意力集中在打車上。

一般來說,在你選擇是否使用漢堡包菜單時,請考慮“80%規則”。也就是,你想要隱藏在漢堡圖標後面的導航選項會低於正常使用的80%嗎? 如果你的答案是肯定的,那麼把它們放在漢堡菜單里就沒問題了。

結論:

雖然隱藏的導航通常不利於用戶體驗,但任何設計決策都必須對應用程式的目標情景進行綜合考慮。換句話說,沒有“好”或“壞”的設計模式。最重要的是使用情景。

原文作者:Nick Babich

原文鏈接:http://babich.biz/hamburger-good-ux/

更多設計類相關乾貨(文章及經驗教程),盡在:UI/UX專業博客

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 倒計時主要用到的知識點:1、設置時間間隔的setInterval可以被clearInterval取消 2、毫秒轉換為時分格式 這個是效果圖 下麵是js中的函數 第二個是html資源,為了方便我css直接寫在html中了 需要代碼的小伙伴可以自行下載 鏈接:http://pan.baidu.com/s ...
  • 【來源】由於自己非電腦出身,所以對於底層的一些常識的認識不夠;近期開始自修《網易雲課堂》的大學四年電腦,碰到了一個通過三角函數計算角度的問題;為了讓自己重溫三角函數知識,引出了之後一些列的實踐和思考,而且最後我用的非三角函數知識; 【思考】對於時鐘這種插件,《慕課網》上有很多講解,也看了一些,怎 ...
  • 一說到數組排序,最直觀的想法就是用sort啊! 請問不用使用sort方法還可以使用什麼方法進行數組排序? 比如 : 快速排序法、合併排序法、冒泡排序法、選擇排序法、插入排序法、布爾排序法、交互排序、選擇排序、二分法排序..... 等等一下,在我們瞭解這些排序方法之前,為了更好的理解,先讓我們探索一下 ...
  • 互動朋友圈模型設計 根據該模型生出資料庫後的表結構如下: 如有問題,請留言! ...
  • s中判斷對象是否存在,寫法有很多種: 出自:http://www.ruanyifeng.com/blog/2011/05/how_to_judge_the_existence_of_a_global_object_in_javascript.html ...
  • 查找電腦埠的占用情況 例如查埠號5037(adb的埠)的占用情況 一、使用 netstat -ano命令 找到埠號為5037的,並且找到對應進程的PID 然後我們區windows任務管理器裡面找PID是5736的進程是什麼 找到為eclipse,說明找對了,因為eclipse會調用adb ...
  • 引言 根據拷貝內容的不同,分為深淺拷貝 深拷貝:指針賦值,且內容拷貝 淺拷貝:只是簡單的指針賦值 蘋果為什麼這麼設計呢?總結起來很簡單:即安全又省記憶體。但是要理解或者避免踩一些坑,還需要看下麵的介紹 記憶體 不得不先說到記憶體,又不得不說記憶體分區: "程式底層——程式如何在RAM ROM運行,記憶體分配與 ...
  • 前言 現在有一種說法,是開啟arc選項時,已經沒有棧上的block了,所以所有的block都不需要copy來拷貝到堆上了。那麼這個說法正確與否呢? 結論是這個說法必須是錯誤的,首先的一點就是arc只是編譯器幫助我們給對象自動增加retain,release方法,我們不需要手動的去管理這些成對出現的內 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...