原型說明咋寫-級聯復選器

2 評論 1473 瀏覽 8 收藏 9 分鐘

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

步驟一:約定規范

如圖,與開發、UI約定組件規范,并維護在獨立文檔中。

步驟二:使用模板

如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發看到組件,則使用約定規范;墨刀同理?!綪S:想了解word如何使用,請評論留言哈】

那么,規范與模板應該怎么寫?

本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面(表單頁、列表頁、詳情頁)寫法,將規范與模板分享予您。

  • 本期組件:級聯復選器
  • 組件概述:當一個數據集合有清晰的層級結構時,可通過級聯選擇器逐級查看并選擇。

一、約定規范

本節主要與開發、UI約定默認實現內容,并明確通過哪種形式約束交互;

本節內容可通過一份規范文檔維護。

1. 輸入框規范

默認、懸停、完成:需有對應樣式

1)輸入框完成樣式

平鋪展示:框內以標簽形式展示選中項,排版為響應式布局

  • 標簽按選擇順序排序
  • 標簽帶刪除按鈕,點擊直接刪除,下個標簽自動補位

合并展示:再起一個標簽,按已選標簽之外計數,如:已選2個為+1,已選3個為+2

2)產品可控參數

完成樣式:平鋪展示/合并展示

3)標簽完成樣式

  • 顯示完整路徑:不同級別選項通過“/”區分
  • 顯示最后一級:即只顯示最后一級

4)產品可控參數

標簽樣式:顯示完整路徑/ 顯示最后一級

5)一鍵清除

  • 無選項時懸停,不做改變
  • 有選項時懸停,右側圖標切換為“清空”狀態,點擊清空選項。(注:點擊清空圖標之外,為選擇器基礎交互)

6)產品可控參數

帶清除:是/否

2. 展開面板

  • 展開收起:單擊輸入框,展開面板;點擊輸入框之外則收起。
  • 展開方向:默認向下向右,當空間不夠時,需往空間足夠方向展開。
  • 路徑記憶:收起面板,記憶上次路徑;重新載入頁面,則回到第一。

3. 面板說明

1)默認、懸停、選中

①需有對應樣式

②選項按級別從左往右排列,一般到第三層級

③子菜單觸發

  • 點擊觸發:點擊父級內容區域,切換子集內容
  • 懸停觸發:鼠標懸停哪個父級,則切換哪個子集

④選中交互說明

  • 點擊可切換選中
  • 選中子集,父級路徑選項有對應樣式
  • 選中父級,則全選子集

產品可控參數

  • 選項清單:建議通過說明維護選項,可通過序號區隔方式列出選項
  • 選項排序:默認按清單順序排序
  • 默認選項:即默認選中哪個選項
  • 子菜單觸發:點擊/懸停

2)選項說明

可自定備選項顯示內容,一般用于顯示子集數量

產品可控參數

選項顯示:顯示一級子集數量

3)選擇方式

通過點擊多選框完成選擇,方式區分如下:

  • 選最后一級:可勾選任意級別選項,但勾選父節點真正選中的是末子節點
  • 選任意一級:可勾選任意級別選項,而不關聯子節點

產品可控參數

選擇方式:最后一級/任意層級

4)面板滾動

選項超過5個,則滾動顯示(注:首個超出選項顯示一半,以引導用戶可滾動)。

4.異常樣式

①超出顯示范圍

  • 選項個數超出:超出一行,則輸入框向下響應式拓展
  • 已選項超長:超出部分省略
  • 選項長度超長:拓展面板寬度,但不超出窗口邊界

②待選項為空

  • 整體無數據:面板提示“無匹配數據”
  • 個別選項無數據:此選項不顯示“向右箭頭”

③禁用

分為選擇框禁用、選項禁用,需有對應樣式。一般要說明什么原因導致的禁用

④產品可控參數

禁用:XXX事件會導致選擇器禁用/導致某選項禁用

5.其他

  • 可搜索:支持通過輸入關鍵字,從待選項中搜索結果
  • 影響事件:獲取焦點、失去焦點、選中選項都可以產生影響其他組件的事件

產品可控參數

  • 可搜索:無需/支持,搜索方式默認為半匹配
  • 影響事件:選中選項,如果是XXX,則顯示XXX組件

二、產出模板

組件名稱前加個“規范”,便于團隊識別規范組件

模板可直接寫入注釋,并存為Axure/墨刀元件庫

  • 組件名稱:規范-級聯復選器
  • 選項清單:
  • 選項排序:默認按清單順序排序
  • 默認選項:
  • 子菜單觸發:懸停
  • 標簽樣式:顯示完整路徑/
  • 完成樣式:平鋪展示
  • 帶清除:是
  • 選項顯示:無需
  • 選擇方式:選最后一級
  • 禁用:無
  • 可搜索:支持,搜索方式默認為半匹配
  • 影響事件:選中選項,如果是XXX,則顯示XXX組件

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

題圖來自Unsplash,基于 CC0 協議

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 怎么下載

    來自天津 回復
    1. 您好,可以關注公眾號:產品工具庫。
      后續會提供下載鏈接哦。

      來自福建 回復