如何卡片式设计和使用场景

发布时间：2022/01/10 丨 文章来源：未知 丨 浏览次数：

　　什么是卡片？卡片是含有图片和文字在内的小矩形模块，它是用户了解更多细节信息的「入口」。要平衡界面的美学和可用性，卡片基本是一个默认选择。因为卡片用起来非常方便，还可以展示包含不同元素的内容。

　　如何设计卡片

　　在同一页面布局中，卡片宽度应保持不变，但高度可以相应调整。卡片最大高度限于该平台可用空间的高度，但也可以临时延伸。例如，在显示评论框的时候。卡片高度既可固定，又可调整。

　　从设计角度来看，卡片各角最好是圆角，并且最好稍有一点阴影。圆角使卡片看起来更像一个内容块，阴影则可以反映出深度。

　　这些元素在没有分散用户注意力的前提下，能给设计带来一些视觉亮点。另外，还能给人一种卡片像是要从页面中跳出来的感觉。除此之外，还可以加入动画和动效。

　　卡片式设计的使用场景

　　1. 信息流（feed流）

　　信息流常见的展现形式包括以文字为主、以图片为主和以视频为主。文字为主的形式多出现在资讯类的产品中，例如知乎、汽车之家等。优点是可识别强、信息简洁明确，通过对标题简洁的处理能快速告诉用户卡片上的核心内容，吸引用户快速点击阅览。

　　图片为主的形式使用最多的要属Pinterest、花瓣这类网站，相较于文字，图片浏览的速度更快，一图胜千言，图片相较于文字具有更强的视觉冲击力和感染力，更能吸引用户的注意力和点击。多数的设计中信息流的呈现形式主要是上下竖向滚动，在Plus X的网页设计中，采用了横向滑动的形式。

　　图片信息为主的卡片整齐划一地展现出来，见惯了上下滚动的设计，这种左右滑动的操作能为用户带来焕然一新的使用体验。

　　短视频的快速流行为信息流注入了新鲜的活力。视频信息流的形式在淘宝直播、抖音等移动端产品中应用较多，视频画面通常占满全屏，最大限度地利用卡片式设计。视频具备图片与文字不具有的动感，满足视听体验，带来强烈的感官冲击力。

　　沉浸式的界面设计让用户能够持续不断地浏览内容，同时只需要上下滑动这种简单的操作方式便可切换视频，适用人群广泛。

　　2. 发现页

　　卡片式设计本质上是不同信息的集合处理。越来越多的产品在发现页面会使用不同尺寸的卡片组合来突出重点信息，卡片灵活的排列组合也让页面变得更加规范。

　　卡片的优势

　　设计恰当的话，卡片可以提升 app 的用户体验感。因为其功能性以及外形的原因，它们成了用户界面的一个增值元素，对用户来说，也更能凭直觉交互。

　　1. 易于理解的形式

　　卡片是一个可以装入任何内容的设计盒子。将不同内容置于卡片之中，可以方便用户理解。

　　这样一来，用户可以轻松了解其最关注的内容。这也使用户可以通过各种方式来交互。

　　包含不同内容形式的卡片集。图片来源：Material Design

　　2. 响应式设计以及移动界面设计

　　关于卡片，最重要的是它们基本上极度容易被掌控。不管在台式桌面还是手机客户端，加入卡片设计的效果都非常好，因为内容可以通过更易理解的卡片呈现给用户。就响应式设计而言，它是不错的选择，因为以内容盒子呈现的卡片可以方便地扩展或收缩。

　　最后，加入卡片，在跨平台设备上设计出统一的美感也就不会步步维艰了。这也是为什么通过卡片可以在不同设备上轻松设计出相同的用户体验感。