卡片式设计在移动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年春国家开放大学电大终结性考试题：请理论联系实际，谈一谈你对邓小平的社会主义市场经济理论内涵的认识。【附答案】
2024-07-08 73 -
2024年春国家开放大学电大终结性考试试题：理论联系实际，谈一谈你对中国式现代化的中国特色的理解【附答案】
2024-07-08 65 -
2024年春国家开放大学电大《形势与政策》终结性试题：试分析新征程上推进生态文明建设需要处理好哪五个“重大关系”？【附答案】
2024-07-08 71 -
2024年春国家开放大学电大终结性考试题：试述“两弹一星”精神的内涵是什么？作为新时代中国特色社会主义的年轻人，应如何继承和弘扬这种精神？【附答案】
2024-07-08 74 -
2024年春国家开放大学电大终结性考试题：联系历史和现实，试述中国共产党百年奋斗的历史意义是什么？【附答案】
2024-07-08 53 -
2024年国家开放大学《形势与政策》大作业：中华民族现代文明有哪些鲜明特质？建设中华民族现代文明的路径是什么？[附4份答案]供参考
2024-10-19 999+ -
2024年秋国开形策大作业：中华民族现代文明有哪些鲜明特质？建设中华民族现代文明的路径？（含2篇参考答案）
2024-10-19 334 -
2024年《形势与政策》大作业（含2份答案）：中华民族现代文明有哪些鲜明特质？建设中华民族现代文明的路径是什么？
2024-10-19 397 -
2024年秋国家开放形策大作业【附2份答案】：中华民族现代文明有哪些鲜明特质？建设中华民族现代文明的路径是什么？
2024-10-19 368 -
2024年习近平新时代中国特色社会主义思想概论试题：理论联系实际，请阐述你对坚定中国特色社会主义文化自信的理解【附答案】
2024-12-04 215
作者：闻远设计
分类：非标机械电气自动化
价格：免费
属性：3 页
大小：19.08KB
格式：DOCX
时间：2023-05-19
