起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B端UI界面交互基礎組件-下拉菜單
編輯導語：在前一篇文章《B端UI界面交互基礎組件-按鈕》中，本文作者帶著大家一起學習了B端“按鈕”組件UI設計規范，其中包括常規按鈕、開關按鈕、多狀態切換按鈕、組合按鈕等組件，并從“按鈕”組件的需求場景、內容布局以及交互方式等方面對以上組件進行了詳盡的規范描述。今天，作者又為我們介紹了B端“下拉菜單”組件的交互規范。
一、組件介紹
下拉菜單主要用于將一些相同分類的功能放置在同一個浮層中，并置于按鈕或主選單的一個選項中。
下拉菜單中的項目可以根據需要，設置成單選、多選或者僅作為操作觸發的入口，具有占用空間少的優點；但是缺點也很明顯——不如所有按鈕直接陳列來的直觀。
二、常規菜單
1. 需求場景
1）顯示區域不夠展示；
2）內容不夠重要、操作頻次較低，降低用戶界面內容閱讀難度。
2. 內容與布局
1）下拉菜單根據整體布局，從左至右分為：圖標區域、文本區域、輔助&備注區域，如下圖所示：
2）菜單項圖標與菜單項文本局左對齊，備注&輔助信息區域內容右對齊；
3）根據菜單配置的不同，允許對菜單項顯示內容進行布局裁剪：
- 純圖標菜單項
- 純文本菜單
- 圖標+文本菜單項
4）在同一菜單列表中所有的圖標區域寬度需保持一致，如果菜單列表中某一菜單有圖標，則其他菜單項需要保留圖標位置：
5）功能操作菜單項文本不允許出現省略號；
6）帶文本的菜單項，如果點擊后會出現二次操作項，需要提供省略號“…”示意：
7）菜單中根據業務性質或功能性質可進行分組，并提供視覺示意：
8）菜單項根據功能或者實際使用過程中的頻次進行降序排列，同組內的菜單項根據操作影響范圍進行升序排列：
- 一般主要操作在前，次要操作在后；
- 瀏覽操作在前、刪除操作在后。
9）默認菜單與觸發按鈕居左對齊，菜單頂部居于觸發區域底部：
10）菜單欄右側可視區域不能完全顯示菜單時，菜單右側與觸發區域局右對齊：
11）觸發區域底部與頁面可視區域底部高度小于菜單高度時，菜單底部局區域底部顯示：
12）下拉菜單長度超過4/5顯示區域時，下拉菜單允許內部出現滾動條：
3. 交互行為
1）鼠標移入按鈕區域，按鈕狀態發生變化：
2）點擊按鈕，展開下拉菜單：
3）點擊下拉菜單的菜單項，下拉菜單收起隱藏，并執行相應操作：
4）菜單項具備輔助操作按鈕時，點擊配置按鈕時不隱藏菜單：
5）點擊下拉菜單外部區域時，自動隱藏下拉菜單：
三、多級菜單
1. 需求場景
1）在常規菜單項中，菜單項有子集數據或操作項；
2）會有多級菜單。
2. 內容與布局
1）菜單布局模式與常規菜單相同：
2）若菜單項有子菜單，需要提供示意圖標：
3）多級菜單位置第一級基礎定位邏輯與常規菜單一致；
4）子集菜單顯示區域：
- ?在右側顯示區域足夠的情況下，優先在父級菜單右側顯示：
- 若右側顯示區域不足以顯示菜單，則可在父級菜單的左側顯示：
- 當下拉菜單中任意一項菜單項的子菜單寬度超過右側顯示區域時，子菜單均需要顯示在父菜單的左側。
5）多級菜單嚴禁超過兩級。
3. 交互行為
1）菜單項操作響應遵守常規菜單交互行為約束；
2）鼠標移入具有子菜單的菜單項，停留250ms后，顯示其對應的子菜單：
3）鼠標移出響應父操作項200ms后，對應顯示的子菜單需自動隱藏；
4）子菜單交互行為可參考常規菜單行為約束。
四、總結
關于B端基礎交互組件“下拉菜單”的相關分享就到這里，下一章我們介紹“輸入框”的相關交互規范。
作者：云桌面產品，微信公眾號：云桌面產品，歡迎關注
本文由 @云桌面產品 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 unsplash，基于 CC0 協議
很棒，謝謝分享～