CanvasFlip
最近，用户更加强调在台式机和移动设备上都能很好地呈现的设计。这并不奇怪。用户已经多屏了。他们在桌面上浏览，切换到移动设备，并可能在晚上选择平板电脑。作为设计师，我们需要适应访问者不同的设备使用情况。卡片布局是一个完全符合要求的元素。
卡片设计已经无处不在，Facebook，Twitter到亚马逊卡布局等电子商务商店已经迅速普及。并且有充分的理由。它看起来干净整洁。它邀请参与。它很好地组织内容。它可以帮助用户快速扫描页面。易于扩展且非常灵活。
但是卡片设计也需要设计得很好才能优化用户体验。否则会很容易出错。
那么应该怎么做？
后面会写到设计卡片的最佳做法，但我们首先要知道什么是卡片，用卡片设计有什么好处？
UI中所说的卡片类似于实体卡。它们是包括图像，文本，链接，按钮等的矩形，并用作详细信息的预告片。卡片由多个容器组成，一个元件占据一个容器。一个容器有图像，第二个容器有标题，第三个容器有副本，第四个容器有下一页的链接，依此类推。
CanvasFlip
典型的卡片结构
例如，在电商平台上，设计师会使用卡片来承载类目列表，在社交媒体网站中，卡片于表示单个活动或思想。在新闻网站和杂志中，卡片用于显示不同的新闻项目。
卡片的好处也很多其中包括：
卡片的展示有非常多种。它们也非常适合用来展示尺寸不同，属性不同的各种元素。
响应性：使用卡片的设计在小屏幕尺寸的移动电话中呈现出精美的效果。手机更喜欢流畅的布局，而卡则最适合它。桌面上的3项卡排可轻松呈现为移动设备上的3个项目列。它可以很好地适应用户在桌面上（从左到右）和移动（从上到下）的眼球运动。
组织性：卡片保存各种内容元素，如图像，文本，CTA组织在不同的容器中。它为设计师节省了宝贵的时间来调整每个元素。它还与用户行为模式很好地协调，以帮助他快速完成任务。
极简：极简主义是一种流行的设计方法，可以简化用户理解并且看起来很优雅。卡片非常适合简约设计。
设计卡片的最佳做法
有目的的使用卡片
虽然卡片是一个很好的UI元素，但不仅仅是用于外观。将其用于其真实目的，即组织不同类型和大小的内容元素。卡片布局在以下情况下效果最佳。
当你的UI设计中有多种内容类型，如图像，文本，CTA按钮等。
UI有可变长度的内容类型
用户不用考虑各种元素之间的尺寸差别
等有一些互动，如链接，喜欢和分享按钮等
material.io
保持简单
每张卡片的一个想法效果很好。UI设计中可以使用多个元素图像，文本，链接，按钮等，但它们都应该构成一个思想或行动。不要使用额外信息或操作过载卡。并限制卡中的文字数量。不要添加文本段落。
引导用户关注最重要的信息或操作
使用卡片内的内容层次结构吸引用户注意最重要的信息。例如，将主要信息放在卡的顶部。设计时还可以使用排版来强调主要信息或操作。
CanvasFlip
精心选图
图片是UI当中视觉化元素的代表，它能让界面吸引人，也能让卡片脱颖而出。但是不是图片素质越好，对于UI就越好，图片必须要传达正确的信息，这是第一要务。图片在卡片内的位置，通常取决于它是主要内容还是支撑性的内容。
支持交互
虽然卡片是指向用户提供更详细信息的交互元素，但卡片上的一些微交互将提升体验。当用户将鼠标悬停在卡上，单击链接或按钮时，UI设计师在设计时可以使用微交互。
支持手势
特别是在移动设备中，手势效果很好，并添加了一些有趣的元素。UI设计师在设计时可以使用滑动手势移动卡片和拾取和移动手势来安排卡片集合。但是，请确保功能完美，否则可能会妨碍用户体验。
Pinterest
很好的设计
在设计卡片时要有创意。使用高质量的图像和合适的尺寸。使用良好的排版。给它圆角。使用阴影和渐变效果很好，让您的卡片成为用户的喜悦。
Bashooka
最后总结
卡片非常适合提升页面设计。它还为用户带来了极大的可用性。卡片不仅仅是好的设计，它们是很好的体验。卡片中的设计师有很多创意，表达自己并创造丰富的用户体验。
原文地址：uxplanet
原文作者：CanvasFlip
网友评论