UI卡片：响应设计的终极回应，却也可能带来页面认知负荷？
UI卡片是响应式设计的理想解决方案。不管是响应式布局还是自适应布局，卡片式界面设计都能提供适配支持，这种可灵活调整的容器构造能随整体宽度变化布局形态。尽管卡片界面在加载效率与屏幕适配方面具备先天优势，但因其信息模块的独立性，设计时可能造成用户理解负担过重。
1、什么是卡片设计？
卡片属于一种界面元素，用于展示特定信息及执行相关功能。此类组件可容纳多种构成部分，不过所有这些部分都必须围绕一个中心思想展开。这样做的好处在于避免信息堆砌显得杂乱无章，从而让更多数据得以清晰呈现。即便初次接触设计规范的用户对卡片形式不甚了解，他们也能迅速掌握其使用方法，毕竟这种布局与现实生活中常见的卡片具有高度的相似性。
js设计社区？分类是搜索，搜索内容为卡片设计，来源是上海，计划编号是smt08062
2、卡片设计流行的原因？
卡片广受欢迎，是因为卡片集中呈现信息，迫使内容遵循卡片尺寸和布局的约束。创作者乐于在卡片中整合丰富元素，无需担忧设计显得杂乱无章。
卡片能够将信息分解成简明易懂的部分，便于使用者进行交流。借助一个载体，卡片可以让受众明白信息确凿可靠，并且富有情感。
卡片在页面上呈现的形象，与现实生活中的卡片别无二致，给用户带来了亲切感。在卡片成为移动和网络应用中的流行设计之前，它们早已在生活中随处可见：比如名片、棒球卡片以及便签。卡片能够形成鲜明的视觉对比，使我们的大脑可以直接将卡片与它们所象征的事物联系起来，这种效果与现实生活中的体验相似。
卡片体积小，方便设计师优先考虑内容，卡片都成为便于阅读的部分，用户借助卡片能更便捷地找到感兴趣的内容。
具有较强号召力，对使用者更为亲和：采用卡片式布局通常十分注重画面呈现（特别是图像）；从资料组织角度讲，视觉脉络会显得更为分明。借助图像能够增强卡片式布局对使用者的吸引力，其效果要优于在卡片里堆砌的同类素材。
方便分享：卡片能促使人们到社交网络上发布信息，由于人们能够选取性地传播部分信息，而非全部页面。
3、卡片设计何时使用？
搜索生成的页面：卡片能迅速呈现模块中的相关资料，使用户彻底明晰个人兴趣所在。以卡片为蓝本的设计，是展示此类信息的理想选择。
信息访问：当用户浏览信息时，卡片的兼容性更好。
任务处理：若流程中的某项任务能以卡片形式说明，便方便对卡片进行编排来形成任务清单。借助卡片界面实施任务管理，为客户构建一个清晰的展示界面，里面每张卡片都对应一项独立的任务。
数据图形化呈现：控制面板往往集合多种信息片段于一处展现。这种情形下，采用卡片式对照能够使各个项目间的区别更加清晰，各个卡片能够承担不同的功能定位。
4、卡片解构
根据内容性质，卡片版式可以有所区别。常见构成元素，多数卡片类型都具备。
富媒体内容，卡片能够容纳微缩图片，用以呈现照片、插图、头像、标志、标记或图形等视觉元素。
标题：标题文本可包含相册或文章的名称或标题。
描述：适用于文字，如文章摘要或简短描述。
动作按钮：卡片可包含用于操作的按钮。
内容标题可包含详尽说明，例如文章的署名或标记位置，用以明确界定特定段落或章节的范畴，便于读者理解和检索相关信息。
标志：卡片可包含操作标志。
5、设计技巧
5.1使用相关主题的照片
图片是卡片设计的核心要素。必须选用质感上乘的影像，才能有效抓住使用者对每张卡片的视线。卡片除了照片，还能容纳插画、浅色底纹衬托的标志，或是其他多样性的视觉材料，不过所有这些元素都必须和内容主旨紧密配合。
5.2提高视觉层次
卡片里的构造说明能够引导顾客关注重要部分，具体信息要放在卡片的上方，借助版式设计来凸显具体信息，用空白和对比来区分需要明显视觉区隔的内容部分。
5.3限制内容长度
一张卡片需要仅记录关键内容，同时提供补充建议，以便获取进一步资料，而不是全部信息。若卡片承载过多内容，其结构会变得异常繁杂，进而丧失与其他卡片相比较的清晰性，毕竟它不再符合卡片应有的简洁特征。
5.4防止置入连接
卡片需自行建立连接，不可依赖内部关联，文本链接的放置易致用户误用。
5.5区分操作顺序
对比具备不同操控方式的卡牌时，需要借助视觉进行参照，下面的示范中，我借助淡色调而非核心按钮样式，以此减轻后续步骤的视觉负担。
6、如何在视觉上做到更加美观？
APP 卡片并非完全模仿真实物品，不过通常情况下，应用统一运用对比手法和物理规律，能让大家明白页面布局，分析内容中的视觉层级关系。
6.1应用圆角
与现实世界中的卡片在形态上进行视觉对比。
曲线表现更佳，因为它让佩戴者的镜片能轻易配合视线流转，因为它更契合头部与眼球的正常活动。
6.2增加轻微外框或投影
增加一个浅色调的边框，或者设置一个浅色阴影，都是有效手段。阴影能在页面上形成视觉层次，帮助我们识别各个界面组件。
但是，在方案里增添暗影效果并非易事。偶尔设计师会过分渲染落影，致使原本出色的构思显得廉价。切记不要采用纯粹的黑色阴影。
6.3注意字体和留白
务必确保每张卡片都得到关注、细读并领会。在每张卡片周边留出大量空白，给使用者留出处理信息、调整视觉感受的间隙，让他们能从容读完一张再转向下一张。
挑选简明扼要的字体，由于基础版式能最大程度增强辨识度，同时方便阅读。
7、优秀的卡片设计案例
7.1电子商务卡片设计
商品介绍是极为关键的元素，能够将潜在浏览者转化为实际购买者。一张出色的商品介绍应当能够抓住人们的视线，引发人们想要拥有该商品的欲望，促使人们下单，同时在搜索列表中获得良好的展示。
商品的品牌必须摆放在最突出的位置，这样顾客就能马上知晓他们找对地方了。一张出色的照片能够传达比大量文字更丰富的信息，因此必须精心设计一张高品质的产品图片以制作出完美的商品展示。倘若商品正在进行打折活动，不仅要在价格区间标注优惠后的价格，同时也要标明原价，并且清楚告知顾客能够节省的金额。
7.2用户中心卡片设计
卡片式介绍已成为网站中的常见模块或设计元素，个人品牌影响力较以往更为重要，卡片式设计也因此能起到显著作用。每张卡片都是一种用户界面组件，环境变量卡片也不例外，它承载着对所展示内容至关重要的数据。为了达成目标，你需要向他人展示自己的价值。
依照初始阐释与信息卡片的指引，能更清晰认识这种横跨不同领域的构思方法，也由此推测出使用者期望通过这些卡片执行何种任务，卡片在呈现多种内容概览的场合尤为适用，并非仅作为内容清单的简单替换品，今天的分享内容对你有所启迪~
请小编喝杯咖啡吧！