卡片信息展示设计规范

卡片信息展示设计规范一、卡片基础框架设计（一）尺寸规范卡片尺寸需适配不同设备与展示场景，确保在各类终端上都能呈现良好的视觉效果与信息可读性。移动端：在手机竖屏状态下，卡片宽度通常设置为屏幕宽度的90%-95%，最大不超过375px，最小不低于300px，以保证在主流手机型号上都能完整显示且留有合适边距。高度则根据内容多少灵活调整，但单屏内展示的卡片高度不宜超过屏幕高度的70%，避免用户频繁滑动。例如在电商APP中，商品展示卡片宽度多设为345px左右，高度根据商品图片、名称、价格等信息控制在280px-350px之间。平板端：考虑到平板屏幕较大，卡片宽度可设置为400px-500px，高度可适当增加，一般在350px-450px之间，同时可采用多列布局，如两列或三列排列，提升信息展示效率。比如在新闻资讯类平板应用中，新闻卡片常以两列布局呈现，宽度约450px，高度约400px，能在一屏内展示更多新闻内容。PC端：PC端屏幕尺寸差异较大，卡片宽度建议设置为250px-400px，高度在200px-350px之间。在企业管理系统等场景中，为了同时展示较多数据卡片，可采用响应式布局，根据屏幕宽度自动调整卡片列数和尺寸，确保在1920px宽屏和1366px普屏上都有良好的展示效果。（二）形状与圆角卡片形状主要以矩形为主，圆角设计能增强卡片的柔和感与亲和力，同时避免尖锐边角带来的视觉刺激。圆角半径：移动端卡片圆角半径一般设置为8px-12px，平板端和PC端可适当增大至12px-16px。例如在社交类APP中，用户个人信息卡片圆角半径多为10px，既符合移动端的视觉审美，又能与整体界面风格相协调。特殊形状：在一些创意类应用或特定场景中，可采用圆形、椭圆形等特殊形状卡片，但需确保信息展示不受影响，且与整体设计风格统一。比如在音乐播放APP中，歌手头像卡片可设计为圆形，突出视觉焦点，增强艺术感。（三）边框与阴影边框和阴影能够增强卡片的层次感与立体感，使其在界面中更加突出。边框：边框宽度建议设置为1px，颜色选择与背景色相近但略有区分的浅灰色系，如#E5E7EB，避免边框过于突兀干扰信息阅读。当卡片处于选中或hover状态时，可将边框颜色加深或更换为主题色，如#3B82F6，以明确交互状态。阴影：阴影效果应遵循“轻量、自然”的原则，避免过于厚重的阴影导致界面杂乱。移动端卡片阴影可设置为0px2px8pxrgba(0,0,0,0.08)，平板端和PC端可调整为0px4px12pxrgba(0,0,0,0.1)。在电商商品列表中，商品卡片通过添加适当阴影，能使其在白色背景上更加突出，提升用户的点击欲望。二、信息层级与排版设计（一）信息优先级划分卡片内信息需根据重要程度进行层级划分，确保用户能快速获取核心信息。一级信息：为卡片中最关键的内容，如商品名称、新闻标题、用户姓名等，应采用较大字号、加粗字体进行突出显示。字号一般设置为16px-18px，字体选择无衬线字体，如思源黑体、微软雅黑等，保证在不同设备上的显示清晰度。例如在外卖APP中，商家名称作为一级信息，字号设置为17px并加粗，让用户在浏览列表时能第一时间识别。二级信息：是对一级信息的补充说明，如商品价格、新闻发布时间、用户简介等，字号设置为14px-16px，字体常规显示。在电商商品卡片中，商品价格作为二级信息，字号为16px，颜色可采用与主题色相近的橙色或红色，吸引用户注意力。三级信息：为辅助性信息，如商品销量、新闻阅读量、用户粉丝数等，字号设置为12px-14px，颜色可选择浅灰色系，如#9CA3AF，避免干扰核心信息。在社交类APP的用户卡片中，用户粉丝数作为三级信息，字号为13px，颜色为#9CA3AF，既提供了额外信息，又不会影响用户对一级和二级信息的关注。（二）排版对齐方式统一的排版对齐方式能提升卡片的整洁度与可读性，避免视觉混乱。左对齐：是最常用的对齐方式，适用于大多数文本信息，如标题、描述性文字等。左对齐符合用户的阅读习惯，能引导用户视线从左到右自然流动。在新闻资讯卡片中，新闻标题和内容摘要都采用左对齐排版，方便用户快速阅读。居中对齐：适用于卡片中的核心数据、图标等元素，如统计数字、头像等，能突出视觉焦点。在数据可视化类应用中，数据卡片中的关键指标数字常采用居中对齐方式，配合较大字号和加粗字体，让用户一眼就能获取核心信息。右对齐：主要用于价格、时间等具有明确指向性的信息，方便用户快速比较和识别。在电商商品卡片中，商品价格常采用右对齐方式，与左对齐的商品名称形成对比，增强信息的层次感。（三）行高与字间距合适的行高与字间距能提升文本的可读性，避免文字过于拥挤或稀疏。行高：一级信息行高设置为1.3-1.5倍字号，二级信息行高设置为1.4-1.6倍字号，三级信息行高设置为1.5-1.7倍字号。例如一级信息字号为16px时，行高可设置为22px-24px；二级信息字号为14px时，行高设置为20px-22px。字间距：字间距一般设置为0.5px-1px，对于较大字号的文本可适当减小字间距，较小字号的文本可适当增大字间距，以保证文字的清晰度和美观度。在一些标题类文本中，字间距可设置为0.8px，使文字更加紧凑；而在小字号的辅助信息中，字间距设置为1px，提升可读性。三、色彩系统设计（一）主色调选择主色调应与产品整体品牌风格和定位相契合，传递产品的核心价值与情感诉求。品牌延续：如果产品已有明确的品牌色，卡片主色调应直接采用品牌色，确保视觉风格的统一性。例如腾讯系产品常采用蓝色作为品牌色，在其各类应用的卡片设计中，也多以蓝色为主色调，如微信公众号文章卡片、QQ音乐专辑卡片等。场景适配：根据不同的应用场景选择合适的主色调。在金融类应用中，常采用蓝色作为主色调，传递专业、安全、可靠的情感；在健康医疗类应用中，绿色是常见的主色调，象征着生命、健康与希望；在创意设计类应用中，可采用鲜艳的橙色、粉色等作为主色调，激发用户的创造力和灵感。（二）辅助色运用辅助色用于突出重点信息、区分不同状态和增强视觉层次感，需与主色调搭配协调。强调色：用于突出卡片中的关键信息，如按钮、标签、价格等，颜色选择应与主色调形成对比，同时保持整体色彩的和谐。例如在以蓝色为主色调的电商APP中，可采用橙色作为强调色，用于商品价格、“立即购买”按钮等元素，吸引用户注意力。状态色：用于表示卡片的不同状态，如正常状态、选中状态、禁用状态、错误状态等。正常状态下卡片背景色为白色或浅灰色，选中状态可采用主色调的浅色调作为背景色，禁用状态可将卡片元素颜色调暗，错误状态可采用红色提示信息。在任务管理系统中，任务卡片的正常状态背景为白色，选中状态背景为#EFF6FF（蓝色浅色调），禁用状态下卡片文字颜色变为#9CA3AF。（三）中性色搭配中性色包括白色、灰色、黑色等，用于卡片的背景、边框、文字等基础元素，起到平衡和调和色彩的作用。背景色：卡片背景色一般采用白色（#FFFFFF）或浅灰色（#F9FAFB），白色背景简洁干净，适合大多数场景；浅灰色背景则能减少视觉疲劳，长时间浏览更舒适。在阅读类应用中，书籍卡片常采用白色背景，营造清晰的阅读氛围；而在一些工具类应用中，设置卡片可采用浅灰色背景，降低视觉干扰。文字色：文字颜色根据信息层级和重要程度进行区分，一级信息采用黑色（#111827）或深灰色（#374151），二级信息采用中灰色（#6B7280），三级信息采用浅灰色（#9CA3AF）。同时，需确保文字颜色与背景色有足够的对比度，对比度应达到4.5:1以上，以满足无障碍设计要求。边框与分割线色：边框和分割线颜色选择浅灰色系，如#E5E7EB，既能区分不同元素，又不会过于突兀。在一些信息较多的卡片中，可使用分割线将不同模块分隔开，分割线颜色与边框颜色保持一致，增强卡片的整体感。四、图标与图片设计（一）图标规范图标在卡片中起到辅助说明、引导操作的作用，需具有清晰的辨识度和统一的风格。风格统一：卡片中的图标应采用统一的设计风格，如线性图标、面性图标、扁平图标等，避免不同风格的图标混合使用。例如在企业办公系统中，所有功能图标都采用线性风格，线条粗细统一为2px，确保视觉一致性。尺寸规范：图标尺寸根据卡片大小和使用场景进行调整，一般移动端图标尺寸设置为24px-32px，平板端和PC端设置为32px-48px。在社交类APP的用户卡片中，头像图标尺寸常设置为48px，与其他信息元素形成合理的视觉比例。色彩搭配：图标颜色应与卡片整体色彩系统相协调，可采用主色调、辅助色或中性色。对于功能图标，如“编辑”“删除”“分享”等，可采用中性色，避免过于鲜艳的颜色干扰信息阅读；而对于状态图标，如“已完成”“待处理”“异常”等，可采用不同的辅助色进行区分，提高信息识别效率。（二）图片规范图片是卡片信息展示的重要组成部分，需保证图片质量清晰、内容相关且符合版权要求。图片比例：根据卡片类型和内容选择合适的图片比例，常见的比例有1:1、4:3、16:9等。在电商商品卡片中，商品图片常采用1:1比例，能完整展示商品全貌；在新闻资讯卡片中，新闻图片多采用16:9比例，符合用户的视觉习惯，能更好地呈现新闻场景。图片质量：图片分辨率应不低于72dpi，确保在不同设备上都能清晰显示。同时，需对图片进行压缩处理，控制图片文件大小，避免影响页面加载速度。例如在旅游类APP中，景点展示图片分辨率设置为96dpi，文件大小控制在100KB以内，既能保证图片清晰度，又能提升页面加载效率。图片内容：图片内容应与卡片文字信息紧密相关，能够直观地传达卡片核心内容。在美食推荐类应用中，美食卡片中的图片应展示美食的诱人外观，配合文字描述，吸引用户的食欲。此外，还需注意图片的版权问题，避免使用侵权图片。五、交互设计规范（一）hover效果当用户鼠标悬停在卡片上时，通过视觉反馈增强交互体验，提示用户该卡片可操作。背景变化：可将卡片背景色调整为主色调的浅色调，如#EFF6FF，或增加背景透明度，使卡片与其他未选中卡片形成区分。在企业管理系统的数据卡片中，当鼠标hover时，卡片背景色变为#EFF6FF，让用户明确感知到当前选中的卡片。阴影变化：增大阴影的模糊半径和扩散范围，增强卡片的立体感，如将阴影从0px2px8pxrgba(0,0,0,0.08)调整为0px4px12pxrgba(0,0,0,0.12)。在电商商品卡片中，hover时阴影效果增强，能突出商品卡片，吸引用户点击。缩放效果：可对卡片进行轻微的缩放，如放大至1.02倍，营造卡片“浮起”的视觉效果。在创意设计类应用中，作品展示卡片常采用缩放效果，当用户hover时，卡片放大1.02倍，增强交互的趣味性和吸引力。（二）点击效果点击卡片时应提供明确的视觉反馈，告知用户操作已生效。状态切换：如果卡片有选中和未选中两种状态，点击后应立即切换状态，如改变边框颜色、背景色等。在任务管理系统中，点击任务卡片后，卡片边框颜色变为主题色，背景色变为浅灰色，明确表示该任务已被选中。页面跳转：当点击卡片需要跳转到新页面时，可添加过渡动画，如淡入淡出、滑动等，提升页面切换的流畅性。在新闻资讯类应用中，点击新闻卡片跳转到新闻详情页时，常采用淡入淡出的过渡动画，使页面切换更加自然。弹窗展示：对于一些需要展示详细信息的卡片，点击后可弹出弹窗，在弹窗中展示完整内容。在企业客户管理系统中，点击客户卡片可弹出客户详情弹窗，显示客户的详细信息、交易记录等内容。（三）加载与错误状态在卡片数据加载过程中或出现错误时，应提供相应的状态提示，提升用户体验。加载状态：可采用骨架屏、加载动画等方式提示用户数据正在加载中。骨架屏是一种灰色占位符，模拟卡片的大致结构，让用户对即将展示的内容有一个预期；加载动画可采用旋转的圆圈、跳动的点等形式，增加页面的活力。在社交类APP的动态卡片加载过程中，常使用骨架屏展示卡片的基本框架，同时配合加载动画，让用户感知到数据正在加载。错误状态：当卡片数据加载失败或出现错误时，应显示错误提示信息，如“加载失败，请重试”，并提供重试按钮。错误提示信息应采用友好的语气，避免使用过于专业的技术术语，让用户能够轻松理解问题所在。在金融类应用中，如果账户信息卡片加载失败，会显示“网络异常，无法获取账户信息，请点击重试”的提示，并提供重试按钮，方便用户重新加载数据。六、特殊场景设计规范（一）多卡片布局在需要展示多个卡片的场景中，应合理规划卡片的排列方式和间距，确保整体布局整齐有序。间距设置：卡片之间的水平间距和垂直间距应保持一致，水平间距设置为16px-24px，垂直间距设置为20px-32px。在电商APP的商品列表页中，商品卡片之间的水平间距为20px，垂直间距为28px，使整个页面布局显得紧凑而不拥挤。对齐方式：多卡片布局时，应保证卡片的顶部、底部或中线对齐，避免出现参差不齐的情况。在新闻资讯类应用的首页中，新闻卡片采用顶部对齐方式，让用户视觉上更加舒适，便于快速浏览新闻标题。响应式布局：根据屏幕尺寸和设备类型自动调整卡片的列数和尺寸，确保在不同设备上都有良好的展示效果。在企业管理系统的数据分析页面中，当屏幕宽度大于1600px时，卡片以四列布局呈现；当屏幕宽度在1200px-1600px之间时，以三列布局呈现；当屏幕宽度小于1200px时，以两列布局呈现，充分利用屏幕空间，提升信息展示效率。（二）卡片折叠与展开对于内容较多的卡片，可采用折叠与展开的方式，在有限的空间内展示更多信息。折叠状态：折叠状态下只展示核心信息，如标题、关键数据等，同时提供展开