本周的改版分享，主要針對(duì)表格頁(yè)面完成。作為B端最重要的頁(yè)面（沒(méi)有之一），但依舊有很多同學(xué)設(shè)計(jì)它的時(shí)候找不到要點(diǎn)，總認(rèn)為表格頁(yè)沒(méi)東西能設(shè)計(jì)，導(dǎo)致最后輸出的作品乏善可陳。

所以這次再選了兩個(gè)同學(xué)輸出的表格頁(yè)面案例，來(lái)講解下如何有效的完善它的界面和視覺(jué)樣式。如果對(duì)表格的理解還不夠全面，可以看我們之前輸出的表格相關(guān)分享：

1.B端視覺(jué) | 項(xiàng)目里全是表格頁(yè)該怎么做加分設(shè)計(jì)？

2.案例解析 | 10個(gè)表格加分項(xiàng)設(shè)計(jì)（加了億點(diǎn)點(diǎn)細(xì)節(jié)

3.超肝交互改版長(zhǎng)篇 | 飛書(shū)多維表格交互改版全流程分享

4.年前最后一篇長(zhǎng)干貨，B端表格規(guī)范最終集奉上

本文修改的基本思路如下：

1. 字段整合優(yōu)化，包括信息整合、數(shù)字字段的間隔；

2. 行列尺寸平衡，對(duì)行的高度、列的寬度進(jìn)行調(diào)整，以此達(dá)到數(shù)據(jù)字段的視覺(jué)平衡；

3. 信息強(qiáng)弱對(duì)比，對(duì)需要強(qiáng)化的信息進(jìn)行視覺(jué)強(qiáng)化，對(duì)可以弱化的信息進(jìn)行弱化；

4. 視覺(jué)細(xì)節(jié)修飾，在視覺(jué)上加入一些更直觀、有益于瀏覽的元素；

5. 缺失功能補(bǔ)全，這里指的不是業(yè)務(wù)功能，而是表格本來(lái)應(yīng)有的功能，例如：批量操作

6. 完成全部設(shè)計(jì)；

老規(guī)矩，先來(lái)看一下案例。

除了整個(gè)頁(yè)面完成度上的問(wèn)題之外，單看這個(gè)表格，最明顯的一個(gè)問(wèn)題就是所有字段全部一個(gè)字重、大部分字段使用同一個(gè)顏色，這就導(dǎo)致了字段之間缺乏對(duì)比，盡管我們常見(jiàn)到字段權(quán)重?zé)o法區(qū)分高低的情況，但具體問(wèn)題具體分析，在這個(gè)案例中依然可以判斷一些字段是需要提權(quán)的，例如在這個(gè)表格中的「客戶(hù)名稱(chēng)」，因?yàn)榇吮砀竦谋举|(zhì)就是不同公司 (客戶(hù)) 的信息列表，所以客戶(hù)名稱(chēng)是對(duì)行進(jìn)行區(qū)分的最重要的字段。

此外操作按鈕又大又黑，顯得過(guò)于笨重了；最后還有一點(diǎn)，帶多選器的表格，基本需要進(jìn)行批量操作，而這個(gè)表格缺失了這一部分功能。

那么按照之前所說(shuō)的流程，我們來(lái)對(duì)這個(gè)案例進(jìn)行修改。

1.字段整合優(yōu)化

在進(jìn)行前幾個(gè)步驟的字段調(diào)整時(shí)，我們并不需要把整個(gè)表格全部做出來(lái)，只需要一個(gè)表頭，和一行內(nèi)容即可。在這個(gè)流程中，我選擇將客戶(hù)的名稱(chēng)和ID進(jìn)行了合并處理，縮減橫向空間的同時(shí)，利用一致性的逆向使用來(lái)增加客戶(hù)這個(gè)字段的權(quán)重。

此外，還對(duì)長(zhǎng)達(dá)19位的銀行卡號(hào)，進(jìn)行了常見(jiàn)的4-4-4-4-3的數(shù)字間隔，稍微增加這串長(zhǎng)數(shù)字的可讀性。

2.行列尺寸平衡

光改完字段，我們會(huì)發(fā)現(xiàn)字段之間的間隔有大有小，比較影響觀感。加之出現(xiàn)了兩行的字段，此時(shí)我們需要重新調(diào)整單元格的長(zhǎng)寬，以適應(yīng)我們之前做的改動(dòng)。

另外，在某些字段中，例如「客戶(hù)」，我們不能確定該字段最長(zhǎng)會(huì)有多長(zhǎng)，那就需要在后面適當(dāng)?shù)亩嗔粢恍┛臻g。

3.信息強(qiáng)弱對(duì)比

適當(dāng)再?gòu)?qiáng)化「客戶(hù)」的公司名稱(chēng)，弱化客戶(hù)ID，稍微弱化刪除按鈕。因?yàn)榇税咐凶侄屋^少，所以可操作的空間也不是很大，暫且權(quán)重上就只改這么多。

4.視覺(jué)細(xì)節(jié)修飾

在「客戶(hù)」中加入公司的logo，這樣做有助于更好地對(duì)公司進(jìn)行區(qū)分；在業(yè)務(wù)員的名字前加入頭像/照片，也有助于區(qū)分業(yè)務(wù)員，同時(shí)潤(rùn)色一下視覺(jué)觀感；將銀行卡還原為愿案例中的鏈接樣式。

在這一步之后，就需要做出完整的全部表格，并對(duì)「選中行」進(jìn)行樣式設(shè)計(jì)了。除了勾選之外，為選中行加入一定的背景色也是很好的視覺(jué)提示。此外，當(dāng)出現(xiàn)選中行時(shí)表頭的全選按鈕會(huì)變成半選狀態(tài)，這是一個(gè)交互細(xì)節(jié)。原案例中并沒(méi)有體現(xiàn)，所以這里我將其修改至正確狀態(tài)了。

5.缺失功能補(bǔ)全

這里缺失的功能便是批量操作功能，在非特殊性情況下，批量功能沒(méi)有任何理由在存在多選的表格中缺席。

6.完成全部設(shè)計(jì)

最后就是填圖填色填圖標(biāo)，表格在視覺(jué)上沒(méi)有太多的花頭可以做，這里就不贅述了。

最后我們可以再進(jìn)行一下修改前后的對(duì)比。

照例先來(lái)看一下原圖。與案例一類(lèi)似，這一份的表格所呈現(xiàn)的問(wèn)題也是字段之間過(guò)于雷同，甚至包括狀態(tài)的區(qū)分都不是非常顯眼，這對(duì)表格瀏覽是比較大的壓力。此外，同樣缺失了批量操作的按鈕，我們還是按照如之前所述的流程，對(duì)它進(jìn)行修改。

1.字段整合優(yōu)化

這里我選擇將患者姓名與身份證號(hào)進(jìn)行合并，給后面的字段擠出一定的空間，當(dāng)然字段的合并是否一定是更好的這得具體業(yè)務(wù)具體分析，這里為了空間我先這么做。

另一處合并在預(yù)約就診時(shí)間，原案例將這兩個(gè)字段拆開(kāi)，并且表頭的文案「就診日期」、「候診時(shí)間」與后面的「預(yù)約時(shí)間」相當(dāng)容易引起歧義，這里我們區(qū)分一下「就診日期」和「候診時(shí)間」是指患者希望前往就診的日期時(shí)間，預(yù)約時(shí)間則為進(jìn)行預(yù)約操作的時(shí)間。所以將表頭文案改為「預(yù)約就診時(shí)間」可能更不容易引發(fā)歧義。

其次便是手機(jī)號(hào)的3-4-4分隔，身份證6-8-4的分隔，這與案例一種銀行卡號(hào)的風(fēng)格原理一致，不再贅述。

2.行列尺寸平衡

由于出現(xiàn)了兩行字段，這里稍稍提高了行的高度；并平衡各列的寬度對(duì)字段間距進(jìn)行平衡控制。

3.信息強(qiáng)弱對(duì)比

這一份的信息確實(shí)不太好做出過(guò)于強(qiáng)烈的信息對(duì)比，所以這里我只是略微進(jìn)行調(diào)整，我略微強(qiáng)化了姓名和預(yù)約就診時(shí)間，略微弱化了身份證和預(yù)約時(shí)間，但并非讓它們?nèi)醯綗o(wú)關(guān)緊要的程度，這些信息依然是重要的，但相比之下可以稍稍弱化。值得注意的是掛號(hào)狀態(tài)，這里我只進(jìn)行了字重的增加，但實(shí)際上這個(gè)標(biāo)簽非常重要，在后續(xù)修改中我還會(huì)對(duì)這個(gè)標(biāo)簽進(jìn)行視覺(jué)上的修改。

4.視覺(jué)細(xì)節(jié)修飾

在這一步，我把掛號(hào)狀態(tài)改成了一個(gè)更顯眼的標(biāo)簽，不同的狀態(tài)采用不同的顏色；另外在預(yù)約就診時(shí)間內(nèi)更加稍強(qiáng)調(diào)時(shí)間。

接下來(lái)補(bǔ)完整個(gè)表格，在這一步為了演示不同的表格樣式，我選擇采用隔行間色的表格樣式，也就是常說(shuō)的斑馬線(xiàn)。受斑馬線(xiàn)的影響，選中狀態(tài)只能選擇使用更為醒目的強(qiáng)調(diào)色，內(nèi)部元素則需要進(jìn)行反色的單獨(dú)設(shè)計(jì)。

5.缺失功能補(bǔ)全

然后再把缺失的批量功能補(bǔ)全，與案例一類(lèi)似。

6.完成全部設(shè)計(jì)

最后依然是完成全部的視覺(jué)設(shè)計(jì)。

最后再進(jìn)行一下修改前后的對(duì)比。

結(jié)尾

表格是一個(gè)相對(duì)來(lái)說(shuō)比較復(fù)雜的組件，在設(shè)計(jì)上也沒(méi)有多少視覺(jué)性的要素可供設(shè)計(jì)師發(fā)揮，所以在這個(gè)組件的設(shè)計(jì)上，需要花更多的時(shí)間去理解業(yè)務(wù)場(chǎng)景并梳理字段的強(qiáng)弱關(guān)系，清晰地表達(dá)出信息的權(quán)重。

僅以以上兩個(gè)案例，我也只能暫且說(shuō)明進(jìn)行表格設(shè)計(jì)的通用思路，大家在具體實(shí)踐時(shí)，還需自行多加思考。

我們下篇改版文章再賤??～～

往期改版文章閱讀：

B端設(shè)計(jì)｜個(gè)人信息頁(yè)設(shè)計(jì)技巧解析

B端改版 | 淘寶商家后臺(tái)千牛表單設(shè)計(jì)優(yōu)化

B端交互框架改版 - 我用即時(shí)設(shè)計(jì)改了即時(shí)設(shè)計(jì)頁(yè)面

B端產(chǎn)品設(shè)計(jì)課程第八期開(kāi)啟正式招生了，

課程介紹點(diǎn)擊鏈接查看：今年最后一期｜B端產(chǎn)品設(shè)計(jì)課開(kāi)啟招生

課前預(yù)習(xí)和咨詢(xún)服務(wù)都準(zhǔn)備好了，還不快來(lái)～