移动端UI设计中,卡片式设计撑起了半壁江山,它随性自由又充满了逻辑性,它正在变得更加流行。

在各个APP中常常见到的那些承载着图片、文字等内容的矩形区块就是所说的卡片,卡片存在的方式多种多样,当你点击它的时候能够看到更多详细的内容。一般把这种容器称之为“卡片”。从另一个方面来说,它也指那些包含一定图片和文本信息在内的长方形,作为指向更多详细信息的一个入口。

卡片作为界面。有时你甚至看不到卡片的设计形态,因为它们和屏幕完美重合了。但如果仔细看,仍然可以识别出它采用卡片式设计。卡片式界面通常整体作为一个可触元素。无论点击或滑动至屏幕上任意位置,都可操作。在游戏界面中应用卡片式设计也是一个亮点。

卡片作为界面流的中断,卡片式设计也经常以向下滑动覆盖屏幕的方式,用于移动端或APP广告与界面式卡片不同的是,这些卡片包含两种链接一强链接和弱链接。可以通过超强链接跳转至产品广告页。点击弱链接则返回上一个界面,一般来说弱链接很难被点击。

从用户体验来看,广告与整体界面的和谐度比较高。虽然这样广告会占满屏幕,但并不会给用户造成太多困扰,因为你仅仅在屏幕卡片顶端叠加了广告卡片,用户可以关闭或者忽略它。卡片帮助用户快速浏览信息,用视觉风格一致的广告提供直接的商业价值。

卡片可以承载不同类型的内容,因而成为内容型网站和APP的完美容器一这种通用的框架不会拒绝任何内容。卡片的元素可以包含:照片、文本、视频、优惠券、音乐、付款信息、注册或表单、游戏数据、社交媒体流或分享、奖励信息、链接以及以上元素的组合。这样做的好处是用卡片承载内容信息,层次简单易懂,用户易于滑动浏览。

典型布局中,屏幕中每张卡片地位相等,不存在一个卡片主导其他的情况。多张卡片井然有序排列,用户自主选择他们想点击的卡片进行操作。

在数字领域的应用程序中,卡片式设计提升了操作行为体验。从另一方面来想,当用户与卡片进行交互时,可以分成几种行为模式。卡片通常会做三件事:记录信息、用信息吸引用户或提醒用户信息。根据卡片内容元素,将卡片进一步细化为不同类型容器。

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

第二,发现:卡片能让相关内容自然地呈现出来。采用网格或瀑布流布局时,使用淡入效果展现卡片,会让用户觉得好玩和身在其中。例如,当你向左或向右滑动,展现符合你口味的歌曲。

第三,对话:由于卡片是相对独立的,他们能够完美展示正在进行的对话。

第四,工作流:卡片可以将待办事项快速归类。

就像在生活中使用卡片一样,对设计师和用户而言,卡片必须很方便使用。当你设计卡片时,需要做一些重要的决定,合适的卡片尺寸,恰当的视觉风格。而常用的卡片尺寸有几个选择:小尺寸、摘要形式的卡片;中等尺寸的卡片;全屏卡片;叠在其他界面元素之上的弹出式卡片。

由于卡片式设计能够承载各种类型的内容,需要设计师精通从色彩到图像应用等方方面面知识。以下是最适用于卡片设计模式的原则:

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

第二,在无色系中保证U1清晰。在无色系的条件下设计,必须考虑其可用性和所包含的内容,在此基础上再有目的地添加颜色。

第三,有意识地留白。卡片留白的重要性不言而喻,先给卡片一些空间恰当地增加文本内容。为了让文本看起来足够清楚,可以在文本下使用深色蒙层,把文本放在一个框里或者把背景做模糊处理。

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

零基础自学CDR AI PS ID视频教程

APP UI界面素材包第37季