嗨小伙伴們大家好～??今天小編給大家?guī)淼奈恼率?strong>B端后臺(tái)表格(table)如何設(shè)計(jì)，本篇文章干貨較多且長(zhǎng)，記得先?再看哦～?

(全文共計(jì)6908字，閱讀約需要17分鐘)

引言

目前在一家制造業(yè)軟件提供商工作，經(jīng)手的軟件產(chǎn)品大多以承載數(shù)據(jù)信息為主，為保留原有的底層數(shù)據(jù)邏輯且兼顧開發(fā)工作量，整體界面需要復(fù)用度高，拓展性強(qiáng)，故而大部分界面皆以表格進(jìn)行展示。

1. 可承載大量同類信息及數(shù)據(jù)，且結(jié)構(gòu)簡(jiǎn)單，分類清晰，便于用戶瀏覽；

2. 橫向關(guān)聯(lián)縱向?qū)Ρ鹊男畔⑻幚矸绞?#xff0c;幫助用戶快速了解并簡(jiǎn)單分析信息的差異性、關(guān)聯(lián)性等；

3. 對(duì)于大量數(shù)據(jù)信息，在保留現(xiàn)有視覺結(jié)構(gòu)的條件下，可直接使用其他通用功能件，進(jìn)行搜索、篩選、編輯、批量操作等其他自定義選項(xiàng)操作；

4. 表格中各列內(nèi)容相對(duì)獨(dú)立，可根據(jù)業(yè)務(wù)需求或用戶關(guān)注點(diǎn)的不同進(jìn)行自定義調(diào)整。

一般來說，表格組件內(nèi)功能復(fù)雜(常用功能有：單對(duì)象操作、排序、多選、翻頁、抽屜展開、合計(jì)等；特殊場(chǎng)景還需支持：單元格編輯、單行編輯、調(diào)整展示列、多層級(jí)嵌套、分類等)為提高效率，一般會(huì)根據(jù)需求找到合適的組件內(nèi)嵌至頁面中。后臺(tái)界面通用的功能很多，兼顧視覺和代碼一致性，會(huì)直接使用一種前端框架進(jìn)行開發(fā)。

在我入職該公司之前，所有產(chǎn)品都是前后端未分離的，僅能根據(jù)原有的界面進(jìn)行樣式的優(yōu)化，涉及到交互和用戶體驗(yàn)優(yōu)化的部分十分抗拒且表示難以實(shí)現(xiàn)，與新老同事多次溝通后，領(lǐng)導(dǎo)決定實(shí)行前后端分離，考慮UI框架的選擇。

1. UI框架介紹

目前國內(nèi)主流UI框架且個(gè)人工作過程中接觸使用過的有：

以及其他不太常用的框架(鏈接跳轉(zhuǎn)至表格組件)：

真正投入開發(fā)時(shí)，一般只會(huì)考慮主流的三種，資深前端D同學(xué)說：學(xué)會(huì)三框架走遍天下都不怕。

不常用的框架有些UI視覺也不錯(cuò)，國外用【Vuetify】比較多，交互豐富，基本上所有的操作都會(huì)給一個(gè)過渡的動(dòng)效。【Ext】比較有年代感了，以前公司用的就是這個(gè)2.0版本，現(xiàn)在的新版本樣式其實(shí)也不丑。【飛冰】整體樣式和【Ant design】差不多；【layui】的組件看起來有些單調(diào)，基礎(chǔ)后臺(tái)界面?zhèn)€人覺得還是比較能滿足的。

—

作為設(shè)計(jì)師，個(gè)人比較喜歡使用【Ant design】資源很全，下載的sketch源文件基本能滿足大部分通用功能，很多控件(比如：各類選擇器、穿梭框等)的視覺與交互體驗(yàn)也相對(duì)較好，可直接復(fù)制組件粘貼至設(shè)計(jì)稿中。

但前端同學(xué)更傾向于【Element】組件封裝簡(jiǎn)單容易修改，對(duì)于沒接觸過框架的同學(xué)也方便上手無障礙。【iView】的組件封裝過于嚴(yán)密，且收費(fèi)，不太喜歡用。而威名赫赫的【Ant design】雖也支持Vue但Vue版本的表格列寬不可拖拽，必須設(shè)置寬度，鎖定列時(shí)，內(nèi)容太多易導(dǎo)致表頭留白等不算是坑的麻煩，且需要看大量文檔適應(yīng)，學(xué)習(xí)成本較高。

—

通過綜合考慮，項(xiàng)目組決定使用【Element】。

2. 主流框架內(nèi)【Table】組件對(duì)比

① UI樣式對(duì)比：

各官網(wǎng)示例出的默認(rèn)組件樣式有些許區(qū)別，【Element】與【iView】直接列出了不同給的樣式類型， 而【Ant design】是結(jié)合功能綜合展示的。樣式皆可根據(jù)相對(duì)應(yīng)的參數(shù)進(jìn)行修改，前端同學(xué)在開發(fā)過程中可直接按照設(shè)計(jì)稿的標(biāo)注進(jìn)行修改樣式即可。個(gè)人認(rèn)為如果風(fēng)格一致，直接使用組件默認(rèn)樣式也是可行的。

截取各官網(wǎng)中 Table 的基礎(chǔ)界面樣式，如下圖：

由上圖可以大概看出，三種表格內(nèi)列寬的定義是不同的。實(shí)際工作中，后臺(tái)不同數(shù)據(jù)字段的表格，會(huì)出現(xiàn)特殊的極少數(shù)列(2-4個(gè))、或多數(shù)列(超過10個(gè))，實(shí)現(xiàn)起來并不能跟設(shè)計(jì)稿一樣完美好看，web端后臺(tái)界面，除了根據(jù)柵格系統(tǒng)進(jìn)行模塊區(qū)域劃分。部分組件化的交互需要同開發(fā)溝通，定義一個(gè)基本規(guī)范，且最好能兼顧全局大部分場(chǎng)景。

未進(jìn)行前后端分離時(shí)，我出了一版基本的表格樣式規(guī)范。整理需求發(fā)現(xiàn)幾乎所有的表格都有序號(hào)與復(fù)選操作，故而直接整合至基本用法中。如下：

當(dāng)使用組件時(shí)，并不需要設(shè)置間距等規(guī)范，可直接選擇一種一般不會(huì)有太大問題。更多的是關(guān)注表格中承載的數(shù)據(jù)字段類型。比如：

文本字段：可點(diǎn)擊的字段、普通文本類、數(shù)字字母等，此類長(zhǎng)短參差不齊的，最好給出左對(duì)齊；

既定字段：日期、時(shí)間、部分枚舉類等，字符數(shù)一致且較短的，可與表頭標(biāo)題居中對(duì)齊；

特殊字段：金額、狀態(tài)標(biāo)簽、類型標(biāo)識(shí)等業(yè)務(wù)性較強(qiáng)的，可根據(jù)相關(guān)特性與閱讀習(xí)慣確定其對(duì)齊方式。

不論何種對(duì)齊方式，都需要考慮到該字段可能存在的極端情況。比如：普通文本若超長(zhǎng)，可在鼠標(biāo)hover狀態(tài)時(shí)將該單元格展開列出全部字段信息。或以tips形式，跟隨鼠標(biāo)位置展示全部信息。

當(dāng)數(shù)據(jù)信息平鋪且單一時(shí)，直接使用表格的基礎(chǔ)用法，也能滿足需求，視覺與交互能夠滿足大眾審美和習(xí)慣即可，一般不會(huì)有太大的問題。上家公司是做類C端門戶網(wǎng)站的，后臺(tái)管理系統(tǒng)直接用【Ant design】作為數(shù)據(jù)統(tǒng)計(jì)信息展示完全足夠，運(yùn)營同學(xué)使用時(shí)也表示還算滿意。

但B端后臺(tái)界面除了承載信息，還有很多相關(guān)的操作與處理。公司的產(chǎn)品供給制造商使用，數(shù)據(jù)文檔量大且類型繁雜，并且相互間有不同的關(guān)聯(lián)關(guān)系。很多情況下需要重新根據(jù)需求設(shè)計(jì)，且為了兼顧開發(fā)工作量盡可能的在設(shè)計(jì)上找到折中方案。這就要求最好能夠從框架組件中衍生出來，最少的修改滿足更多的需求。

② 組件功能對(duì)比：

因我們已確定使用【Element】故而以下所有的對(duì)比，以此框架中的 Table 組件功能為基準(zhǔn)，進(jìn)行功能有無與相關(guān)差別性的部分比較。

在后臺(tái)開發(fā)的實(shí)際工作中，以上的功能基本可以滿足所有需求。其中【Ant design】【iView】的示例組件中部分上表未列出的功能也相當(dāng)實(shí)用，比如：【Ant design】可編輯單元格與單行，在后臺(tái)表格中是個(gè)體驗(yàn)非常好的功能，簡(jiǎn)化用戶操作；【iView】可自定義導(dǎo)出表內(nèi)數(shù)據(jù)也很常用。

需要注意的是：

無論什么樣逆天的交互樣式與功能需求，開發(fā)同學(xué)都能夠完美解決。此處列出僅為了設(shè)計(jì)師了解熟悉相關(guān)組件，在工作中能夠更好與開發(fā)協(xié)作，盡量減少開發(fā)同學(xué)的工作量。畢竟在一個(gè)為傳統(tǒng)制造業(yè)提供軟件的企業(yè)，相比于底層數(shù)據(jù)處理與接口的聯(lián)調(diào)，前端樣式展示就顯得無足輕重了，甚至很多人認(rèn)為夠用就行，這也是設(shè)計(jì)工作較難推進(jìn)的一點(diǎn)。

由上對(duì)比看來【Element】與【Ant design】功能基本一致，但其相同的功能也會(huì)存在一定的差異，此處不過多贅述，功能相似的基本上都大同小異。至于具體樣式與交互方式，可以根據(jù)個(gè)人審美或企業(yè)需求綜合選擇。當(dāng)我們?cè)诠ぷ髦杏龅皆摽蚣苤袥]有的組件，又正好發(fā)現(xiàn)某個(gè)組件剛好能夠完全滿足需求時(shí)，也可以考慮將其嵌套使用。

作為公司第一個(gè)且唯一一個(gè)設(shè)計(jì)，老同事們并不理解需要給設(shè)計(jì)師何種需求原型與文檔。很多時(shí)候，我收到的需求就是一堆屬性項(xiàng)名稱，一張紙質(zhì)表格，一句話，或者一個(gè)功能名稱。在沒有任何業(yè)務(wù)閉環(huán)與字段說明，并且明確了最好以表格形式展示的情況下。為了趕工期，大多數(shù)時(shí)候只能腦補(bǔ)需求后直接進(jìn)行組件的選擇，與開發(fā)和業(yè)務(wù)人員溝通后，再來基于組件功能進(jìn)行設(shè)計(jì)，相當(dāng)于需求、設(shè)計(jì)、開發(fā)并行的工作流程。

下面例舉出最近部分工作案例，供大家參考。大致從需求分析、組件選擇、以及設(shè)計(jì)落地三個(gè)方面進(jìn)行適當(dāng)說明。(涉及到公司專項(xiàng)業(yè)務(wù)的部分會(huì)使用其他文案替代)

1. 報(bào)銷單

當(dāng)時(shí)收到的需求就是一張報(bào)銷填寫的單據(jù)，需要粘貼各類發(fā)票給財(cái)務(wù)的那種，類似下圖：

主要以長(zhǎng)途交通費(fèi)為主，其他相關(guān)費(fèi)用標(biāo)明事由金額即可，后附上發(fā)票。線上填報(bào)時(shí)項(xiàng)目組確認(rèn)不需要上傳發(fā)票照片，即不用上傳附件。而其他的補(bǔ)助等相關(guān)信息皆可由表單或其他流程直接帶進(jìn)來，并且各類金額匯總由后臺(tái)自動(dòng)獲取。故而表格內(nèi)需要設(shè)計(jì)的僅有費(fèi)用相關(guān)的說明，且我司取消了同城出差與補(bǔ)助，基本上長(zhǎng)途費(fèi)用就成了主要內(nèi)容。

添加任一行內(nèi)容，必須完成時(shí)間、出發(fā)地到達(dá)地、交通工具、金額。很明顯需要Table組件支持單行編輯，并且可添加多行。而【Element】示例的組件中，并無相關(guān)展示，但下載的UI資源中有相關(guān)的樣式，可以將表單樣式與表格樣式結(jié)合使用。

與開發(fā)溝通后，決定使用該組件。編輯框直接嵌套【Element】框架中的表單樣式，最終落地的設(shè)計(jì)稿如下圖：

其他相關(guān)的費(fèi)用通過另一組表格進(jìn)行展示，沿用長(zhǎng)途交通費(fèi)的表格樣式，給出一個(gè)默認(rèn)的狀態(tài)，供開發(fā)參考。盡量用最少的界面展示最全的狀態(tài)，當(dāng)然，也需要在評(píng)審時(shí)提醒開發(fā)同學(xué)注意。此處我們點(diǎn)擊添加一行后，直接聚焦在新一行的第一個(gè)編輯框中，該功能雖常見，但若不出交互動(dòng)效展示給前端，很可能會(huì)被忽略，故而設(shè)計(jì)稿出完還是需要加以一定的設(shè)計(jì)規(guī)范與交互說明。

報(bào)銷單的編輯樣式完成后，領(lǐng)導(dǎo)及用戶的反應(yīng)都比較好。且該 Table 組件在后來的報(bào)價(jià)單、組織成員、二維表屬性等功能模塊復(fù)用率很高。

2. 項(xiàng)目管理

制作該功能的時(shí)候，收到的需求僅有幾十個(gè)屬性項(xiàng)，整個(gè)業(yè)務(wù)閉環(huán)與字段說明全都沒有。

前期與相關(guān)的業(yè)務(wù)同學(xué)溝通多次無果，因?yàn)樗矝]有收到明確任務(wù)目標(biāo)且不太了解產(chǎn)品需求規(guī)劃，所以我根據(jù)自己做項(xiàng)目的經(jīng)驗(yàn)初步梳理了整個(gè)流程，并且給出了部分字段說明讓他了解后完善。

通過梳理流程閉環(huán)與相關(guān)字段的確認(rèn)，并且要求以表格的形式展示。可大致整理出表格設(shè)計(jì)需要著重考慮的幾個(gè)功能：

1.所有關(guān)鍵屬性項(xiàng)必須展示在表格中，則存在橫向滑動(dòng)，需要支持固定表頭與豎列；

2.階段展開是任務(wù)，且任務(wù)下存在子任務(wù)，則表格支持樹狀結(jié)構(gòu)展示；

3.階段與任務(wù)的屬性項(xiàng)不同但同一表格內(nèi)展示，則會(huì)存在部分單元格為空；

4.相似字段樣式需要進(jìn)行區(qū)分，單元格樣式需要自定義；

5.完成后上報(bào)的任務(wù)，可修改部分字段，需要支持單元格編輯，并且最好能篩選與批量審核。

以上所有需求【Element】官網(wǎng)的 Table 示例中并無可滿足的組件。但所有功能都是支持的，故而我們可直接使用，前端同學(xué)設(shè)置對(duì)應(yīng)參數(shù)即可。

部分表單屬性項(xiàng)較多，不過大多字段不長(zhǎng)，且需要固定列，所以我選擇帶邊框的樣式；樹形結(jié)構(gòu)，支持多選。基本上為以下幾種功能進(jìn)行組合使用：

其中，單元格的編輯雖在官網(wǎng)示例中未給出樣式，但資源中的展示有一版如下所示：

個(gè)人認(rèn)為該交互操作略顯繁瑣，故而沿用了報(bào)銷單類似的編輯操作。根據(jù)需求的不斷完善與組件的確定，也能夠大概出一版界面供開發(fā)先行，至于未確定的字段與數(shù)據(jù)處理等相關(guān)需求，直接讓后端同學(xué)接口控制即可，主要表格的落地稿如下：

① 項(xiàng)目：該表格一般樣式用法，沒有過多的操作，主要就是相關(guān)字段的展示，部分?jǐn)?shù)據(jù)需要進(jìn)行區(qū)分，增加識(shí)別度即可。

比較常規(guī)的組件用法，重點(diǎn)在于各字段的展示方式要進(jìn)行區(qū)分，并且根據(jù)各狀態(tài)的不同，其中的字段會(huì)有一些相應(yīng)的變化。比如：

多個(gè)時(shí)間相關(guān)字段：持續(xù)時(shí)間、開始/結(jié)束時(shí)間、驗(yàn)收時(shí)間等。要想提高各字段的識(shí)別度，可以將字段的樣式進(jìn)行一定變化，并不一定要使用純文本樣式。可增加icon進(jìn)行識(shí)別，根據(jù)狀態(tài)判斷需要展示的文案類型等都是比較好的方式，并且當(dāng)界面滑到右側(cè)字段時(shí)，也可以一眼看出該行項(xiàng)目的狀態(tài)，無需再左滑查看狀態(tài)列。

② 階段任務(wù)：該列表比較復(fù)雜，且根據(jù)不同的用戶權(quán)限，列表上方的按鈕和表右側(cè)操作列也有所區(qū)別，此處僅給出表內(nèi)通用設(shè)計(jì)進(jìn)行展示。

階段和任務(wù)分屬兩個(gè)不同的對(duì)象，在此列表中。默認(rèn)僅平鋪展示階段，故表頭所列的屬性項(xiàng)以階段為主(此處考慮到部分字段的重要性，將任務(wù)“優(yōu)先級(jí)”也展示了出來)；非任務(wù)屬性項(xiàng)的則以通用的“-”進(jìn)行標(biāo)識(shí)。共有屬性比如：“狀態(tài)”，則通過不同的標(biāo)簽進(jìn)行區(qū)分。

任務(wù)列表與該列表樣式基本一致，僅屬性項(xiàng)的差異，特殊字段樣式也根據(jù)其業(yè)務(wù)特點(diǎn)進(jìn)行了不同的字段展示方式，此處不過多贅述。

③ 工時(shí)上報(bào)與審批：與任務(wù)列表的屬性項(xiàng)沒有太多差別，報(bào)工列表底部增加了工時(shí)的合計(jì)(此功能在【Element】示例組件中有展示樣式)，然后去掉了結(jié)構(gòu)層級(jí)，所有的任務(wù)進(jìn)行平鋪展示。

但我上報(bào)的列表與領(lǐng)導(dǎo)審核的列表功能存在一定的差異：審核的列表可進(jìn)行編輯。一般來說審核工時(shí)與上報(bào)的工時(shí)沒有差別，為了減少審核的工作量，可在列表上方進(jìn)行篩選后，全選批量通過審核，無需單個(gè)操作。故而此類別右側(cè)的操作改為“修改工時(shí)”直接在單元格內(nèi)進(jìn)行修改。

當(dāng)然，編輯單元格的交互并不至這一種；也可參考【Ant design】中編輯單元格功能，hover展示編輯框，單擊后直接可編輯。

無論是項(xiàng)目、階段還是任務(wù)，確定好了表格組件后，設(shè)計(jì)師基本上無需進(jìn)行重復(fù)設(shè)計(jì)。可以花更多時(shí)間研究業(yè)務(wù)特性。以此界面為例，我其實(shí)最后輸出的僅有各屬性項(xiàng)的字段樣式與相關(guān)說明而已。比如：

1. 三類對(duì)象的狀態(tài)標(biāo)簽是否可以共用、有些屬性需要重點(diǎn)標(biāo)出的，標(biāo)簽樣式與之前的是否重復(fù)；

2. 功能色(常規(guī)、成功、警示、提示、靜默、失效等)的使用是否規(guī)范統(tǒng)一；

3. 看似同類字段：開始時(shí)間、計(jì)劃開始時(shí)間，后臺(tái)邏輯是否一致，可用同一樣式；(比如：項(xiàng)目開始需要走審批流程，定義啟動(dòng)流程的時(shí)間為開始時(shí)間。階段的計(jì)劃開始時(shí)間是創(chuàng)建者手動(dòng)填寫，無需再走流程。故而兩字段樣式有所區(qū)別。)

雖然很多時(shí)候用戶不一定能夠注意到其中細(xì)微的區(qū)別，并且會(huì)一定程度上增加開發(fā)同學(xué)的工作量。但最終的呈現(xiàn)出來的效果，遠(yuǎn)比全部使用純文本樣式展示要好看的多，且體驗(yàn)也會(huì)更佳。

3. 零部件結(jié)構(gòu)

該界面制作時(shí)，需求明確，且有原來的部分界面做參考，主要是增加了搜索需要匹配關(guān)鍵字并高亮單元格。然后根據(jù)現(xiàn)有的組件進(jìn)行樣式交互的優(yōu)化。

設(shè)計(jì)上比較簡(jiǎn)單，按照需求遵循相應(yīng)的規(guī)范直接給出相關(guān)的樣式即可。只不過整體更改了原有的交互方式，將表內(nèi)帶有的結(jié)構(gòu)剔除，放置左側(cè)以樹結(jié)構(gòu)展示。因涉及到部分業(yè)務(wù)，不方便截圖整個(gè)界面，零部件的結(jié)構(gòu)相當(dāng)復(fù)雜且存在很多關(guān)系，界面功能不過多介紹。

在后臺(tái)表格的設(shè)計(jì)中，除了表格內(nèi)的操作(一般放至最右列)，還有其他的很多操作按鈕與篩選項(xiàng)等等。框架【Element】和【Ant design】都將其放置在表格左上方，且原界面布局基本如此，我沒有做太多修改。

當(dāng)然，還有很多后臺(tái)界面設(shè)計(jì)，未進(jìn)行模塊劃分，且操作較少，整個(gè)界面基本上為表格平鋪的，可直接將按鈕以icon展示，同標(biāo)題一行，對(duì)齊右側(cè)。如下圖：

除以上列出的部分，還有一些其他類型的表格設(shè)計(jì)，比如：

1. 相關(guān)文檔列表，抽屜展開更多詳情信息，一般情況下直接選用框架內(nèi)的 Table 組件也能夠滿足需求，展開的詳情根據(jù)不同的文檔類型有所區(qū)別而已；

2. 與某對(duì)象相關(guān)聯(lián)的其他對(duì)象，根據(jù)關(guān)聯(lián)類型進(jìn)行分組，直接增加一行分組標(biāo)題，在左側(cè)給出icon進(jìn)行標(biāo)識(shí)，且可控制其展開或收起。配合其他篩選組件一起使用也是很常見的；

3. 將多個(gè)對(duì)象進(jìn)行對(duì)比，更改表頭與屬性項(xiàng)的排布方式：左側(cè)為屬性項(xiàng)名稱，上方為對(duì)象標(biāo)識(shí)名稱。可根據(jù)需求，進(jìn)行移除或添加對(duì)比的對(duì)象，可將相同項(xiàng)與不同項(xiàng)的表行底色進(jìn)行區(qū)分。

以上涉及的業(yè)務(wù)內(nèi)容較多，暫不逐一展示效果圖。僅給出部分樣式：

不同對(duì)象的屬性不同，字段與對(duì)比的方式會(huì)存在一定差異。上圖為系統(tǒng)中用的最多的一種樣式。屬性項(xiàng)存在分組，可展開折疊，并且能夠在對(duì)比前通過篩選進(jìn)行控制，當(dāng)對(duì)比數(shù)據(jù)量過大時(shí)，可以很好的優(yōu)化性能。當(dāng)然，也可以全部對(duì)比后再篩選，主要看業(yè)務(wù)信息量，并與開發(fā)同學(xué)溝通，綜合制定最優(yōu)的交互方式即可。

后臺(tái)界面對(duì)業(yè)務(wù)呈現(xiàn)與實(shí)用性要求更高，特別是我司負(fù)責(zé)制造業(yè)數(shù)據(jù)的管理，整體特點(diǎn)就是表格、表單占據(jù)界面的大部分，需要在眾多的信息中更快找到目標(biāo)對(duì)象。

提高開發(fā)效率的同時(shí)需要根據(jù)各企業(yè)的特點(diǎn)，進(jìn)行產(chǎn)品定制。故而在開發(fā)之前，整個(gè)項(xiàng)目組人員都需要或多或少的了解業(yè)務(wù)。作為設(shè)計(jì)人員，在沒有產(chǎn)品經(jīng)理的情況下基本就是承上啟下的角色，對(duì)于表格相關(guān)的設(shè)計(jì)需要注意以下幾點(diǎn)：

1. 充分了解業(yè)務(wù)，包括該階段是否實(shí)現(xiàn)的內(nèi)容、以后可能增加的內(nèi)容等，考慮使用表格是否合理；

2. 確定界面的基本功能字段以及交互方式，梳理完成該業(yè)務(wù)的整體閉環(huán)；

3. 熟悉各框架基本內(nèi)容，與前端溝通表格內(nèi)功能實(shí)現(xiàn)的難易程度，確定組件；

4. 設(shè)計(jì)時(shí)，盡量使用原子設(shè)計(jì)法與透明度法則，可以更好的進(jìn)行全局樣式和交互的把控；

5. 展示高保真的表格時(shí)，充分利用圖層樣式，能夠更好統(tǒng)一表格的色彩，文本等；使用組件，可自定特殊的單元格字段樣式，尤其是枚舉類字段；

6. 通用表格的輸出，可直接將源文件圖層樣式等上傳至藍(lán)湖，加以文字說明，非常方便。

后面有空會(huì)總結(jié)一下后臺(tái)設(shè)計(jì)規(guī)范與組件圖層樣式的使用。以上僅為個(gè)人近期大量表格設(shè)計(jì)的小小心得，也是第一次做此類后臺(tái)系統(tǒng)設(shè)計(jì)，不足之處希望大家評(píng)論處指出，共同成長(zhǎng)。

小編：@Kerr Xu

原作者：@xyz946494

作者已經(jīng)授權(quán)本公眾號(hào)發(fā)布

更多閱讀1.視覺和交互都必須知道的交互設(shè)計(jì)模式2.2018設(shè)計(jì)師超詳細(xì)面試指南3.產(chǎn)品設(shè)計(jì)心得-視覺篇4.扁平描邊插畫嘔血教程5.老司機(jī)教你3步解析品牌設(shè)計(jì)6.【只言片語01】設(shè)計(jì)的邏輯7.【只言片語02】設(shè)計(jì)中的加載8.【只言片語03】無效的用戶測(cè)試9.【只言片語04】體驗(yàn)設(shè)計(jì)雜談10.【只言片語05】app中5種形式的地址選擇11.交互輸出文檔12.用戶體驗(yàn)設(shè)計(jì)師的8個(gè)關(guān)鍵問答由于微信官方將公眾號(hào)文章的推送規(guī)則作出了新的改動(dòng)(現(xiàn)在已經(jīng)不是按照發(fā)布時(shí)間排序)如果大家還想看到應(yīng)謀鬼計(jì)的文章準(zhǔn)時(shí)出現(xiàn)，一定點(diǎn)擊文章右上角的“...”將應(yīng)謀鬼計(jì)設(shè)為星標(biāo)?，也要多點(diǎn)點(diǎn)右下角的「在看」哦～點(diǎn)我，這里這里

總結(jié)

以上是生活随笔為你收集整理的asp 设置table 间距_B端后台表格（table）如何设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。