认识达内从这里开始

认真做教育专心促就业

详解：卡片式设计要这么做

发布：道士
来源：人人都是产品经理
时间：2016-08-12 17:30

讲完了卡片设计的优点，接下来达内长沙UI培训的老师想要谈谈如何设计一张卡片。

1、如何设计一张卡片

在恒定的移动端应用中相同的卡片设计，可以根据内容调整期高度，但宽度是固定的，Facebook的瀑布流页面无限的往下，单宽度是不变的，内容显示也是一样，这可减少用户的视觉成本。当然最大高度限制应该在一个平台上可用内容信息展示，但它可以设置好自动展示扩展。

从设计的角度来看，卡片设计应该是跟我们平时看到的名片一样有圆角、直角，卡片式设计给用户看起来像一个内容块，而圆角和直角只是一种视觉设计的样式，给人不一样的印象设计。

可以说这些元素在你的设计中就像是添加了一点视觉上的香料，更好的给用户带来全新，不一样的感受，而不会成为一种分心的事。卡的优点正确实施，卡片式设计可以提高产品的用户体验方面，由于其功能和形状的特性，设计师们也很方便去再添加一个有趣的UI元素，直观的使用。

2、消化的形式

在设计中完美都知道内容是驱动设计去主导，而设计样式则是修饰内容的重要部分，比如：设计是一个容器，里面可以装任何能装得下的物体，但这个容器是否合适装下这个物体来展示给其他用户，在这设计里用户可以很容易地访问他们感兴趣的内容，或功能产品，这能使用户能够从产品本身，功能需求，或者他们想要内容快速浏览他们想要的内容。

3、响应和移动设计

关于卡片式设计最重要的事情是，他们几乎有无限的可能。当然这里说的无限可能是指卡样式设计作品既适用于台式机和移动设备，因为卡提供了更多可消化的内容。他们是很好的响应设计，因为卡作为内容容器，容易扩大或下降。这就是为什么它如此容易创建一个一致的卡片样式设计，无论设备，都可以适配。

4、瀑布流设计

在扁平化设计趋势出现时，即出现了瀑布流的操作模式，顾名思义瀑布流就是可以无限制的往下滑动来刷新内容，不需要切换页面，就像Facebook、Pinterest使用卡片式设计，然后下滑刷新。以新内容中最近的事件称现在最前端的一个快速概述。Facebook新闻提要是一个无休止的瀑布流，而卡是一个内容的入口。他们把内容无限流，发现卡式内容允许相关内容自然地展示自己，让用户深入他们的兴趣。

5、屏幕尺寸适配

基于内容设计的卡片样式可以在小屏幕上很好地工作，但在一个大屏幕，它会很好的放大，缩小适配到不同的机型。从视觉上看，它仍然是一个不错的产品设计，如阅读速度和阅读理解。

在使用中用户发现你的应用程序易于操作，且卡片式的设计也能够很好的选择内容，这将大大的提升了用户的使用感受和熟悉的视觉逻辑。在产品上线后，你应该想办法得到你的用户的反馈，他们想看到什么。随着用户的反馈，你可以设计测试，以逐步优化你的产品。

我希望你有一个很好的感觉为什么卡式设计越来越受欢迎。我相信，这种趋势不会消失的很快。因为卡不只是简单的眼睛，他们是最灵活的布局格式之一，创造极致的体验。

< 上一篇：详解：什么才是卡片式设计

下一篇：讨论：大背景图的网页真的好看吗 >