课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认识达内从这里开始
认真做教育 专心促就业
潍坊达内的小编说UI布局有许多种形式，而卡片式作为目前比较常见的一种，也有着它适用和不适用的场景
前言：哪些是卡片
说到卡片式设计，大家的第一反应可能是下面这样的页面。
而从广义上来说，以分隔条分割页面的方式也可以算作通栏卡片，本身并没有表现层上的作用，只是在框架层帮助用户信息分类。
因此，此次讨论的卡片主要是以下三类：通栏卡片、灰底+卡片、白底+卡片+投影。
此次要讨论的场景
首先，卡片只是UI表现手法的一种，同类的方法还有分隔线和留白
另一方面，UI界面又可较笼统地分为两种：以信息为主的页面，和以功能为主的页面。
在以信息为主的页面中，卡片往往作为单条信息的承载；而以功能为主的页面中，卡片往往是作为整个模块的承载。
Q1:卡片与分隔线，这两种形式如何选择
卡片，尤其是通栏卡片，其实就是通过分隔条来区分不同内容，因此与分隔线有很大的相似度。MD规范中提到，列表类的信息更适合用分隔线而不是卡片
但如果是复杂一点的情况呢？举个例子，知乎里的以下4个不同的页面，有些采用了分割线，有些采用了卡片，具体如何选择？
A1:可以从以下3个方面综合考虑
1.各信息之间的关联度
比如电话联系人页面，搜索热榜页面等等，这些页面的各信息之间几乎没有关联，用户需要快速浏览来找到哪条才是自己想看。而采用视觉上不显眼的分隔线，有助于用户快速浏览。
而比如知乎的答案页，各条信息之间比较类似（都是对同一问题的回答），用户需要更仔细的看每条信息的内容才能筛选出自己感兴趣的。采用了通栏卡片的形式，可以用更明显的分隔条打断用户向下浏览的视线，让用户更聚焦于单个卡片的内容。
以上就是潍坊达内给大家做的内容详解，更多关于UI的学习，请继续关注潍坊达内
前言：哪些是卡片
说到卡片式设计，大家的第一反应可能是下面这样的页面。
而从广义上来说，以分隔条分割页面的方式也可以算作通栏卡片，本身并没有表现层上的作用，只是在框架层帮助用户信息分类。
因此，此次讨论的卡片主要是以下三类：通栏卡片、灰底+卡片、白底+卡片+投影。
此次要讨论的场景
首先，卡片只是UI表现手法的一种，同类的方法还有分隔线和留白
另一方面，UI界面又可较笼统地分为两种：以信息为主的页面，和以功能为主的页面。
在以信息为主的页面中，卡片往往作为单条信息的承载；而以功能为主的页面中，卡片往往是作为整个模块的承载。
以下就按这两个场景讨论哪些时候适用卡片，哪些时候不适合。
Q1:卡片与分隔线，这两种形式如何选择
卡片，尤其是通栏卡片，其实就是通过分隔条来区分不同内容，因此与分隔线有很大的相似度。MD规范中提到，列表类的信息更适合用分隔线而不是卡片
但如果是复杂一点的情况呢？举个例子，知乎里的以下4个不同的页面，有些采用了分割线，有些采用了卡片，具体如何选择？
A1:可以从以下3个方面综合考虑
1.各信息之间的关联度
比如电话联系人页面，搜索热榜页面等等，这些页面的各信息之间几乎没有关联，用户需要快速浏览来找到哪条才是自己想看。而采用视觉上不显眼的分隔线，有助于用户快速浏览。
而比如知乎的答案页，各条信息之间比较类似（都是对同一问题的回答），用户需要更仔细的看每条信息的内容才能筛选出自己感兴趣的。采用了通栏卡片的形式，可以用更明显的分隔条打断用户向下浏览的视线，让用户更聚焦于单个卡片的内容。
以上就是潍坊达内给大家做的内容详解，更多关于UI的学习，请继续关注潍坊达内
< 上一篇：ICON设计（6）
下一篇：什么时候选择卡片式布局设计（2） >
2025-08-15
免费试听课程
- 全部课程
- IT课程
- 设计课程
- 运营课程
4578
最新开班时间
- 北京
- 上海
- 广州
- 深圳
- 南京
- 成都
- 武汉
- 西安
- 青岛
- 天津
- 杭州
- 重庆
- 哈尔滨
- 济南
- 沈阳
- 合肥
- 郑州
- 长春
- 苏州
- 长沙
- 昆明
- 太原
- 无锡
- 石家庄
- 南宁
- 佛山
- 珠海
- 宁波
- 保定
- 呼和浩特
- 洛阳
- 烟台
- 运城
- 潍坊
- 开课名称
- 开班时间
- 抢座
- 咨询
- 开课名称
- 开班时间
- 抢座
- 咨询
-
- Java全链路开发
- 8月29日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 8月29日
- 火热抢座中
- 立即咨询
- 人工智能工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 8月29日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 8月29日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 8月29日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 8月29日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 8月29日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 8月29日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 8月29日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 8月29日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 8月29日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 8月29日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 8月29日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 8月29日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 8月29日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 8月29日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 8月29日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 8月29日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 8月29日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 8月29日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 8月29日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 8月29日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 8月29日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 8月29日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 8月29日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 8月29日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 8月29日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 8月29日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 8月29日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 8月29日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 8月29日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 8月29日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 8月29日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 8月29日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 8月29日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 8月29日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 8月29日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 8月29日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 8月29日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 8月29日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 8月29日
- 火热抢座中
- 立即咨询
预约申请试听课
400-111-8989
lihm@tedu.cn
