卡片式设计在移动UI中的运用及其优势

　　摘要：随着移动互联网时代的到来以及智能手机的迅速普及，用户想要更快速地获取信息，卡片在APP中起到归类和划分页面信息的作用，卡片式设计已经是UI设计中最常用的方式之一。本文从卡片的起源和定义入手，分析了卡片在UI设计中的应用以及卡片的优势和注意事项，可给设计师提供更多的设计参考。

　　关键词：UI设计; 卡片式; 界面设计;

　　现如今的移动UI设计中，市场上的APP中会看到很多的卡片式设计的案例，卡片个性自由又充满了逻辑性，变得越来越流行。在各个APP中承载着图片、文字等内容的矩形区域就是卡片，卡片存在的方式多种多样，当点击卡片时会看到更深一层级的详细信息。很多APP的交互界面会使用到信息卡片的设计，卡片效果不仅可以提升画面的丰富性，同时也可以很好的进行信息收纳，以及提升同类信息的视觉层级。

　　1 卡片的起源和定义

　　卡片的起源，卡片作为内容的宣传媒介已经存在很长时间了。公元9世纪，中国就使用卡片来做游戏;17世纪时，伦敦的商人利用卡片来招揽生意;18世纪，欧洲贵族家庭的仆人会用卡片向主人介绍即将登门拜访的贵宾;而人们交换名片的传统也已持续数百年。在现实生活中，我们使用的公交卡和节日贺卡，以及各种银行卡、信用卡，甚至身份证、驾照等各类信息都是一张张的卡片。还有照片、明信片等也都是承载着特殊情感故事的卡片。

　　而在UI设计中的卡片是我们从现实生活中的物质向虚拟世界的一种延伸，将我们生活中常见的卡片转换到我们的产品设计当中作为内容的载体出现。简而言之，卡片就是可以承载信息的容器。卡片可以承载不同类型的内容，其元素可以包含:图片、文字、视频、按钮、优惠券、音乐、付款信息、注册表单、社交媒体流或分享、奖励信息、链接以及以上元素的任意组合。卡片也就是承载一些图片和文字信息的容器，作为跳转下级页面的入口。不同的卡片都遵循在一个统一宽度和样式的卡片内，进行发挥和设计。既保证了卡片和卡片之间的独立性，又保证了服务和服务的统一化设计。用卡片当作不同内容的载体，会使得层次简单易懂，用户易于滑动浏览。

　　2 卡片式设计在移动UI中的运用

　　卡片简单易懂，用户不需要考虑事情如何发生，可自然而然的创建舒适的用户体验。当用户与卡片进行交互时，可以分成几种行为模式。卡片通常会做三件事:记录信息、用信息吸引用户或提醒用户信息。根据卡片的内容元素，将卡片进一步细化为不同类型容器。第一，叙述:卡片以瀑布流形式出现，同时创建事件发展的时间轴。第二，发现:卡片能让相关内容自然的呈现出来。采用网格或瀑布流布局时，使用淡入效果展现卡片，会让用户觉得好玩和身在其中。例如，当你向左或向右滑动，展现符合你口味的歌曲。第三，对话:由于卡片是相对独立的，它们能够完美展示正在进行的对话。第四，工作流:卡片可以将待办事项快速归类。例如，创建不同的笔记或待办事项的卡片，当用户删除时，剩余的卡片按照初始顺序重新排列。

　　在手机APP中，用户可以清晰地感知到距离接近的信息在一张卡片之上，卡片通常会有一个大的底色来做背景，以使卡片的视觉层次效果更加明显。结合卡片的宫格式布局可以将页面的视觉层级变得更加清晰，丰富界面设计。卡片式的信息流大致可分为规则和不规则两种形态，如哔哩哔哩APP中的首页推荐页面，就是规则卡片形式，而淘宝首页推荐的卡片信息就是不规则卡片的瀑布流形式地运用，根据接近性原理一个卡片是一组信息，而宽度相同高度不同的卡片效果上下错落有致，使页面显得不那么呆板，不仅丰富了画面感，还可以缓解视觉疲劳。

　　3 卡片式设计的优势

　　卡片的本质是更好的处理信息集合，卡片式设计提升了用户的操作体验。卡片式设计的优势有如下几点。

　　第一，增加空间利用率，在传统列表下，内容一般为纵向滚动操作，展示的内容有限。而采用卡片式的布局，在纵向的内容流里，还可以很好的增加横向滑动的内容区域。卡片可以利用横向交互来提高空间的利用率，将部分内容隐藏在横轴的空间当中，在屏幕可视的空间范围内通过交互展示更多的内容。例如淘票票在热映电影的模块中通过横向轴交互，将部分内容隐藏在横轴的空间中，提高了控件利用率，在有限的空间内展示更多的电影信息。

　　第二，能够提升界面的可操作性，我们提到卡片是一种拟真元素，交互设计可以被覆盖、堆叠、移动、划去，这样能更好的拓展内容模块的视觉深度和可操作性。比如:i Phone自带的“提醒事项”APP，就是采用卡片堆叠的方式，用户可按照标题快速查找目标备忘录，同时进行点击操作，打开或删除卡片内容。

　　第三，卡片设计视觉统一性强，由于每一个卡片都是由承载层和内容层组成，形式上统一，所以在视觉上有很强的一致性。卡片式设计可以将复杂的信息元素包在一个容器中，根据相同的规范布局来展示不同的信息，采用了相同的设卡片计样式，具有极强的视觉一致性，能够帮助用户快速简历视觉流，提高用户浏览的效率，减少阅读时其他因素的干扰。

　　第四，利于信息分层和整合，在卡片式设计中，一张卡片就是一个信息模块，用户即使快速浏览，也不会产生混乱。块状的卡片使得页面更加整齐美观，同一页面中卡片的不同大小，还区分了信息的重要等级。

　　第五，卡片设计能够突出重点内容，卡片具有很强的独立性，具有空间感。在页面设计中，我们可以通过卡片与周围环境的差异，来突出的我们的想要展现的内容。且通过卡片营造的空间感以及视觉层级的优先级，卡片能够更加吸引我们的注意力，让我们的更加专注当前内容。

　　4 卡片设计的注意事项

　　由于卡片式设计能够承载各种类型的内容，需要设计师在设计卡片时要有规范性和创意性，使用合适的排版、尺寸、圆角以及良好的阴影和渐变效果，让您的卡片为用户提供更加舒适的视觉感受。以下是卡片设计需要注意的地方:

　　第一，了解阴影及特点。为了让投影和渐变的元素更加真实，了解阴影特点在卡片设计中显得尤为重要。如果阴影投在整个卡片的边和角上，就会丧失卡片载体的物理交互感。

　　第二，留白很重要。卡片留白的重要性不言而喻，先给卡片一些空间恰当地添加内容。如果卡片信息内容过于繁琐，会使用户产生疲劳感和厌烦感，而留白的使用可以增加卡片内容的呼吸感，有效减少使用过程中的压力，帮助用户找到重点信息。卡片信息越简约，设计目标和针对性就越明显。

　　第三，增加图文排版的对比性。比如通过字体大小、字体粗细来吸引用户的注意力。简单的图文排版其视觉效果是最好的，加之非衬线字体，会给卡片一些美感上的润色，这样的卡片会看上去既有熟悉感又富有创意。诸如阴影之类的元素，在很大程度上能帮助用户联想到实体卡片。

　　第四，在无色系中保证UI清晰。在无色系的条件下设计，必须考虑其可用性和所包含的内容，在此基础上有目的添加颜色。为了让卡片信息看起来足够清晰，可以在卡片背景使用深色蒙层，把背景做模糊处理，来突出卡片信息。

　　第五，卡片圆角的情感性。在同一个APP中，所有卡片一般会使用相同的圆角大小。圆角越大，产品越圆润有趣，更具有亲和力，但缺乏稳重感;圆角越小，则越严谨安全，当圆角为0时，不管是从视觉还是感觉上，都会显得过于锋利尖锐，产生距离感，更加具有权威性。在设计中我们需要根据产品自身的特点来选择卡片的圆角，不能随意滥用不同的圆角大小。

　　5 结语

　　卡片式设计几乎成为当前界面设计的主流模式，并且已经深入到各个行业、领域的UI设计当中。卡片作为信息载体，也使得卡片式UI成为现代移动应用设计的一部分。相比传统单一的页面设计，卡片设计提供更多个性化的用户体验，使界面设计清晰平衡、富有美感、简约时尚而又具备良好可用性。而卡片作为容器，能够适应不同屏幕大小而不破坏信息的展示效果。卡片提升页面的设计感，它还为用户带来了极大的可用性。设计师可以充分利用卡片的特性来丰富界面，提升用户体验。

　　参考文献

　　[1]优逸客科技有限公司．移动界面设计-视觉营造的风向标[M]．机械工业出版社，2018.

　　[2]李邵婧．“留白”在平面设计中的应用研究[D]．青岛大学，2018.