最专业的代练平台开发!

资讯热点
如何使用“卡片设计”来增强用户体验

发布时间:2023-11-19 分类: 行业资讯

1.卡是什么?

卡片通常是指包含某些图像和文本信息的矩形,作为更详细信息的入口点。如今,在确保界面出色的可用性的同时,卡式设计甚至成为平衡界面美学的默认实践。因为显卡非常方便,界面的内容是由不同的元素组成的。

1.杰出的隐喻效应

因为它看起来像现实世界中的卡片,所以界面设计中的卡片具有很大的隐喻效果。事实上,在移动设备出现之前,卡已经遍布我们的身体 - — —名片,棒球卡,扑克牌等,它已成为一种应用及其广泛的物理性质的互动模式。因此,对于用户,他们可以更直观地认识到界面设计中的这些卡表示某些信息,如物理卡。

在快速提供信息时,卡是一种出色的工具。在棒球卡的情况下,您需要知道的棒球运动员的基本信息包含在小卡片的两侧。

2.良好的内容组织

卡片以有组织的方式将信息组织到不同区域,屏幕空间更小。类似于文本段落是组织声明的结果,卡片收集各种信息以形成连贯的内容体。

Facebook利用卡式设计将每个事件的摘要打包成一张卡片。卡片布局设计越来越受到Facebook等巨头的欢迎。

3.视觉上赏心悦目

基于卡的设计通常严重依赖于它们的视觉效果。卡本身对图片有很强的依赖性。许多研究指出,图像可以真正改善网站或应用程序的设计和浏览体验,因为图像可以快速有效地吸引用户的注意力。因此,如果图像可以在卡中突出显示,则自然会对用户更具吸引力。

看看Dribble——一个着名的社区网站,致力于展示设计师的作品。必须说卡式设计确实是呈现此类信息的最合适方式。

二,如何设计一张卡?

在相同的布局中,卡的宽度应相同,但高度可以不同。最大高度受平台上可用空间的最大高度限制,但此高度也可以临时扩展(例如,扩展显示注释区域)。

卡可以固定或可变高度

从设计美学的角度来看,卡片应该有一些圆角和阴影。因为圆角使卡看起来更像内容块,阴影反映了图层的深度。

这些元素为设计增添了一些亮点而不会分散用户的注意力,并且它们还使卡片和页面看起来分层。

此外,我们还可以利用动画和动态设计。

三,卡的优点

如果应用得当,该卡可以以某种方式增强应用程序的用户体验。由于它们的功能特性和形状,它们本身成为一种更具直观性的界面元素。

1.抽象格式易于理解

您应该已经知道,今天是内容为王的时间,卡片可用于容纳几乎任何类型的信息,其摘要信息属性易于用户快速消化。在这方面,用户可以通过卡轻松访问他们感兴趣的内容。反过来,用户愿意参与卡的浏览和操作。

卡套包含不同类型内容的卡

2,可以进行响应式设计

卡片最重要的是它们几乎可以无限变形。卡式设计在桌面和移动设备上都能很好地工作,因为它以一种易于用户消化的方式向用户呈现内容。因为卡片是一个可以轻松放大或缩小的内容容器,所以卡片是响应式设计的不错选择。

最后但同样重要的是,卡片可以在多个设备上创建一致的独立美学,这就是为什么它可以轻松地跨设备创建一致的体验。

3.直观的可操作性

卡的动作应该是手指导向的。对于移动应用,这是卡受欢迎的一个关键原因。这些卡的工作方式与实体卡相同,让用户体验到非常舒适的体验。用户无需考虑如何操作卡。他们喜欢卡的简单性,并且可以直观地理解翻转卡片是为了获取更多信息,滑动是在不同卡片之间切换。

在哪里使用?

1.信息流

当卡片显示在流中时,会创建一系列与自然时间轴匹配的事件。想想Facebook如何使用卡片来描述新信息流中的事件概述。虽然总信息流不受限制,但每张卡彼此独立并包含可以操纵的某些内容。

2,用于查找感兴趣的内容

该卡允许相关内容不言而喻,允许用户发现他们感兴趣的内容。看看Tinder的卡片模式:当您向左或向右滑动时,您正在寻找适合您口味的人。

Pinterest在信息动态中使用引脚(用户可以收集他们感兴趣的内容),吸引用户沉迷于不间断浏览。

3,对话框

由于卡片是内容容器,因此它们也可以很好地表示动作。卡中的基本动作是卡本身。想想Apple设备上的AirDrop。当您收到数据传输请求时,会弹出一张卡片,提醒您是同意还是拒绝。

无论你选择哪一个,都只有一个动作

4.工作流程

卡片很容易分类一系列任务。以Trello为例。从看板,所有管理项目都完全基于卡。每块板都装满了卡片,每张卡片代表一个单独的任务。

5.不要在任何地方使用卡片

1,相同的物种(如)内容

对于没有太多动作的相同(类似)内容,使用列表(网格)表示是比卡式设计更合适的方法。

左:在这里使用卡分散了用户的快速浏览

没有必要在照片库中使用卡片。在这种情况下,使用网格的干净且轻量级的方式将是更好的选择,如下例所示:

2,大屏幕尺寸

基于卡片的信息呈现在小屏幕上可能非常好,大屏幕上的成绩单对于他们的视觉效果非常好,但是它们对阅读理解的速度有很大的影响。例如,大屏幕上的Pinterest:

3.重新设计现有应用程序

根据这种新的视觉观点,认为您的应用程序相当容易使用的用户可能无法购买您的帐户。您应该尝试从用户那里获得反馈并找出他们想要看到的内容。通过反馈,您可以进行设计更改甚至重新设计,然后查看用户随附的更改。

6.结论

我希望通过这篇文章,您可以理解为什么卡式设计变得越来越流行。而且我相信这种趋势不会在短期内消亡。由于卡不仅易于导航,因此它们是用于创建一致用户体验的最灵活布局之一。如今,人们更加注重在内容消费面前快速找到满意的内容。由于卡片可以起到很好的作用而且不受设备的影响,这不是一个好的选择吗?

翻译自:https://uxplanet.org/using-card-based-design-to-enhance-ux-51f965ab70cb.2uys07u81

« 回归商业的本质:新零售潮下的电子商务创业故事 | “百川计划”加速仓储网多极化建设苏宁打造国内顶级智能物流平台 »