如何在移動(dòng)端設(shè)計(jì)表格？這似乎是一個(gè)設(shè)計(jì)難題。

對(duì)于表格來(lái)說(shuō)，它本身需要大量的空間，需要大范圍地滑動(dòng)查看詳細(xì)的信息。但在手機(jī)這樣狹小的空間當(dāng)中，我們真的很難進(jìn)行操作。

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

首先我們先說(shuō)說(shuō)移動(dòng)端表格的痛點(diǎn)。

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

其次在使用場(chǎng)景上移動(dòng)端很多時(shí)候是以閱讀為主，很少會(huì)涉及到編輯、配置，因此在設(shè)計(jì)上會(huì)極少考慮配置等功能需求，在功能上會(huì)進(jìn)行明顯的劃分。

比如飛書(shū)移動(dòng)端當(dāng)中，會(huì)將配置等復(fù)雜功能不允許在手機(jī)上配置，讓用戶跳轉(zhuǎn)到電腦管理后臺(tái)進(jìn)行操作。

所以我們需要在做移動(dòng)端的表格頁(yè)面，首先需要明確這個(gè)表格非做不可嗎？不做行不行？

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

給你們 10 秒鐘，可以在腦子里面具體構(gòu)思～

...

我們會(huì)將思路分為：保守派與激進(jìn)派

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

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

一、橫向切換

在移動(dòng)端設(shè)計(jì)時(shí)，最大的問(wèn)題就在于如何使用豎屏展示表格橫向信息。

（如果你有一個(gè)三折疊，那問(wèn)題就迎刃而解了）

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

思路可行，我們就進(jìn)行方案落地。

首先會(huì)想到使用重力感應(yīng)進(jìn)行表格的切換，但這樣的話入口過(guò)深，并且很難給出對(duì)應(yīng)的引導(dǎo)。

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

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

二、指示燈滾動(dòng)

指示燈滾動(dòng)則會(huì)考慮將表格豎屏放置，然后根據(jù)用戶的痛點(diǎn)去解決問(wèn)題。

演示一下，當(dāng)我們滾動(dòng)時(shí)你覺(jué)得有哪些問(wèn)題。

1. 不知道數(shù)據(jù)的具體歸屬，也就是橫向閱讀查看不到關(guān)鍵字段不能進(jìn)行數(shù)據(jù)的一一對(duì)應(yīng)
2. 數(shù)據(jù)整體屏效較低，查看到的信息比較少
3. 滾動(dòng)時(shí)對(duì)于后續(xù)的數(shù)據(jù)不太清楚，不知道要滑動(dòng)多久

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

1. 不知道歸屬，那就將表頭第一個(gè)字段進(jìn)行凍結(jié)，幫助用戶快速查看
2. 屏效低那就縮小字體，增加信息呈現(xiàn)密度
3. 不清楚數(shù)據(jù)，那就指示燈提示，高數(shù)你目前查看到的數(shù)據(jù)情況

這樣整理一下就得到以下方案，整體感覺(jué)還是相當(dāng)不錯(cuò)。

設(shè)計(jì)的感覺(jué)就像是在手機(jī)上安裝了一個(gè)滾動(dòng)條～

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

數(shù)據(jù)收折就是將表格進(jìn)行簡(jiǎn)化，只展示部分重要字段，將其余字段隱藏收折，如果想查看完整信息，再進(jìn)行展開(kāi)。

這里外露出的字段一定需要認(rèn)真思考，用戶能通過(guò)這幾個(gè)字段快速判斷。

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

同時(shí)將其他信息進(jìn)行收折，用戶點(diǎn)擊表格過(guò)后才會(huì)展開(kāi)，呈現(xiàn)所有的字段。

這種方案其實(shí)比較適合字段較少的情況，針對(duì)較多的字段數(shù)據(jù)，展示效率會(huì)比較的低。

四、卡片呈現(xiàn)

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

比如在這個(gè)需求當(dāng)中，我們銷(xiāo)售人員需要反復(fù)撥打電話，這時(shí)候便可以通過(guò)卡片將關(guān)鍵的操作外露，進(jìn)而可以使操作更為便利。

（這里所指的便是 撥打電話 這個(gè)關(guān)鍵操作）

卡片也算是在移動(dòng)端當(dāng)中較為常見(jiàn)的解決方案，作為設(shè)計(jì)師對(duì)于這個(gè)方案一定要非常熟悉才行。

五、詳細(xì)卡片

詳細(xì)卡片則是在卡片的基礎(chǔ)上，進(jìn)一步的加強(qiáng)。

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

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

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

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

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

CE青年Youthce