表格快速操作技巧-tft每日頭條

表格快速操作技巧（表格設計的六種打開方式）1

在設計數據類産品、後台配置産品時，PD 常常會指着一塊地方說「這兒放個表格，需要有balabala…」，而表格的結構不外乎這幾種類型：

表格快速操作技巧（表格設計的六種打開方式）2

水平布局：郵箱是一種典型的強調行的表格設計，它弱化了列的概念，閱讀信息的視覺流是從左到右，一條一條的閱讀信息。這種排列方式強調信息的連貫性，适合大量信息的浏覽。大多數的表格設計都屬于這種類型。

而垂直布局的表格比較講究行與行信息的對比，多數在數據統計中出現。

矩形布局的表格則是橫豎都有明确的分割線，區塊比較明顯。适用于列信息較多的情況下，沒有足夠的空間用來分割信息時。

對于像 CRM、數據後台類産品等，表格的目的是為了滿足用戶浏覽信息的需求。然而現實中的設計場景往往面臨了許多情況：信息量過大，信息量過少等。同時設計師需要在表格的設計中思考如何讓表格更易于閱讀、在視覺上更适合現在的設計趨勢。下面就主要從提升表格的閱讀效率的角度給出設計方法。

1、不要吝啬表格的行高，給頁面「喘氣」的空間

适宜的行高使得數據更易于被閱讀，但這不代表行高越大越利于閱讀，行高的大小應該是與字體成比例的，在單行文字的情況下表格間距一般在字符大小的三倍以内。

表格快速操作技巧（表格設計的六種打開方式）3

表格内的信息縱向列對齊是能夠很好的形成視覺引導線，這樣的表格即使沒有分割線也能在視覺上起到很好的分割作用。

表格快速操作技巧（表格設計的六種打開方式）4

表格快速操作技巧（表格設計的六種打開方式）5

表格快速操作技巧（表格設計的六種打開方式）6

上圖為一種最常見的表格排序方式，是默認為上下空心箭頭，上箭頭為升序，下箭頭為降序，這種排序方式的好處是比較節省空間，但是由于在使用中帶來的許多認知上的問題，多數網站對其進行了改造。

就如淘寶的價格排序，采用下拉選擇不同的排序方式，反饋的信息更直接有效，減少反複操作的次數。

對用戶閱讀信息的行為方式進行分析提煉出常被閱覽的信息，區分優先級，對整體信息進行聚類排放，這樣做的好處是隐藏不必要指标，減少幹擾，對用戶的使用情景進行判斷從而根據不同的情景下提供相應的信息。

在信息量較少或特别多的情況下可以盡量不用表格，用卡片的形式來展示信息，将信息以組的概念呈現，單獨卡片内的内容可看做一個小組根據視覺的優先級進行排列，不受外部排列方式的影響，組内的信息關系更緊密。卡片與卡片間又形成一個整體，不影響組與組之間的聯系，如下圖的卡片方式。

表格快速操作技巧（表格設計的六種打開方式）7

作者：望殊