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

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

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

一、文字信息圖形化

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

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

1. 員工名稱

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

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

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

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

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

2. 選擇類字段

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

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

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

3. 重要狀態(tài)

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

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

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

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

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

5. 關(guān)鍵操作

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

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

6. 注意事項

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

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

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

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

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

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

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

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

三、多層信息排布

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

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

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

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

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

當(dāng)然這時候我們還需要注意，因為多字段的情況其實是不符合表格的實際要求，因此在設(shè)計上我們會采取列表（list）的方式來呈現(xiàn)。

這里簡單說說列表與表格最大的不同：

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

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

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

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

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

作者：CE青年Youthce