折叠式卡片的实践案例

编辑导语：折叠式卡片设计在日常生活中十分常见，但在设计上，它所要考虑的细节有很多。如何在UI上兼顾界面美观与用户体验，设计出优秀的折叠式卡片？本篇文章里，作者结合实际案例进行了设计总结，一起来看看吧。

文章图片
我已经为Figma制作UI工具包3年多了，在机缘巧合下我建立了Setproduct.com 。我们制作该网站的目标是帮助设计师更快地发布他们的产品，进而能够节省公司和自由职业者在设计上所需花费的时间和金钱。
我从事平面设计师工作20多年了。在过去的几年里，我每天都会查看数千个不同的组件、屏幕布局、应用程序。我这样做是因为我有一个目标——制作一本关于设计应用及其组件、模板等的综合性书籍。
好，现在我们进入文章的内容。我们在这里有很多小的UI细节，我们将在下文向您展示。
一、什么是折叠式卡片？折叠式卡片（也称为扩展面板）是垂直堆叠的选项列表，可以展开/折叠以显示或隐藏其他相关内容。

文章图片
二、要点1.状态折叠式卡片的默认状态如下：????展开????折叠????悬停????注视????禁用
文章图片
2.V型图标的位置单击折叠式卡片后， “V型”图标通过倒转来表示状态栏已成功展开。再次单击时“V型”图标会再次倒转恢复到其初始位置。

文章图片
您也可以使用这些符号代替“V型”图标：

文章图片
3.附加符号【折叠式卡片的实践案例】在折叠式卡片的图标位于右侧的情况下，可以使用附加符号来强调选项标签的含义，比如图中“关键词”用搜索的放大镜标识，方便用户理解含义。但是我们需要注意，额外的标注符号太多可能会使折叠式卡片显得很臃肿。

文章图片
您也可以使用不同的颜色来区分不同的选项：

文章图片
三、容器的样式1.扩展元素如果使用需要多个折叠卡片的组合，我们需要突出显示展开状态。使用这种方式能够帮助用户了解打开了哪个折叠式卡片，通俗来说就是通过突出的显示方式与便于与其他折叠式卡片区分。以下是如何对突出显示进行样式化：

文章图片
尽管带高度的阴影在白色和浅灰色表面上看起来很棒，但用8%到12%的不透明度填充扩展的背景是一个很好的补充，同时也适用于白色表面。如果效果不太好，还可以为下拉扩展栏添加轮廓描边。

文章图片
2.封闭式折叠卡片我们可以用一个稍微明显的分隔符来划分项目，这种方法将节省一些垂直部分的空间。

文章图片
3.分离式折叠卡片有时折叠式卡片可以被很大的空间隔开。如果不需要节省垂直方向空间的话，可以用这种方法试试。

文章图片
四、折叠式卡片的可用性1.标题作为预知信息标题能够在用户展开标签之前告知用户能看到的内容。在折叠卡片后，还可以看到用户自己的选项。