卡片设计已成为现代 web 设计的一个共同的部分。尤其是当它作为提供到你想去页面的摘要信息。一个卡片设计就是一条信息资源的名片即从入口点到更详细信息的一个通道界面。

资料来源︰ 谷歌 Material Design团队,最近一直在负责几个重新设计。其中很多都基于卡片设计模式。这项工作是很好的提供简要写一篇文章，
以及使你可以明显的发现更多的信息。然而，当卡片设计来到新闻，特别是在家庭和档案页上，我们发现我们可能大大超过预期在使用此模式。

↑最新的 Goal.com 程序，基于卡片设计Ul

任何重新设计后的反馈

重新设计后，往往是先从你的忠实用户群即时产生负面反应。紧接着，大量的投诉和邮件问你要回复到旧的 UI设计。我们预期这个重启目标新闻和比分的直播应用。两年内，应用程序都会涉及巨大的变化。因此，在这方面，我们的战略希望作出改进。倾听批评。然后建立必然出现的常见模式。

我们第一次接触用户回馈是卡片设计UI使用后——见上图。少量的类似抱怨出现在一个屏幕上可见的物品的数量。例如︰

↑用户反馈有关卡片设计太多图片和滚动起伏的快照。

↑我只是想快速阅读新闻和滚动大图片只是为了一睹的所有的消息……

↑不能一次查看负载的新闻……

用户反馈的注意︰ 上面的反馈是很大。它不只是抱怨的特征，但也抽出时间来解释为什么它造成他们的问题。通过这个我们已经确定了一个共同的用户目标，需要快速扫描，只需获取最新的新闻的概览。

进一步的研究需要理解为什么卡片设计不能实现这一目标。这里是我们研究的重点。

我们挖一点更深层次的东西

我们使用 HotJar 来分析点击和滚动距离我们的其他网站的其中几项注意到类似的问题。Spox.com主页最近进行了重新设计。新的设计重点是从以往的英雄旋转木马设计中分离出来的新闻列表。

↑Spox.com－重新设计前

旧版主页如上图所示。你可以看到大量的点击在小图像上 （Spox 电视季后赛的旗帜）这些点击次数只有导航轮播。它们占了此页43%点击量。很可能它们吸引了大量的点击，因为单个用户可以点击多个卡片设计在同一个会话。

22%的点击出现在”Themen des tages（每日话题） 列表。此列表实际上仅出现在旋转木马上的第一个项目 ！重新设计分离了”Themen des tages”和旋转木马，如下图所示︰ 重新设计后的结果是令人难以置信，59%的总点击次数是三倍 ‘每日话题’ 的点击量。

↑Spox.com－重新设计后

有趣的是，该木马导航列表的方法有相反的影响。通过删除图像，我们已经失去了几乎所有与这一领域的互动。现在只占总点击数的1%。当之前相比有巨大的差异，之前43%的点击是在旋转木马。这可能表明用户在之前导航的旋转木马上找到的只是消失了的新闻列表。记得它之前仅出现的第一张幻灯片在这旋转木马中，这旋转木马已经启用自动播放。

移动模式

我们观察移动界面。我们访问了一个基于列表的用户界面网站（下面，左）和两个基于卡片设计的用户界面网站（下面，中，右）。我们承认，我们不比较偏向同一站点 - 像上面我们做的那样。但仍然有洞察力，并让我们可以借鉴。

↑移动点击和滚动的热点地图（通过 HotJar）

卡片设计增加了使用汉堡包菜单

比较菜单图标的使用。我们可以看到一个更大的使用卡片设计为基础的网站。我们可以看到一个崩溃的统计如下：

 左︰ Voetbalzone—— 0.48%——列表设计UI 

中间︰ Spox.com ——17.43%——卡片设计UI 

右：Goal.com ——4.93%——卡片设计UI 

这可能是因为用户不耐烦的有限的可见标题，并采取了使用菜单来查找与他们的需求相匹配的内容。

卡片设计增加卷轴的深度

使用卡片设计的目的（右）鼓励用户进一步向下滚动页面。这不是不寻常的每个卡片设计占38%或更高相比于voetbalzone（左）。虽然用户滚动更多，他们仍然看到较少的内容，看到更少的文章比较最左侧的网站。

网站模式

在视图中很明显列表的好处是你可以有更多的新闻文章视图，使它更容易、更快的扫描到标题的文章的数目更多。为了了解这种差异，我们需要研究卡片设计根据设计要求的额外空间。我们已经向竞争对手新闻网站扩大我们的研究。比较 3 个站点，依靠卡片设计和青睐列表的各3个网站。

只考虑主页，我们只规划两个场景。

第一，折叠线以上（768像素高）。

第二，滚动到最佳的位置的地方最有可能的新闻标题在视图中。

我们要进行此测试公平性还做以下规定︰

• 只算新闻文章标题在哪里
• 可见 Ensured 浏览器设置为最宽的 13″Macbook的
•  100%使用同一个浏览器，谷歌 Chrome 缩放级别设置为 100%。
•   广告块上，如广告横幅可以表现不同的高度首先让我们看折叠线以上。

↑在折叠线以上看到新闻最多的地方。最上面一行卡片设计网站。底部行列表网站。

↑各个网站在 ‘最好’ 的情况下—— 你可以看到最多的新闻的地方。

↑要看到大多数新闻的最佳位置。最上面一行的卡片设计片。底部的一行列出。

分析这些结果显示你可以几乎是新闻的两倍在视图中使用列表。当比较最差到最好的情况下，OneFootball（卡片设计）最多只能6个文章标题浮出水面。凡是Voetbalzone（名单）表面类似都有19个标题。如下图所示：

其他的列表VS卡片设计的例子

我确信我们不是唯一对付这一问题的人。例如，谷歌已了解 AB 测试其搜索结果页面。

↑谷歌搜索AB测试

谷歌搜索 AB 测试“谷歌搜索结果可能会变得更加丰富多彩，虽然提供的信息量较少”。

Credit: GreenBot

Material Design设计建议

那么，什么时候它适合使用列表呢？Material Design建议列表“快速扫描”是适合当显示相似的，重复的内容。

使用卡片设计不推荐使用在当“用户不直接比较图像或文本”的一个新闻网站，用户往往要比较新闻标题，特别是在网页上，以获得当前的故事的概述，并决定哪些文章，他们想进一步探讨。

↑卡片设计的建议来自 谷歌 Material Design团队

从谷歌 Material Design团队得到的建议是这两种模式都有明显的好处。这是没有惊喜的，列表是更紧凑，因此你可以看到更多的新闻文章和扫描标题更容易。

虽然卡片设计提供更多的影响。图像能抓取用户关注。附加信息，如摘录和标签，也可以在一张卡片上浮出水面。他们之前致力于探索给用户更多的上下文。

作为设计师，虽然我们都喜欢最新的趋势，特别是留白和大尺寸的图像，对于新闻和数据，列表只是简单地更好地解决基本用户目标。要快速扫描查找相关内容。希望你会从我们的错误中学习，打破你严格卡片设计模式，在设计你未来的网页或APP时。

END.

作者:罗布吉尔  www.rob-gill.co.uk

翻译:楚一乐  微信公众号:zhaozha01  www.elerchu.com