移動(dòng)版網(wǎng)站設(shè)計(jì)的重新思考

時(shí)間：2023-09-03 03:54:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-03 03:54:01 來源：網(wǎng)站運(yùn)營(yíng)

移動(dòng)版網(wǎng)站設(shè)計(jì)的重新思考：您的企業(yè)網(wǎng)站設(shè)計(jì)上的表格可能會(huì)存在問題，它在手機(jī)里看起來或用起來用戶體驗(yàn)可能不是那么順暢。這聽起來像是一個(gè)簡(jiǎn)單的問題（應(yīng)該有一個(gè)簡(jiǎn)單的解決方案），但事實(shí)可能不像您想的那么簡(jiǎn)單。

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

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

AD:如果您想建設(shè)高端、專業(yè)的企業(yè)網(wǎng)站，創(chuàng)建具有影響力的網(wǎng)站，為企業(yè)帶來影響力，那么高端網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司，查派網(wǎng)建將是您的不二之選。

屏幕寬度

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

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

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

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

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

請(qǐng)注意，當(dāng)網(wǎng)站設(shè)計(jì)瀏覽用戶從臺(tái)式電腦轉(zhuǎn)到移動(dòng)設(shè)備時(shí)，彭博會(huì)對(duì)股票信息進(jìn)行壓縮（見上圖）。這一實(shí)踐表明了對(duì)用戶的理解，以及移動(dòng)用戶需要什么信息，因?yàn)橛行┤丝赡芟Ｍ谧烂嫔汐@得更多數(shù)據(jù)。

滾動(dòng)

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

對(duì)于長(zhǎng)滾動(dòng)表，有一些可用性方面的問題：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文本和縮寫

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

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

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

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

對(duì)齊

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

為了使文字更易于閱讀，請(qǐng)按下列方式排列文字：

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

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

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

數(shù)字右對(duì)齊通常最合理，因?yàn)槟梢灾庇^地看到更大的數(shù)字，并且它將逗號(hào)和小數(shù)等元素放在一行中，以幫助掃描。

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

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

總結(jié)

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

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

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