編輯導(dǎo)語：在前一篇文章《B端UI界面交互基礎(chǔ)組件-按鈕》中，本文作者帶著大家一起學(xué)習(xí)了B端“按鈕”組件UI設(shè)計規(guī)范，其中包括常規(guī)按鈕、開關(guān)按鈕、多狀態(tài)切換按鈕、組合按鈕等組件，并從“按鈕”組件的需求場景、內(nèi)容布局以及交互方式等方面對以上組件進行了詳盡的規(guī)范描述。今天，作者又為我們介紹了B端“下拉菜單”組件的交互規(guī)范。

一、組件介紹

下拉菜單主要用于將一些相同分類的功能放置在同一個浮層中，并置于按鈕或主選單的一個選項中。

下拉菜單中的項目可以根據(jù)需要，設(shè)置成單選、多選或者僅作為操作觸發(fā)的入口，具有占用空間少的優(yōu)點；但是缺點也很明顯——不如所有按鈕直接陳列來的直觀。

二、常規(guī)菜單

1. 需求場景

1）顯示區(qū)域不夠展示；

2）內(nèi)容不夠重要、操作頻次較低，降低用戶界面內(nèi)容閱讀難度。

2. 內(nèi)容與布局

1）下拉菜單根據(jù)整體布局，從左至右分為：圖標(biāo)區(qū)域、文本區(qū)域、輔助&備注區(qū)域，如下圖所示：

2）菜單項圖標(biāo)與菜單項文本局左對齊，備注&輔助信息區(qū)域內(nèi)容右對齊；

3）根據(jù)菜單配置的不同，允許對菜單項顯示內(nèi)容進行布局裁剪：

• 純圖標(biāo)菜單項

• 純文本菜單

• 圖標(biāo)+文本菜單項

4）在同一菜單列表中所有的圖標(biāo)區(qū)域?qū)挾刃璞３忠恢?，如果菜單列表中某一菜單有圖標(biāo)，則其他菜單項需要保留圖標(biāo)位置：

5）功能操作菜單項文本不允許出現(xiàn)省略號；

6）帶文本的菜單項，如果點擊后會出現(xiàn)二次操作項，需要提供省略號“…”示意：

7）菜單中根據(jù)業(yè)務(wù)性質(zhì)或功能性質(zhì)可進行分組，并提供視覺示意：

8）菜單項根據(jù)功能或者實際使用過程中的頻次進行降序排列，同組內(nèi)的菜單項根據(jù)操作影響范圍進行升序排列：

• 一般主要操作在前，次要操作在后；
• 瀏覽操作在前、刪除操作在后。

9）默認(rèn)菜單與觸發(fā)按鈕居左對齊，菜單頂部居于觸發(fā)區(qū)域底部：

10）菜單欄右側(cè)可視區(qū)域不能完全顯示菜單時，菜單右側(cè)與觸發(fā)區(qū)域局右對齊：

11）觸發(fā)區(qū)域底部與頁面可視區(qū)域底部高度小于菜單高度時，菜單底部局區(qū)域底部顯示：

12）下拉菜單長度超過4/5顯示區(qū)域時，下拉菜單允許內(nèi)部出現(xiàn)滾動條：

3. 交互行為

1）鼠標(biāo)移入按鈕區(qū)域，按鈕狀態(tài)發(fā)生變化：

2）點擊按鈕，展開下拉菜單：

3）點擊下拉菜單的菜單項，下拉菜單收起隱藏，并執(zhí)行相應(yīng)操作：

4）菜單項具備輔助操作按鈕時，點擊配置按鈕時不隱藏菜單：

5）點擊下拉菜單外部區(qū)域時，自動隱藏下拉菜單：

三、多級菜單

1. 需求場景

1）在常規(guī)菜單項中，菜單項有子集數(shù)據(jù)或操作項；

2）會有多級菜單。

2. 內(nèi)容與布局

1）菜單布局模式與常規(guī)菜單相同：

2）若菜單項有子菜單，需要提供示意圖標(biāo)：

3）多級菜單位置第一級基礎(chǔ)定位邏輯與常規(guī)菜單一致；

4）子集菜單顯示區(qū)域：

• ?在右側(cè)顯示區(qū)域足夠的情況下，優(yōu)先在父級菜單右側(cè)顯示：

• 若右側(cè)顯示區(qū)域不足以顯示菜單，則可在父級菜單的左側(cè)顯示：

• 當(dāng)下拉菜單中任意一項菜單項的子菜單寬度超過右側(cè)顯示區(qū)域時，子菜單均需要顯示在父菜單的左側(cè)。

5）多級菜單嚴(yán)禁超過兩級。

3. 交互行為

1）菜單項操作響應(yīng)遵守常規(guī)菜單交互行為約束；

2）鼠標(biāo)移入具有子菜單的菜單項，停留250ms后，顯示其對應(yīng)的子菜單：

3）鼠標(biāo)移出響應(yīng)父操作項200ms后，對應(yīng)顯示的子菜單需自動隱藏；

4）子菜單交互行為可參考常規(guī)菜單行為約束。

四、總結(jié)

關(guān)于B端基礎(chǔ)交互組件“下拉菜單”的相關(guān)分享就到這里，下一章我們介紹“輸入框”的相關(guān)交互規(guī)范。

作者：云桌面產(chǎn)品，微信公眾號：云桌面產(chǎn)品，歡迎關(guān)注

本文由 @云桌面產(chǎn)品 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 unsplash，基于 CC0 協(xié)議