我们对于卡片式设计其实并不陌生，随着互联网及移动端的不断发展，我们见到使用卡片式的场景也越来越多，常常被用到APP的页面设计、详情页、企业网站等领域。今年火爆全网的“灵动岛”其实就是采用卡片式设计。
这篇文章我会从卡片样式的定义、设计的作用、卡片样式的类型、使用技巧、注意事项五个方便，给大家分析一下卡片式设计的要领，希望对各位有所帮助。
1.什么是卡片设计
卡片式设计可以说是这几年移动端产品中非常常见的设计样式了，在我们常常接触的平台上都都有广泛的运用。卡片试设计带有分割属性，这个可以让画面更具有层次感，让信息更加流畅。
这个板块我会通过两个方面跟大家分享什么是卡片式设计；
设计源于日常其实在互联网时代前，我们生活中的卡片也是无处不在的，比如身份证、不干胶贴纸、交通卡、会员卡等这一类生活常见物品都是以卡片的形式存在的。不同的卡片承载了不同的信息，它的便携性以及简洁性为后续引用到线上的界面设计中，起到了非常不错效果。
互联网中的卡片式设计随着线上平台使用的普及，卡片设计的优势逐渐地体现出来，成为了当今最流行的设计趋势，因为它能让画面信息变得有层次，从视觉、设计以及用户体验上看，都有着很好地优势。
卡片式设计其实就是将文本内容与图片（图形）进行整合，让画面变得更加具有个性化与美观兼备，同时让信息传达得更加直观、流畅。
2.卡片式设计的作用
卡片式设计在现阶段深受设计师的喜欢，他能运用在各大平台上，其中它起到的作用也是非常大的，为了方便大家理解，我整理了一下四个方面；
架构清晰卡片能在显示空间有限情况下将不同类型的信息内容通过逻辑进行排列，使得页面架构更加清晰地呈现，加上自带的分割属性，使得它本身就像个容器，能让信息快速的突出重点，让复杂的信息简单化。
卡片式设计布局简洁整齐，这个信息架构有利于用户浏览，方便用户能快速得找到自己想要的内容，节省浏览时间成本。
场景拓展卡片设计能在画面信息内容增加或者减少的情况下依然能够形成一个整体，视觉呈现也成体贯通没有违和感。手机上的小组件就是一个很好地例子，小组件卡片在不同规格的小卡片中显示的内容度不会偏离主题，只是增加（减少）了内容，用户可以根据自己的习惯去设计不同规格的卡片。
突出重点卡片设计能通过分割去烘托画面的重点，能在电商的活动区域以及APP的瓦片区域得到很好地运用，我们在电商平台的活动区以及APP的看到有很多以红包形式的卡片，即便在画面内容比较丰富的情况下，用户依然能够找得到画面中的重要信息。
兼容性强其实我们可以将卡片看作一个容器，我在上面就提到过在信息时代之前就有卡片设计的存在，所以它的兼容性是非常强的，因为它可以等比例的缩放，从而适应任何载体，在实体印刷、移动端、桌面端等复杂的尺寸下都可以很好地适应，能让同一个画面在不同的载体上都有一致性的视觉体验。
卡片式设计其实就是能让模块化的信息变得有条理，每一个卡片代表一个信息，用户理解起来也更加方便，不会显得混乱。
3.卡片式设计的类型
卡片式设计在画面中能够起到很好地分割以及烘托的作用，让复杂的画面视觉变得井井有条，在画面展示中它是可以以各种各样的形式呈现的。
圆角矩形这种类型在画面中非常常见，整体设计以柔边圆角加上阴影，四周有自然的留白，让卡片在页面中的存在感异常强烈，画面层级也非常清晰。
悬浮窗悬浮窗也叫悬浮型卡片，顾名思义就是让卡片内容悬浮在整体画面之上，可以作为临时或者长期固定显示。
很多APP中的搜索栏和会员页面就常常用到了这种形式的卡片设计，这里特别提一下会员页面，这个设计形式很好地模拟了实体的卡片设计，提升用户的沉浸感。
异形胶囊现在有很多的卡片式设计都突破了规则图形的限制，采用了异性胶囊的形式呈现，是的画面美感更好，让画面视觉更加有冲击力，从而吸引用户点击进行下一步操作。
4.卡片式设计的缺点及建议
卡片设计应该突出一个核心内容很多时候，我们会觉得所有内容都很重要，都要做重点的突出，殊不知所有内容都重要就显得页面没有重点，让用户产生的困扰就更多，所以我们在做卡片式设计是切记要突出一个重点，以便用户能够快速的捕捉想要的内容。
文字多不适合使用卡片式设计新闻咨询类的阅读用户需要沉浸感，卡片形式的设计会一定程度的影响展示的内容，减少空间的利用率，所以想类似长文类的详情页，是建议取消卡片式设计的，一方面减少元素对用户的干扰，另一方面是可以提升画面的利用率。
避免卡片式设计排版过于拥挤卡片设计有着自己独特的空间感，但是基于它的分割属性，在设计时就需要对页面的内容进行归纳，避免卡片过多造成空间拥挤，从而影响用户体验。
5.总结
卡片式设计独有的空间性与分割性，使得它在现如今能快速的流行并普及，尤其是它对载体的兼容性，那种跨设备、跨载体、跨屏幕的一致性能为用户提供很好的服务。
卡片式设计不仅是一种设计形式，更像是一种设计语言，可以通过各种各样的方式进行组合，给用户带来沉浸式的体验。
转载请注明：http://www.0431gb208.com/sjslczl/5758.html
