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

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

本期組件：基礎(chǔ)表格

組件概述：內(nèi)容頁中最基礎(chǔ)組件，用于展示多條結(jié)構(gòu)類似的數(shù)據(jù)，可對數(shù)據(jù)進行排序、篩選、對比或其他自定義操作，使用時可根據(jù)需求進行擴展。

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

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

1. 基礎(chǔ)樣式

1、樣式：表頭與表體在視覺上需有明確區(qū)分，表格各行建議使用斑馬紋，更易區(qū)分各行數(shù)據(jù)。

2、尺寸：在顯示區(qū)域需鋪滿，并伴隨窗口大小變化自適應(yīng)調(diào)整

3、表頭：默認(rèn)平均寬度，有特別要求的表頭，需在說明中明確

4、操作列：常規(guī)操作用主題色/鏈接文字顏色

危險操作需用危險色，如：刪除、取消等反向危險操作等。

2. 基礎(chǔ)交互

1、表頭說明：鼠標(biāo)懸停于符號，有”氣泡提示”【點擊查看規(guī)范】，熱區(qū)為整個圖標(biāo)。若表頭支持排序，兩者不沖突。

具體哪個表頭需要說明，說明什么內(nèi)容，在可控參數(shù)中說明

2、表頭排序：支持排序的表頭有上下箭頭符號，熱區(qū)為整個圖標(biāo)

第一次點擊，升序；第二次點擊，降序；第三次點擊，恢復(fù)。

表頭排序具有互斥性，當(dāng)表格有多個列支持排序時，只激活一個排序。

如：A、B列都可排序，激活A(yù)排序時，再點擊B排序。此時激活B排序，關(guān)閉A排序。

具體哪個表頭需要說明，說明什么內(nèi)容，在可控參數(shù)中說明

3、內(nèi)容滾動：顯示行數(shù)超出窗口顯示區(qū)域，則在表格內(nèi)容區(qū)內(nèi)滾動顯示（即滾動時，表頭不動）

4、內(nèi)容交互：鼠標(biāo)懸停、單擊、選中需有對應(yīng)樣式做區(qū)分；表格內(nèi)容可點擊/懸停有交互，有對應(yīng)樣式區(qū)分

5、內(nèi)容刷新：默認(rèn)無感更新，需有對應(yīng)刷新樣式（較大數(shù)據(jù)量需等待）；即不刷新整個頁面，有特殊要求另外說明。

3. 異常情況

1）表格整體異常

• 行數(shù)不夠：縮減顯示行數(shù)，不出現(xiàn)空行情況
• 無數(shù)據(jù)、搜索后無結(jié)果：顯示對應(yīng)提示
• 網(wǎng)絡(luò)錯誤：顯示對應(yīng)提示
• 無查看權(quán)限：顯示對應(yīng)提示

2）單元格異常

• 內(nèi)容超出：超出部分使用”…”代替，鼠標(biāo)懸停通過“氣泡提示”【點擊查看規(guī)范】顯示全
• 內(nèi)容為空：使用”–“占位

4. 原型要求

1、字段展示：需在原型中填寫所有字段，可超出原型頁面（實際頁面中需做滾動）

2、無需填充表格：原型中僅展示必要的行數(shù)據(jù)，如：默認(rèn)有的數(shù)據(jù)，數(shù)據(jù)不同狀態(tài)等

3、多狀態(tài)呈現(xiàn)方式：如果表格內(nèi)容有不同狀態(tài)，則各狀態(tài)數(shù)據(jù)需列出說明

• 狀態(tài)區(qū)分：默認(rèn)不通過顏色區(qū)分，可選通過成功、警告、危險等方式區(qū)分不同狀態(tài)顏色（圖中采用整行顯示方式，具體可UI定義）
• 不同操作列：若內(nèi)容可操作，不同狀態(tài)內(nèi)容會對應(yīng)不同操作，需將各種操作形式列出

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

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

1.表格整體

1、數(shù)據(jù)來源：說明數(shù)據(jù)的來源，以確保團隊理解無二義

2、默認(rèn)數(shù)據(jù)：如原型第1、2行所示 / 為空（需用戶自行創(chuàng)建）

3、數(shù)據(jù)狀態(tài)：如原型第N行所示，

4、默認(rèn)排序：按創(chuàng)建時間先后順序倒序排序

為何建議默認(rèn)“按時間順序倒序排序”，因為大部分表格用于處理時效性數(shù)據(jù)，如：訂單，審批單等。使用場景往往是：收到通知有“新訂單”，然后打開界面處理，此時越晚出現(xiàn)的數(shù)據(jù)排越前面是友好的。

5、默認(rèn)行數(shù)：

• 行數(shù)不多（100行內(nèi)），且未來增加量很小，不分頁能有更好體驗，則寫“不分頁”
• 行數(shù)較多，且未來會不停增加，需分頁，并規(guī)定一頁默認(rèn)行數(shù)，如“一頁默認(rèn)20行”（為何建議20行，因為正好能鋪滿通用的1080p屏幕，及對辦公電腦性能友好。）

6、固定列：默認(rèn)無需，如需要則說明：

• 左側(cè)：列名1、列名2
• 右側(cè)：列名3、列名4

7、列寬：默認(rèn)無要求，如需要則按整個表格100%寬度劃分

• 列名1：20%
• 列名2：10%

8、更新方式：如果無需，則描述“無需”；如果需要，則要描述自動更新邏輯，如：

• 每隔1分鐘（大數(shù)據(jù)運算不建議高頻自動更新，會消耗大量服務(wù)器性能）
• 完成**操作時

9、緩存：默認(rèn)“無需”；如果需要，則要描述緩存位置。需注意：一般都不緩存，大量緩存會逐漸占用系統(tǒng)資源。

2.表頭

1、數(shù)據(jù)說明：如果是編號，需說明對編號的要求，如長度，編號體現(xiàn)的信息等

2、數(shù)據(jù)格式：如金額顯示小數(shù)點后N位需說明

3、氣泡提示：如需要，表頭則有個?符號，鼠標(biāo)懸停有氣泡提示，提示信息寫在該項即可；無需則寫“無需”

4、支持排序：支持/無需

5、數(shù)據(jù)交互：如果有鼠標(biāo)左擊跳轉(zhuǎn)鏈接、鼠標(biāo)懸停顯示完整內(nèi)容、鼠標(biāo)右擊復(fù)制需描述操作后結(jié)果

3.行操作

不同數(shù)據(jù)狀態(tài)對應(yīng)有不同操作，如：訂單、工單等，務(wù)必在表格中將不同狀態(tài)數(shù)據(jù)示例出來，并逐個說明。

三、輸出說明模板

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

注：一份表格說明，通常由三部分組成：

1. 表格整體說明（一個表一份說明）
2. 表頭表體說明（幾個表頭幾個說明，也可根據(jù)實際情況簡略）
3. 行操作說明（如果不同數(shù)據(jù)狀態(tài)有不同狀態(tài)，則每狀態(tài)一個說明

1、表格整體說明

組件名稱：規(guī)范-基礎(chǔ)表格

數(shù)據(jù)來源：

默認(rèn)數(shù)據(jù)：如原型展示

數(shù)據(jù)狀態(tài)：如原型狀態(tài)列所示

默認(rèn)排序：按創(chuàng)建時間先后順序正序排序

默認(rèn)行數(shù)：20行

固定列：無需

列寬：無要求

更新方式：完成XX操作時

緩存：無需

2、表頭說明

組件名稱：規(guī)范-表頭

數(shù)據(jù)說明：

數(shù)據(jù)格式：

氣泡提示：無

支持排序：無

數(shù)據(jù)交互：無

3、行操作說明

組件名稱：規(guī)范-行操作

操作1

• 提示信息：
• 操作后置結(jié)果：

操作2

• 提示信息：
• 操作后置結(jié)果：

操作3

• 提示信息：
• 操作后置結(jié)果：

結(jié)語

本系列持續(xù)更新，喜歡的朋友請點個【關(guān)注】或【收藏】，您的鼓勵是我們持續(xù)分享的動力。