卡片式设计在移动UI中的运用及其优势
卡片式设计在移动 UI 中的运用及其优势
摘要：随着移动互联网时代的到来以及智能手机的迅速普及，用户想要更快速地获取信息，卡
片在 APP 中起到归类和划分页面信息的作用，卡片式设计已经是 UI 设计中最常用的方式之
一。本文从卡片的起源和定义入手，分析了卡片在 UI 设计中的应用以及卡片的优势和注意事
项，可给设计师提供更多的设计参考。
关键词：UI 设计; 卡片式; 界面设计;
现如今的移动 UI 设计中，市场上的 APP 中会看到很多的卡片式设计的案例，卡片个性自由又
充满了逻辑性，变得越来越流行。在各个 APP 中承载着图片、文字等内容的矩形区域就是卡
片，卡片存在的方式多种多样，当点击卡片时会看到更深一层级的详细信息。很多 APP 的交互
界面会使用到信息卡片的设计，卡片效果不仅可以提升画面的丰富性，同时也可以很好的进行
信息收纳，以及提升同类信息的视觉层级。
1 卡片的起源和定义
卡片的起源，卡片作为内容的宣传媒介已经存在很长时间了。公元 9世纪，中国就使用卡片来
做游戏;17 世纪时，伦敦的商人利用卡片来招揽生意;18 世纪，欧洲贵族家庭的仆人会用卡片向
主人介绍即将登门拜访的贵宾;而人们交换名片的传统也已持续数百年。在现实生活中，我们
使用的公交卡和节日贺卡，以及各种银行卡、信用卡，甚至身份证、驾照等各类信息都是一张
张的卡片。还有照片、明信片等也都是承载着特殊情感故事的卡片。
而在 UI 设计中的卡片是我们从现实生活中的物质向虚拟世界的一种延伸，将我们生活中常见
的卡片转换到我们的产品设计当中作为内容的载体出现。简而言之，卡片就是可以承载信息的
容器。卡片可以承载不同类型的内容，其元素可以包含:图片、文字、视频、按钮、优惠券、
音乐、付款信息、注册表单、社交媒体流或分享、奖励信息、链接以及以上元素的任意组合。
卡片也就是承载一些图片和文字信息的容器，作为跳转下级页面的入口。不同的卡片都遵循在
一个统一宽度和样式的卡片内，进行发挥和设计。既保证了卡片和卡片之间的独立性，又保证
了服务和服务的统一化设计。用卡片当作不同内容的载体，会使得层次简单易懂，用户易于滑
动浏览。
2 卡片式设计在移动 UI 中的运用
卡片简单易懂，用户不需要考虑事情如何发生，可自然而然的创建舒适的用户体验。当用户与
卡片进行交互时，可以分成几种行为模式。卡片通常会做三件事:记录信息、用信息吸引用户
或提醒用户信息。根据卡片的内容元素，将卡片进一步细化为不同类型容器。第一，叙述:卡
片以瀑布流形式出现，同时创建事件发展的时间轴。第二，发现:卡片能让相关内容自然的呈
现出来。采用网格或瀑布流布局时，使用淡入效果展现卡片，会让用户觉得好玩和身在其中。
例如，当你向左或向右滑动，展现符合你口味的歌曲。第三，对话:由于卡片是相对独立的，
它们能够完美展示正在进行的对话。第四，工作流:卡片可以将待办事项快速归类。例如，创
建不同的笔记或待办事项的卡片，当用户删除时，剩余的卡片按照初始顺序重新排列。
在手机 APP 中，用户可以清晰地感知到距离接近的信息在一张卡片之上，卡片通常会有一个大
的底色来做背景，以使卡片的视觉层次效果更加明显。结合卡片的宫格式布局可以将页面的视
觉层级变得更加清晰，丰富界面设计。卡片式的信息流大致可分为规则和不规则两种形态，如
哔哩哔哩 APP 中的首页推荐页面，就是规则卡片形式，而淘宝首页推荐的卡片信息就是不规则
卡片的瀑布流形式地运用，根据接近性原理一个卡片是一组信息，而宽度相同高度不同的卡片
效果上下错落有致，使页面显得不那么呆板，不仅丰富了画面感，还可以缓解视觉疲劳。
3 卡片式设计的优势
卡片的本质是更好的处理信息集合，卡片式设计提升了用户的操作体验。卡片式设计的优势有
如下几点。
摘要：
展开>>
收起<<
卡片式设计在移动UI中的运用及其优势摘要：随着移动互联网时代的到来以及智能手机的迅速普及，用户想要更快速地获取信息，卡片在APP中起到归类和划分页面信息的作用，卡片式设计已经是UI设计中最常用的方式之一。本文从卡片的起源和定义入手，分析了卡片在UI设计中的应用以及卡片的优势和注意事项，可给设计师提供更多的设计参考。 关键词：UI设计;卡片式;界面设计;现如今的移动UI设计中，市场上的APP中会看到很多的卡片式设计的案例，卡片个性自由又充满了逻辑性，变得越来越流行。在各个APP中承载着图片、文字等内容的矩形区域就是卡片，卡片存在的方式多种多样，当点击卡片时会看到更深一层级的详细信息。很多APP的...
相关推荐
-
2024年党建工作要点工作计划5篇供参考
2023-12-16 999+ -
2025年专题生活会对照带头严守政治纪律和政治规矩，维护党的团结统一等“四个带头方面”个人对照检查发言材料4110字文稿
2024-12-21 999+ -
2025年医保局局长、科技局领导干部专题“四个带头”方面对照检查材料2篇例文（附：反面典型案例剖析情况）
2025-02-09 459 -
2025年国有企业党委书记、市总工会党组书记民主生活会“四个带头”方面对照个人检查发言材料2篇文(附：典型案例、上年度整改+个人情况)
2025-02-09 507 -
2025年市委组织部部长、教育局党委书记生活会“四个带头”个人对照检查发言材料2篇文(典型案例+个人事项)
2025-02-09 627 -
2025年市财政局党组书记、局长、市检察院党组领导班子对照“四个带头”方面生活会个人对照检视发言材料2篇文（含以案为鉴反思、以案促改促治方面）
2025-02-09 509 -
市检察院党组、市财政局领导班子2025年生活会对照“四个带头”方面检视发言材料2份文【含以违纪行为为典型案例剖析】
2025-02-09 461 -
2025年市财政局领导对照“四个带头”生活会检视发言材料2篇例文【含以违纪行为为典型案例剖析】
2025-02-09 586 -
单位领导班子2025年聚焦“四个带头”生活会对照检查材料2篇文(含：典型案例剖析反思、落实意识形态责任制)
2025-02-09 758 -
2025年镇党委副书记、市科学技术局领导班子生活会对照“四个带头”检视材料2篇文【含违纪行为典型案例分析】
2025-02-09 257
作者：闻远设计
分类：非标机械电气自动化
价格：免费
属性：3 页
大小：19.08KB
格式：DOCX
时间：2023-05-19
