 |
您现在的位置是：ui设计学习网 > 零基础学ui > 零基础学ui
UI设计当中的卡片式设计的基础运用方法
2021-01-21 17:56零基础学ui 人已围观
简介卡片式设计的定义 在生活中，我们经常接触到各式各样的类似右图中的卡片，比如扑克牌、名片、机场和地铁的指示牌等等。 卡片式特点： 一清晰直观，二简单易懂，三信息模块化。...
卡片式设计的定义
在生活中，我们经常接触到各式各样的类似右图中的卡片，比如扑克牌、名片、机场和地铁的指示牌等等。
卡片式特点：
一清晰直观，二简单易懂，三信息模块化。
比如扑克牌我们可以看出虽然只有一个图案，一组文字，但很清晰传达出这张牌所代表的含义;又比如机场和地铁的指示牌，采用了图标、字体元素，很清晰直观地引导乘客方向，这种由文字或图案组成的方块样式叫做“卡片式设计”。这种轻巧、简洁的实物设计也被慢慢应用到虚拟设计当中。
另外google +、 google play等很多谷歌产品也同样采用了这种设计
正是因为卡片式设计在微软、谷歌的产品界面的大量运用，很多互联网企业也纷纷采用这种设计，这是应用在PC端的界面，内容部分也都采用了卡片式设计。
卡片式设计的优点
1. 增强点击感
这是诺基亚手机的win phone系统(下图)，系统桌面的所有内容都是一个个小方块展示，类似一个块状类的按钮，让人联想到是可以点击的操作入口：
2. 排版整齐
将信息、图像归类整合到一个方块里，清晰直观又避免页面因为信息多而散乱，卡片的排列方式是按列或者行的方式进行对齐展示，视线沿着横向或者纵向浏览能快速找到想要的信息，此外，这种固定大小的卡片方块也有利于栅格化排版。
3. 信息模块化
将信息、图像按维度分类整合到一个卡片里，能有效地避免信息散乱、同时避免信息分类不明确像这种模块化展示有效地减少用户思考的时间，能快速找到自己所需的信息。
4. 响应式设计
卡片方块的高度和宽度的大小都是可以调整的，正是因为这种特性很适合用在响应式设计里，卡片在不同的平台展示，由于分辨率不同，卡片能自适应地展示，以上是卡片设计的优点。
在生活中，我们经常接触到各式各样的类似右图中的卡片，比如扑克牌、名片、机场和地铁的指示牌等等。
卡片式特点：
一清晰直观，二简单易懂，三信息模块化。
比如扑克牌我们可以看出虽然只有一个图案，一组文字，但很清晰传达出这张牌所代表的含义;又比如机场和地铁的指示牌，采用了图标、字体元素，很清晰直观地引导乘客方向，这种由文字或图案组成的方块样式叫做“卡片式设计”。这种轻巧、简洁的实物设计也被慢慢应用到虚拟设计当中。
另外google +、 google play等很多谷歌产品也同样采用了这种设计
正是因为卡片式设计在微软、谷歌的产品界面的大量运用，很多互联网企业也纷纷采用这种设计，这是应用在PC端的界面，内容部分也都采用了卡片式设计。
卡片式设计的优点
1. 增强点击感
这是诺基亚手机的win phone系统(下图)，系统桌面的所有内容都是一个个小方块展示，类似一个块状类的按钮，让人联想到是可以点击的操作入口：
2. 排版整齐
将信息、图像归类整合到一个方块里，清晰直观又避免页面因为信息多而散乱，卡片的排列方式是按列或者行的方式进行对齐展示，视线沿着横向或者纵向浏览能快速找到想要的信息，此外，这种固定大小的卡片方块也有利于栅格化排版。
3. 信息模块化
将信息、图像按维度分类整合到一个卡片里，能有效地避免信息散乱、同时避免信息分类不明确像这种模块化展示有效地减少用户思考的时间，能快速找到自己所需的信息。
4. 响应式设计
卡片方块的高度和宽度的大小都是可以调整的，正是因为这种特性很适合用在响应式设计里，卡片在不同的平台展示，由于分辨率不同，卡片能自适应地展示，以上是卡片设计的优点。
关注我，我给你准备了超级多的礼物~（是超级多，超级多~）对我们的提升很有帮助的资料，当做礼物送给你，希望以后我们能够一起走在成长的路上，见证彼此不断变好！
 |
.jpg)
.jpg)