宋代陸游的詩、紙上得來終覺淺，覺知此事要躬行。前兩篇文章我們寫了表格基礎(chǔ)知識和表格的設(shè)計。

本篇文章就是理論結(jié)合實際。講解一下在后臺SaaS項目中表格是怎么進(jìn)行減負(fù)提效的。

1、B端SaaS系統(tǒng)表格

在整個B端產(chǎn)品體系里面、表格可以說是一個重要的角色。也是被公認(rèn)為是展示結(jié)構(gòu)化數(shù)據(jù)最為清晰、高效的形式。解決表格的問題、在一定的條件下就等于解決了至少解決了B端產(chǎn)品80%的問題。

1.1、B端表格的意義和原則

1.1.1、B端表格的意義

B端產(chǎn)品中表格的意義在于整合和展示數(shù)據(jù)、提升工作效率、輔助決策分析以及提升用戶體驗。因此，在設(shè)計和優(yōu)化B端產(chǎn)品時，應(yīng)充分重視表格的作用，確保其能夠充分發(fā)揮這些意義，為用戶提供更好的使用體驗和價值。

數(shù)據(jù)整合展示

表格作為一種結(jié)構(gòu)化的數(shù)據(jù)展示形式，能夠有效地整合和展示各類信息。為用戶提供高效的數(shù)量分析的基礎(chǔ)。

提升工作效率

表格在B端產(chǎn)品中通常具備豐富的操作功能，如排序、篩選、搜索等。這些功能使得用戶能夠更高效地處理數(shù)據(jù)，減少手動操作的時間和成本。

輔助決策分析

表格往往承載著重要的決策分析功能。通過對表格中的數(shù)據(jù)進(jìn)行對比、分析和計算，用戶可以得出有價值的結(jié)論和洞察，為企業(yè)的決策提供支持。

提升用戶體驗

優(yōu)秀的表格設(shè)計還能夠提升用戶的使用體驗。通過合理的列寬設(shè)置、清晰的標(biāo)題標(biāo)識、恰當(dāng)?shù)目瞻滋畛涞确绞?，可以使得表格更加易讀、易懂。同時，考慮到不同用戶的使用習(xí)慣和需求，表格設(shè)計還可以提供個性化的定制選項，以滿足用戶的特定需求。

1.1.2、B端表格設(shè)計原則

B端產(chǎn)品中表格的設(shè)計應(yīng)遵循清晰可讀、結(jié)構(gòu)化布局、功能齊全、響應(yīng)式設(shè)計、可定制性和性能優(yōu)化等原則。這些原則將有助于提高表格的可用性和用戶體驗，使表格成為B端產(chǎn)品中不可或缺的一部分。

清晰可讀

表格的設(shè)計應(yīng)首先保證清晰可讀。這包括選擇合適的字體、字號和顏色，確保文本和背景有足夠的對比度，避免用戶閱讀困難。同時，列標(biāo)題應(yīng)簡明扼要，避免使用過長或復(fù)雜的術(shù)語，方便用戶快速理解表格內(nèi)容。

結(jié)構(gòu)化布局

表格的布局應(yīng)結(jié)構(gòu)清晰，遵循用戶的使用習(xí)慣。例如，重要的信息應(yīng)放在表格的左側(cè)或頂部，便于用戶快速定位。同時，列與列之間應(yīng)保持適當(dāng)?shù)拈g距，避免信息過于擁擠。

功能齊全

表格應(yīng)提供豐富的操作功能，以滿足用戶的不同需求。這包括排序、篩選、搜索等基本功能，以及數(shù)據(jù)導(dǎo)出、打印等輔助功能。這些功能能夠提高用戶的工作效率，使表格成為數(shù)據(jù)處理的有力工具。

響應(yīng)式

在B端產(chǎn)品中，表格通常需要適應(yīng)不同尺寸的屏幕和設(shè)備。因此，表格設(shè)計應(yīng)采用響應(yīng)式布局，確保在不同設(shè)備和屏幕尺寸下都能保持良好的可讀性和可用性。

性能優(yōu)化

對于包含大量數(shù)據(jù)的表格，性能優(yōu)化尤為重要。設(shè)計師應(yīng)關(guān)注表格的加載速度、渲染效率等方面，確保用戶在處理數(shù)據(jù)時能夠獲得流暢的體驗。

1.2、B端表格常見布局

在大部分的b端業(yè)務(wù)界面里、表格在頁面中的區(qū)域是最大的。我們大部分的業(yè)務(wù)場景中都是對表格、掃視或者操作。

2、項目優(yōu)化改版

我們的SaaS系統(tǒng)是我們行業(yè)內(nèi)的No.1龍頭的存在。在我進(jìn)入公司時開始推動SaaS平臺的整體改版。頁面中的表格也是此處整體優(yōu)化改版的一部分。本次我們就結(jié)合之前寫的文章來介紹一下我的表格改版設(shè)計。

2.1、項目需求

隨著企業(yè)數(shù)字化轉(zhuǎn)型的加速，我們的客戶也面臨著業(yè)務(wù)效率提升和用戶體驗優(yōu)化等的多重挑戰(zhàn)。他們需要一個高效、易用的駕校一體化解決方案來支持日常業(yè)務(wù)運營和管理。作為一體化解決方案的核心。駕校通SaaS管理系統(tǒng)業(yè)務(wù)的優(yōu)化等更加的重要了。

2.1.1、產(chǎn)品需求

豐富優(yōu)化我們的SaaS系統(tǒng)、跟進(jìn)業(yè)務(wù)需求迭代。旨在做一個款不斷提升工作效率、優(yōu)化用戶習(xí)慣，并實現(xiàn)我們用戶業(yè)務(wù)不斷增長、企業(yè)信息化數(shù)字化的SaaS系統(tǒng)。

2.1.2、設(shè)計需求

設(shè)計規(guī)范規(guī)范不完善；現(xiàn)有頁面布局拓展性太差、無法滿足新增業(yè)務(wù)功能。整體視覺系統(tǒng)混亂。

2.2、現(xiàn)在問題

針對“SaaS”改版的業(yè)務(wù)端需求。基于目前產(chǎn)品我們進(jìn)行了線下企業(yè)進(jìn)行了實際走訪調(diào)研聽取他們對我們系統(tǒng)的評價、和在操作上遇到的問題。

2.2.1、交互混亂邏輯不合理

部分功能流程都走不通、功能布局不合理，操作過于繁瑣。用戶體驗十分的差。邏輯不清晰、關(guān)系復(fù)雜和流程混亂，導(dǎo)致用戶使用產(chǎn)品或服務(wù)時感到不滿和困擾。

2.2.2、信息層級混亂

用戶無法快速找到自己想要的數(shù)據(jù)或篩選條件，頁面結(jié)構(gòu)混亂、信息主次不明確。信息層級混亂導(dǎo)致用戶感到困惑和不安，增加用戶的認(rèn)知負(fù)擔(dān)，使用戶難以理解和使用產(chǎn)品。

2.2.3、設(shè)計規(guī)范不完善

設(shè)計成本較高、開發(fā)溝通成本高、產(chǎn)品質(zhì)量不穩(wěn)定。各頁面出現(xiàn)問題不同。設(shè)計規(guī)范的不完善導(dǎo)致產(chǎn)品的用戶體驗不一致。之前多個設(shè)計師經(jīng)手導(dǎo)致產(chǎn)品的界面、交互和體驗風(fēng)格不統(tǒng)一。

2.2.4、視覺表現(xiàn)極差

整體的設(shè)計風(fēng)格陳舊、擁擠雜亂。而且視覺呈現(xiàn)不統(tǒng)一。界面設(shè)計不清晰，圖標(biāo)、按鈕等元素的識別度低，用戶可能會難以理解和操作產(chǎn)品，導(dǎo)致使用效率低下。

2.3、優(yōu)化目標(biāo)

結(jié)合我們平臺的優(yōu)化改版目標(biāo)、當(dāng)然表單也基本是一致的。通過我們對問題的總結(jié)和分析、逐步我們對平臺的改版方案有了明確的思路。

經(jīng)過和產(chǎn)品、開發(fā)團隊溝通后，計劃改版分為三個階段。模版頁面設(shè)計改版、沉淀符合業(yè)務(wù)組件、統(tǒng)一平臺視覺優(yōu)化交互細(xì)節(jié)。

2.4、優(yōu)化改版細(xì)節(jié)

在我們之前的文章中、已經(jīng)寫到了表格是一個系統(tǒng)。它分為內(nèi)部和外部、下面我們就結(jié)合我們之分享的經(jīng)驗。來看看我們的表格改版細(xì)節(jié)。

我們首先對整個版面結(jié)構(gòu)進(jìn)行了重新劃分。把頁面的框架先確定下來。然后我們在對表格的內(nèi)外進(jìn)行優(yōu)化。

2.4.1、外部

表格的外部、有什么如果你看過之前的文章。應(yīng)該是有印象的吧。是的有、篩選區(qū)域、操作區(qū)域、標(biāo)題；

篩選區(qū)域

在大部分B端表格頁面里、篩選條件是必不可少的。他能夠精確的幫助用戶精準(zhǔn)高效的查詢和歸類分析數(shù)據(jù)。在這部分我們在原有界面上凌亂的篩選布局做了規(guī)范。

組件大小和排版：原界面組件大小不一導(dǎo)致我們頁面篩選區(qū)域排版凌亂。針對這個問題、我們規(guī)定組件尺寸。應(yīng)用之寫的柵格話那篇文章里的知識、規(guī)定每行排列6或者8個篩選條件的組件（當(dāng)然這是簡單的說了、其實還有挺多特殊情況。但大部分情況下我們這個規(guī)定是可以應(yīng)用到業(yè)務(wù)里去的）。

自定義：因為我們系統(tǒng)充斥著該死的自由性。所以我們還做了篩選條件的自定義添加和減少來提升用戶體驗。這樣做還有一個好處就是可以提高我們的屏效、更多的顯示表格數(shù)據(jù)。

當(dāng)然在自主添加篩選的功能外、我們也在部分頁面做了展開收起篩選條件的功能來提升我們屏效。

標(biāo)題和按鈕操作區(qū)域

這部分我們改版的核心思想是整理、簡化、歸類。在保證用戶高效操作的前提下、按場景提高按鈕。

2.4.2、內(nèi)部

看過之前的文章的應(yīng)該都清楚我這里說的內(nèi)部區(qū)域是哪些部分吧。是的那就是表頭、表體、底欄、我們分別說一下我們是怎么對這幾部分進(jìn)行優(yōu)化設(shè)計的。

表頭

我們對表頭進(jìn)行了顏色調(diào)整、文字調(diào)整。在顏色上我們加深了表頭的底色來和下方數(shù)據(jù)內(nèi)容做對比。凸顯表頭細(xì)心更清晰。

表體

我們對表體、因為我們的數(shù)據(jù)字段非常的多。所以我們對表體在樣式上從之前的線條、增加了斑馬線底。在對數(shù)據(jù)做區(qū)分。

我們還對表體分割線顏色、方格里的留白空隙就行了優(yōu)化。當(dāng)然也優(yōu)化了一些字段，該刪除的刪除。改合并的合并?？偟膩碚f做了很多詳盡的優(yōu)化。不止這一點點。就不詳細(xì)的展開說了。核心是減負(fù)提效。

底欄

底欄是我們翻頁器的存在。從原先的不合理的左對齊、改成現(xiàn)在剛有利與我們操作的右對齊。如果數(shù)據(jù)沒有達(dá)到底部、不顯示翻頁器。

2.4.3、展示一下子

結(jié)合我以往的經(jīng)驗和表格的基礎(chǔ)知識和優(yōu)化方式。對我們業(yè)務(wù)表格的文字、方格、顏色、操作交互、字段優(yōu)化等多方面結(jié)合我們的業(yè)務(wù)進(jìn)行了優(yōu)化設(shè)計。是的可能還有很大的優(yōu)化空間。但這次的優(yōu)化就到這里了。

來單獨看一下

3、最后

表格的文章到這里就寫完了、講了基礎(chǔ)的支持、也寫了優(yōu)化的方法、今天也分享了實例。我還想說的是、我們講的所有方法理論和基礎(chǔ)、在B端設(shè)計里脫離業(yè)務(wù)的設(shè)計都是瞎扯淡。我們設(shè)計也是從業(yè)務(wù)需求出發(fā)的。

終于又完成了一個部分的內(nèi)容。

我是king、荊軻刺秦王吧；我想我們很快還會再見

Powered by Froala Editor