兰州网站建设优化推广,中国电商平台排行榜,网站建设问题清单,seo公司排名作者#xff1a;Nick#xff08;转载已取得作者授权#xff09;卡片式列表是一种很好的集合信息的方式#xff0c;它既有好处也有弊端#xff0c;因此需要根据场景和内容确定展现形式。本文结合了案例与大家分享一下卡片式列表设计的一些思考。一、定义1. 什么是卡片物理世…作者Nick转载已取得作者授权卡片式列表是一种很好的集合信息的方式它既有好处也有弊端因此需要根据场景和内容确定展现形式。本文结合了案例与大家分享一下卡片式列表设计的一些思考。一、定义1. 什么是卡片物理世界中卡片是用以承载信息的独立矩形薄片例如电话卡、明信片、身份证、扑克等均属此类具有“便携性、信息简洁和相对独立“等特点。当它作为一种隐喻延伸至虚拟世界后其信息结构和交互方式更容易被感知和理解。2. 卡片式列表在列表界面记录集结构中我们可以采用表格、列表、图表等方式对数据进行集合展示其中卡片是一种特殊的列表形式其特点是每一个卡片高度固定面积相对固定。这里注意从数据结构上来说表格是二维数组列表则是一维数组。这两者是有区别的没有包含关系。二、卡片式列表的特点首先来了解一下数据展示较常用的表格有哪些特点。优点概览性强便于进行数据对比筛查功能强大表格所具有表头筛选功能能在一定程度上满足用户多种筛选查询的诉求数据展示量多在一个屏幕内能展示更多条目的数据。缺点数据层次平均针对单条信息呈现效果不够丰富跨终端将会受局限运用于移动端体验欠佳易引起视觉疲劳长时间地专注处理大数据容易疲劳甚至产生消极情绪。那么相对于表格卡片式列表的特点如下几点1. 强化主次信息分级卡片作为一个独立的容器可以在内容上进行良好的布局组织将信息分块突出重点从视觉感知上就对内容进行了分隔分明的层级能够引导用户的浏览视线有秩序地阅读与点击。2. 内容独立多端适配对于响应式的设计来说卡片作为一个承载内容的容器能很容易的放大或缩小做到既统一又相对独立。在多设备间能创造出一个一致独立的美学效果创建出一致的体验。3. 整体的数据展示效率低尽管单个卡片得到了重点关照但相对于用表格来展示数据来说其承载的条目的数据还是偏少整体的信息量不足。三、卡片式列表的场景探索1. 从表格到卡片在B端产品的设计中表格是使用频次最高的设计元素。对于数据量较大的表格一般情况下我们会通过冻结列的形式呈现它。当然我们也可以通过一些技巧将表格转化成卡片如下图这是一个“客源跟进信息表”我们可以去掉表头把一些能隐喻的一些元素进行隐喻比如职业可以隐喻成图标、合并一些关联项目比如最晚入住时间和入住人数通过以上形式的转化我们就可以把这些数据表格转化成一个卡片。表格转化成卡片的技巧总结重要区分项目前置与强化合并强关联的项目主卡片与辅助卡片站在关联关系角度区分卡片之间的主从关系使用图标进行必要隐喻替代表头的隐喻比如生日、身高数据内容本身的隐喻比如性别状态可以转化成标签比如是否预约、是否签约2. 案例场景探索先来看一个案例如下图这是一款B端的收款管理平台其目的是为了帮助用户快速收对钱在此业务场景中用户更关注于单笔订单的数据情况例如收款进度、未收款余额以及异常订单等数据当数据不符合预期时会对它进行相应的处理。方案一采用表格进行数据展示由于单笔订单的信息层级较为平均不能很好的引导用户的浏览视线从而降低了用户对单笔订单的处理效率。方案二将表格通过一定方式转化成卡片此时用户可以很清晰地看到每张卡片代表的订单情况并快速进行相应的处理同时卡片式也增加了视觉和交互体验互动可玩性更高。从上述案例中我们可以得到当B端业务的场景满足以下几种特点时可以尝试采用卡片式列表设计不存有数据对比场景更关注单个数据的情况不涉及大量数据的处理更需要对单个信息内容进行多元互动当主要识别的数据是头像、封面等以图像为主时适用于卡片若为文字标题或具体数字适合表格最后我建立了各大城市的产品交流群想进群小伙伴加微信yw5201a1 我拉你进群。关注微信公众号产品刘 可领取大礼包一份。··················END··················今日报告艾瑞咨询 发布《2022年中国大数据分析平台行业研究报告》下载报告去公众号硬核刘大 后台回复“大数据分析”即可下载完整PDF文件。申明报告版权归 艾瑞咨询 所有此处仅限分享学习使用如有侵权请联系小编做删除处理RECOMMEND推荐阅读为啥讨厌如何做好产品运营面试一对一辅导手把手教你做B端产品经理点击“阅读原文”查看更多干货
