您網(wǎng)站設計上的表格可能會存在問題，它在手機里看起來或用起來用戶體驗可能不是那么順暢。這聽起來像是一個簡單的問題（應該有一個簡單的解決方案），但事實可能不像您想的那么簡單。

造成這個問題的原因有很多，缺乏響應能力、將表創(chuàng)建為圖像、奇怪的數(shù)據(jù)格式會造成混亂，但也有可行的設計解決方案。

讓我們回顧一下重新考慮移動版網(wǎng)站設計的方法，以便您的數(shù)據(jù)和信息在手機上看起來就像在任何其他更大的設備上一樣令人驚嘆。

1、屏幕寬度

如果您創(chuàng)建了一個網(wǎng)站表格，而用戶不從左向右滑動就無法看到手機上的所有列，那么內容還在那里嗎？

事實上，即使允許水平滾動，內容也不太可能被看到。在大多數(shù)情況下，讓手機應該適合于可用的viewport。這就是網(wǎng)站設計響應移動版如此重要的原因。

但是，響應性并不是過于寬的手機的解決方案，因為所有內容都將收縮到不可讀的大小，除非有一種邏輯方式來堆疊內容。

更好的解決方案是考慮在手機中真正重要的信息，并且只顯示該數(shù)據(jù)。雖然這是一個最佳實踐，但在較小的屏幕上，它變得至關重要。大桌子笨重且難以使用。只有您最忠實的用戶或追隨者才會深入了解這些信息。

評估數(shù)據(jù)、表格真的是突出顯示信息的最佳方式嗎？表格最適合用于需要分組到邏輯和有組織的框中的信息，以增強可讀性。

請注意，當網(wǎng)站設計瀏覽用戶從臺式電腦轉到移動設備時，彭博會對股票信息進行壓縮（見上圖）。這一實踐表明了對用戶的理解，以及移動用戶需要什么信息，因為有些人可能希望在桌面上獲得更多數(shù)據(jù)。

3、滾動

和手機上的其他內容一樣，在合理的范圍內滾動是完全可以接受的。不要讓用戶滾動得太深而無法獲得表中的所有信息。

對于長滾動表，有一些可用性方面的問題：

標簽會發(fā)生什么？

比較信息很困難，影響了理解

點擊元素可能在滾動期間被無意中激活

如果需要使用滾動，請考慮使信息更易于管理的方法。例如，用戶是否需要比較產品？允許他們選擇要比較的項目，并在一個新的無滾動表中打開它們。

4、數(shù)據(jù)排序

下面是為移動設備在表格中管理復雜數(shù)據(jù)的真正技巧，使用智能排序和過濾。

通過允許用戶通過過濾器選擇與他們相關的信息，表格將縮小到一個更易于管理的大小。如果允許進行額外的數(shù)據(jù)排序，那么最相關的信息就會出現(xiàn)在表的頂部。

這種做法對數(shù)值或比較數(shù)據(jù)非常有效，當您將表用于其他類型的信息（如地址或雙列數(shù)據(jù)表）時，它就不能很好地工作。

在進行了硬編輯之后，仍然有大量信息需要管理時，排序和過濾是最有意義的。

5、圖標和視覺元素

使用可視化元素使表格更易于理解和掃描，使用圖標、顏色和線條來幫助區(qū)分文本元素，使內容易于理解。

小圖標可以幫助視覺理解，讓用戶更容易掃描內容。

考慮一個列出聯(lián)系信息的表格，電話或電子郵件的圖標可以提供一個視覺提示，并作為一個點擊元素來調用/文本或電子郵件。

用復選或x圖標表示選擇和不選擇，這比一遍又一遍地說"是"或"不是"要快得多，范圍也小得多。當一種視覺效果更有意義時，就去做吧。

表格的顏色可以使信息有條理，考慮對其他列或行進行陰影處理，以提高可讀性。為代表信息讀取方式的列或行使用陰影，例如最好從上到下理解的列采用這種方式；相反，通過在屏幕上閱讀來更好理解的信息應該使用行陰影。對于包含完整數(shù)據(jù)集或全部包含完整數(shù)據(jù)集的元素，請考慮使用粗體文本。

最后，使用行（垂直或水平）分隔內容元素。在大多數(shù)情況下，線和陰影運行相反，如果同時使用（如垂直陰影和列之間的線）。

6、文本和縮寫

您不需要在表格中把所有的東西都拼出來，使用可以理解的縮寫是可以接受的做法。

您寧愿使用縮寫或使文本很小，或必須刪除更多的信息？在適當?shù)臅r候，這個選項是最合理的。這里的關鍵是它必須有意義。

如果縮寫改變了信息的含義或引起混淆，那么它就不是正確的選擇。許多度量單位都有常見的縮寫，比如px表示像素。

考慮縮寫時，不要忽略圖標或表情符號。這些常見元素有很多含義，可以用一個字符替換整個單詞。

7、對齊

對齊是另一件能讓大量信息更容易掃描和閱讀的小事。

為了使文字更易于閱讀，請按下列方式排列文字：

行應該在頂部垂直對齊。其他任何東西都會在屏幕上造成參差不齊的閱讀體驗。

包含多個單詞或短語的文本塊最好是左對齊的（從右到左閱讀的語言除外）。還應避免使用有括號的文本元素。

行標簽應該左對齊，除非它們特別短。

數(shù)字右對齊通常最合理，因為您可以直觀地看到更大的數(shù)字，并且它將逗號和小數(shù)等元素放在一行中，以幫助掃描。

列標簽可以是左對齊的，也可以是居中對齊的，但是所有的標簽都應該有相同的對齊方式。

中心內容對齊只適用于單個單詞或短短語；避免使用較長的tet元素居中。

總結

不可否認一個網(wǎng)站設計的表格在移動設備上是否能正常工作的決定因素通常取決于您試圖呈現(xiàn)的數(shù)據(jù)。

如果信息可以包含在一個屏幕上或滾動屏幕上閱讀，那么表格就能很好地工作。當桌子需要在屏幕上來回移動，從左到右，很難理解。對于數(shù)據(jù)來說，這并不是一個好的選擇，您最好嘗試一種更具敘事性的格式。

但是，雖然桌面設計是具有挑戰(zhàn)性的，但它也很有趣。如果表現(xiàn)得好，這種有組織的信息表達方式可以幫助提高參與性和理解力。