当卡片式ui不再流行，列表式ui将是王牌

《当卡片式ui不再流行，列表式ui将是王牌》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、当卡片式UI不再流行，列表式UI将是王牌　　作为设计师，虽然我们都喜欢最新的流行趋势，额外的白色空间和大图像，但对于新闻和数据，列表式是更好地解决基本的用户目标的方法。　　　　随着MaterialDesign的流行，卡片式UI已经成为现代web设计的一部分。尤其是在你在提供一个汇总归档信息的界面时。　　卡片是提供详细信息的入口。——来源：GoogleMaterialDesign　　我们的用户体验设计团队最近重新设计基于卡片的模式。本文将进行简单地总结，你会明显得得到更多的信息。然而，当涉及到新闻，尤其是家庭和归

2、档的页面时，会发现我们远远超过了使用这种模式。　　　　基于卡片式UI设计的app截图　　文章排版设计的反馈　　在重新设计后，经常用户群会有及时的负面反应。紧随其后的是大量的投诉和电子邮件，要求你撤回到旧的UI界面。　　我们计划重新设计GoalNews和LiveScores这两款app，这两个app都没有受到变化的影响。所以考虑到这一点，我们要对策略进行一些改变。听从批评，然后建立共同的模式。　　我们第一次接触卡片问题是在GoalNews发布之后–见图。屏幕上可以看见少量的抱怨的文章。例如：　　　　用户关于卡片得

3、反馈截图　　太多的图片而且需要不停地滚动。我只是想快速的浏览新闻。　　为了看所有的新闻我必须滚动大图。而且不能够一次查看加载的新闻。　　从用户的反馈得到：反馈是很重要的。这不仅仅是抱怨一个性能，而是花时间解释引起的问题。通过这个我们确定了一个共同的用户目标，需要快速阅读，只得到最新新闻的概述就够了。　　进一步需要研究一下现在问什么没有实现这一目标。下面是我们得一些研究。　　更深入的挖掘　　通过使用HotJar分析其他网站上的点击和滚动距离，我们注意到类似的问题。Spox.com的主页最近被重新设计，新的设计侧重

4、于新闻列表，从其他的分离开来。　　　　Spox.com–重新设计　　旧主页如上所示。您可以在“Spox电视季后赛”横幅上方的小图片上看到大量的可点击事件。这些点击会使导航轮播。他们在此页面上的被点击次数为43％。这可能会吸引大量点击，因为单个用户可能在同一会话期间点击多个卡。　　22％的总点击次数是通过“Themendestages”的列表。这个列表实际上只出现在第一个轮播项目！于是通过分离“Themendestages”重新设计和旋转木马导航的方法来解决这个问题，如下：　　　　Spox.com–重新设计　　结

5、果令人难以置信，“Themendestages”的点击次数增加了三倍，达到了点击总数的59％。　　有趣的是，旋转木马导航的列表方法有相反的效果。通过删除图像，我们几乎失去了与该区域的所有交互。现在只占总点击次数的1％。与以前相比有巨大的差异，其中43％的点击在导航转盘。　　这可能表示用户正在使用导航，以找到刚刚消失的新闻列表。记住它只出现在第一张幻灯片，这个导航启用了自动播放。　　移动模式　　当我们研究在移动设备上的行为时，我们访问了一个基于列表的UI网站（下面，左）和两个基于卡片的UI网站（下面，中，右）。我

6、们承认存在偏见，我们不是像上面做的比较同一个网站，但仍能总结出一些结论。　　　　移动单击并滚动地图。来自：HotJar　　卡片式增加了汉堡菜单的使用　　比较菜单图标的使用。我们可以看到一个基于卡片式的网站的更大的用途。统计数据的分析如下：左：Voetbalzone–0.48％–列表UI中：Spox–17.43％–卡片UI右：Goal–4.93％–卡片UI　　这可能是因为用户对有限的可见标题会感到不耐烦，并且已经诉诸使用菜单来找到与其需要相匹配的内容。　　卡片式增加了滚动的深度　　在Goal（最右边）上使用卡片鼓

7、励用户向下滚动页面。这不是常见的，因为每个卡片相比于Voetbalzone（最左边）占用高出38％的高度。虽然用户滚动更多，他们仍然看到较少的内容，比较左侧网站少了3篇文章。　　可阅读的文章数　　很明显，列表的好处是你可以在视图中放更多的新闻文章，从而更快地扫描标题。为了理解这种差异，我们需要研究基于卡的设计所需的额外空间。我们已将研究扩展到竞争对手的新闻网站。将3个依靠卡片式的网站与3个喜欢列表的网站进行比较。　　只考虑主页，我们已经看了2种情况。一是在折叠，二是向下滚动到“最好”的位置–最可能是新闻标题的地

8、方。为了使测试公平：只计算标题100％可见的新闻报道确保浏览器设置为最大宽度/高度为Macbook13″使用相同的浏览器：GoogleChrome缩放级别设置为100％。屏蔽广告，因为广告横幅的高度可能有所不同　　首先让我们来看看折叠效果：　　　　折叠效果。顶行是卡片式网站。底部是列表式网站。　　下面是“最好的”案例–你可以看到最多的新闻。　　　　最好的位置看到最多的新闻。顶行是卡片式