原型說明咋寫-表格:表頭設置

0 評論 1420 瀏覽 7 收藏 6 分鐘

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

對提前準備原型規范&說明模板不明白的朋友,可以先查看《如何解決原型說明寫不全?》

===強烈建議【關注】或【收藏】不迷路===

本期組件:表格-表頭設置

組件概述:用于設置表頭內容,提升表格可用性及顯示靈活性。

注:此設置為個性化設置,需保存在用戶賬號下。建議在項目初期于需求文檔中明確“表頭設置”作為用戶個性化設置存儲,如:

  • 需設置的表格:將在原型中通過對應標識說明。
  • 表格設置內容:列寬、顯示字段、左右側固定字段、字段順序、排序方式等

一、約定基礎規范

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

1. 基礎樣式

如圖中藍色區域,整個表頭及尾部“設置”按鈕,為表頭設置區域,其中:

  • 拖動表頭:設置列寬
  • 點擊按鈕:彈窗中設置字段

2. 基礎交互

2.1. 列寬設置

鼠標懸停在表頭間隔線上,拖拽可設置左列寬,右列不改變列寬,僅推動右側位置

注:表格整體寬度超出表格顯示區域,則“左右滾動”

2.2. 字段設置

點擊表頭右側“設置”按鈕,在彈窗中設置。包含字段顯示、字段順序、字段固定左側/右側

字段顯示:通過復選框設置是否顯示,固定字段默認顯示,且不可切換

字段順序:通過拖拽復選框左側的“拖拽符號”可改變字段順序

字段固定:通過拖拽,可將“不固定字段”拖拽至“固定”中

  • 常駐固定字段,則不可拖拽,如“字段1”
  • “操作列”默認固定右側,因不屬于字段,所以不上設置清單

二、約定可控參數

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

1、設置保存:保存在用戶、不保存、保存在瀏覽器

  • 保存在瀏覽器,受清除緩存影響

2、列寬:可設置/不可設置

  • 可設置則鼠標懸停表頭間隔線有拖拽符號,反之亦然

3、顯示字段:可設置/不可設置

  • 可設置則字段前有多選框,反之亦然
  • 必須顯示字段如:編號、名稱等,可放置在“固定區”并說明

4、固定字段:可設置/不可設置

  • 可設置則劃分出“固定區”,反之亦然
  • 默認固定左側,是否還有固定右側,受“表格說明”影響,詳見【基礎表格】
  • 常駐固定區字段,需列出

5、字段順序:可設置/不可設置

  • 可設置則有拖拽按鈕,反之亦然

注:默認列寬、顯示字段、固定字段、字段順序,可在“表格說明”中說明,詳見【基礎表格】

三、輸出說明模板

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

組件可在原型中拖拽至表頭尾部使用,如:

組件名稱:表頭設置

設置保存:保存在用戶

列寬:可設置

顯示字段:可設置

固定字段:可設置,常駐字段如下:

  • 常駐字段1
  • 常駐字段2

字段順序:可設置

結語

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

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

題圖來自Unsplash,基于 CC0 協議

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

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