編輯導語：在前一篇文章《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 協議