在移動設備上設計表格頁面，對于設計師來說是一個不小的挑戰(zhàn)。由于屏幕尺寸的限制，如何在小屏幕上有效地展示和操作表格數(shù)據(jù)，成為了一個需要深思的問題。本文將探討移動端表格頁的設計思路，從保守到激進，提供不同的設計方案，以適應不同的使用場景和用戶需求。文章將帶你了解如何通過創(chuàng)新的交互設計，提升移動端表格頁的用戶體驗。

如何在移動端設計表格？這似乎是一個設計難題。

對于表格來說，它本身需要大量的空間，需要大范圍地滑動查看詳細的信息。但在手機這樣狹小的空間當中，我們真的很難進行操作。

但產(chǎn)品提出各種需求就是“我要我要”，那今天給大家分享一下移動端表格的設計思路。

首先我們先說說移動端表格的痛點。

因為手機本身是以豎屏為主，而對于表格這類數(shù)據(jù)形態(tài)時是以橫屏為主，所以在內(nèi)容呈現(xiàn)上就會存在明顯的差異，就像橫屏長視頻與豎屏短視頻，呈現(xiàn)方式上就會有不同。

其次在使用場景上移動端很多時候是以閱讀為主，很少會涉及到編輯、配置，因此在設計上會極少考慮配置等功能需求，在功能上會進行明顯的劃分。

比如飛書移動端當中，會將配置等復雜功能不允許在手機上配置，讓用戶跳轉(zhuǎn)到電腦管理后臺進行操作。

所以我們需要在做移動端的表格頁面，首先需要明確這個表格非做不可嗎？不做行不行？

最后我們以一個真實的產(chǎn)品需求為例，來進行表格的設計優(yōu)化：「這是一個 CRM 的客戶表格頁面，由于銷售需要經(jīng)常外出拜訪，因此需要查看客戶的詳細信息，并且會對客戶進行電話聯(lián)系查看地址等操作」，如果你是這個設計師，會如何設計？

給你們 10 秒鐘，可以在腦子里面具體構思～

…

我們會將思路分為：保守派與激進派

保守派是保留原有表格形式，將其移植到手機上，只是具體的呈現(xiàn)形式有所不同

激進派是脫離原有表格形式，將其形式上進行調(diào)整，會在交互與內(nèi)容上有著較大變化。

一、橫向切換

在移動端設計時，最大的問題就在于如何使用豎屏展示表格橫向信息。

（如果你有一個三折疊，那問題就迎刃而解了??）

首先想到的便是將手機旋轉(zhuǎn)，通過橫屏查看更多的數(shù)據(jù)，這樣就能與表格尺寸大小接近，展示更多的信息內(nèi)容。

思路可行，我們就進行方案落地。

首先會想到使用重力感應進行表格的切換，但這樣的話入口過于的深，并且很難給出對應的引導。

因此最終使用表格處懸浮一個切換入口，通過用戶的直接點擊，能夠讓內(nèi)容迅速切換，進而能夠總覽內(nèi)容，進行閱讀。

這種方案實現(xiàn)成本比較低，系統(tǒng)當中可以進行大量的復用，但用戶只能閱讀，想要操作數(shù)據(jù)等情況，幾乎就不太可能，因此方案也會存在對應的局限性。指示燈滾動

二、指示燈滾動

則會考慮將表格豎屏放置，然后根據(jù)用戶的痛點去解決問題。

演示一下，當我們滾動時你覺得有哪些問題。

1.不知道數(shù)據(jù)的具體歸屬，也就是橫向閱讀查看不到關鍵字段不能進行數(shù)據(jù)的一一對應

2.數(shù)據(jù)整體屏效較低，查看到的信息比較少

3.滾動時對于后續(xù)的數(shù)據(jù)不太清楚，不知道要滑動多久

秉承著頭疼醫(yī)頭，腳疼醫(yī)腳的原則，我們對于這個頁面進行一輪優(yōu)化：

1. 不知道歸屬，那就將表頭第一個字段進行凍結，幫助用戶快速查看

2.屏效低那就縮小字體，增加信息呈現(xiàn)密度

3.不清楚數(shù)據(jù)，那就指示燈提示，高數(shù)你目前查看到的數(shù)據(jù)情況

這樣整理一下就得到以下方案，整體感覺還是相當不錯。

設計的感覺就像是在手機上安裝了一個滾動條～數(shù)據(jù)收折

三、數(shù)據(jù)收折

就是將表格進行簡化，只展示部分重要字段，將其余字段隱藏收折，如果想查看完整信息，再進行展開。

這里外露出的字段一定需要認真思考，用戶能通過這幾個字段快速判斷。

針對這幾個字段，我們會根據(jù)字段重要度與字段具體字數(shù) 進行十字分析，得出用戶最重要同時字段字數(shù)較低的 3-4 個，放置在外層。

同時將其他信息進行收折，用戶點擊表格過后才會展開，呈現(xiàn)所有的字段。

這種方案其實比較適合字段較少的情況，針對較多的字段數(shù)據(jù)，展示效率會比較的低?？ㄆ尸F(xiàn)

四、卡片呈現(xiàn)

會與數(shù)據(jù)收折有些相似，不過卡片能將信息根據(jù)規(guī)則進行排列，同時可以陪伴對應操作，使其信息密度更高。

比如在這個需求當中，我們銷售人員需要反復撥打電話，這時候便可以通過卡片將關鍵的操作外露，進而可以使操作更為便利。

（這里所指的便是 撥打電話 這個關鍵操作）

卡片也算是在移動端當中較為常見的解決方案，作為設計師對于這個方案一定要非常熟悉才行。詳細卡片

五、詳細卡片

則是在卡片的基礎上，進一步的加強。

原則上我希望在詳細卡片當中，根據(jù)布局排列呈現(xiàn)所有的信息內(nèi)容。這樣用戶就只會在卡片頁查看數(shù)據(jù)，而不是還需要進入詳情當中。

比如我是一個電話銷售，就可以使用詳細卡片將每一個我即將聯(lián)系的客戶信息查看清楚，這樣再點擊右側電話按鈕進行呼叫，幫助我快速撥打，快速掌握用戶信息。

這類型的設計經(jīng)常會用在 送貨員、訂單信息 等頁面當中，能夠查看信息的同時，快捷操作進而提高效率。

最后，移動端的功能，我們需要了解最終的邊界究竟在哪。

比如在飛書文檔的手機端中，你會發(fā)現(xiàn)它只支持豎屏的編輯場景，如果想要橫屏進行編輯，則會提示不允許，所以在設計上，還需要考慮 表格當中，閱讀、篩選、編輯、操作等不同的訴求，盡可能設計一個更為合理的移動端表格交互～