表格的行高可以直接影響到一屏可以展示多少行信息，即對信息密度有所影響；除此之外，表格的行高也影響著整個表格的易讀性。所以本文將從信息密度和易讀性兩個方面來討論一下行高應該如何定。

一. 信息密度

1. 一屏顯示多少行對用戶到底有沒有影響？

要想從信息密度下手研究行高，就先要搞清楚一個問題：一屏顯示多少行對用戶到底有沒有影響？要想回答這個問題，就必須要知道用戶究竟是如何使用表格的，即用戶在不同使用場景下都有哪些行為。

以騰訊云控制臺的表格場景為例，表格主要能夠提供三種功能，展示信息、操作管理、詳情入口。根據這三種功能的不同組合，形成了控制臺中不同的表格類型與場景。

(1) ?入口型表格

展示信息、操作管理和詳情入口三種功能都包含，主要用在一級頁面，用于展示實例列表。

在這種場景下，行數超過20條的用戶數量不小，且都是大客戶，所以這種場景不容忽視。我詢問了負責不同業務的交互設計師，也聯系了幾個騰訊云的實際用戶進行了訪談，以了解用戶在此場景下的行為。

在此場景下用戶的主要目標有兩種：解決明確的問題和主動查看使用情況。而主要的行為有：

• 對置頂的問題項逐條處理
• 掃視列表尋找明確的條目或標紅的異常項
• 搜索要尋找的條目

(2) 設置型表格

包含展示信息和操作管理功能，主要用于二級頁面，作為設置列表使用。

用戶自己設置的規則也經常會有很多，所以行數很多的場景也時有存在。在此場景下用戶主要的目標有：添加新設置、刪除/修改過往設置。主要的行為有：

• 進行添加操作
• 掃視列表尋找要刪除/修改的內容
• 搜索要刪除/修改的內容

(3) 純記錄型表格

只有展示信息的功能，常用于展示操作日志、任務管理、數據詳情等內容，此類型表格查看的頻率較低。

(4) 被動生成型表格

包含展示信息和詳情入口的功能，用戶不能自己新增或刪除，此類型表格里的數據是在別處做了設置，在此處為展示關系而被動生成的，這種類型的表格非常少。

在這四種不同類型的表格中用戶的主要目標與行為如下圖所示：

從上圖可以看出用戶還是經常要對表格進行掃視的。因此一屏顯示多少行對用戶確實有所影響，它會影響用戶掃視的效率。但究竟有多大的影響，還需要我們進一步研究。

2. 一屏顯示多少行對用戶有多大影響？

雖說現在這個時代越來越趨向于大屏化，但使用筆記本的用戶數量也不少。以騰訊云為例，使用騰訊云的用戶的設備分辨率分布如下圖所示：

可以看出雖然大屏用戶占比最多，但1366x768的小屏用戶也還是有一定數量的。在1920x1020的尺寸下，以騰訊云中最常見的表格為例，首屏可以顯示11行。大屏用戶表示，他們對一屏顯示多少行并沒有多少感知。

但對于小屏用戶，在表頭和頁腳固定的情況下，一次只能看到6行左右，對掃視的效率確實有所影響。但是如果不固定表頭和頁腳，滾動時不限定區域而是全屏滾動的話，一屏也可以看到10行的內容。

3. 如何提高用戶掃視的效率

行高固然可以影響到用戶掃視的效率，但并不是主要影響，為了提升掃視效率還有多種有效的方式：

(1) 盡量整屏滾動，提供更大的瀏覽空間

正如剛剛所舉的例子，固定表頭和頁腳后，在固定的小區域內滾動會非常局促，而且區域滾動和全屏滾動同時存在時體驗也很不好。當然某些情況下確實需要固定表頭以幫助用戶識別信息的話，在全屏滾動上去后固定表頭也不是不可以。

(2) 分頁組件的「每頁顯示n行」盡量提供更多選擇

在用戶操作時，滾動鼠標的成本要比點擊一個按鈕的成本要小，所以分頁組件中「每行顯示n行」的選項應包含50、100這樣較大的數值，避免用戶在多行內容中查找內容時需要頻繁的翻頁。

(3) 凸顯重要內容的視覺重量

因為用戶首先會閱讀最具視覺重量的內容，因此，對用戶判斷有決策作用的重要內容可以盡量凸顯。例如狀態上的異常可以用高亮色標出等。表格中也可以用圖形化的形式來幫助用戶快速搜索信息，例如在表格中使用進度條來表明用量等信息。

(4) 將關鍵信息放在最左側

根據用戶F型掃視的習慣，可以盡量將用以識別整個條目的關鍵信息放在最左側，例如名稱等唯一標識性信息。

(5) 盡量提供排序篩選功能

適時的排序篩選功能也可以幫助用戶在大量的信息中按照順序找到自己想要的信息，或快速篩選出自己想要的信息。

(6) 將異常狀況置頂顯示

對于有異常的條目，最好可以標紅置頂顯示，讓用戶一進入頁面就能快速注意到異常狀況。

二. 易讀性

1. 保證易讀性的常見做法

表格的行高影響的另一個方面，就是每行信息的易讀性。對于表格易讀性的研究我實在沒有找到什么資料，但對于文字信息排版的易讀性，卻是有一些常用習慣的。

在文字排版中，行高的選擇一般為字號的1.2~1.8倍，段間距通常使用一個行高的距離。行高的定義如下圖所示，開發同學在實現設計稿時，通常也是按照行高來寫的，而不是像設計同學一樣按照文字的尺寸來計算間距。

在考慮表格的行高時，我認為可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮，文字行高可以設定為字號的1.2~1.8倍，文字與分割線間距離可以設定為字號的1~1.5倍。分為這樣的兩部分也比較符合開發同學寫代碼時的習慣。

2. 根據常見做法，我這邊給出了幾個推薦的行高值

• 表格行高48px，字號12px，文字行高是字號的1.5倍即18px，上下間距是字號的1.2倍即15px，文字與分割線的實際間距為字號的1.5倍18px。使用這種行高整個表格會比較透氣，在小屏下整屏可以顯示9行，對于掃視效率影響不大。
• 表格行高42px，字號12px，文字行高是字號的1.5倍即18px，上下間距是字號的1倍即12px，文字與分割線的實際間距是字號的1.2倍即15px。使用這種行高的表格間距較為適中，在小屏下整屏可以顯示10行。
• 表格行高32px，字號12px，文字行高是字號的1.3倍即16px，上下間距是字號的0.6倍即8px，文字與分割線的實際間距是10px。這種表格比較緊湊，可以用與卡片中的小型表格等空間比較小的地方。

3. 關于行高的更多做法

除了將文字行高設定為字號的1.2~1.8倍，將上下間距設定為字號的1～1.5倍這樣的做法外，關于表格的行高的設定還有更多的一些做法，來保證各分辨率、各場景下獲取信息的效率與易讀性。

(1) 不同分辨率使用不同行高

為了給大分辨率和小分辨率用戶都提供較好的體驗，可以設計兩套不同的行高，在大分辨率下顯示較高的行高，給數據間提供更多呼吸的空間；在小分辨率下顯示較小的行高，使一屏內可以看到更多的行高。Gmail就是這樣設計的，如下圖所示：

(2) 不同場景下使用不同行高

為了保證不同場景下的體驗，也可以在不同場景下使用不同的行高。例如在有多卡片的概覽頁，某個卡片中有表格，在這種場景下，卡片的尺寸都很小，空間有限，此時就可以使用較小的行高，保證此場景下的體驗。例如google analytics的dashboard中的表格，如下圖所示：

(3) 用戶可自行設置行高

實在沒辦法判斷怎樣的行高對用戶來說是合適的時候，可以把選擇交給用戶，讓用戶自己設置表格行高，雖然說盡量給用戶提供少的選擇可以減少用戶的思考，但在表格不顯眼的地方提供這種無傷大雅的小選擇，對用戶不會造成什么干擾，反而用戶發現時會覺得是個小驚喜，會覺得在細節上設計師考慮了很多，所以在開發資源可以滿足的時候，也可以嘗試這種方式，如下圖(來自Andrew Coyle的文章)所示：

通過這次表格行高的研究我發現，設計就是一個說服自己的過程。在研究的過程中我時常抓狂的問自己為什么要研究這樣的問題！這問題看起來似乎并不是一個問題，沒有人寫過自己的表格行高究竟是怎么定的；這問題很小，就只是定一個數字而已；這問題又太難，無論我怎么定這個數字，我都想反問自己，你憑什么這么定？

每當我想要放棄，想要隨便定一個數字的時候，我都覺得我實在是沒法說服我自己。隨著我采訪其他設計師、采訪實際的用戶、研究文字排版的行高設定，我才慢慢有了一點底氣，才慢慢知道自己設定的這個小小的數字是從哪里來的。雖然最終也沒有一個確定的答案，但在這個過程中我確實是在不斷的找證據來說服自己。

這些表格設計的文章不容錯過

優秀的視覺設計也很重要：
《實用素材！22組深色風格登錄表格PSD免費下載》

經典案例！教你如何設計后臺數據表單：
《如何做好網頁后臺的表單和表格設計？》

不止于web端，手機端同樣需要：
《手機端表格設計：我整理了一套循序漸進的處理方法》

來自百度設計師的經驗總結：
《牽線搭橋！讓用戶更高效地完成表單填寫》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com