原型說明咋寫-下拉菜單

0 評論 2887 瀏覽 5 收藏 5 分鐘

開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。

對原型規范&說明模板不明白朋友,可查看:如何解決原型說明寫不全?

本期組件:下拉菜單

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

1. 約定基礎樣式??

本節主要與研發約定默認實現內容,通過規范文檔維護。

1、按鈕的懸停、點擊、禁用樣式,遵循“基礎按鈕”相關規范

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

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

3、特殊情況處理

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

2. 約定基礎交互

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

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

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

3. 約定可控參數

本節主要與研發約定原型中可控制的參數,也通過規范文檔維護。文中會提供示例參數,及參數填寫說明。

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

2、說明編寫方式

  • 通過格式“按鈕位置:按鈕名稱|點擊事件”進行說明描述。按鈕有條件禁用則:按鈕名稱|禁用條件|點擊時間
  • 一個按鈕用一個描述點
  • 半框按鈕從“主按鈕”開始,全框按鈕從“按鈕1”開始
  • 有組件相關的說明,寫在“其他”

4. 輸出說明模板

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

4.1. 全框下拉菜單(左側)

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

4.2. 半框下拉菜單(右側)??

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

結語

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

本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!