中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：在交互設(shè)計中，信息集合的方式往往采用卡片式設(shè)計和列表設(shè)計。列表針對的集合主要是信息欄的“排列展示”，而卡片式主要解決的是單條信息的“內(nèi)容較多”，以及此信息的“可操作性”；本文作者分享了關(guān)于卡片式列表設(shè)計的一些思考和案例，我們一起來了解一下。

卡片式列表是一種很好的集合信息的方式，它既有好處也有弊端，因此需要根據(jù)場景和內(nèi)容確定展現(xiàn)形式。本文結(jié)合了案例與大家分享一下卡片式列表設(shè)計的一些思考。

一、定義

1. 什么是卡片

物理世界中，卡片是用以承載信息的獨立矩形薄片；例如電話卡、明信片、身份證、撲克等均屬此類，具有“便攜性、信息簡潔和相對獨立“等特點。

當(dāng)它作為一種隱喻，延伸至虛擬世界后，其信息結(jié)構(gòu)和交互方式更容易被感知和理解。

2. 卡片式列表

在列表界面記錄集結(jié)構(gòu)中，我們可以采用表格、列表、圖表等方式對數(shù)據(jù)進行集合展示；其中，卡片是一種特殊的列表形式，其特點是每一個卡片高度固定（面積相對固定）。

這里注意，從數(shù)據(jù)結(jié)構(gòu)上來說，表格是二維數(shù)組，列表則是一維數(shù)組。這兩者是有區(qū)別的，沒有包含關(guān)系。

二、卡片式列表的特點

首先，來了解一下數(shù)據(jù)展示較常用的表格有哪些特點。

優(yōu)點：

• 概覽性強，便于進行數(shù)據(jù)對比；
• 篩查功能強大，表格所具有表頭篩選功能能在一定程度上滿足用戶多種篩選查詢的訴求；
• 數(shù)據(jù)展示量多，在一個屏幕內(nèi)能展示更多條目的數(shù)據(jù)。

缺點：

• 數(shù)據(jù)層次平均，針對單條信息，呈現(xiàn)效果不夠豐富；
• 跨終端將會受局限，運用于移動端體驗欠佳；
• 易引起視覺疲勞，長時間地專注處理大數(shù)據(jù)，容易疲勞，甚至產(chǎn)生消極情緒。

那么相對于表格，卡片式列表的特點如下幾點：

1. 強化主次，信息分級

卡片作為一個獨立的容器，可以在內(nèi)容上進行良好的布局組織，將信息分塊，突出重點，從視覺感知上就對內(nèi)容進行了分隔，分明的層級能夠引導(dǎo)用戶的瀏覽視線，有秩序地閱讀與點擊。

2. 內(nèi)容獨立，多端適配

對于響應(yīng)式的設(shè)計來說，卡片作為一個承載內(nèi)容的容器，能很容易的放大或縮小，做到既統(tǒng)一又相對獨立。在多設(shè)備間能創(chuàng)造出一個一致獨立的美學(xué)效果，創(chuàng)建出一致的體驗。

3. 整體的數(shù)據(jù)展示效率低

盡管單個卡片得到了重點關(guān)照，但相對于用表格來展示數(shù)據(jù)來說，其承載的條目的數(shù)據(jù)還是偏少，整體的信息量不足。

三、卡片式列表的場景探索

1. 從表格到卡片

在B端產(chǎn)品的設(shè)計中，表格是使用頻次最高的設(shè)計元素。對于數(shù)據(jù)量較大的表格，一般情況下，我們會通過凍結(jié)列的形式呈現(xiàn)它。

當(dāng)然，我們也可以通過一些技巧，將表格轉(zhuǎn)化成卡片；如下圖，這是一個“客源跟進信息表”，我們可以去掉表頭，把一些能隱喻的一些元素進行隱喻，比如職業(yè)可以隱喻成圖標(biāo)、合并一些關(guān)聯(lián)項目，比如最晚入住時間和入住人數(shù)，通過以上形式的轉(zhuǎn)化，我們就可以把這些數(shù)據(jù)表格轉(zhuǎn)化成一個卡片。

表格轉(zhuǎn)化成卡片的技巧總結(jié)：

• 重要區(qū)分項目前置與強化
• 合并強關(guān)聯(lián)的項目
• 主卡片與輔助卡片（站在關(guān)聯(lián)關(guān)系角度，區(qū)分卡片之間的主從關(guān)系）
• 使用圖標(biāo)進行必要隱喻（替代表頭的隱喻，比如生日、身高；數(shù)據(jù)內(nèi)容本身的隱喻，比如性別）
• 狀態(tài)可以轉(zhuǎn)化成標(biāo)簽（比如是否預(yù)約、是否簽約）

2. 案例場景探索

先來看一個案例，如下圖，這是一款B端的收款管理平臺，其目的是為了幫助用戶快速收對錢；在此業(yè)務(wù)場景中，用戶更關(guān)注于單筆訂單的數(shù)據(jù)情況，例如收款進度、未收款余額以及異常訂單等數(shù)據(jù)，當(dāng)數(shù)據(jù)不符合預(yù)期時會對它進行相應(yīng)的處理。

• 方案一，采用表格進行數(shù)據(jù)展示，由于單筆訂單的信息層級較為平均，不能很好的引導(dǎo)用戶的瀏覽視線，從而降低了用戶對單筆訂單的處理效率。
• 方案二，將表格通過一定方式轉(zhuǎn)化成卡片，此時用戶可以很清晰地看到每張卡片代表的訂單情況并快速進行相應(yīng)的處理，同時卡片式也增加了視覺和交互體驗，互動可玩性更高。

從上述案例中，我們可以得到當(dāng)B端業(yè)務(wù)的場景滿足以下幾種特點時可以嘗試采用卡片式列表設(shè)計：

• 不存有數(shù)據(jù)對比場景，更關(guān)注單個數(shù)據(jù)的情況；
• 不涉及大量數(shù)據(jù)的處理，更需要對單個信息內(nèi)容進行多元互動；
• 當(dāng)主要識別的數(shù)據(jù)是頭像、封面等以圖像為主時，適用于卡片（若為文字標(biāo)題或具體數(shù)字，適合表格）；

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

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