激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

“卡片式UI”和“列表式UI”在B端業(yè)務(wù)中的應(yīng)用

發(fā)布時間：2024-01-23 09:13:45 瀏覽量：238次

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

概念介紹

什么是卡片式？

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

卡片式UI的流行

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

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

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

首先放出筆者在設(shè)計運維告警平臺時最初的卡片式告警配置方案：

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

卡片式的優(yōu)勢

（1）突出標題，提高信息深度

用戶可以第一時間觀察到每張卡片分別屬于什么告警，每個告警針對的對象、策略、以及推送渠道。

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

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

（3）提高滑動深度

卡片式的設(shè)計天生就會鼓勵用戶將頁面往下滑動，這在某一類場景上尤其重要，比如電商交易類。

卡片式的劣勢

（1）橫向展示效率較低

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

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

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

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

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

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

（1）快速掃描

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

（2）更強的橫向展示能力

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

（3）豐富的篩查能力

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

（4）批量處理能力

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

列表的劣勢又是什么？

（1）信息深度不足

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

（2）易引起視覺疲勞

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

最后的選擇

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

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

這一類業(yè)務(wù)場景需要滿足幾個特點 ：

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

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

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

總結(jié)

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

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

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

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

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定