筆者近期在設(shè)計(jì)B端運(yùn)維告警平臺(tái)時(shí)，就告警指標(biāo)如何呈現(xiàn)，選擇卡片式or列表式與團(tuán)隊(duì)的小伙伴們進(jìn)行了激烈的討論，從交互體驗(yàn)、信息呈現(xiàn)到業(yè)務(wù)效率等多方面進(jìn)行了分析，盡管筆者最終向列表式作出了妥協(xié)，但其中有價(jià)值的觀點(diǎn)想與各位同學(xué)們分享。

概念介紹

什么是卡片式？

即通過(guò)一張張帶有明顯邊界的卡片，在用戶(hù)界面上平鋪展示的UI設(shè)計(jì)，同時(shí)在卡片中我們能獲取到卡片的圖片、文案信息、甚至是url等信息?？ㄆ梢宰鳛樾畔⒄故镜膬?nèi)容組成，也可以作為更加詳細(xì)的信息入口，同時(shí)也具有更加豐富的可互動(dòng)性。

卡片式UI的流行

在當(dāng)下眾多熱門(mén)的app中，卡片式UI的設(shè)計(jì)可謂是大行其道，筆者簡(jiǎn)單舉幾個(gè)栗子：

在大家所熟知的appstore、淘寶、閑魚(yú)的首頁(yè)，從appstore的完美利用空間布局設(shè)計(jì)到淘寶閑魚(yú)的信息分級(jí)和重點(diǎn)突出，卡片式UI已經(jīng)被運(yùn)用的爐火純青，各位同學(xué)們可以逐一感受。當(dāng)然，筆者接下來(lái)將從B端業(yè)務(wù)的角度去闡述卡片式vs列表式的優(yōu)劣。

卡片式設(shè)計(jì)的優(yōu)劣

首先放出筆者在設(shè)計(jì)運(yùn)維告警平臺(tái)時(shí)最初的卡片式告警配置方案：

筆者將不同的告警指標(biāo)分為不同的卡片，每張卡片內(nèi)容包含告警對(duì)象、指標(biāo)、觸發(fā)條件、推送渠道已經(jīng)創(chuàng)建者等信息，同時(shí)支持編輯&刪除的能力，

卡片式的優(yōu)勢(shì)

（1）突出標(biāo)題，提高信息深度

用戶(hù)可以第一時(shí)間觀察到每張卡片分別屬于什么告警，每個(gè)告警針對(duì)的對(duì)象、策略、以及推送渠道。

（2）排版設(shè)計(jì)美化

充分利用空間和布局的卡片式設(shè)計(jì)能夠與用戶(hù)之間產(chǎn)生更強(qiáng)的互動(dòng)性，提高可使用性，甚至是能讓使用者的心情更加美麗。

（3）提高滑動(dòng)深度

卡片式的設(shè)計(jì)天生就會(huì)鼓勵(lì)用戶(hù)將頁(yè)面往下滑動(dòng)，這在某一類(lèi)場(chǎng)景上尤其重要，比如電商交易類(lèi)。

卡片式的劣勢(shì)

（1）橫向展示效率較低

盡管單個(gè)卡片得到了重點(diǎn)關(guān)照，同時(shí)呈現(xiàn)的信息深度更深，也給了用戶(hù)點(diǎn)進(jìn)去的欲望，但就整體來(lái)看，頁(yè)面中的卡片數(shù)量仍舊較少，在更為強(qiáng)調(diào)效率和信息量的B端產(chǎn)品上，可能會(huì)稍顯力不從心。

（2）卡片中重復(fù)類(lèi)信息較多

可以看到在筆者的設(shè)計(jì)中，每張卡片盡管從告警名稱(chēng)的title上可以做到差異化，但卡片中的其他信息，如告警對(duì)象、推送渠道、創(chuàng)建者信息等都會(huì)出現(xiàn)大量的重復(fù)展示現(xiàn)象；盡管單張卡片的信息深度提高了，但對(duì)用戶(hù)來(lái)說(shuō)卻造成了閱讀時(shí)間浪費(fèi)。但在目前大量的B端產(chǎn)品中，重復(fù)類(lèi)流程&重復(fù)類(lèi)信息輸入和輸出幾乎是家常便飯，如果采用卡片式，也許會(huì)在一定程度上影響業(yè)務(wù)的流暢性和實(shí)施效率。

列表式設(shè)計(jì)的優(yōu)劣

回到筆者團(tuán)隊(duì)最終確定的列表式設(shè)計(jì)，我們來(lái)看看區(qū)別是什么：

相比卡片式，列表式在B端的優(yōu)勢(shì)是什么？

（1）快速掃描

B端業(yè)務(wù)平臺(tái)一般會(huì)更著重于業(yè)務(wù)流程和數(shù)據(jù)，當(dāng)流程逐漸復(fù)雜，數(shù)據(jù)體量逐漸增大時(shí)，頁(yè)面上的重復(fù)類(lèi)信息也會(huì)增多，“快速掃描”能幫助用戶(hù)更高效的處理相關(guān)工作。

（2）更強(qiáng)的橫向展示能力

列表式的每條數(shù)據(jù)可以存在多個(gè)自定義字段作為表頭，在有限的橫向展示空間里可以承載更多的數(shù)據(jù)，進(jìn)而提高單個(gè)頁(yè)面的展示效率，這在B端業(yè)務(wù)工作中也有較大益處。

（3）豐富的篩查能力

列表可以支持用戶(hù)根據(jù)表頭字段自定義篩選和查詢(xún)，自由度上更高，在滿(mǎn)足用戶(hù)多種篩選查詢(xún)的需求的同時(shí)提高了業(yè)務(wù)處理效率。

（4）批量處理能力

列表可以支持用戶(hù)批量處理列表中的各項(xiàng)數(shù)據(jù)，對(duì)業(yè)務(wù)效率也有較大提升。

列表的劣勢(shì)又是什么？

（1）信息深度不足

針對(duì)列表內(nèi)的單條數(shù)據(jù)，盡管有多個(gè)表頭字段可以呈現(xiàn)數(shù)據(jù)，但相比于單個(gè)卡片，單條列表數(shù)據(jù)的信息呈現(xiàn)深度仍有所不足。

（2）易引起視覺(jué)疲勞

列表作為傳統(tǒng)的設(shè)計(jì)，在各種內(nèi)部平臺(tái)都會(huì)大面積的存在，但其實(shí)對(duì)業(yè)務(wù)人員的體驗(yàn)來(lái)說(shuō)并不算太友好，長(zhǎng)久下來(lái)可能會(huì)引起用戶(hù)消極的情緒，甚至是“催眠”。

最后的選擇

綜合上述筆者分享的卡片式和列表式的優(yōu)劣，在權(quán)衡了多方面的業(yè)務(wù)需求和用戶(hù)體驗(yàn)的情況下，最終筆者還是回到了B端業(yè)務(wù)最核心的價(jià)值點(diǎn)—邏輯和效率。因此我們擁抱了處理能力和處理效率的提高，犧牲了部分頁(yè)面設(shè)計(jì)和用戶(hù)的體驗(yàn)。

那在什么B端業(yè)務(wù)場(chǎng)景下可以嘗試卡片式設(shè)計(jì)呢？

這一類(lèi)業(yè)務(wù)場(chǎng)景需要滿(mǎn)足幾個(gè)特點(diǎn) ：

1. 不依賴(lài)快速掃描；
2. 不依賴(lài)字段的篩選查詢(xún)；
3. 不涉及大量數(shù)據(jù)的處理；

結(jié)合上述的幾個(gè)特點(diǎn)，筆者舉一個(gè)簡(jiǎn)單的栗子如下：

上圖為一款B端營(yíng)銷(xiāo)平臺(tái)，可用于給不同的無(wú)人設(shè)備配置定制化的營(yíng)銷(xiāo)方案。在這樣的業(yè)務(wù)場(chǎng)景下使用卡片式設(shè)計(jì)后，用戶(hù)可以很清晰的看到每張卡片代表的營(yíng)銷(xiāo)方案以及部分關(guān)鍵細(xì)節(jié)，同時(shí)在營(yíng)銷(xiāo)方案的數(shù)量變化相對(duì)恒定的情況下，卡片式增加了空間的利用和交互體驗(yàn)，用戶(hù)的“可玩性”也有了一定提高。

總結(jié)

兩種設(shè)計(jì)都有各自的明顯的好處，卡片式設(shè)計(jì)的優(yōu)勢(shì)比如我們提到的空間利用、標(biāo)題突出、信息深度以及交互，但碰上更著重于業(yè)務(wù)流程和數(shù)據(jù)處理的B端平臺(tái)時(shí)，列表式設(shè)計(jì)便成了“王道”。

但在不需要大量的數(shù)據(jù)接收和處理時(shí)，同學(xué)們還是可以大膽嘗試卡片式設(shè)計(jì)的。

本文由 @Mr.張錦鯉 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。