怎么做出有亮点的卡片设计

用户头像
杭州/设计爱好者/344天前/2253浏览
怎么做出有亮点的卡片设计
用户头像
三悠
前言
卡片是界面设计中最常用的排版布局方式,为了让自己的设计能在同质化的设计中脱颖而出,今天让我们来看下怎样做出有亮点的卡片设计,以及常规的卡片设计是怎样的。
正文
首先我们先来了解下卡片有哪些类型,我根据卡片承载的内容将它分为以下几类。
卡片的类型
功能入口类
卡片承载的内容是某个功能的入口,可点击跳转进入一个新模块/流程。通常由图标+主标题/副标题组成。 
怎么做出有亮点的卡片设计(图ZMTUxOTk4ODg=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
收藏
信息入口类
卡片承载的是某个信息分类,点击可查看信息详情。 
怎么做出有亮点的卡片设计(图ZMTUxOTk4OTI=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
收藏
特点介绍类
卡片主要承载特点简介、能力简介、价值简介等,分为可点击跳转和无点击跳转两类。
怎么做出有亮点的卡片设计(图ZMTUxOTk4OTY=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
收藏
成果说明类
卡片主要展示一些关键结果数据、核心信息。
怎么做出有亮点的卡片设计(图ZMTUxOTk5MDA=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
收藏
产品/图片容器
例如商品卡片列表、旅游风景图卡片列表、图书卡片列表等。 
怎么做出有亮点的卡片设计(图ZMTUxOTk5MDQ=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
收藏
了解完卡片的主要类型后,那么我们来看看常规的卡片设计是怎样的呢?
常规的卡片设计就是正常的矩形+矩形里面的主体内容。主体内容可能为图标和标题、图片等;图标和标题的排版方式有上下排版、左右排版和对角线排版,元素整体的对齐方式包括左对齐、居中对齐。
怎么做出有亮点的卡片设计(图ZMTUxOTk5MDg=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
收藏
知道了常规的卡片设计形式后,如果我们要更进一步,想做出更有设计感、更能抓人眼球的卡片的话,就需要尝试做一些突破,打破常规,实现差异化的设计。 
所以接下来看一下怎么做出有亮点的卡片设计?
方法一:异形
打破卡片的常规形状,增加或减少一些面,形成一个不规则的形状。
怎么做出有亮点的卡片设计(图ZMTUxOTk5MTI=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
收藏
方法二:破形
 打破卡片的界限,让元素破框而出,没有完整的放在卡片里面,具有一种张力,体现出生命力的感觉。
怎么做出有亮点的卡片设计(图ZMTUxOTk5MTY=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
收藏
方法三:立体感
将卡片的视角由平面维度转为立体空间维度,体现出强烈的空间感、层次感和真实感。 
怎么做出有亮点的卡片设计(图ZMTUxOTk5MjA=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
收藏
方法四:拟物
通过模拟现实物体的外观、质感和交互方式,增强真实感、沉浸感。
怎么做出有亮点的卡片设计(图ZMTUxOTk5MjQ=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
收藏
小结
以上就是我个人关于卡片设计的一些简单的总结,希望能够给大家带来一些启发。以后我会不定期的进行设计的分享,请大家多多关注和支持。
注:以上文中配图均来自于网络或应用截图,仅作学习分享使用。
20
举报
|
28
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
智能家居中心 简约 UI设计组件库
【新年UI图标】钱包icon
科技医疗透明柜UI界面设计
UI 登录界面设计模板包
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】30个图标
【新年UI图标】秒杀icon
我的钱包-UI界面设计-app
Security Camera UI kit
新拟态风格 UI设计组件库
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】游戏/娱乐icon
高级表盘系列UI源文件
户外旅行飞机情侣假日出行
盲盒APP UI设计
UI通用设计素材1
【新年UI图标】影音icon
拟物风质感写实UI卡片合集源文件
钱包ui模板
新能源APP应用UIKit
【新年UI图标】汽车icon
3D渐变流体抽象矢量UI背景图
高级感金属拟物 UI设计组件库
登录注册