首页设计方案中卡片式设计的优点（标题：原型设计中卡片式网页设计技巧有哪些）

本文目录

• 标题：原型设计中卡片式网页设计技巧有哪些
• 问卷设计中,卡片法的优缺点是什么
• UI设计中图片流和卡片流有什么区别
• 卡片式布局界面的小技巧
• 浅谈UI设计中的卡片式设计

标题：原型设计中卡片式网页设计技巧有哪些

详细滴卡片设计技巧：

卡片是我们随处可见的小UI组件，原因很简单，它们占用的空间非常小，并且可以显示足够的信息，通常还有1-2种选项。

为什么使用卡片：

1. 卡片能够存在和流行，因为它们本身拥有简约的设计和良好的可用性，卡片将会继续流行。

2. 卡片作为切入点，可以进一步展示更详细的信息。

3. 卡片在视觉上也很令人愉悦，因为在大多数卡片上，卡片的图像为卡片赋予了风格。

4. 它们自动适应Web和移动视图。

5. 没有太多认知负荷，毕竟卡片无处不在，用户早已经很熟悉。

6. 它们保持界面井然有序，且非常简约。

1.了解构造

UI中的“卡片”就相当于物理世界的卡片。它们可充当容器，将内部信息组合起来。

该原型使用墨刀设计

2.阴影/描边

阴影/描边有助于呈现出卡片的形态，至于你是想使用阴影还是描边，取决于UI的风格。

该原型使用墨刀设计

3.背景

卡片的好处在于：只要保证视觉上没有太繁多的对比，卡片的背景你可以随便“玩”。

该原型使用墨刀设计

4. 文本大小和重量

当字体较小时，用户会倾向于“细读”；而字体较大时，用户更倾向于“跳读”。如果字体粗细使用错误，会影响可用性和美观性。

5.对比度

卡片确实很小，因此对比度在分割信息和优先级方面起着重要作用。

6. 按钮

可以使用普通按钮、文本按钮或图标。在垂直卡片上，按钮通常放置在底部上；在水平卡片上则是在右侧或底侧。

7.间距和空隙

在可聚焦元素之间添加适当的空隙，也留足够的间距来对内部信息进行分组。

8.对焦和悬停。

要使卡片在鼠标悬浮时更明显，通常使用较暗的阴影或上升一点高度。

本文转自由墨刀翻译自Dorjan Vulaj 的8 rules for a perfect card design。

望采纳 谢谢~

问卷设计中,卡片法的优缺点是什么

优点：卡片法比点线法准确，比过录法和折叠法简便，可以保证汇总质量和提高时效性。缺点：卡片法一般在整理大规模专门调查材料时应用。如果调查资料不多，采用卡片法就显得不经济。卡片法遵循归纳法则，由个别问题开始，然后到部分，最后到整体。而框图法遵循演绎法则，先从问卷整体开始，然后到部分。

UI设计中图片流和卡片流有什么区别

可以说现如今的移动端UI设计中，卡片式设计撑起了半壁江山，它随性自由又充满了逻辑和组织性，它不仅流行着，而且还正在变得更加流行。它长盛不衰的秘密到底何在？读下去~
个性化的用户体验是目前网页和APP设计的大趋势。个性化的新体验大多建立在单独内容的聚合体之上，而多类型的内容想要聚合起来，卡片式的界面则是最合适的载体。
如今你所看到的UI界面设计，卡片式设计几乎无处不在，从新闻类站点到游戏界面，从物流APP到社交媒体，等等等等。今天的文章将会详细解释卡片式设计对于设计师的意义，以及常见的卡片式设计的功能与特性。

卡片式布局界面的小技巧

正确认识卡片式设计，什么是卡片、总结卡片优势、卡片正确设计知识通过设计两个案例进行讲解，卡片在运用时的技法，希望能帮助大家。

无论是WEB还是APP卡片式设计运用的比较多，很多UI设计师比较偏爱这样的表现，卡片式设计会给人一种视觉上的享受，也能对于界面具有层次感。但往往在卡片设计中有一些技法还是需要了解，不能因为卡片式设计而卡片式设计，要能更好的应用到界面场景中。希望在这次分享中一些知识点能帮助到大家，之后的几篇系列文章中，顺叔会从界面中比较趋势的设计技法进行分析，希望能帮助到一些设计的小伙伴。

教程前的引言

卡片式设计这几年比较流行，同样这样的设计表达也是个趋势，应用在APP PC界面中至今还流行着，从事UI设计的都会知道卡片式设计，具有把内容整合模块化，从视觉，个性化体验上进行呈现，是设计师在设计时常用的一种表现，同样也具有独特的创新概念。

在一些项目中，一些客户会说这个设计的APP界面有点太白，没有层次感怎么办，那这时你应该和客户说在APP设计中运用了现在比较流行的一个表现手法，卡片式设计，可以解决在画面中有个性化 、变化、 层次感的设计。那客户又问什么是卡片式设计呢？

无处不在的卡片设计具有个性的美感和很好的易用性，是以文字标题，小标题，图形或图片组成的模块化，以块状形式规整的整合内容，让内容更规整化，视觉上更个性化，也是操作上快捷的内容信息入口。更直观的表达内容信息和快捷跳转操作。成为当今在设计中一个比较流行趋势，而卡片在设计中也占用一定的优势，让整体更加的有层次感，在运用起来也比较方便，从视觉、体验、交互都具有不错的优点。

为了这个文章特意设计了两个案例，通过这两个案例进行一些讲解。请见下图：
无论是大平台还是小平台的产品都会运用这样的卡片式，跟风式设计趋势，也让卡片式设计成为了一个现在常用的优势，不过卡片式设计的确有很好的效果。
具有一定的层次感，能在页面版式中起到设计上的不同，个性化变化，页面层次感区分强烈，能更好的体现提炼出内容。

卡片式设计以图片、图标 、LOGO、 标题、 整合到一起 以块状的形式在界面中展示，更规整的排版呈现。虽然内容多会导致页面乱，一个模块包含内容之后就会规整不少，也给页面设计上带来了更好的视觉。

卡片式给整个页面会增加视觉上的体验，特别那种大图片卡片式更具有视觉上的冲击力，背景衬托出前景卡片式设计。同样对卡片式也感觉到舒适感。卡片式设计还是需要根据整个布局、产品需求 、功能进行设计。以达到最好的用户体验、视觉体验。

不要为了卡片设计而卡片设计。

卡片式设计在易用性和灵活性上比较高，在响应式设计中同样应用的也比较多一些。能更好的有序排列。

简约设计会更显得品质，不需要过多的进行装饰，哪怕就是一个白色的色块，上面点缀有色彩的图标和标题副标的变化，也会觉得显得高大上，就算是一个带有颜色的色块卡片，也无须过多的设计 内容上的标题 、图标、 按钮就足以支撑起卡片。

在卡片式的设计中会有一些动效交互，比如整体卡片放大、缩小 、左滑、 右滑，可以整模块化滑动 缩放。整体效果增加了不错的视觉交互体验。

一般在界面设计中卡片的存在的意义和表现手法都是什么样的呢，下面为大家举例了几种常用的正确的设计表达姿势。希望小伙伴在设计的同时有所灵感和参考，把一些表现手法加入到自己的设计中，适合才最重要。卡片式设计还是要根据整个风格和整个布局而进行展示，在做进一步的对比和布局中以最好的效果为最终展示方式，总结分析几个常见代表例子，如有不全请讨论补充，下面就是一些例子：

以色块为主体并用现在比较流行的渐变色组成，其中四边为圆角，同样色块下边阴影衬托出主题，这个是在卡片中设计比较常见的运用手法，卡片的长高在设计中也是根据结构，内容功能而进行设定。正方形，长方形都是一个表现得手法，在色块上面标题文字，图标，图形是整个卡片的布局的形式，无非就是左右布局和上下布局

应用场景：卡包、天气、类别、入口、优惠劵，卡劵

这种形式共同点都是在头部C位出现的卡片式设计，其中承载着标题，副标题，以及图文版式，不难发现，如果图片有颜色，那么下面是白色底，这样在白底上面色块的出现还是比较简约凸显卡片，如果背景有颜色，卡片也有颜色那么卡片的凸显程度就不会那么强，图二很多在会员卡设计中常用的比较多，也比较简约，另外两个共同特点背景有颜色，一般底部背景颜色就是整个界面的主色调，背景有色块，上面就用白色卡片，卡片上方标题、 文字、 图片呈现。只不过排版的方式有所不同而已，在很多APP设计中，这样的表达也很多，通过主色调可以很融合的把上面的状态栏，导航栏融为一体视觉上统一性，底部背景颜色延续下来，上面凸显白色卡片，这样更具有视觉感和层次感。白色的卡片不需要过多的修饰，更能体现的上面的文字和图片。

应用场景：会员卡，滑动卡片，图文标题，入口

这种形式上图下文字，或者是上标题，下图片的形式，这种形式特别在图片素材的选择上尤为重要，有视觉效果好的图片通过剪切，处理，合成，摄影，插画等等方式，出现的图片质量上好的话可以带动整个设计的逼格，通过有效的图片传达，文字传达，让用户更清晰的了解。这样的形似一般在入口或者列表的形式出现的比较多，同样也能体现出整体化和视觉化

应用场景：滑动卡片，图文标题，入口，列表

大图卡片式，一般以摄影图片，插画形式，文字压与图片之上，这样的效果更具有冲击力，也能显得出比较潮流。体验也很不错，放大视觉，展示内容，图片相结合，让浏览者更愿意多看一会。表达的图片与文字内容相符，做到图文交融的程度。一般这样对于图片的选择上还是比较要求严格的。没有质量的图效果会降低。

应用场景：列表，说明，入口，天气

列表卡片设计，这种形式一般白色的卡片，上面标题，头像，按钮，扁平插画形式体现，更多应用在一级页面的下方内容，以及二级页面的列表页或者集合页，整体弱化背景以白色为主，给予圆角及阴影承托出层次感同时，体现上面内容部分。每个模块的单元体具有统一的视觉。

应用场景：列表，集合页，入口

大卡片式设计，表现为一块特大的卡片式，上面会有标题，按钮等信息，同样表现出突出层次感，个性化设计的特质。体现出内容，一般背景有颜色上面卡片为白色，如下面背景为白色，那么卡片的形式也可色块，在对比上有个反差，才能突出卡片的作用性。

应用场景：提示，说明，优惠劵，劵，入口

以上总结的几种卡片的形式，在设计中可以根据情况而设计，卡片多样化，布局多样化，适合自己产品的才最重要，虽然在界面设计中常用的设计，但不要盲目的为了卡片而卡片套用设计，这样起不到作用反而效果达不到理想程度。希望几个卡片形式总结能给大家带来一些灵感和启发。

同样在这些卡片中会有一些基本的共同的特点：

1. 四个角都是圆角

2. 根据潮流渐变色或白卡片

3. 色块下的阴影，色块下的阴影更能体现出层次

4. 卡片上面组成部分，标题，副标题，图形，按钮，图片，头像

5. 字体大小，字体颜色的变化

6. 一般卡片应用在会员，列表，说明，优惠劵，分类，类别，集合页，欢迎页等场景常见

为了讲解文章，顺叔临时构思一个产品原型，而快速进行了简单的设计，一个第一版，一个优化版，主要为了讲解一下这个卡片设计一些问题，

以下此图为构思的原型图：

经过分析原型图之后开始进行设计，首先设计一个版本的，如果这样卡片布局设计，这样色彩搭配的情况下，会怎么样呢，整体设计用了蓝紫色为主色调，首先铺蓝紫色的色块作为背景，然后上面放白色卡片，以至于卡片上详细的内容，比如数字，图形能更好的丰富支撑卡片。同样数据流也是比较重要的C位。也是比较重要的位置。接着根据原型图下面有两个卡片，通过扁平化设计，以色块为主设计一个蓝色，一个橙色的卡片，上面并有图标，头像，以及标题，两个颜色的对比，更让视觉有冲击力，整体看这个设计并没有什么，但有个问题在于单个模块拿出来效果的确都不错，但组成之后上面的卡片C位让下面的两个带颜色的卡片抢了视觉，当打开这个界面的时候视觉落点在彩色卡片上，那么这个整体设计上就出现了问题，上面的数据，白色卡片其实是比较重要的，而且整个画面都是卡片毫无设计上的变化，

那么只能在这个基础上在进行优化，其实大家在做设计的同时也这样，在考虑功能模块前提下，用户体验，也要考虑视觉体验，那么视觉从哪方面来，色彩、层次、版式等等方面。那么能不能在进行一下优化呢，其实还是有空间在进行优化。以下图为第一版：

根据上面的设计在进行优化，同样保留白色卡片部分元素，在卡片与卡片之间放一些颜色的图标，这样更好的给功能上快捷入口，也能给卡片设计增添了变化，使得整个画面更灵活。虽然白色卡片，但有一些色彩的点缀，也让白色卡片活跃起来，把颜色的卡片改成白色卡片，从上到下的版式舒服多了，也没有那么跳。整个风格更简约，同时功能也更全面。

调整后：

从原型图，再到设计第一版，再到优化调整之后，证明一点，卡片不要因为卡片而套设计，反而会失去效果，考虑功能模块，用户体验，视觉体验也一定让整体舒服。一直都说，绘画中需要有主有次，设计中也一定要有主，有次的进行设计，这样层级关系才能更清晰。

但这些条件一定是从体验、色彩、布局、版式等方面进行对比和研究的。设计不要先着急做设计，前期进行思考，逻辑清楚了，在进行设计的时候会更加的顺畅。卡片式设计，大家都在应用，希望这个文章能给大家带来一点点知识点。

浅谈UI设计中的卡片式设计

优势解析

1.提升模块化设计

模块化设计的设计方案都是人们平时会运用到的方式，融合卡片式的设计方案能够让模块化设计的标准变得越来越简易，提升了控制模块中间的可重复使用性和可塑性。

2.提高内容自觉性

在组合式的内容设计方案上，应用卡片式设计方案能够让每一小块内容展现相对性的呈现特点，融合模块化设计方案，能够在一大面积关系的内容中，保证既统一又相对性单独。

3.提高视觉立体感

卡片式的设计方案能够提高总体设计方案质感，根据投射、前后左右色调的设置，让内容与背景图中间造成视觉立体感。

缺陷及提议

1.横向间使用率减少

卡片式设计方案的存有上下边距，因而在比较有限的屏宽内横着地区对比于结构式设计方案有一定的降低，在内容较多的状况下能够适度调小纸条上下边距。

2.防止过多的分支

从总体而言，卡片式的设计方案自身就是说提升了基本背景图的等级主要表现，其视觉等级对比结构式更加丰富多彩，因而不提议在卡牌上再二次累加小块式设计方案，防止导致等级繁杂。

3.掌握好页面的系统分区

掌握好页面的系统分区，防止过度拥堵的排版。设计卡片设计具备与众不同的视觉立体感，但卡牌与卡牌也会有隔开，因而在设计方案时更应当对内容开展梳理，防止造成过多的一小块卡牌而造成排版设计过度拥堵的呈现。

更多相关资讯，欢迎关注本平台。