建材秒知道
登录
建材号 > 设计 > 正文

如何制作网页贺卡 制作网页贺卡

大力的手机
失眠的小笼包
2023-03-08 03:44:25

标题:原型设计中卡片式网页设计技巧有哪些?

最佳答案
负责的煎饼
呆萌的薯片
2025-08-16 14:11:26

详细滴卡片设计技巧:

卡片是我们随处可见的小UI组件,原因很简单,它们占用的空间非常小,并且可以显示足够的信息,通常还有1-2种选项。

为什么使用卡片:

卡片能够存在和流行,因为它们本身拥有简约的设计和良好的可用性,卡片将会继续流行。

卡片作为切入点,可以进一步展示更详细的信息。

卡片在视觉上也很令人愉悦,因为在大多数卡片上,卡片的图像为卡片赋予了风格。

它们自动适应Web和移动视图。

没有太多认知负荷,毕竟卡片无处不在,用户早已经很熟悉。

它们保持界面井然有序,且非常简约。

1.了解构造

UI中的“卡片”就相当于物理世界的卡片。它们可充当容器,将内部信息组合起来。

该原型使用墨刀设计

2.阴影/描边

阴影/描边有助于呈现出卡片的形态,至于你是想使用阴影还是描边,取决于UI的风格。

该原型使用墨刀设计

3.背景

卡片的好处在于:只要保证视觉上没有太繁多的对比,卡片的背景你可以随便“玩”。

该原型使用墨刀设计

4. 文本大小和重量

当字体较小时,用户会倾向于“细读”;而字体较大时,用户更倾向于“跳读”。如果字体粗细使用错误,会影响可用性和美观性。

5.对比度

卡片确实很小,因此对比度在分割信息和优先级方面起着重要作用。

6. 按钮

可以使用普通按钮、文本按钮或图标。在垂直卡片上,按钮通常放置在底部上;在水平卡片上则是在右侧或底侧。

7.间距和空隙

在可聚焦元素之间添加适当的空隙,也留足够的间距来对内部信息进行分组。

8.对焦和悬停。

要使卡片在鼠标悬浮时更明显,通常使用较暗的阴影或上升一点高度。

本文转自由墨刀翻译自Dorjan Vulaj 的8 rules for a perfect card design。

望采纳 谢谢~