流行界面布局卡片设计.pdfVIP

APP设计中运用比较流行

的表现手法。

卡片式设计，可以解决在

画面中有个性化、变化、

层次感的设计

卡片式设计是一个承载着图像、

文本、按钮、提示信息和一些交提示信息和一些交

互动作等的矩形区块互动作等的矩形区块，，作为指向作为指向

详细信息的功能详细信息的功能，，能有能

效区分不同信息的层级效区分不同信息的层级，，兼容性兼容性

强，不管是App还是还是WebWeb，，都能都能

够有效适应响应式设计；同时

够有效适应响应式设计；同时在

视觉上可塑性很高，能使用

视觉上可塑性很高，能使用

来强调，变得更加吸引人。

无处不在的卡片设计具有个性的美感和很好的易用性，是以文字

标题，小标题，图形或组成的模块化，以块状形式规整的整

合内容，让内容更规整化，视觉上更个性化，也是操作上快捷的

内容信息。更直观的表达内容信息和快捷跳转操作。

成为在设计中一个比较流行趋势，而卡片在设计中也占用

一定的优势，让整体更加的有层次感，在运用起来也比较方便，

从视觉、体验、交互都具有不错的优点

二、卡片设计优势

1.趋势

无论是大是小平台的产

品都会运用这样的卡片式，跟风

式设计趋势，也让卡片式设计成

为了一个现在常用的优势，不过

卡片式设计的确有很好的效果

2.层次感

具有一定的层次感，能在页面版

式中起到设计上的不同，个性化

变化，页面层次感区分强烈，能

更好的体现提炼出内容

3.规整化

卡片式设计以、图标、

LOGO、标题、整合到一起

以块状的形式在界面中展示，

更规整的排版呈现。虽然内

容多会导致页面，一个模块

包含内容就会规整不少，

也给页面设计上带来了更好的

视觉

4.视觉体验

卡片式给整个页面会增加视觉上的体验，特别那种大卡片

式更具有视觉上的冲击力，背景衬托出前景卡片式设计。同样对

卡片式也感觉到舒适感。卡片式设计还是需要根据整个布局、产

品需求、功能进行设计。以达到最好的用户体验、视觉体验。

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

5.易用性

卡片式设计在易用性和灵

活性上比较高，在响应式

设计中同样应用的也比较

多一些。能更好的有序排

列。

6.简约设计

简约设计会更显得品质，不需要过多的进行装饰，哪怕

就是一个白色的色块，上面点缀有色彩的图标和标题副

标的变化，也会觉得显得高大上，就算是一个带有颜色

的色块卡片，也无须过多的设计内容上的标题、图标、

按钮就足以支撑起卡片

7.交互效果

在卡片式的设计中会有一些动效交互，比如整体卡片

放大、缩小、左滑、右滑，可以整模块化滑动缩放。

整体效果增加了不错的视觉交互体验

三、卡片正确设计知识

一般在界面设计中卡片的存在的意义和表现手法都是什么

卡片式设计还是要根据整个风格和整个布局而进行展示，

在做进一步的对比和布局中以最好的效果为最终展示方式。

1.卡片式形式一

以色块为主体并用现在比较流行的渐变色组成，其中四边为

圆角，同样色块下边阴影衬托出，这个是在卡片中设计

比较常见的运用手法，卡片的长高在设计中也是根据结构，

内容功能而进行设定。

正方形，长方形都是一个表现得手法，在色块上面标题文字，

图标，图形是整个卡片的布局的形式，无非就是左右布局和

上下布局

应用场景：卡包、天气、类别、、劵，卡劵

2.卡片式形式二

这种形式共同点都是在头部C位出现的卡片式设计，其中承载着标

题，副标题，以及图文版式，不难发现，如果有颜色，那么下面

是白色底，这样在白底上面色块的出现还是比较简约凸显卡片，如果

背景有颜色，卡片也有颜色那么卡片的凸显程度就不会那么强，

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

3.卡片式形式三

这种形式上图下文字，或者是上标题，下的形式，这种

的传达，文字传达，让用户更清晰的了解。这样的形似

一般在或者列表的形式出现的比较多，同样也能体现出

整体化和视觉化

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

4.卡片式形式四

大图卡片式，一般以摄影，插画形式，文字压与

之上，这样的效果更具有冲击力，也能显得出比较潮流。

体验也很不错，放大视觉，展示内容，相结合，让浏

览者更愿意多看一会。表达的与文