2022-8-19 博博
表格系列第一篇我們聊了表格的基礎(chǔ)內(nèi)容和表格的組成要素，包含表格由內(nèi)（展示項(xiàng)）、外（操作項(xiàng)）兩部分組成，如圖：
表格作為展現(xiàn)結(jié)構(gòu)化數(shù)據(jù)最為清晰、高效的形式，常和按鈕、搜索、篩選、分頁(yè)等其他元素一起協(xié)同，構(gòu)成表格頁(yè)。通常表格頁(yè)面包含三個(gè)部分：數(shù)據(jù)過(guò)濾、數(shù)據(jù)操作、數(shù)據(jù)查看。
數(shù)據(jù)過(guò)濾是對(duì)數(shù)據(jù)進(jìn)行篩選的部分，由搜索、篩選、標(biāo)簽這三個(gè)部分組成。產(chǎn)品設(shè)計(jì)上提供多維的篩選和排序，將操作者所關(guān)注的數(shù)據(jù)展示到前面，便于快速查看、對(duì)比、分析信息，是一種增加用戶(hù)效率的有效方式。
一般搜索和篩選會(huì)同時(shí)出現(xiàn)，但是兩者一般很少同時(shí)使用來(lái)對(duì)數(shù)據(jù)進(jìn)行定位；
搜索的交互觸發(fā)方式有“實(shí)時(shí)篩選”和“點(diǎn)擊按鈕觸發(fā)篩選”。實(shí)時(shí)篩選只適合數(shù)據(jù)量較小、數(shù)據(jù)嚴(yán)謹(jǐn)?shù)谋砀耥?yè)面，建議謹(jǐn)慎使用。“點(diǎn)擊按鈕觸發(fā)篩選”適合大部分表格場(chǎng)景。
因用戶(hù)需要手動(dòng)輸入，很難保證精準(zhǔn)搜索，原則上所有搜索均為模糊搜索，必要精準(zhǔn)搜索的地方使用篩選功能，給用戶(hù)提供篩選選項(xiàng)。
用戶(hù)搜索意圖不明確時(shí)，將用戶(hù)的查詢(xún)與待檢索的內(nèi)容進(jìn)行模糊匹配，使用模糊搜索時(shí)一定要結(jié)合自己的實(shí)際場(chǎng)景，慎重使用。
優(yōu)點(diǎn)：只要有相關(guān)的內(nèi)容都會(huì)被檢索出來(lái)，減少了精準(zhǔn)搜索帶來(lái)的記憶負(fù)擔(dān)；
缺點(diǎn)：容易把相關(guān)的信息也帶出來(lái)，例如檢索地址廣州，把廣州的相關(guān)編碼也匹配出來(lái)。
用戶(hù)在搜索時(shí)，針對(duì)某一數(shù)據(jù)字段搜索，來(lái)查找所需要的數(shù)據(jù)。
優(yōu)點(diǎn)：搜索匹配精準(zhǔn)度高。
缺點(diǎn)：每次只能對(duì)單一條件進(jìn)行搜索。
搜索根據(jù)表現(xiàn)形式，可以分為以下四種類(lèi)型：
單屬性精確搜索：通過(guò)某個(gè)特定屬性就可以快速定位到目標(biāo)數(shù)據(jù)，具有唯一識(shí)別性的、高使用頻率的、對(duì)用戶(hù)決策有意義的。
切換屬性搜索：可以設(shè)置幾個(gè)常用的類(lèi)別來(lái)快速切換搜索的維度，方便用戶(hù)使用。
多標(biāo)簽?zāi)：阉鳎罕砀穸鄠€(gè)數(shù)據(jù)都具有特征，往往業(yè)務(wù)要求對(duì)數(shù)據(jù)的精確度較高。
多屬性組合搜索：可以輸入多個(gè)字段進(jìn)行組合搜索（取并集），對(duì)空間的利用率高，適合更加復(fù)雜的列表內(nèi)容。
篩選是將用戶(hù)所需數(shù)據(jù)選出展示，其余數(shù)據(jù)暫時(shí)隱藏，通過(guò)篩選器的選擇可以快速定位所需的數(shù)據(jù)，取消用戶(hù)輸入的過(guò)程，提升查找效率。一般篩選有三種形式：
平鋪篩選就是將篩選項(xiàng)的內(nèi)容，直接展示于頁(yè)面之上，用于篩選條件很多，單獨(dú)篩選條件對(duì)應(yīng)數(shù)據(jù)無(wú)交叉，常見(jiàn)于信息密集型產(chǎn)品。
優(yōu)點(diǎn)：可以承載多維的數(shù)據(jù)信息，選中項(xiàng)的可見(jiàn)性高，用戶(hù)理解成本與操作成本低，且提高了用戶(hù)篩選的效率。
缺點(diǎn)：占用太多頁(yè)面空間，影響首屏的展示效率，增加用戶(hù)的決策時(shí)間。一般配合“勾選即執(zhí)行”使用，因此在執(zhí)行篩選的過(guò)程（動(dòng)畫(huà)或加載時(shí)長(zhǎng)）可能分散用戶(hù)精力。
通常電商類(lèi)產(chǎn)品在篩選區(qū)往往采用平鋪布局。
條件篩選是最常用的篩選交互，便于從多個(gè)維度篩選，應(yīng)對(duì)各種復(fù)雜的篩選情況。條件選擇完后，選擇觸發(fā)篩選（若篩選條件不交叉可以選擇實(shí)時(shí)篩選）。
優(yōu)點(diǎn)：空間利用率高，起到了很好的收納作用，整體頁(yè)面更加美觀(guān)。
缺點(diǎn)：當(dāng)篩選過(guò)多時(shí)，信息量過(guò)于冗雜繁多。
2.3 表頭篩選
優(yōu)點(diǎn)：篩選當(dāng)前列，更直觀(guān)，一般情況下表單左側(cè)數(shù)據(jù)篩選頻次越高。
缺點(diǎn)：篩選的內(nèi)容僅限于特定、單次列的篩選，對(duì)于首次使用者來(lái)說(shuō)陌生，交互形式需要學(xué)習(xí)
2.4 如何合理的使用篩選項(xiàng)
信息排序：基于用戶(hù)使用場(chǎng)景，以目標(biāo)導(dǎo)向?yàn)橐罁?jù)，將高頻的篩選項(xiàng)排列到前面，低頻的篩選項(xiàng)置于后面。
默認(rèn)折疊低頻篩選項(xiàng)：當(dāng)篩選條件有高低頻之分，且對(duì)頁(yè)面空間要求較高時(shí)，通過(guò)展示高頻篩選項(xiàng)、隱藏低頻篩選項(xiàng)，更好的提升用戶(hù)體驗(yàn)。
所有篩選項(xiàng)都很低頻：以點(diǎn)擊高級(jí)篩選按鈕的形式觸發(fā)，將全部篩選項(xiàng)置于氣泡或者彈窗之中。
在企業(yè)級(jí)中后臺(tái)中，用戶(hù)查看的數(shù)據(jù)往往屬性較多且不唯一，通過(guò)簡(jiǎn)單的檢索方式很難精確定位到目標(biāo)數(shù)據(jù)，所以，在實(shí)際使用時(shí)，常會(huì)將大量非交叉關(guān)系的屬性進(jìn)行羅列，搜索、篩選、標(biāo)簽切換組合出現(xiàn)，形成多屬性組合檢索。
三、tab標(biāo)簽
標(biāo)簽切換一般用于和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān)，且沒(méi)有交集的數(shù)據(jù)內(nèi)容。數(shù)據(jù)類(lèi)型在5個(gè)以下的建議采用tab頁(yè)切換的方式進(jìn)行交互，展示清晰，用戶(hù)操作效率高；超過(guò)5個(gè)可以考慮下拉選擇或模糊搜索。
優(yōu)點(diǎn)：根據(jù)標(biāo)簽，可以很清楚知道劃分，篩選的準(zhǔn)確性高，切換tab就可以篩選內(nèi)容。
缺點(diǎn)：分類(lèi)需覆蓋選項(xiàng)，并且保證每一項(xiàng)沒(méi)有交集，分類(lèi)不能過(guò)多，超過(guò)7±2個(gè)選項(xiàng)可選擇下拉篩選。
在使用中，索引本身應(yīng)該是0思考成本的，否則就失去了索引的核心價(jià)值。圍繞這一點(diǎn)，有兩個(gè)設(shè)計(jì)原則：
1）寧少勿多和高頻前置：即不要揣測(cè)用戶(hù)需要，最常使用的展示位置盡量靠前。
2）當(dāng)搜索項(xiàng)不可避免的比較多時(shí)，可以進(jìn)行分類(lèi)展示，降低尋找成本。
數(shù)據(jù)操作是表格的操作部分，根據(jù)操作對(duì)象的不同，可以分為：
單行操作也稱(chēng)行內(nèi)操作，常見(jiàn)的顯性與隱性?xún)煞N方式。
1.1 顯性操作：
操作項(xiàng)顯示在行內(nèi)，直觀(guān)；文字按鈕操作項(xiàng)一般不多于三個(gè)，圖標(biāo)按鈕不多于四個(gè)時(shí)，操作項(xiàng)跟在行條目后面；當(dāng)超過(guò)時(shí)，建議將相對(duì)低頻操作選項(xiàng)折疊收起，點(diǎn)擊"更多"或“...”下拉顯示。操作按鈕致灰時(shí)，鼠標(biāo)選中可顯示原因。
如果單行操作不那么重要，或者說(shuō)行操作過(guò)多影響用戶(hù)閱讀時(shí)，可將所有的操作進(jìn)行隱藏；
當(dāng)用戶(hù)鼠標(biāo)懸停時(shí)進(jìn)行展開(kāi)所有操作，界面簡(jiǎn)潔，留更多的空間給需要查看的數(shù)據(jù)內(nèi)容，減輕空間壓力，減少干擾。這種方式能最大程度上滿(mǎn)足用戶(hù)快速查看與編輯的需求，但是在實(shí)際使用中，用戶(hù)的初次使用門(mén)檻較高，需要有一定的學(xué)習(xí)成本。
a、對(duì)齊式
將所有操作進(jìn)行整齊排列，一般是一個(gè)操作對(duì)應(yīng)一列，當(dāng)有操作缺失時(shí)，展示為空，這種方式能夠讓用戶(hù)直接了解到操作的缺失，但反復(fù)的出現(xiàn)會(huì)造成表格視覺(jué)上的冗余，適合列數(shù)較少的表格使用。
將所有操作按照一定的預(yù)設(shè)排列順序進(jìn)行平鋪，這種方式能夠適應(yīng)B端的大多數(shù)場(chǎng)景，將操作都簡(jiǎn)單平鋪出來(lái)雖然看上去簡(jiǎn)單粗暴，但是在實(shí)際工作中，也是一種不錯(cuò)的處理方式
設(shè)計(jì)點(diǎn)：操作按按鈕是全局操作還是單行操作其實(shí)是可以根據(jù)具體業(yè)務(wù)場(chǎng)景來(lái)決定的，判斷用戶(hù)批量操作是不是高頻功能，如果是，就采用全局操作，如果操作是低頻操作，那么完全可以只提供單個(gè)操作功能。
二、批量操作（表格外）
批量操作適用于數(shù)據(jù)量較大的表格，通常把操作放在表外部上方，這樣操作更便捷。批量操作允許用戶(hù)對(duì)一行或多行對(duì)象執(zhí)行操作，通常與復(fù)選框操作配合使用，并在選中復(fù)選框后激活表上方操作按鈕，如刪除、批準(zhǔn)、拒絕、復(fù)制之類(lèi)的操作，這將節(jié)省用戶(hù)時(shí)間，避免重復(fù)對(duì)多行進(jìn)行相同操作，分顯隱性操作：
較為常用，外漏操作簡(jiǎn)單易懂。如有贊的批量操作，表格左上角和左下角都有，這樣不管用戶(hù)從上往下選還是從下往上選的場(chǎng)景都能覆蓋；飛書(shū)的批量操作外漏在表格表格的右上角，雖然按鈕放在右側(cè)符合用戶(hù)右手操作鼠標(biāo)的習(xí)慣，而且考慮到適配問(wèn)題，但是批量操作的路徑不符合用戶(hù)的操作動(dòng)線(xiàn)，路徑變長(zhǎng)，大家可自行抉擇
容易造成記憶負(fù)擔(dān)，增加學(xué)習(xí)成本，適合批量操作較低頻的操作，產(chǎn)品沒(méi)有那么復(fù)雜的產(chǎn)品。如飛書(shū)文檔
統(tǒng)攬全局，無(wú)需選擇數(shù)據(jù)內(nèi)容即可進(jìn)行的操作，常見(jiàn)的【新增】、【導(dǎo)入】操作。
數(shù)據(jù)查看是表格的主體部分，是信息的主要承載區(qū)域。在開(kāi)始之前，我們先來(lái)看看該區(qū)的結(jié)構(gòu)：主要由表頭、行、列、單元格四個(gè)部分組成。
每個(gè)表頭代表一個(gè)對(duì)象的屬性，決定了下方每行對(duì)象要顯示的數(shù)據(jù)類(lèi)型。
表頭在展示信息的時(shí)候盡量概括、準(zhǔn)確、簡(jiǎn)化，達(dá)到節(jié)省表格頭部空間，引導(dǎo)用戶(hù)的注意力聚焦于表格中的數(shù)據(jù)本身。表頭并不是表格的必要元素，當(dāng)數(shù)據(jù)本身能自我表意的時(shí)候（例如郵箱），表頭是可以刪減掉的。
通常，表頭的設(shè)計(jì)會(huì)和下方列表設(shè)計(jì)有一定的區(qū)分，標(biāo)頭文字有一定的標(biāo)題屬性，所以會(huì)通過(guò)背景色、分割線(xiàn)、文字加粗等方式來(lái)做區(qū)分。
根據(jù)表頭的構(gòu)成，可以分為以下三類(lèi)：
除了容納行標(biāo)簽之外，表頭也可以添加排序、搜索、篩選等功能，通過(guò)對(duì)表頭標(biāo)簽的篩選可快速完成篩選條件。這些功能受列的影響，一般只能做單次篩選。雖然表頭篩選能在一定程度上節(jié)約空間，但對(duì)于復(fù)雜業(yè)務(wù)的產(chǎn)品來(lái)說(shuō)，數(shù)據(jù)信息列多，高頻篩選功能可能會(huì)被遮蓋，表頭復(fù)雜影響用戶(hù)表格閱讀，不推薦使用。
可配置列與配置篩選條件的功能類(lèi)似，同樣是考慮到不同角色的用戶(hù)，查看數(shù)據(jù)的視角不一樣，對(duì)應(yīng)的關(guān)心的字段也會(huì)不一樣。
有些表格由于數(shù)據(jù)量較大，需要對(duì)頁(yè)面的上下滾動(dòng)完成對(duì)數(shù)據(jù)的查閱，對(duì)表頭進(jìn)行固定，可以幫助用戶(hù)更快地找到單元格的屬性和含義，尤其是單元格屬性信息數(shù)據(jù)沒(méi)有特征時(shí)（比如都是數(shù)字、百分比、姓名等）固定表頭可以大大提高使用效率。
當(dāng)然還有固定列，當(dāng)表格需要展示不同類(lèi)別的數(shù)據(jù)較多一屏展示不下，可以對(duì)首尾字段進(jìn)行固定，讓用戶(hù)通過(guò)左右滑動(dòng)來(lái)實(shí)現(xiàn)對(duì)數(shù)據(jù)的快速翻閱，滿(mǎn)足用戶(hù)對(duì)數(shù)據(jù)的認(rèn)知以及對(duì)數(shù)據(jù)操作的需求。
注意盡量避免橫向滾動(dòng)：正常鼠標(biāo)橫向滾動(dòng)是需要用戶(hù)按住 「Shift + 滾動(dòng)」 才會(huì)使表格進(jìn)行滾動(dòng)，對(duì)于所有的鼠標(biāo)用戶(hù)而言，橫向滾動(dòng)都是極為痛苦的。
表頭在能夠概括的情況下，盡量簡(jiǎn)煉、準(zhǔn)確，一般可根據(jù)上下文關(guān)系來(lái)進(jìn)行減短簡(jiǎn)化，以達(dá)到節(jié)省表格頭部空間和減輕視覺(jué)壓力的作用。當(dāng)數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時(shí)候，使用多級(jí)表頭來(lái)體現(xiàn)表頭與數(shù)據(jù)的層次關(guān)系。
對(duì)于比較復(fù)雜的表頭，可以定義一個(gè)專(zhuān)有名詞，如果有需要解釋?zhuān)瑒t在字段名稱(chēng)旁邊加說(shuō)明小圖標(biāo)(小問(wèn)號(hào))。鼠標(biāo)hover上去對(duì)專(zhuān)業(yè)術(shù)語(yǔ)或用戶(hù)不常見(jiàn)的名詞給予該字段的詳細(xì)解釋?zhuān)瑫r(shí)滿(mǎn)足新手、普通、專(zhuān)家用戶(hù)的需求。
如果表格數(shù)據(jù)可以自我解釋?zhuān)眍^就不是必須的。例如電子郵箱的收件表格，每列數(shù)據(jù)區(qū)別度高不會(huì)混淆，去掉表頭也能輕易閱讀。
表體部分所需要注意的設(shè)計(jì)點(diǎn)比較多，內(nèi)容包括了數(shù)據(jù)的對(duì)齊方式、字體、分割線(xiàn)、行高、數(shù)據(jù)顯示、單元格、行與列等，下面我們來(lái)依次聊聊。
表格內(nèi)數(shù)據(jù)按照格式塔原理進(jìn)行對(duì)齊，能讓表格更加規(guī)范易理解，營(yíng)造出良好的視覺(jué)引導(dǎo)線(xiàn)，視線(xiàn)流動(dòng)更順暢,提升數(shù)據(jù)的瀏覽效率，讓用戶(hù)快速的捕捉到所需內(nèi)容。其對(duì)齊規(guī)則如下：
符合正常的心智模型，便于用戶(hù)掃描過(guò)程中快速定位到下一行文本，左對(duì)齊的文本在展示的時(shí)候起到了縱向分割線(xiàn)的作用。多行情況下，居中和頂部對(duì)齊都是可以的。
包含金額、長(zhǎng)寬高等需要關(guān)聯(lián)比較的數(shù)字字段，這是因?yàn)槲覀冊(cè)趯?duì)比數(shù)字時(shí)，首先看個(gè)位，然后十位、百位等。
比如日期（2020-11-11），狀態(tài)文字（未審核、已收款等）或者存在布爾關(guān)系的文本（是/否、男/女等），字段固定不變，居中對(duì)齊能更好地信息呈現(xiàn)。這里根據(jù)業(yè)務(wù)也可以按照文本型左對(duì)齊處理，讓用戶(hù)查看表格不會(huì)感覺(jué)混亂。
對(duì)齊方式保持相同可以使表格更好閱讀，上下文保持一致，能保持表格豎直方向整潔，營(yíng)造一致性和上下文環(huán)境。多級(jí)表頭：多行或多列合并居中對(duì)齊，最底層表頭可以按其數(shù)據(jù)對(duì)齊方式對(duì)齊。
使表格更加規(guī)則，視覺(jué)統(tǒng)一提高操作效率。
表格數(shù)據(jù)一般包含文本和數(shù)字，良好的字體能提高表格本身的閱讀性。設(shè)計(jì)上需要注意以下幾點(diǎn)：
表格中的數(shù)據(jù)要根據(jù)數(shù)量級(jí)確定展示形式，不需要精確的數(shù)學(xué)呈現(xiàn)，可以讓用戶(hù)更快地查找信息，下面是展示形式的建議。數(shù)據(jù)的度量單位無(wú)需重復(fù)標(biāo)注，只需要在表頭標(biāo)識(shí)清楚即可，注意同一列單位保持一致。
深入了解用戶(hù)需求，根據(jù)需求為用戶(hù)提供差值、升降變化、合計(jì)值、平均值等直接展示形式。
表格中字體保持一致，文字信息字體統(tǒng)一、數(shù)字信息字體統(tǒng)一即可。數(shù)字信息字體選擇——建議等寬等高字體，等寬的數(shù)字在同一豎線(xiàn)時(shí)更容易對(duì)比。推薦以下幾款數(shù)字字體在表格中有更好的呈現(xiàn)效果，分別為：微軟雅黑、Helvetica Neue、Helvetica、Arial、sans-serif。
設(shè)計(jì)表格時(shí)，盡量避免任何裝飾性字體，簡(jiǎn)約至上才是關(guān)鍵
不要出現(xiàn)襯線(xiàn)字體：因?yàn)閭€(gè)性會(huì)產(chǎn)生閱讀噪音，不利于用戶(hù)對(duì)數(shù)據(jù)的理解和思考。
不要出現(xiàn)全大寫(xiě)字體：因?yàn)樗茈y讀，需要轉(zhuǎn)化思維。
不要出現(xiàn)使用斜體：易引起視線(xiàn)疲勞，影響閱讀。不要出現(xiàn)多種字體：保持風(fēng)格統(tǒng)一。
在表格設(shè)計(jì)當(dāng)中，每一條線(xiàn)都有著它存在的意義，比如：
當(dāng)表格中展示橫線(xiàn)，隱藏縱線(xiàn)：用戶(hù)的橫向閱讀體驗(yàn)更佳，強(qiáng)調(diào)一條數(shù)據(jù)的完整性，能夠讓用戶(hù)進(jìn)行快速地對(duì)應(yīng)。
當(dāng)表格中展示縱線(xiàn)，隱藏橫線(xiàn)：用戶(hù)的縱向閱讀體驗(yàn)更佳，強(qiáng)調(diào)數(shù)據(jù)上下間的對(duì)比，能夠讓用戶(hù)找到同一緯度數(shù)據(jù)下的對(duì)比。
在表格設(shè)計(jì)中，合理地使用分割線(xiàn)可以實(shí)現(xiàn)對(duì)表格行與列的強(qiáng)調(diào)。按照分割線(xiàn)的分布情況，可以分為4種類(lèi)型：網(wǎng)格型、水平線(xiàn)型、斑馬條紋型、極簡(jiǎn)留白型。這個(gè)部分在上一篇已詳細(xì)說(shuō)明。
設(shè)計(jì)tips：表格具有的顏色盡可能少，顏色和可讀性是密切相關(guān)的，要合理的使用顏色，普通表盡量使用簡(jiǎn)單的背景色和點(diǎn)綴色。
背景色方面，除了行/列交替顏色(可以區(qū)隔內(nèi)容，引導(dǎo)視線(xiàn))、懸停高亮底色(便于準(zhǔn)確辨別光標(biāo)所在行)等處理方法，還可以對(duì)表頭表尾進(jìn)行視覺(jué)區(qū)分，但不能增加過(guò)多顏色以引起混亂。
分割線(xiàn)顏色盡量不要與背景色相差太大。當(dāng)字體選擇深灰色，背景為淺白色時(shí)，邊框選擇淺灰色，這樣可以減少我們視覺(jué)疲勞，不會(huì)使表格看起來(lái)令人生畏。
分割線(xiàn)和斑馬紋的應(yīng)用色彩都不應(yīng)該太深，如果你項(xiàng)目中對(duì)表格有比較多的選中需求，那么就不太建議使用斑馬紋的格式，因?yàn)檫x中背景需要被高亮，那么一個(gè)列表就會(huì)出現(xiàn) 3 種顏色，是要盡力避免發(fā)生的。
開(kāi)發(fā)同學(xué)工作的時(shí)候，使用的是盒子模型，設(shè)計(jì)師在出設(shè)計(jì)圖的時(shí)候也要遵循開(kāi)發(fā)邏輯。
為了讓表格中的文字高度看起來(lái)舒適，有著視覺(jué)的呼吸感。我們首先得了解影響行高是由文字的高度以及上下間距組成。因此我們得出：
單元格高度=內(nèi)容高度+上間距+下間距
單元格的尺寸包含：文字行高建議設(shè)為字號(hào)的1.5倍，上下間距設(shè)為字號(hào)的1.2倍。
對(duì)于單行顯示數(shù)據(jù)內(nèi)容的表格，建議行高約為內(nèi)容高度的2.5-3倍；對(duì)于多行顯示數(shù)據(jù)的表格，建議行中內(nèi)容的最高點(diǎn)與最低點(diǎn)到行框的上下邊距略小于文字高度。
當(dāng)數(shù)據(jù)有單行信息展示有多行信息展示時(shí)（或長(zhǎng)度不固定），要定義內(nèi)容的行數(shù)（根據(jù)業(yè)務(wù)），根據(jù)行數(shù)確定行高多出的內(nèi)容做省略處理。
固定行高時(shí)可以規(guī)范幾種不同的表格行高，例如在我日常工作中規(guī)定了3種行高56px80px110px，行高較高時(shí)，我們數(shù)據(jù)內(nèi)容都進(jìn)行居中對(duì)齊就會(huì)有一些問(wèn)題。有些單元格只有一行信息，有些有多行信息，會(huì)使頁(yè)面看起來(lái)更混亂，信息查找速度降低。
表格行高跟隨行內(nèi)占用最多行數(shù)的單元格變化，設(shè)置固定的上下邊距，表格行高隨著數(shù)據(jù)信息的換行而變化如下圖。
單元格數(shù)據(jù)一般有文字、圖標(biāo)、頭像、進(jìn)度等，在具體業(yè)務(wù)中，如果你找對(duì)了用戶(hù)想看的關(guān)鍵數(shù)據(jù)，將會(huì)大大提升用戶(hù)體驗(yàn)，反之則干擾用戶(hù)查找信息，對(duì)于較為重要的數(shù)據(jù)可以進(jìn)行關(guān)鍵數(shù)據(jù)的標(biāo)識(shí)設(shè)計(jì)。
標(biāo)簽：關(guān)鍵數(shù)據(jù)較多，顏色與視覺(jué)重量要做區(qū)分。
圖標(biāo)：名稱(chēng)與文件類(lèi)型圖標(biāo)區(qū)分。
人員信息：展示在表格中也十分常見(jiàn)，通常會(huì)用頭像+名稱(chēng)的方式，例如下圖temabition和飛書(shū)中對(duì)人員信息的展示。
度量單位的使用：其中的關(guān)鍵區(qū)別在于數(shù)字的大小。數(shù)據(jù)的度量單位無(wú)需重復(fù)，一般在表頭標(biāo)識(shí)清楚即可。
進(jìn)度條：進(jìn)度條或簡(jiǎn)單的數(shù)據(jù)圖，它更能直觀(guān)地展示數(shù)據(jù)的進(jìn)度狀態(tài)，方便用戶(hù)對(duì)數(shù)據(jù)信息做判斷如下圖。
關(guān)鍵屬性標(biāo)識(shí)：比如用戶(hù)重點(diǎn)關(guān)注數(shù)據(jù)狀態(tài)、某些數(shù)據(jù)的上升和下降等，可用符號(hào)進(jìn)行標(biāo)識(shí)，幫助用戶(hù)快速定位到目標(biāo)信息。
空表格：表格數(shù)據(jù)為空時(shí)要給予一定的提示信息或快捷操作，讓用戶(hù)更快地進(jìn)行對(duì)數(shù)據(jù)的操作。
空單元格：當(dāng)表格單元格中沒(méi)有相應(yīng)數(shù)據(jù)時(shí)，要避免直接留出空白單元格。空白格容易造成用戶(hù)的困惑甚至誤解，用戶(hù)會(huì)搞不清楚到底是沒(méi)有數(shù)據(jù)，還是根本沒(méi)有值？
正確做法是，數(shù)據(jù)不存在（數(shù)據(jù)庫(kù)中沒(méi)有該字段）用“-”，沒(méi)有數(shù)量（數(shù)據(jù)庫(kù)中有該字段）用“0”，且小數(shù)點(diǎn)后位數(shù)、單位，都要與上下單元格保持一致
是對(duì)單條數(shù)據(jù)的修改，直接在單元格編輯信息的形式有很多，針對(duì)不同的數(shù)據(jù)提供對(duì)應(yīng)的編輯方案。
包含：原位編輯，懸停氣泡編輯，下拉狀態(tài)編輯，點(diǎn)擊彈窗編輯拖曳排序等等。針對(duì)不同的業(yè)務(wù)性質(zhì)對(duì)單元格采用不同的交互形式。
拖拽排序?yàn)橛脩?hù)的自定義排序，在用戶(hù)拖拽時(shí)頁(yè)面布局保持不變，適用于數(shù)據(jù)量較小有自定義排序的情況下。
可以通過(guò)視圖切換查看更多細(xì)節(jié)，例如在teambition中支持對(duì)任務(wù)的表格/列表/看板三種視圖的查看，每種視圖的側(cè)重點(diǎn)不同，可以 適應(yīng)不同角色用戶(hù)的不同專(zhuān)注點(diǎn)。
工作中常常會(huì)遇到單元格數(shù)據(jù)過(guò)多的情況，常見(jiàn)的方法有兩種：
1、定義一個(gè)單元格長(zhǎng)度或字?jǐn)?shù)限制，超過(guò)該范圍以"..."顯示，鼠標(biāo)懸停時(shí)出現(xiàn)氣泡顯示完整內(nèi)容。
2、折行顯示，這種方法讓平鋪直敘，用戶(hù)可以直接了當(dāng)?shù)目吹剿行畔?，建議不要超過(guò)三行，超出可“...”顯示。
3、允許用戶(hù)拖邊框設(shè)置列寬，并記錄設(shè)置。這種方案弊端是會(huì)占用橫向的空間。
列寬的設(shè)置對(duì)于用戶(hù)的高效閱讀還是很有作用的，在設(shè)計(jì)時(shí)要根據(jù)具體的業(yè)務(wù)信息進(jìn)行分析，列寬嚴(yán)謹(jǐn)?shù)奶幚矸绞接腥N：
第一，通過(guò)柵格，由列的數(shù)量決定列寬，主流框架組件一般是這種；
第二，可以固定部分列的寬度，其余列則按百分比處理；
第三，在固定寬度的基礎(chǔ)上，允許用戶(hù)自由拖動(dòng)調(diào)整列寬的大小。（當(dāng)然我覺(jué)得不要太拘泥這個(gè)，合適就好）
為了讓不同數(shù)據(jù)在表格中相互獨(dú)立，不混淆。我們需要保證首尾列的內(nèi)容與表格兩邊的間距N1保持固定，不同列之間的間距N2在最小寬度的基礎(chǔ)上，隨著表格的尺寸不同而做自適應(yīng)的變化。
在設(shè)計(jì)表格的初期，就需要做好設(shè)計(jì)規(guī)范，表格的邊距要統(tǒng)一制定。
列的數(shù)量建議最多展示9條，因?yàn)槿藗兊挠洃浽?±2之間，數(shù)據(jù)太多用戶(hù)會(huì)找不到重點(diǎn)。但也不是必須，根據(jù)業(yè)務(wù)需求，如果需要大量數(shù)據(jù)展示時(shí)也要展示，因?yàn)橐曈X(jué)永遠(yuǎn)低于業(yè)務(wù)（好用比好看更重要）。
列信息從左往右視覺(jué)權(quán)重程度逐漸降低，最后一列權(quán)重高（以眼動(dòng)實(shí)驗(yàn)或點(diǎn)擊數(shù)據(jù)為依據(jù)得出權(quán)重高低）。所以盡量減少列的數(shù)量，關(guān)注用戶(hù)需要的必要信息。當(dāng)數(shù)據(jù)列過(guò)多時(shí)，要分清主次列，非重點(diǎn)、輔助性信息可以通過(guò)次級(jí)入口來(lái)解決，如固定重要列(主體名稱(chēng)/操作列)，次級(jí)列在表格中間區(qū)域左右拖動(dòng)。
為便于用戶(hù)對(duì)數(shù)據(jù)進(jìn)行對(duì)比分析，可以在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化等數(shù)據(jù)處理結(jié)果，減少用戶(hù)數(shù)據(jù)加工的過(guò)程，直達(dá)用戶(hù)獲取信息的目標(biāo)(需要明確用戶(hù)目標(biāo))，提高用戶(hù)的閱讀速度。
在一些用戶(hù)高度自定義表格中，數(shù)據(jù)的列寬不好確定的情況下，可以允許用戶(hù)對(duì)列寬進(jìn)行調(diào)節(jié)。通過(guò)光標(biāo)的變化提示列寬自定義操作，拖動(dòng)可完成列寬設(shè)置。
列數(shù)據(jù)還可以根據(jù)用戶(hù)需求進(jìn)行自定義設(shè)置，可以選擇要展示的列，在默認(rèn)情況下僅展示最常用、最重要的幾個(gè)指標(biāo)（如下圖），也可以對(duì)列進(jìn)行排序。在表格右上方的設(shè)置按鈕對(duì)表格進(jìn)行設(shè)置，清晰高效。用戶(hù)可以根據(jù)自己的需要，自由的選擇顯示所需指標(biāo)，隱藏不必要指標(biāo)，減少干擾。但需注意系統(tǒng)應(yīng)記住用戶(hù)上一次的自定義列設(shè)置，減少用戶(hù)重復(fù)操作。
底欄在表格最下方，一般是統(tǒng)計(jì)信息、分頁(yè)控件、備注說(shuō)明、操作按鈕(加載更多)等內(nèi)容。
底欄最常見(jiàn)的元素就是分頁(yè)，分頁(yè)固定能省去用戶(hù)需要翻到頂部或底部進(jìn)行操作的麻煩。
1. 良好轉(zhuǎn)換：用戶(hù)在結(jié)果列表中查找特定信息而不僅僅瀏覽信息流。
2. 掌控感：分頁(yè)可以讓用戶(hù)知道表格的總量以及當(dāng)前頁(yè)面在總量中的位置，知道瀏覽完頁(yè)面需要多長(zhǎng)時(shí)間。
3. 數(shù)據(jù)加載快：通過(guò)對(duì)加載內(nèi)容的限制，可以極大的減少數(shù)據(jù)加載的時(shí)間。
額外的動(dòng)作：用戶(hù)要到達(dá)下一頁(yè)表內(nèi)容，就必須點(diǎn)擊分頁(yè)控件上的按鈕跳轉(zhuǎn)，等待表格新內(nèi)容的加載。
簡(jiǎn)潔型：當(dāng)分頁(yè)數(shù)量較少時(shí)，通常在7頁(yè)以?xún)?nèi)，就只有最基礎(chǔ)的展示。
迷你型：當(dāng)頁(yè)面空間不足或者降低分頁(yè)的視覺(jué)影響時(shí)，可以采用迷你型。
多功能型：當(dāng)表格數(shù)據(jù)較多，為了滿(mǎn)足更多的用戶(hù)需求，可以根據(jù)需求選擇分頁(yè)類(lèi)型。完整型的雖然滿(mǎn)足各種功能需求，但是所占空間較大，所以我們要根據(jù)自己的需求合理拆分使用。
分頁(yè)的選擇需要根據(jù)不同的場(chǎng)景選擇最優(yōu)的設(shè)計(jì)方案。
表格無(wú)限下拉加載使用戶(hù)在數(shù)據(jù)內(nèi)容面前一直滾動(dòng)查看。向下滾動(dòng)的時(shí)候不斷加載新內(nèi)容，雖然十分方便與誘人，但不是什么場(chǎng)景都適用。一般來(lái)說(shuō)，無(wú)限滾動(dòng)適用于在數(shù)據(jù)有限且信息重復(fù)的表格，有利于內(nèi)容探索。分頁(yè)則適用用戶(hù)在尋找特定信息及瀏覽記錄，易快速訪(fǎng)問(wèn)。
1.高效瀏覽：一個(gè)高效的方法讓用戶(hù)瀏覽表格數(shù)據(jù)信息。
2.體驗(yàn)更好：用戶(hù)使用滾動(dòng)能獲得比點(diǎn)擊分頁(yè)有更好的體驗(yàn)。
1.受限性能：緩慢的加載速度會(huì)造成用戶(hù)的不耐煩與離開(kāi)。當(dāng)數(shù)據(jù)量過(guò)大時(shí)，結(jié)果就是頁(yè)面性能越來(lái)越低。
2.位置丟失：沒(méi)法標(biāo)記當(dāng)前位置且不能再隨意回到之前位置。一旦離開(kāi)，就會(huì)丟失當(dāng)前的瀏覽記錄，要回到上次的位置，必須得重新滾動(dòng)去尋找。
3.信息缺失：滾動(dòng)條并沒(méi)有反映出實(shí)際數(shù)據(jù)量。
除了分頁(yè)的使用還可以進(jìn)行無(wú)限滾動(dòng)的交互，鼠標(biāo)點(diǎn)擊“加載更多”按鈕以查看更多數(shù)據(jù)。這個(gè)功能不太適合數(shù)據(jù)量較大的表格，在具體業(yè)務(wù)中一定要慎用。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com