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

一、組件介紹

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

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

二、常規(guī)菜單

1. 需求場(chǎng)景

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

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

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

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

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

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

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

• 純文本菜單

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

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

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

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

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

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

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

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

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

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

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

3. 交互行為

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

2）點(diǎn)擊按鈕，展開(kāi)下拉菜單：

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

4）菜單項(xiàng)具備輔助操作按鈕時(shí)，點(diǎn)擊配置按鈕時(shí)不隱藏菜單：

5）點(diǎn)擊下拉菜單外部區(qū)域時(shí)，自動(dòng)隱藏下拉菜單：

三、多級(jí)菜單

1. 需求場(chǎng)景

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

2）會(huì)有多級(jí)菜單。

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

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

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

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

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

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

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

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

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

3. 交互行為

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

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

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

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

四、總結(jié)

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

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

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

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