好的卡片设计需要3个设计步骤:UX、UI 和框架设计

设计营销   2023-01-07

本文将通过三个步骤来介绍我们如何成功设计卡片:信息架构(或 UX,或线框图)、视觉设计(或 UI)和框架(或环境)。我还列出了每个阶段要考虑的一些问题,因为您对要解决的问题越直观、越好奇,通常设计会越成功。

1.信息架构/用户体验阶段
正如他们所说,一切尽在掌握之中。卡片通常用于显示单条信息的内容和操作。当然,还有大量其他条件可能会影响卡片上显示的信息,作为设计师,您的职责是确定要显示的内容。 它们是可略读的,有时是可行的,但为了成功,需要有一个深思熟虑的层次结构。 小卡片、大卡片、带头像的卡片、带缩略图的卡片、可翻转的卡片、链接到产品详细信息页面的卡片、带状态的卡片、带总结指标的卡片、带徽章的卡片。它们都为用户在界面的每个单独上下文中需要了解的内容服务于不同的目的。

2.视觉/用户UI界面阶段
现在您已经确定了每张卡片的框架,您可以开始添加真正强调您创建的复杂视觉语言细节的视觉设计层。在设计的 UX 阶段考虑元数据的类型和状态信息将创建更强大的视觉设计。
这可以追溯到格式塔理论,即整体大于部分之和。视觉设计不仅仅是选择你喜欢的颜色或看起来很酷的图标。在具有视觉元素的复杂架构中有意为之对于获得成功的体验极为重要。视觉设计应提升卡片的层次结构,恰当地表现界面的品牌,并遵循基本的色彩理论原则。

3. 实现卡片的框架
既然您已经了解了卡片的信息架构和视觉设计部分,您就可以在更大的界面布局中使用它们了。卡片应该已经成为框架线框的一部分,并准备好放入设计中。 泳道是过滤卡片的好方法,它会自动将它们分类到有意的泳道中。

最后,我通过这篇文章问了很多问题,但没有回答很多……这是故意的。这是因为您的用户与我的用户不同,您的利益相关者和业务目标与我的不同。卡片不是万能的设计解决方案,也不应始终成为体验的一部分。您设计的每张卡片都是一种复杂的视觉语言,是更大体验的一部分。如果使用得当,它们是表达一口大小内容的有效方式。希望我在卡片设计方面的经验可以帮助指导您的卡片设计之旅。

维好维可-用户体验体验创新设计
合作咨询
+86-21-51115850
© 2010-2024  维好维可 | 用户体验创新设计公司
沪ICP备19006116号-1

联系我们,开启一场关于您项目的讨论会吧。

联系电话:
+86-21-51115850
商务邮箱:
hi@wellworks.cn
复制
公司地址:
上海市松江区茸阳路69号(百原PARK)贰号楼2楼

©2010-2024 维好维可 | 用户体验创新设计公司-版权所有

沪ICP备19006116号-1

需求留言 + 获取方案

提交信息后,我们的专属顾问会在1个工作日内与您联系。

怎么称呼?
您的手机?
您的邮箱?
您的需求?
维好维可-微信二维码