网页卡片设计页 第1篇
卡片式设计多采用图像与文字说明相结合的方式将信息传达给用户，在有限的矩形空间中建立了无限的可能性。
卡片式的应用场景主要有以下几种：瀑布流、信息流、悬浮卡片、tips提示卡片。
流式布局的出现让单屏范围内显示大量的信息内容，而内容较多的状况下，应用卡片式设计方案不错的对内容进行规划。
卡片式的feed流设计方案是一种十分普遍的设计方案，Feed流做为一种长内容的展示方式，用户必须长期的拖动看内容并挑选合理信息内容，卡片式设计方案非常好的处理了内容与内容间的区分，让客户在长显示屏拖动中依然能够非常好的识别每一块的内容。
悬浮卡片又可以分为动态悬浮卡片和静态悬浮卡片两种类型。悬浮卡片可以悬停在某一固定位置，无论页面上下滑动到什么位置，用户总能第一时间对他进行操作。一般用在重要级别较高的功能操作上。
做为非页面固定不动内容，卡片式设计方案能够 让tips提示设计方案越来越随意，在合乎客户体验的基本上，它能够出现在一切用户要想它出现的位置。
网页卡片设计页 第2篇
食品、房地产、新闻、社交媒体或时尚网站，都在网页设计中使用卡片。这些包含信息和图像的小矩形，通常是交互式的。卡片不仅仅是设计，还有功能，卡片需要包含能够吸引更多访客参与的信息。
卡片很简单。只有一个图像或图标，以及一些基本信息，如标题、用户名，有时还有一些文字。它们可以有多种形状、颜色和形式，但很简洁。
卡片非常灵活。但仍然可以提供一致且令人愉悦的用户体验。它们功能强大且具有视觉吸引力，可快速、轻松、高效地传递您的信息和信息。
网页卡片设计页 第3篇
这里有一些提示可以帮助你完成这项工作：
留白空间
为了突出每个元素并为布局增添清晰度和美感，需要使用大量的留白空间。当必须在有限的空间中显示链接、标题、CTA 按钮和图像时，在每个元素周围留出大量空白空间是至关重要的。因为没有混乱，它可以帮助访问者专注于每张单独的卡片。将留白视为每个元素的缓冲区，它将有助于将焦点指向不同的元素，并使它们易于理解。
最少的信息
确保一张卡上只有一条信息，这比把信息塞满更有意义。卡片使设计具有凝聚力，并使各种类型的内容能够在同一空间中正常运行，并看起来井井有条。卡片还允许访问者决定他们想要消费和分享的内容。
注重细节
个性化
虽然卡片是有规划的，但这并不意味着它们必须单调。添加有助于访问者识别业务的内容，如颜色、字体、动画等任何有效的元素。
如Pixso社区中的NFT贸易平台概念网页设计，使用了黑色线框把卡片包围起来，周边还有随性的手绘线条，在吸睛的同时非常彰显个性。
网格
使用网格将帮助您正确对齐所有内容并确保设计的一致性。网格还有助于根据查看的屏幕尺寸无缝地重新排列内容。换句话说，网格对于创建响应式设计非常有用。当创建具有对比度和一致间距的网格框架时，会使页面清晰、易于理解且具有视觉吸引力，从而不会产生额外的包袱或混乱。
抓住访客的眼球
图像对于基于卡片的设计至关重要。不言而喻，你需要包含有吸引力、引人注目的图像，即使它们必须放置在一个狭小的空间内。当然，如果没有这样的图像，可以采用非常清晰、引人注目的标题、动画或艺术插画等，这将吸引访问者并促使他们参与。
排版
在整个布局中使用相同的字体以保持一致性，当然也可以改变不同类型信息的大小。使用易于阅读的颜色，并将其与背景颜色进行对比。选择一种简单的字体显示在图像上或附近，以免夺走图像的注意力。
时尚类产品网站非常注重排版，产品照片与标题粗狂字体、正文形成强烈对比，可以说是让人过目不忘。
给访客惊喜
用户喜欢积极的惊喜。尝试添加一些异国情调的细节，如3D效果、悬停效果、倾斜边缘或颜色叠加，为设计增添一些魅力。为了保持单个卡片的视觉平衡，可以尝试仅将这些效果添加到内容的重要部分。
可用性
网页卡片设计页 第4篇
响应能力
它们有助于根据屏幕尺寸快速重新定位和重新排序内容。因此，无论使用何种设备，它们都有助于创建响应式设计并提供无缝的浏览体验。
整洁
卡片有助于整齐地组织网页上的内容并避免混乱。
可读性
卡片包含最少的信息，使它们更容易与社交媒体互动。
灵活的
这种设计几乎可以用于任何类型的内容。因为有固定的设计规则，卡片可以让你的创造力充分发挥。
易于消化
清晰的信息和相关图像、视频或动画使卡片易于使用和理解。
方便使用
上述所有功能综合起来使这种风格非常用户友好，同时可以转化为更大的访客参与度和转化率。
网页卡片设计页 第5篇
卡片的设计风格有很多变化。事实上，自从卡片第一次爆红以来，已经发生了重大的转变。让我们来看一下：
网格、砌体卡设计
这种风格由布局中间隔良好或完美连接的块组成。一些设计具有交错的容器类型图案，而其他设计则以传统的网格样式显示图像或图形。
平面设计
这些卡片由Microsoft首次推出，充满活力且厚实，并基于Metro字体设计语言。然而，如今它们包括渐变、阴影和拟物化设计手法，使描绘的对象与所代表的现实生活中对象相似。
Pin设计
主要用于WordPress主题。当他们第一次出现时，他们只有非常少的内容和链接。如今，它们已经演变成包含更多信息、视频内容、图像、表格甚至社交共享工具。一些界面也有带有微交互的卡片，比如来自Facebook的通知。
杂志风格
由于卡片种类繁多，因此需要强烈的视觉平衡。卡片通常包含一张图片和一些文字，这些文字会展现其他页面或网站上的更详细信息。显然，它最常被新闻和杂志网站使用。然而，它同样适用于内容繁重的博客、作品集以及经常更新的网站。
网页卡片设计页 第6篇
在不久的将来，我们还会看到支持丰富多媒体内容的卡片，以及更详细的元素，如自动更新内容。视频可能会取代图像，它们可能会变得更具吸引力和互动性。我们也很可能看到卡片的尺寸越来越大，允许使用复杂的排版和更多的细节。
卡片可能会演变和改变，但这似乎并不是一时的时尚。它对用户和企业的许多优势意味着他们会留下来。当然，选择好用的工具能让你无惧改变，功能强大的Pixso将为你提供给一体化UI/UX设计，融合交互+视觉的能力，让你的卡片设计更加出众！
网页卡片设计页 第7篇
卡片指的是含有图片或文本信息的容器，它将我们需要的信息归纳在一起、并形成独立的个体，以至于后续被引用到线上界面中，同样具有非常不错的信息归纳效果。
在界面设计中，我们时常使用卡片的样式去做信息分类，再加上卡片的延展性、承载性、便于设计等特点，受到大量UI设计师的青睐。站在用户的角度上，一个个卡片把内容分类清晰，在阅读信息时感受到逻辑清晰，页面干净，很好的提升使用的愉悦感。
网页卡片设计页 第8篇
讲了那么多页面卡片式设计的优点，那么在日常的设计工作中我们该怎么去设计卡片这个容器才能更好的发挥卡片的优势呢？下面来聊聊卡片的设计方法。
为了使页面在视觉层面上更干净、简洁，无特殊颜色要求下通常我们会给卡片填充纯白色，那么就会出现背景和卡片融合的情况，卡片也就失去了它最重要的分类信息的作用。增加适当的阴影或者填充颜色的渐变，使其与背景的纯色区分开。
适当的圆角度数会使卡片变得更圆润、可爱，与用户在视觉上拉近距离；可以规范一个单位原角度，在这个基础上倍数去选择原角度值，让所有的卡片圆角更统一有序；
投影色和投影数值很重要，稍不注意就会让页面看起来很脏或者割裂感太强，所以用轻和淡的方式去设置投影色和投影数值更符合当下的视觉流行趋势。
网页卡片设计页 第9篇
在扁平化设计兴起和最初的Macintosh图形界面问世之间的近30年，也就是拟物化设计从萌芽、发展、成熟到转型的近30年。在上世纪80年代，几乎所有的研究机构、3D制作公司关注的焦点全部集中在怎样提高3D图形的真实感上。
随着技术的成熟，设计师和美工们争相绘制出越来越逼真和复古的图标，拟物化的设计在2012年左右几乎已发展到了极致--当所有肌理和装饰已经精细到不能再精细，所有光影和细节已经逼真到不能再逼真，技术的炫耀已经过时，逼真的效果渐渐让我们的双眼疲惫和厌倦。
不仅如此，用单一的逼真设备作为图标的做法越来越行不通，因为单一的设备只能喻指单一的功能。传统设备的更迭和偏执拟物情节交织在一起，很可能造成一种恶果：已被淘汰很久的设备未来依旧被用作图标设计的主要题材。比如用指南针喻指地图、用磁带喻指录音、用唱片机喻指音乐，都会造成识别功能的断代，因为年轻人们根本都没用过，甚至都不知道它们是什么。
在近十几年中，互联网在快速发展，花大量的时间成本去扣图标的细节，已经满足不了软件的快速开发、快速迭代的发展速度。
2010年微软WindowsPhone的发布，微软在Zune界面设计的基础上进行改善，创造出一种简洁明亮、扁平磁贴、极具现代感的Metro风格，这种风格对移动界面的影响可谓深远。WindowsPhone的大面积多色方块组成的动态磁贴和大字体组成的Metro界面，已经将扁平化的设计发挥到了相当的高度，在交互和层级上也极力拉近与用户之间的距离，这样的理念也是超前的。
不仅是移动终端，在PC操作系统上，Metro风格也被采用在2012年10月发布的Windows8和之后的Windows10上。尽管在应用市场兼容等问题上饱受诟病，但微软走出的扁平化和Metro风格还是饱受欢迎，以至于遭到了苹果公司随后的效仿。
2013年9月苹果公司发布iOS7是iOS操作系统面世以来在用户界面上做出最大改变的一次升级，它全面抛弃了拟物化的设计，将所有图标和界面去掉细节、质感、光影，即所谓_压扁_，可谓颠覆性的调整。
苹果在全球庞大的粉丝群里力量是不容小觑的。国内主流网路产品如腾讯QQ、360、新浪微博、包括后来居上的微信、操作系统如魅族的、小米的MIUI6等，都纷纷开始采用扁平化的设计风格，在自己的产品界面甚至图标和logo上都一改以前的繁琐，大举_压扁_；更加扁平化的设计已经越来越占领了我们的全部视野，为全球掀起扁平化设计的热潮推波助澜。扁平化设计成为了在移动互联和界面设计领域被谈及最多的词汇之一。
随着扁平化设计席卷整个软件行业，卡片式设计也随之孕育而生，其实早在ios7的系统中我们就能看到最早的卡片式设计界面。下面我们来聊聊什么是卡片。
网页卡片设计页 第10篇
在卡片式设计中，你可以把每个卡片看成是独立的盒子，把同类型的信息放在同一个盒子中，每个盒子放入不同的信息，形成一个分类清晰的信息集合；想想重庆的九宫格火锅，是不是一下变得更立体起来了，这样就自然地做到了信息的整合和分类。
清晰的信息分类让用户在浏览页面时减少思维上的判断停留，减少因判断带来的疑惑感。
如上图所示，我们在做整个APP或者系统的组件库时，往往也是使用卡片的样式去承载每个分子组件；
从左到右依次是顺丰小程序、懂车帝APP、站酷APP的页面样式设计，卡片式的设计清晰明确的承载信息，做到一目了然的体验感。
卡片式的设计一般是规则的矩形容器，随意的拉伸和压缩对内容的扩展就变得十分有利；卡片的这种延展性，对设计师来说设计门槛更低，对用户真实生活化的设计可接受度反而更高。
我们常见的卡片内容扩展样式有很多，比如最常见的banner的滑动切换、卡片内的内容滚动、通知条的展开等。
上图是喜马拉雅APP，首页的banner在X轴上可以自动和手动的左右切换，切换的同时banner上的位置标识点也跟着前后移动，瞬间给用户呈现出可延伸的空间感；
卡片中内容的扩展延伸；在卡片中内容的初始状态下，卡片的最右边对内容形成一种切割的样式，这是在告诉用户，我右边可是还有东西的哦，当这种样式的展示给用户形成一种视觉习惯时，那么每次看到卡片切割内容时，用户会自然地向左滑动，查看更多延伸的内容；
正因为卡片是一个内容的盛放容器，所以它有一个特别重要的特性是它可以自由变换大小，这使得它在跨终端的响应中表现出色。在不同的平台展示，由于分辨率不同，卡片能自适应地展示。
卡片设计由于卡片本身的上下Padding（内边距）和卡片间的Margin（外间距），往往带有很充足的空间留白。加上通过轻投影形成合理的层次感，看上去既自然又舒适，而且对于接近真实世界的设计，人会自然而然产生熟悉感和亲切感。所以从视觉体验上，卡片式设计也是完胜。