在數(shù)據(jù)長度大于列寬度時(shí)，我們需要對(duì)數(shù)據(jù)內(nèi)容進(jìn)行截?cái)嗵幚?。截?cái)嘁院?，末尾加……鼠?biāo)移入時(shí)在附近顯示浮層顯示完整內(nèi)容。

浮層的位置：數(shù)據(jù)在縱向上的結(jié)合緊密時(shí),，浮層顯示在左右,；數(shù)據(jù)在橫向上結(jié)合緊密時(shí)，浮層顯示在上下,。這樣能夠避免浮層對(duì)需要結(jié)合來看的數(shù)據(jù)造成遮擋,。

3、分頁

分頁的功能較為簡單,，一般滿足這些功能就可以了：上一頁,、下一頁、首頁,、末頁,、快速跳轉(zhuǎn)到某一頁、每頁數(shù)量的調(diào)整（20,50,，100,200）

4,、排序

（1）初始排序

頁面載入后，數(shù)據(jù)排列的順序,，叫做初始排序,。初始排序應(yīng)為用戶最關(guān)心的排序。如在時(shí)效性較強(qiáng)的列表,，默認(rèn)排序就應(yīng)該是時(shí)間降序,。金額比較重要的列表，默認(rèn)排序就應(yīng)該是金額降序,。

（2）排序切換規(guī)則

當(dāng)表格內(nèi)的多列都具有排序功能時(shí),，需要考慮排序切換的邏輯。同時(shí)只能應(yīng)用一種排序,，在應(yīng)用新的排序時(shí),，舊排序應(yīng)該失效。

排序需通過單擊進(jìn)行激活和切換,。激活新排序時(shí),，默認(rèn)是升序還是降序，需要根據(jù)用戶的關(guān)注點(diǎn)來確定（一般默認(rèn)用降序）,。新排序激活后,，通過單擊切換升降序,，排序應(yīng)在“降序升序”中進(jìn)行循環(huán)切換。

（3）不同字段的升降序邏輯

字段類型通常包括文本,、數(shù)值,、日期。文本升序以“數(shù)字-特殊符號(hào)-a-z-A-Z-漢字-其他字符“來執(zhí)行,，數(shù)值則以數(shù)值大小來執(zhí)行,，日期以時(shí)間值先后執(zhí)行，降序反之則可以,。需要注意的,，有一些數(shù)值的升降序邏輯是需要特殊處理的，如排名,。普通的數(shù)值的降序時(shí)大數(shù)在前,，小數(shù)在后，但排名的降序應(yīng)是小數(shù)在前,，大數(shù)在后,。

5、查找

（1）查找范圍

查找值需要匹配的范圍,。如一個(gè)表格具有訂單號(hào),、收件人兩個(gè)字段，我們可以設(shè)置查找范圍為這兩個(gè)字段,。輸入查找值后,，可以查找到訂單號(hào)或收件人能和查找值匹配的內(nèi)容。

（2）匹配方式

查找值和查找到的內(nèi)容之間的匹配關(guān)系,，包括精確,、模糊、前綴等,。同樣是查girl,，精確只會(huì)查到girl，模糊可以查到girl friend,、pretty gril等,，前綴只能查到pretty girl。

（3）排序規(guī)則

當(dāng)我們使用模糊查找girl時(shí),，可能會(huì)查找到很多符合的內(nèi)容,。如果我們只是想找girl，可能需要翻頁去找到girl,。為了解決這個(gè)問題,，一種方案是允許用戶選擇本次查找是精確還是模糊；另一種方案是用模糊查找后,，將完全一樣的結(jié)果放到首行,，其余內(nèi)容按原有方式排序,。

6、對(duì)齊方式

為了使表格內(nèi)容的展示更美觀和高效,，我們需要確定表格內(nèi)容的對(duì)齊方式,。通常使用文本左對(duì)齊、數(shù)值右對(duì)齊的方式,。

7、詳情入口

表格有時(shí)候會(huì)承擔(dān)詳情入口的作用,。表格展示簡要數(shù)據(jù),，通過點(diǎn)擊進(jìn)入新的頁面查看詳情數(shù)據(jù)。所以,，我們需要設(shè)計(jì)一個(gè)點(diǎn)擊區(qū)域,，讓用戶點(diǎn)擊后觸發(fā)進(jìn)入詳情頁的操作。一般有兩種解決方案：1,、以具有區(qū)別性的字段為鏈接（視覺上要有所不同）,，如訂單號(hào)。2,、在表格內(nèi)設(shè)置單獨(dú)的“查看”入口,。前者節(jié)省空間，但存在感弱,；后者存在感強(qiáng),，但需要占用單獨(dú)空間。我們需要根據(jù)具體場景來確定方案,。

8,、篩選

表格默認(rèn)通常展示所有數(shù)據(jù)。當(dāng)我們只需要查找符合某些條件的內(nèi)容時(shí),，就需要使用到篩選了,。

篩選通常由多個(gè)條件構(gòu)成。

（1）條件

使用【字段】-【比較關(guān)系】-【值】的方式來構(gòu)成,。如【訂單金額】【大于】【100】,，

【收件人】【是】【張三、李四】等,。比較關(guān)系通常包括 是,，不是，在,，不在,，大于，小于,，等于,，大于等于,，小于等于，介于等,。

（2）組合篩選

篩選由多個(gè)條件構(gòu)成,，我們執(zhí)行一個(gè)篩選需要添加多個(gè)條件。當(dāng)這個(gè)篩選內(nèi)的條件是比較固定,，經(jīng)常使用的情況下,，每次都重新選擇條件都比較低效了。所以,，我們需要提供篩選的保存功能,。篩選在配置好后，可以保存下來,，下次使用無需重新編輯即可應(yīng)用,。篩選保存需要提供命名、重命名,、編輯條件的配合功能,。

（3）篩選的可見性

篩選以后，需要將使用的條件讓用戶可見,。用戶能夠直觀地在篩選條件和篩選后的內(nèi)容之間形成對(duì)應(yīng)關(guān)系,。當(dāng)然，篩選條件較多時(shí),，會(huì)占用比較大的頁面空間,，我們也應(yīng)該提供隱藏篩選的功能。

第二部分：操作

1,、單項(xiàng)操作

對(duì)單項(xiàng)的操作,，如刪除、啟動(dòng),、暫停等,。這些操作應(yīng)放置在最表格右側(cè)，為固定列,。如果操作比較多時(shí),，需將多余的操作折疊為‘更多’，表面上只保留1到2個(gè)常用操作,。

2,、編輯

在瀏覽表格內(nèi)容時(shí)，有些數(shù)據(jù)我們在查看以后是需要進(jìn)行編輯的,。此時(shí),，我們需要提供給用戶快捷的編輯方式。如果需要編輯的項(xiàng)較少時(shí),，我們可以在鼠標(biāo)移入編輯項(xiàng)時(shí)顯示編輯樣式,，單擊編輯項(xiàng)時(shí)

進(jìn)入編輯狀態(tài),，直接修改保存即可。當(dāng)需要編輯的項(xiàng)較多時(shí),，可以在操作欄放置編輯,。點(diǎn)擊編輯，使所有編輯項(xiàng)進(jìn)入編輯狀態(tài),。修改后,，點(diǎn)擊保存，統(tǒng)一保存,。值得注意的一點(diǎn)是,，最好能夠響應(yīng)鍵盤操作，鍵盤的enter能夠觸發(fā)保存操作,。

3,、勾選

（1）全選

全選選中后,，可以對(duì)全部項(xiàng)目進(jìn)行批量選中,。但在多頁的情況下，全選通常有兩種需求：選中當(dāng)前頁和選中全部,。我們應(yīng)提供給用戶選擇,，可以分別實(shí)現(xiàn)這兩種選擇。

（2）跨頁選擇

有些時(shí)候,，我們需要勾選的項(xiàng)目在不同頁,。在第一頁勾選幾項(xiàng)后，翻頁再去勾選其他項(xiàng)時(shí),，往往無法快速獲知已選項(xiàng)的情況,。所以，我們在跨頁勾選時(shí),，在切換到其他頁面時(shí),，需要在表格頂部顯示已選項(xiàng)的情況，允許刪除其中某一項(xiàng)和清空所有,。

（3）勾選狀態(tài)的保持

在一些場景下,，我們需要對(duì)同一批勾選項(xiàng)進(jìn)行多個(gè)操作。所以,，勾選完成后,，執(zhí)行第一個(gè)操作以后，我們需要保持勾選狀態(tài),，以便執(zhí)行接下來的操作,。

4、按鈕

在表格頂部放置按鈕,，執(zhí)行常用操作,，一般優(yōu)先放在左側(cè)（勾選以后進(jìn)行操作的鼠標(biāo)移動(dòng)路徑短）,。如果按鈕較多，需要根據(jù)按鈕類型,，將具有相同功能的按鈕折疊組合,。有一些按鈕是配合著勾選進(jìn)行批量操作的，當(dāng)沒有勾選項(xiàng)時(shí),，需要禁用該按鈕,。

5、導(dǎo)出數(shù)據(jù)

表格通常用來展示數(shù)據(jù),，用戶往往會(huì)有將數(shù)據(jù)導(dǎo)出的需求,。導(dǎo)出數(shù)據(jù)的功能設(shè)計(jì)時(shí)，我們需要考慮這些,。

（1）文件格式

通常使用xlsx,。該格式展示效果好，兼容性好,，便于后期處理,。但當(dāng)數(shù)量量較大的情況下，基于導(dǎo)出速度的考慮,，可以使用csv格式,。

（2）文件名

文件名要能夠表達(dá)數(shù)據(jù)內(nèi)容，通常使用【頁面】【表名】【時(shí)間】等字段來確定表名,。

（3）模板

導(dǎo)出的文件的模板,。通常情況下，我們導(dǎo)出全部列的數(shù)據(jù),，縱使頁面上展示的是部分列的數(shù)據(jù),。部分情況下，我們需要對(duì)模板進(jìn)行一些樣式上的處理,，以達(dá)到美觀的效果,。

（4）導(dǎo)出耗時(shí)

導(dǎo)出數(shù)據(jù)的過程是先生成該數(shù)據(jù)，然后在下載該數(shù)據(jù),。當(dāng)導(dǎo)出的數(shù)據(jù)量較大的情況下,，生成數(shù)據(jù)耗時(shí)較長，我們需要考慮導(dǎo)出耗時(shí),。一種簡單的設(shè)計(jì)方法是,，點(diǎn)擊導(dǎo)出數(shù)據(jù)后，變?yōu)閷?dǎo)出中,，以告知用戶數(shù)據(jù)正在導(dǎo)出,。

結(jié)語

確定規(guī)范的意義，在于能夠減少協(xié)作中的溝通成本。當(dāng)產(chǎn)品,、UI,、前端都對(duì)同一套規(guī)范達(dá)成共識(shí)時(shí)，開發(fā)效率會(huì)成倍的提高,。產(chǎn)品在原型圖中無需添加常規(guī)的交互操作,，也不用考慮前端的可實(shí)現(xiàn)性。UI和開發(fā)在看到你的原型圖時(shí),，能迅速地根據(jù)之前的規(guī)范,，明白你想表達(dá)的意思。這樣,，產(chǎn)品的精力就能更多地放在需求上,。

在學(xué)習(xí)的過程中，大量參考了螞蟻設(shè)計(jì),。推薦大家可以去了解一下,。

本文有大量內(nèi)容是從交互設(shè)計(jì)角度說明的。由于我之前是一直專注于需求,，對(duì)于交互上的知識(shí)不是很充分,，結(jié)果導(dǎo)致開發(fā)出來的產(chǎn)品的交互體驗(yàn)太差。所以自己去主動(dòng)學(xué)習(xí)了相關(guān)的內(nèi)容,。對(duì)于中后臺(tái)產(chǎn)品經(jīng)理,，尤其是團(tuán)隊(duì)內(nèi)的開發(fā)資源不是很足夠的情況下,，引入一套規(guī)范來實(shí)現(xiàn)自家產(chǎn)品的標(biāo)準(zhǔn)化,，是很有作用的。如果你的團(tuán)隊(duì)已經(jīng)有成型的規(guī)范,，請(qǐng)對(duì)本文中的內(nèi)容適當(dāng)采用,。產(chǎn)品經(jīng)理的主要精力還是應(yīng)該放在需求上。