開(kāi)發(fā)吐槽原型說(shuō)明不清晰，領(lǐng)導(dǎo)催促原型要快細(xì)節(jié)再說(shuō)，真是夾縫中生存的產(chǎn)品。今天教大家一個(gè)方法，既快又全。文末提供模板，可直接用

對(duì)提前準(zhǔn)備原型規(guī)范&說(shuō)明模板不明白的朋友，可以先查看《如何解決原型說(shuō)明寫不全？》

===強(qiáng)烈建議【關(guān)注】或【收藏】不迷路===

本期組件：表格-表頭設(shè)置

組件概述：用于設(shè)置表頭內(nèi)容，提升表格可用性及顯示靈活性。

注：此設(shè)置為個(gè)性化設(shè)置，需保存在用戶賬號(hào)下。建議在項(xiàng)目初期于需求文檔中明確“表頭設(shè)置”作為用戶個(gè)性化設(shè)置存儲(chǔ)，如：

• 需設(shè)置的表格：將在原型中通過(guò)對(duì)應(yīng)標(biāo)識(shí)說(shuō)明。
• 表格設(shè)置內(nèi)容：列寬、顯示字段、左右側(cè)固定字段、字段順序、排序方式等

一、約定基礎(chǔ)規(guī)范

本節(jié)主要與研發(fā)約定默認(rèn)實(shí)現(xiàn)內(nèi)容，通過(guò)規(guī)范文檔維護(hù)。

1. 基礎(chǔ)樣式

如圖中藍(lán)色區(qū)域，整個(gè)表頭及尾部“設(shè)置”按鈕，為表頭設(shè)置區(qū)域，其中：

• 拖動(dòng)表頭：設(shè)置列寬
• 點(diǎn)擊按鈕：彈窗中設(shè)置字段

2. 基礎(chǔ)交互

2.1. 列寬設(shè)置

鼠標(biāo)懸停在表頭間隔線上，拖拽可設(shè)置左列寬，右列不改變列寬，僅推動(dòng)右側(cè)位置

注：表格整體寬度超出表格顯示區(qū)域，則“左右滾動(dòng)”

2.2. 字段設(shè)置

點(diǎn)擊表頭右側(cè)“設(shè)置”按鈕，在彈窗中設(shè)置。包含字段顯示、字段順序、字段固定左側(cè)/右側(cè)

字段顯示：通過(guò)復(fù)選框設(shè)置是否顯示，固定字段默認(rèn)顯示，且不可切換

字段順序：通過(guò)拖拽復(fù)選框左側(cè)的“拖拽符號(hào)”可改變字段順序

字段固定：通過(guò)拖拽，可將“不固定字段”拖拽至“固定”中

• 常駐固定字段，則不可拖拽，如“字段1”
• “操作列”默認(rèn)固定右側(cè)，因不屬于字段，所以不上設(shè)置清單

二、約定可控參數(shù)

本節(jié)主要與研發(fā)約定原型中可控制的參數(shù)，也通過(guò)規(guī)范文檔維護(hù)。文中會(huì)提供示例參數(shù)，及參數(shù)填寫說(shuō)明。

1、設(shè)置保存：保存在用戶、不保存、保存在瀏覽器

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

2、列寬：可設(shè)置/不可設(shè)置

• 可設(shè)置則鼠標(biāo)懸停表頭間隔線有拖拽符號(hào)，反之亦然

3、顯示字段：可設(shè)置/不可設(shè)置

• 可設(shè)置則字段前有多選框，反之亦然
• 必須顯示字段如：編號(hào)、名稱等，可放置在“固定區(qū)”并說(shuō)明

4、固定字段：可設(shè)置/不可設(shè)置

• 可設(shè)置則劃分出“固定區(qū)”，反之亦然
• 默認(rèn)固定左側(cè)，是否還有固定右側(cè)，受“表格說(shuō)明”影響，詳見(jiàn)【基礎(chǔ)表格】
• 常駐固定區(qū)字段，需列出

5、字段順序：可設(shè)置/不可設(shè)置

• 可設(shè)置則有拖拽按鈕，反之亦然

注：默認(rèn)列寬、顯示字段、固定字段、字段順序，可在“表格說(shuō)明”中說(shuō)明，詳見(jiàn)【基礎(chǔ)表格】

三、輸出說(shuō)明模板

組件名稱前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識(shí)別規(guī)范組件；模板可直接寫入注釋，并存為Axure/墨刀元件庫(kù)。

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

組件名稱：表頭設(shè)置

設(shè)置保存：保存在用戶

列寬：可設(shè)置

顯示字段：可設(shè)置

固定字段：可設(shè)置，常駐字段如下：

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

字段順序：可設(shè)置

結(jié)語(yǔ)

本系列持續(xù)更新，喜歡的朋友請(qǐng)點(diǎn)個(gè)【關(guān)注】或【收藏】，您的鼓勵(lì)是我們持續(xù)分享的動(dòng)力。