開發(fā)吐槽原型說明不清晰，領(lǐng)導(dǎo)催促原型要快細(xì)節(jié)再說，真是夾縫中生存的產(chǎn)品。今天教大家一個(gè)方法，既快又全。

對(duì)原型規(guī)范&說明模板不明白朋友，可查看：如何解決原型說明寫不全？

本期組件：下拉菜單

組件概述：當(dāng)頁面上操作命令過多時(shí)，此組件可收納操作元素。移入觸點(diǎn)時(shí)展開下拉列表面板，可在列表中進(jìn)行選擇，并執(zhí)行相應(yīng)的命令。

1. 約定基礎(chǔ)樣式??

本節(jié)主要與研發(fā)約定默認(rèn)實(shí)現(xiàn)內(nèi)容，通過規(guī)范文檔維護(hù)。

1、按鈕的懸停、點(diǎn)擊、禁用樣式，遵循“基礎(chǔ)按鈕”相關(guān)規(guī)范

2、兩種樣式：全框下拉按鈕、半框下拉按鈕

• 全框：箭頭懸停于按鈕展開下拉菜單，下拉菜單名稱為所包含操作的總稱
• 半框：按鈕中帶隔斷，左側(cè)是主按鈕操作，右側(cè)箭頭懸停展開下拉菜單

3、特殊情況處理

• 操作按鈕有禁用樣式
• 操作按鈕超出5個(gè)，做滾動(dòng)處理
• 無下拉按鈕，則隱藏下拉符號(hào)及功能

2. 約定基礎(chǔ)交互

1、彈出方式：默認(rèn)為鼠標(biāo)懸停向下彈出下拉框。

• 如需點(diǎn)擊后彈出，則寫在說明中
• 需根據(jù)按鈕與窗口邊緣距離判斷彈出方向，當(dāng)空間不足時(shí)，則向上展開

2、隱藏方式：點(diǎn)擊按鈕、鼠標(biāo)移出下拉框

3. 約定可控參數(shù)

本節(jié)主要與研發(fā)約定原型中可控制的參數(shù)，也通過規(guī)范文檔維護(hù)。文中會(huì)提供示例參數(shù)，及參數(shù)填寫說明。

1、為提升原型可讀性，首個(gè)按鈕名稱需寫在原型中

2、說明編寫方式

• 通過格式“按鈕位置：按鈕名稱|點(diǎn)擊事件”進(jìn)行說明描述。按鈕有條件禁用則：按鈕名稱|禁用條件|點(diǎn)擊時(shí)間

• 一個(gè)按鈕用一個(gè)描述點(diǎn)
• 半框按鈕從“主按鈕”開始，全框按鈕從“按鈕1”開始
• 有組件相關(guān)的說明，寫在“其他”

4. 輸出說明模板

組件名稱前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識(shí)別規(guī)范組件；模板可直接寫入注釋，并存為Axure/墨刀元件庫

4.1. 全框下拉菜單（左側(cè)）

• 組件名稱：全框下拉菜單
• 按鈕1：按鈕名稱|點(diǎn)擊事件
• 按鈕2：按鈕名稱|點(diǎn)擊事件
• …
• 其他：暫無

4.2. 半框下拉菜單（右側(cè)）??

• 組件名稱：半框下拉菜單
• 主按鈕：按鈕名稱如原型|點(diǎn)擊事件
• 按鈕1：按鈕名稱|點(diǎn)擊事件
• …
• 其他：暫無

結(jié)語

本系列持續(xù)更新，喜歡的朋友請(qǐng)點(diǎn)個(gè)【關(guān)注】或【收藏】，您的鼓勵(lì)是我們持續(xù)分享的動(dòng)力。