UI卡片是对响应设计的终极回应。无论是响应布局还是自适应布局,卡片UI设计都可以为适应做出贡献,其灵活可控的容器结构可以根据总宽度灵活调整布局结构。虽然UI卡片在加载速度和屏幕适应性上有天然的优势,但由于卡片的意识,每个部分都是独立的信息,在设计时可能会出现页面认知负荷过大的现象。
1、什么是卡片设计?
卡片是一个 UI 组件,包括某个内容的信息和操作。卡片可以包含各种元素,但都应该属于同一主题。这样做的目的是为了防止文本冗长,呈现更多的内容。即使从设计的角度来看,用户可能不熟悉卡片的概念,但他们很快就会知道如何使用它们,因为它们与实体卡片相同。
2、卡片设计流行的原因?
卡片之所以受欢迎,是因为卡片聚焦内容,强制内容适应卡片边界和卡片布局的限制。设计者喜欢根据卡片混合大量内容,而不用担心设计会变得凌乱。
卡片可以将内容转换成容易理解的小块,方便客户与之互动。通过给内容一个容器,卡片可以向用户解释内容是真实的、感性的。
直观:卡片在页面上看起来和现实世界中的卡片一样,对用户来说似乎很常见。在卡片成为移动和网络应用中的时尚元素之前,它们在现实生活中无处不在:名片、棒球卡片和纸条。卡片代表了一种有利的视觉对比,它允许我们的大脑直接将卡片与它们所代表的内容结合起来,就像现实生活中一样。
易于阅读:卡片不占太多空间,并敦促设计师优先选择内容。不同的是,每张卡片都变成了易于阅读的内容。卡片让用户更容易找到自己感兴趣的内容。
吸引人,对用户更友好:基于卡片的设计一般都很依赖于视觉效果(尤其是照片);就信息结构而言,视觉层次会更清晰。应用照片有助于使基于卡片的设计对用户更有吸引力,而不是在卡片中排列的相同内容。
便于共享:卡片可以鼓励用户在社交平台上共享内容,因为用户可以只分享特定的内容,而不是整个页面。
3、卡片设计何时使用?
基于搜索的页面:卡片可以通过模块内容快速显示合适的内容,让用户充分了解自己的爱好。基于卡片的设计是一种非常适合显示这种内容的形式。
信息访问:当用户浏览信息时,卡片的兼容性更好。
任务管理:当过程中的单个任务可以作为卡片进行解释时,可以很容易地组织卡片以获得任务列表。使用卡片页面进行任务管理,为客户建立一个良好的仪表板层面,其中每张卡片代表一个独立的任务。
可视化分析:仪表板通常在同一页上同时显示各种内容样本。在这种情况下,卡片对比可以帮助在每个物体之间创造更明显的差异,每张卡片可以适应不同的角色。
4、卡片解构
为了支持它们所包含的内容类型,卡片的布局可以有所不同。下面的部件通常可以在各种卡片款式中找到。
富媒体:卡片可包含缩列图,以显示图片、插图、头像、Logo、标记或图形。
标题:标题文本可包含相册或文章的名称或标题。
描述:适用于文字,如文章摘要或简短描述。
动作按钮:卡片可包含用于操作的按钮。
小标题:小标题文字可包含详细介绍,例如文章的签名或标记位置。
标志:卡片可包含操作标志。
5、设计技巧
5.1使用相关主题的照片
图片是卡片设计的主角。你需要一张高档的照片来吸引用户对每张卡片的注意力。不仅仅是图像,卡片还可以包括插图、带有浅色背景框的图标或其他类型的丰富媒体,但它们需要与内容主题相关。
5.2提高视觉层次
卡片中的结构分析有助于引导客户阅读关键信息。将具体内容放在卡片的顶部,并使用排版来加强具体内容。用空缺和对比来分隔需要大量视觉分离的内容区域。
5.3限制内容长度
一张卡片应该只包含重要的信息,并给出相关的意见,以获得额外的细节,而不是完整的细节本身。当我们试图在一张卡片中添加太多内容时,卡片可能会变得非常复杂,并且会失去与卡片对比的具体联系,因为它不会像一张卡片。
5.4防止置入连接
不包括内部连接,卡片应自行连接。放置文本链接会使用户误操作。
5.5区分操作顺序
包括不同控制的卡片应该在视觉上进行比较。在下面的例子中,我通过使用轻色而不是关键的按钮风格来降低后续操作的视觉强度。
6、如何在视觉上做到更加美观?
APP 卡片并非纯粹的拟物概念,但是一般情况下,应用一致的对比和物理原理可以帮助大家了解页面,分析内容中的视觉层次。
6.1应用圆角
与现实世界中的卡片在形态上进行视觉对比。
弧线效率更高,因为它使人的眼镜容易跟随视觉动线,因为它更适合头部和眼睛的自然运动。
6.2增加轻微外框或投影
添加一个浅色的画框或者添加一个浅色的投影是一个很好的方法。影子在页面上创建了一个层次,这有助于我们区分它 UI 元素。
然而,在设计中加入黑色阴影并不像听起来那么简单。有时候设计师会加强投影效果,让原本看起来不错的设计看起来很便宜。避免使用纯黑色阴影。
6.3注意字体和留白
重要的是让每一张卡片都被看到、阅读和理解。在每一块周围增加很多空白,让用户有时间处理和重新设置视觉,有精力看完一张卡片再去下一张。
选择简单而基本的字体,因为基本的排版可以最大限度地提高可读性,并且有助于访问。
7、优秀的卡片设计案例
7.1电子商务卡片设计
商品卡片是一种非常重要的商品,可以帮助你将来的访问者转化为客户。一张优秀的产品卡片应该能够吸引人们的注意力,激发人们获得商品的冲动,鼓励人们购买,并在搜索结果中得到有效的推广。
商品的名称应该放在最显眼的地方,这样观众就会立刻明白他是来对地方的。一张好的图片可以告诉顾客比千言万语好,所以你需要一张高质量的产品图片来设计完美的产品卡片。假如产品有特价,不但要在价格栏上注明促销价格,还要注明常规价格,以及顾客可以节省多少钱。
7.2用户中心卡片设计
介绍卡片已经成为网站中的应用或功能模板。随着个人ip比以往任何时候都更加关键,卡片设计也可以在这里发挥重要作用。就像每张卡片一样,环境变量卡片也是一张卡片 UI 组件,它包含了对它所代表的内容非常重要的信息。你必须向别人推销你,以实现你的目标。
根据最初的定义和观察卡片,我们可以更好地了解这种跨行业的设计模式。这也让我们推断了客户希望在这些卡片上采取什么行动。卡片在提供许多不同类型内容概述的环境中特别有效,而不是简单地作为内容列表的替代品。希望今天的内容分享对你有所帮助~