對(duì)于很多設(shè)計(jì)師來(lái)說(shuō)，表格頁(yè)面的設(shè)計(jì)已經(jīng)過(guò)于固化，基礎(chǔ)就是按照 各大設(shè)計(jì)系統(tǒng)那樣，進(jìn)行內(nèi)容的呈現(xiàn)與繪制。我們很難再設(shè)計(jì)出“別出心裁”的樣子。

比如之前讓同學(xué)去繪制一個(gè)表格頁(yè)面，經(jīng)過(guò)他 3 天的努力，成功將一個(gè)傳統(tǒng)表格繪制成了 Ant Design 的樣子。

那我們作為設(shè)計(jì)師，可以在哪些維度去提升表格的品質(zhì)感？在繪制一個(gè)表格頁(yè)時(shí)如何讓其更符合目前的潮流趨勢(shì)？這里給大家提供四種方法。

一、文字信息圖形化

首先傳統(tǒng)的表格所呈現(xiàn)的都是一個(gè)個(gè)獨(dú)立的文本信息，這對(duì)于設(shè)計(jì)師來(lái)說(shuō)表格就沒(méi)有設(shè)計(jì)的空間。因此最簡(jiǎn)單的方式就是將表格的信息，通過(guò)圖形的方式進(jìn)行呈現(xiàn)。這樣可以點(diǎn)綴頁(yè)面的同時(shí)，還能夠更為豐富的呈現(xiàn)數(shù)據(jù)內(nèi)容。

當(dāng)然在表格當(dāng)中并不是所有的字段都可以進(jìn)行圖形化，我們通常會(huì)關(guān)注幾類不同的字段類型：

1. 員工名稱

因?yàn)樵谄髽I(yè)中，員工名稱較為復(fù)雜的字段信息。因此在設(shè)計(jì)上我們可以考慮以頭像的方式進(jìn)行呈現(xiàn)。

當(dāng)然圖片能夠傳達(dá)的信息效率本身較低，因此需要考慮使用戶 Hover 過(guò)后，能及時(shí)給用戶反饋對(duì)應(yīng)的員工信息即可。

比如在一個(gè) CRM 系統(tǒng)當(dāng)中，由于 負(fù)責(zé)人 等字段類型本身只會(huì)存在一個(gè)，因此可以使用 頭像+人名 的方式，來(lái)優(yōu)化傳統(tǒng)表格的呈現(xiàn)形式，豐富內(nèi)容。

又或者是在研發(fā)管理系統(tǒng)當(dāng)中，通常 任務(wù)、需求、BUG 等所涉及到的人員并不會(huì)太多，因此使用頭像能夠快速呈現(xiàn)。

不過(guò)在交互上需要為這種設(shè)計(jì)形式進(jìn)行兜底，由于頭像信息傳達(dá)的效率較低，我們可以在 tooltips 當(dāng)中設(shè)計(jì) 0.5 秒 的響應(yīng)時(shí)間，這樣的反應(yīng)會(huì)更為及時(shí)。

2. 選擇類字段

選擇類型字段由于比較特殊，通常都是具有特殊意義的字段類型。

比如 對(duì)應(yīng)渠道，里面就會(huì)包含：抖音、B 站、小紅書(shū)、公眾號(hào)、線下推廣 等渠道信息，這時(shí)候使用圖標(biāo)來(lái)點(diǎn)綴整個(gè)頁(yè)面，就會(huì)比傳統(tǒng)的文字去呈現(xiàn)信息效率要高。

當(dāng)然，如果你的選項(xiàng)過(guò)多，可能超過(guò) 10+ ，那這個(gè)時(shí)候克制一些可能會(huì)更好，這樣即能保證標(biāo)簽當(dāng)中語(yǔ)義傳達(dá)的完整性，同時(shí)也不會(huì)讓頁(yè)面顏色過(guò)多而造成頁(yè)面凌亂。

3. 重要狀態(tài)

如果在一條數(shù)據(jù)中存在一個(gè)重要的狀態(tài)，這時(shí)候我們便可以將狀態(tài)進(jìn)行優(yōu)化。你可以將其變化為標(biāo)簽，甚至是放在數(shù)據(jù)最前方用于快速提示。

比如在審批中心，我們進(jìn)入頁(yè)面過(guò)后首先就會(huì)去看當(dāng)前狀態(tài)未審批的信息，這時(shí)候「審批狀態(tài)」就屬于最重要的信息。如果在表格當(dāng)中，我們就可以將它與審批名稱放置在一起，組成一個(gè)極為關(guān)聯(lián)的數(shù)據(jù)集，來(lái)幫助用戶進(jìn)行判斷。

4. 文件類型圖標(biāo)化、預(yù)覽化

假設(shè)表格中還會(huì)存在文件附件，我們還可以將其對(duì)應(yīng)的圖標(biāo)展現(xiàn)出來(lái)，能夠幫助用戶快速進(jìn)行文件的判斷、預(yù)覽；這里要注意，作為設(shè)計(jì)師需要判斷文件上傳的格式情況。

如果為單一附件格式，比如 png、jpg、webp... 我們可以使用預(yù)覽的方式展示圖標(biāo)的具體內(nèi)容；
如果為多附件格式，比如 png、pdf、csv、doc... 則需要通過(guò)圖標(biāo)的方式進(jìn)行展示。

5. 關(guān)鍵操作

對(duì)于部分操作，我們還能將其進(jìn)行圖標(biāo)化的呈現(xiàn)。常見(jiàn)做法是將文字操作轉(zhuǎn)化為圖標(biāo)操作，但如果這條數(shù)據(jù)過(guò)于重要，我們還可以將其放在表格前列，用于進(jìn)行快速引導(dǎo)～

比如我們還是以這個(gè) CRM 產(chǎn)品為例，由于銷售每天工作強(qiáng)度很高，會(huì)聯(lián)系多名客人，然后將重要的數(shù)據(jù)通過(guò)收藏的方式標(biāo)注出來(lái)，因此我們?cè)诓僮髦芯涂梢詫⑹詹氐膬?yōu)先級(jí)提前，放在前列；同時(shí)銷售也會(huì)查看每一名客戶過(guò)后，快速給客戶進(jìn)行電話的撥打，這時(shí)候我們也可以將呼叫操作前置，這樣形成收藏+呼叫的快速操作集合～

6. 注意事項(xiàng)

在使用文字信息圖形化時(shí)，大家要注意，圖標(biāo)的使用在表格當(dāng)中一定不能過(guò)多，通常我們只會(huì)選擇 2-3 個(gè)字段進(jìn)行圖標(biāo)化（排除關(guān)鍵操作），這樣才能夠保證整個(gè)頁(yè)面不會(huì)太亂。

在圖標(biāo)的設(shè)計(jì)上，大家記住一定要去做統(tǒng)一，不要出現(xiàn)太多形式各異、風(fēng)格多變的圖標(biāo)類型，這樣會(huì)使整個(gè)表格喪失品質(zhì)感。

二、布局結(jié)構(gòu)

想要優(yōu)化表格的形式，我們可以在布局上對(duì)整個(gè)表格層級(jí)進(jìn)行重新整理與優(yōu)化。

因?yàn)楸砀裨诳臻g上占比非常的大，因此留給我們發(fā)揮的空間也會(huì)相對(duì)較多，首先我們可以考慮左右布局，將數(shù)據(jù)當(dāng)中重要的層級(jí)結(jié)構(gòu)放在左側(cè)，進(jìn)而實(shí)現(xiàn)對(duì)表格內(nèi)容的快速操作，同時(shí)在數(shù)據(jù)內(nèi)容上也豐富了整個(gè)頁(yè)面。

比如在 OA 軟件當(dāng)中的組織架構(gòu)當(dāng)中，大多數(shù)的產(chǎn)品都會(huì)將部門放置在左側(cè)，右側(cè)則呈現(xiàn)對(duì)應(yīng)的人員，這樣能夠在設(shè)計(jì)上通過(guò)布局的方式呈現(xiàn)更多的內(nèi)容。

當(dāng)然在部分產(chǎn)品當(dāng)中，也會(huì)利用橫向的空間，將重要的數(shù)據(jù)進(jìn)行展示，比如在飛書(shū)招聘當(dāng)中，由于招聘狀態(tài)過(guò)于重要，因此這時(shí)候，就可以通過(guò)提高優(yōu)先級(jí)的方式，將飛書(shū)的篩選放置在表格的頂部。

并且將每一個(gè)狀態(tài)當(dāng)中所包含的數(shù)據(jù)進(jìn)行展示，這樣就能豐富頁(yè)面的展示維度，并且也確實(shí)能夠優(yōu)化表格當(dāng)中的設(shè)計(jì)形式。在信息當(dāng)中，我們還可以通過(guò)左側(cè)的空間去呈現(xiàn)常見(jiàn)的篩選組（多個(gè)篩選條件的快捷操作），這樣在頁(yè)面的豐富程度上，我們會(huì)發(fā)現(xiàn)會(huì)比之前單一的表格更好更為真實(shí)。

三、多層信息排布

如果在表格當(dāng)中，你的設(shè)計(jì)思維過(guò)于局限，可以試試打破常規(guī)的表格結(jié)構(gòu)。

比如：在一個(gè)招聘系統(tǒng)當(dāng)中，由于表格中的會(huì)存在較多的字段，而我們作為設(shè)計(jì)師應(yīng)該如何優(yōu)化？

那最初的做法，肯定是將所有的字段滾動(dòng)展示，這樣你會(huì)發(fā)現(xiàn)，雖然解決了問(wèn)題，但又會(huì)冒出新的問(wèn)題來(lái)，比如無(wú)法看到更為完整的信息、字段之間的排列毫無(wú)關(guān)聯(lián)。

那我們能否考慮分析這些字段，根據(jù)不同的數(shù)據(jù)關(guān)系來(lái)進(jìn)行整理？

你會(huì)發(fā)現(xiàn)，它對(duì)應(yīng)的工作經(jīng)歷其實(shí)是有固定的時(shí)間先后順序。那這時(shí)候就可以考慮將多種信息進(jìn)行整合與排布，使我們表格的信息效率提高，同時(shí)用戶閱讀起來(lái)也會(huì)更為順暢。

當(dāng)然這時(shí)候我們還需要注意，因?yàn)槎嘧侄蔚那闆r其實(shí)是不符合表格的實(shí)際要求，因此在設(shè)計(jì)上我們會(huì)采取列表（list）的方式來(lái)呈現(xiàn)。

這里簡(jiǎn)單說(shuō)說(shuō)列表與表格最大的不同：

表格（table）是使用單元格的方式，展示數(shù)據(jù)當(dāng)中的獨(dú)立信息。里面每一個(gè)單元格都是一個(gè)字段的數(shù)據(jù)，因此相對(duì)獨(dú)立且通用。

列表（list）可以同時(shí)呈現(xiàn)多條數(shù)據(jù)，可以理解是一個(gè)數(shù)據(jù)的“簡(jiǎn)單詳情頁(yè)”，它的信息通常都會(huì)高度精簡(jiǎn)，因此閱讀性會(huì)更強(qiáng)，但通用性就稍顯不足，并不是所有頁(yè)面都可以適配列表。

四、更多設(shè)計(jì)細(xì)節(jié)

當(dāng)然，在表格設(shè)計(jì)當(dāng)中依舊會(huì)存在非常多的設(shè)計(jì)細(xì)節(jié)，這里給大家簡(jiǎn)單總結(jié)了幾點(diǎn)：

1. 在頁(yè)面當(dāng)中可以點(diǎn)擊的字段，我們可以通過(guò)藍(lán)色高亮的方式進(jìn)行呈現(xiàn)，這樣可以提醒用戶，這里可以點(diǎn)擊直接進(jìn)入詳情頁(yè)。
2. 表格當(dāng)中如果存在快捷編輯，那需要考慮清楚快捷編輯用戶如何點(diǎn)擊，如何進(jìn)行提交。這是我們作為設(shè)計(jì)需要考慮的范疇，通常會(huì)在原位進(jìn)行編輯，并且提交過(guò)后會(huì)給出相應(yīng)的提示。
3. 表格凍結(jié)操作，需要呈現(xiàn)對(duì)應(yīng)投影來(lái)進(jìn)行設(shè)計(jì)優(yōu)化。

作者：CE青年Youthce