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

一. 信息密度

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

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

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

(1) ?入口型表格

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

在這種場景下，行數(shù)超過20條的用戶數(shù)量不小，且都是大客戶，所以這種場景不容忽視。我詢問了負(fù)責(zé)不同業(yè)務(wù)的交互設(shè)計(jì)師，也聯(lián)系了幾個騰訊云的實(shí)際用戶進(jìn)行了訪談，以了解用戶在此場景下的行為。

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

• 對置頂?shù)膯栴}項(xiàng)逐條處理
• 掃視列表尋找明確的條目或標(biāo)紅的異常項(xiàng)
• 搜索要尋找的條目

(2) 設(shè)置型表格

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

用戶自己設(shè)置的規(guī)則也經(jīng)常會有很多，所以行數(shù)很多的場景也時有存在。在此場景下用戶主要的目標(biāo)有：添加新設(shè)置、刪除/修改過往設(shè)置。主要的行為有：

• 進(jìn)行添加操作
• 掃視列表尋找要刪除/修改的內(nèi)容
• 搜索要刪除/修改的內(nèi)容

(3) 純記錄型表格

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

(4) 被動生成型表格

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

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

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

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

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

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

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

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

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

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

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

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

在用戶操作時，滾動鼠標(biāo)的成本要比點(diǎn)擊一個按鈕的成本要小，所以分頁組件中「每行顯示n行」的選項(xiàng)應(yīng)包含50、100這樣較大的數(shù)值，避免用戶在多行內(nèi)容中查找內(nèi)容時需要頻繁的翻頁。

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

因?yàn)橛脩羰紫葧喿x最具視覺重量的內(nèi)容，因此，對用戶判斷有決策作用的重要內(nèi)容可以盡量凸顯。例如狀態(tài)上的異?？梢杂酶吡辽珮?biāo)出等。表格中也可以用圖形化的形式來幫助用戶快速搜索信息，例如在表格中使用進(jìn)度條來表明用量等信息。

(4) 將關(guān)鍵信息放在最左側(cè)

根據(jù)用戶F型掃視的習(xí)慣，可以盡量將用以識別整個條目的關(guān)鍵信息放在最左側(cè)，例如名稱等唯一標(biāo)識性信息。

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

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

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

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

二. 易讀性

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

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

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

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

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

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

3. 關(guān)于行高的更多做法

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

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

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

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

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

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

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

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

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

這些表格設(shè)計(jì)的文章不容錯過

優(yōu)秀的視覺設(shè)計(jì)也很重要：
《實(shí)用素材！22組深色風(fēng)格登錄表格PSD免費(fèi)下載》

經(jīng)典案例！教你如何設(shè)計(jì)后臺數(shù)據(jù)表單：
《如何做好網(wǎng)頁后臺的表單和表格設(shè)計(jì)？》

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

來自百度設(shè)計(jì)師的經(jīng)驗(yàn)總結(jié)：
《牽線搭橋！讓用戶更高效地完成表單填寫》

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com