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

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

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

屏幕寬度

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

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

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

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

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

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

滾動

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

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

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

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

點(diǎn)擊元素可能在滾動期間被無意中激活

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

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

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

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

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

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

圖標(biāo)和視覺元素

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

小圖標(biāo)可以幫助視覺理解，讓用戶更容易掃描內(nèi)容。

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

用復(fù)選或x圖標(biāo)表示選擇和不選擇，這比一遍又一遍地說“是”或“不是”要快得多，范圍也小得多。當(dāng)一種視覺效果更有意義時，就去做吧。

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

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

文本和縮寫

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

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

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

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

對齊

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

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

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

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

行標(biāo)簽應(yīng)該左對齊，除非它們特別短。

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

列標(biāo)簽可以是左對齊的，也可以是居中對齊的，但是所有的標(biāo)簽都應(yīng)該有相同的對齊方式。

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

總結(jié)

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

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

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