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

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

本期組件：下拉菜單

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

1. 約定基礎樣式??

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

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

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

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

3、特殊情況處理

• 操作按鈕有禁用樣式
• 操作按鈕超出5個，做滾動處理
• 無下拉按鈕，則隱藏下拉符號及功能

2. 約定基礎交互

1、彈出方式：默認為鼠標懸停向下彈出下拉框。

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

2、隱藏方式：點擊按鈕、鼠標移出下拉框

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

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

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

2、說明編寫方式

• 通過格式“按鈕位置：按鈕名稱|點擊事件”進行說明描述。按鈕有條件禁用則：按鈕名稱|禁用條件|點擊時間

• 一個按鈕用一個描述點
• 半框按鈕從“主按鈕”開始，全框按鈕從“按鈕1”開始
• 有組件相關的說明，寫在“其他”

4. 輸出說明模板

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

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

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

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

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

結(jié)語

本系列持續(xù)更新，喜歡的朋友請點個【關注】或【收藏】，您的鼓勵是我們持續(xù)分享的動力。