卡片使用_APP必备的设计元素！卡片

文/闫文喆卡片是承载信息的容器，卡片可以承载不同类型的内容，其元素可以包含：图片、文字、视频、按钮、优惠券、音乐、付款信息、注册表单、社交媒体流或分享、奖励信息、链接以及以上元素的任意组合。

卡片也就是承载一些图片和文字信息的容器，作为跳转下级页面的入口，不同的卡片都遵循在一个统一宽度和样式的卡片内，进行发挥和设计。既保证了卡片和卡片之间的独立性，又保证了服务和服务的统一化设计。用卡片当作不同内容的载体，会使得层次简单易懂，用户易于滑动浏览。

卡片简单易懂，用户不需要考虑事情如何发生，可自然而然的创建舒适的用户体验。当用户与卡片进行交互时，可以分成几种行为模式。卡片通常会做三件事：记录信息、用信息吸引用户或提醒用户信息。根据卡片的内容元素，将卡片进一步细化为不同类型容器。

①叙述。卡片以瀑布流形式出现，同时创建事件发展的时间轴。

②发现。卡片能让相关内容自然的呈现出来。采用网格或瀑布流布局时，使用淡入效果展现卡片，会让用户觉得好玩和身在其中。

③对话。由于卡片是相对独立的，它们能够完美展示正在进行的对话。

④工作流。卡片可以将待办事项快速归类。例如：创建不同的笔记或待办事项的卡片，当用户删除时，剩余的卡片按照初始顺序重新排列。

在手机APP中，用户可以清晰地感知到距离接近的信息在一张卡片之上，卡片通常会有一个大的底色来做背景，以使卡片的视觉层次效果更加明显。结合卡片的宫格式布局可以将页面的视觉层级变得更加清晰，丰富界面设计。

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

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

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

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

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

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

卡片式设计几乎成为当前界面设计的主流模式，相比传统单一的页面设计，卡片设计提供更多个性化的用户体验，使界面设计清晰平衡、富有美感、简约时尚而又具备良好可用性。而卡片作为容器，能够适应不同屏幕大小而不破坏信息的展示效果。

卡片使用_APP必备的设计元素！卡片相关推荐

PHP资产管理系统源码适用于IT办公行业固定资产管理，资产录入设备管理，功能齐全，可自由设计资产卡片
PHP资产管理系统源码适用于IT办公行业固定资产管理,资产录入设备管理,功能齐全,可自由设计资产卡片. 程序基于开源框架layuimini开发,可本地部署,可局域网以及服务器联网运行. ,带部署文档, ...
PHP资产管理系统源码可自由设计资产卡片
PHP资产管理系统源码可自由设计资产卡片,适用于IT办公行业固定资产管理,资产录入设备管理,功能齐全. 标价即实价. 源码全开源基于layuimini,可本地部署,可局域网以及服务器联网运行. 需求环 ...
PHP资产管理系统源码可自由设计资产卡片，适用于IT办公行业固定资产管理
PHP资产管理系统源码可自由设计资产卡片,适用于IT办公行业固定资产管理,资产录入设备管理,功能齐全. 标价即实价. 源码全开源基于layuimini,可本地部署,也可局域网以及服务器联网运行需求环 ...
谷歌移动应用强调设计元素：向极简风格转型
导语:美国科技博客TechCrunch今天撰文称,一向不看重设计的谷歌,最近也开始在移动应用中强调设计元素,并向极简风格转型. 以下为文章全文: 谷歌的设计向来不够酷,Gmail和Google Doc ...
ui布局设计元素：ui布局设计元素有哪些？
ui布局设计元素:ui布局设计元素有哪些?这一直是我比较喜欢研究的话题,今天正好朋友正好问起.所以就在这里来把自己在行业里的总结写下来,给大家参考一下.说实话,做ui设计师以来,一直有很多朋友问我相关 ...
html 翻转卡片效果,CSS3 3D transforms系列教程-卡片翻转
通过前两篇关于CSS3 3D transforms文章的学习,现在我们都已经掌握了制作3D对象的必要知识,下面让我们从一个简单的例子开始下面的教程-3D卡片翻转. 下面是制作3D卡片翻转效果必要的HT ...
当代的设计潮流是什么_当代流行的设计元素
每个视觉设计师,都要面对不同的色彩风格需求当然,作为设计师我们其实也很清楚,设计趋势确实是日常web设计工作中难以回避的部分,甚至可以说它们还很关键.同时我们也都明白,设计趋势也不能盲目使用.每一种 ...
mfc窗口右下角如何显示一个三角形图案_大型建筑，如何做到室内外设计元素统一？...
一栋大型建筑内各个空间的设计元素如何统一?是考验设计者的功力的关键一环,要做到装饰元素的简单化一,又怕落入单调的境地. 由Gensler 进行建筑和外观的设计Burj Alshaya 项目由三个不同的 ...
色彩丰富的水彩纹理背景，配合排版和简单的设计元素，给任何设计带来乐趣。
使用水彩背景和纹理,水彩绘画效果,是一种设计趋势,并将在2021年继续这种趋势. 这些独特的色彩丰富的背景可以很好地配合排版和简单的设计元素,给任何设计带来乐趣. 背景是任何设计项目的重要组成部分. ...

卡片使用_APP必备的设计元素！卡片

卡片使用_APP必备的设计元素！卡片相关推荐

最新文章

热门文章