原型說明咋寫-表格:表頭設置
開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。文末提供模板,可直接用
對提前準備原型規范&說明模板不明白的朋友,可以先查看《如何解決原型說明寫不全?》
===強烈建議【關注】或【收藏】不迷路===
本期組件:表格-表頭設置
組件概述:用于設置表頭內容,提升表格可用性及顯示靈活性。
注:此設置為個性化設置,需保存在用戶賬號下。建議在項目初期于需求文檔中明確“表頭設置”作為用戶個性化設置存儲,如:
- 需設置的表格:將在原型中通過對應標識說明。
- 表格設置內容:列寬、顯示字段、左右側固定字段、字段順序、排序方式等
一、約定基礎規范
本節主要與研發約定默認實現內容,通過規范文檔維護。
1. 基礎樣式
如圖中藍色區域,整個表頭及尾部“設置”按鈕,為表頭設置區域,其中:
- 拖動表頭:設置列寬
- 點擊按鈕:彈窗中設置字段
2. 基礎交互
2.1. 列寬設置
鼠標懸停在表頭間隔線上,拖拽可設置左列寬,右列不改變列寬,僅推動右側位置
注:表格整體寬度超出表格顯示區域,則“左右滾動”
2.2. 字段設置
點擊表頭右側“設置”按鈕,在彈窗中設置。包含字段顯示、字段順序、字段固定左側/右側
字段顯示:通過復選框設置是否顯示,固定字段默認顯示,且不可切換
字段順序:通過拖拽復選框左側的“拖拽符號”可改變字段順序
字段固定:通過拖拽,可將“不固定字段”拖拽至“固定”中
- 常駐固定字段,則不可拖拽,如“字段1”
- “操作列”默認固定右側,因不屬于字段,所以不上設置清單
二、約定可控參數
本節主要與研發約定原型中可控制的參數,也通過規范文檔維護。文中會提供示例參數,及參數填寫說明。
1、設置保存:保存在用戶、不保存、保存在瀏覽器
- 保存在瀏覽器,受清除緩存影響
2、列寬:可設置/不可設置
- 可設置則鼠標懸停表頭間隔線有拖拽符號,反之亦然
3、顯示字段:可設置/不可設置
- 可設置則字段前有多選框,反之亦然
- 必須顯示字段如:編號、名稱等,可放置在“固定區”并說明
4、固定字段:可設置/不可設置
- 可設置則劃分出“固定區”,反之亦然
- 默認固定左側,是否還有固定右側,受“表格說明”影響,詳見【基礎表格】
- 常駐固定區字段,需列出
5、字段順序:可設置/不可設置
- 可設置則有拖拽按鈕,反之亦然
注:默認列寬、顯示字段、固定字段、字段順序,可在“表格說明”中說明,詳見【基礎表格】
三、輸出說明模板
組件名稱前加個“規范”,便于團隊識別規范組件;模板可直接寫入注釋,并存為Axure/墨刀元件庫。
組件可在原型中拖拽至表頭尾部使用,如:
組件名稱:表頭設置
設置保存:保存在用戶
列寬:可設置
顯示字段:可設置
固定字段:可設置,常駐字段如下:
- 常駐字段1
- 常駐字段2
字段順序:可設置
結語
本系列持續更新,喜歡的朋友請點個【關注】或【收藏】,您的鼓勵是我們持續分享的動力。
本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!