原型說明咋寫-下拉菜單
開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。
對原型規范&說明模板不明白朋友,可查看:如何解決原型說明寫不全?
本期組件:下拉菜單
組件概述:當頁面上操作命令過多時,此組件可收納操作元素。移入觸點時展開下拉列表面板,可在列表中進行選擇,并執行相應的命令。
1. 約定基礎樣式??
本節主要與研發約定默認實現內容,通過規范文檔維護。
1、按鈕的懸停、點擊、禁用樣式,遵循“基礎按鈕”相關規范
2、兩種樣式:全框下拉按鈕、半框下拉按鈕
- 全框:箭頭懸停于按鈕展開下拉菜單,下拉菜單名稱為所包含操作的總稱
- 半框:按鈕中帶隔斷,左側是主按鈕操作,右側箭頭懸停展開下拉菜單
3、特殊情況處理
- 操作按鈕有禁用樣式
- 操作按鈕超出5個,做滾動處理
- 無下拉按鈕,則隱藏下拉符號及功能
2. 約定基礎交互
1、彈出方式:默認為鼠標懸停向下彈出下拉框。
- 如需點擊后彈出,則寫在說明中
- 需根據按鈕與窗口邊緣距離判斷彈出方向,當空間不足時,則向上展開
2、隱藏方式:點擊按鈕、鼠標移出下拉框
3. 約定可控參數
本節主要與研發約定原型中可控制的參數,也通過規范文檔維護。文中會提供示例參數,及參數填寫說明。
1、為提升原型可讀性,首個按鈕名稱需寫在原型中
2、說明編寫方式
- 通過格式“按鈕位置:按鈕名稱|點擊事件”進行說明描述。按鈕有條件禁用則:按鈕名稱|禁用條件|點擊時間
- 一個按鈕用一個描述點
- 半框按鈕從“主按鈕”開始,全框按鈕從“按鈕1”開始
- 有組件相關的說明,寫在“其他”
4. 輸出說明模板
組件名稱前加個“規范”,便于團隊識別規范組件;模板可直接寫入注釋,并存為Axure/墨刀元件庫
4.1. 全框下拉菜單(左側)
- 組件名稱:全框下拉菜單
- 按鈕1:按鈕名稱|點擊事件
- 按鈕2:按鈕名稱|點擊事件
- …
- 其他:暫無
4.2. 半框下拉菜單(右側)??
- 組件名稱:半框下拉菜單
- 主按鈕:按鈕名稱如原型|點擊事件
- 按鈕1:按鈕名稱|點擊事件
- …
- 其他:暫無
結語
本系列持續更新,喜歡的朋友請點個【關注】或【收藏】,您的鼓勵是我們持續分享的動力。
本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
評論
- 目前還沒評論,等你發揮!