卡片式设计干货总结:优秀卡片设计 8 法则

现在的 UI 界面设计中,卡片式设计几乎无处不在,依旧是当前热门的设计风格。这种设计手法在加载速度、跨屏幕兼容上有着天然的优势,高度的实用性和较小的流量消耗使其成为移动端的宠儿。这篇文章将会总结卡片设计的八个法则,便于大家记忆并在实践中使用。

卡片式设计干货总结:优秀卡片设计 8 法则

卡片是我们随处可见的 UI 小组件,选择它们的原因也很简单:占用很小的空间、展示足够的信息,在这么多信息中,你总能找到 1-2 项你需要的

为什么使用卡片?

1.卡片因其简洁的设计和良好的可用性而被广泛使用;

2.卡片可以作为详情信息的入口,可以展示更详细的信息;

3.卡片在视觉上是赏心悦目的,因为大多数卡片会使用图像,这些图像是赋予卡片视觉风格的主要元素;

(译者注:研究证明,图片本身能够提升设计的质感,而图片和卡片式设计的结合无疑能够让卡片本身对于用户的吸引力,再往上提升一个高度【前提是图得找对】)

4.卡片可以响应网页端和移动端;

5.没有太多认知负荷,卡片随处可见,用户对其相当熟悉;

6.它们使得界面简洁有序,推崇极简主义。

一、理解结构

卡片与物理上的卡片相似。可以把它们理解为容器,将内部的内容信息分组、分层级展示,整合组织起来。

卡片式设计干货总结:优秀卡片设计 8 法则

二、阴影/点击态

阴影或是边框线有助于使卡片更加明显,具体使用哪一种视觉样式要视你的 UI 风格而定。

卡片式设计干货总结:优秀卡片设计 8 法则

三、背景

卡片的另外一个优点是,可以随意配置背景的颜色,适用多样的视觉氛围,只要跟卡片放在一起不突兀就行。

卡片式设计干货总结:优秀卡片设计 8 法则

四、字号和字重

文字越小,用户浏览的效率越低,用户需要花更多时间去辨认和阅读;文字越大,用户浏览的效率越高,用户可以快速识别内容。错误的使用字重会影响界面的可用性和美观度。

卡片式设计干货总结:优秀卡片设计 8 法则

五、对比

卡片已经是最小层级的容器了,所以对比度在信息分层和优先级上起重要作用。

卡片式设计干货总结:优秀卡片设计 8 法则

六、按钮

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

卡片式设计干货总结:优秀卡片设计 8 法则

七、信息空间排布

包裹着可聚焦元素的合适内边距(Padding),以及可以组织信息的足够空间(Space)

卡片式设计干货总结:优秀卡片设计 8 法则

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

卡片式设计干货总结:优秀卡片设计 8 法则

八、聚焦与悬停

鼠标滑过时,为了让卡片更加突出,通常的做法是给卡片加深一点的阴影或者将卡片位置稍微抬高一些。

卡片式设计干货总结:优秀卡片设计 8 法则

原文连接:https://uxdesign.cc/8-rules-for-perfect-card-design-4fb7eef32e09

本文由 新媒体之家 作者: 三分设 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
2

发表评论