2018网页设计趋势:卡片如何主导设计

由于它们在视觉上具有吸引力，所以卡片界面不仅仅是一种趋势。

随着2014年第一次移动互联网使用超过桌面，网页设计现在倾向于小屏幕作为响应性设计成为强制性。其结果是:简单的界面风格，如新的平面设计，极简主义，尤其是卡片比以往更受欢迎。

卡如何主导设计

来源:以前是的

card UI模式的有用性超出了加载时间和不同屏幕大小的转换。比特大小的内容与大多数web用户(尤其是移动设备)的注意广度相匹配。由Pinterest培育，然后通过Facebook和Twitter等社交媒体网站推广，现在可以在所有行业的网站上找到卡片ui。

在本文中，我们将探讨card UI模式的兴起:为什么它们是有用的，它们如何适应响应性和材料设计，以及在未来对它们的期望。

Container-style设计是什么?

要理解这种模式，您必须首先理解卡片本身。

卡片基本上是每个信息的小容器，每张卡片代表它自己独特的思想。一张卡片可以容纳所有类型的内容——视觉、文字、链接等等——但都属于一个统一的主题。



用这种独立的容器填充屏幕是《卫报》所称的“容器模型”。这提供了一个更干净、更容易理解的界面，可以快速浏览，这样用户就可以直接访问他们想要的东西。(最重要的是，这种方法适合于手势控制，下面我们将对此进行解释。)

有用和吸引:卡用户界面模式的好处是两倍。

Trello

图片来源:Trello

Trello允许用户创建他们想要的任何卡片。任何人都可以创建“待办事项”卡片，并根据需要对它们进行分类。

这不仅说明了卡的灵活性，还展示了它的组织能力。Trello成功了，因为他们的卡片格式比传统的list风格的任务管理器简单。

用户界面卡在移动和响应设计。

正如上面所提到的，卡提供了良好的兼容性与响应性框架，导致了一些像Des Traynor的对讲机称之为“网络的未来”。这一模式在移动设备上有多种原因，我们现在就来解释。

边缘

来源:边缘

首先，在扩展和收缩的框架中，卡片网格可以调整自己以适应任何断点或屏幕大小。设计人员可以非常灵活地使用卡片的纵横比(以及如何将一组卡片组合在一起)。例如，您可以设置一个具有可变高度的固定宽度，在卡片之间使用一致的间距。

将上面的截图与下面的移动视窗相比较:

边缘

来源:边缘(移动)

注意颜色的文字、图像和风格是如何保持不变的。卡片允许在不同设备之间有一致的体验。

您可以在UXPin提供的免费设计库中看到这一优势。请注意从移动到全尺寸视口的布局是多么的干净利落。

移动视窗:

移动窗口

来源:UXPin

全尺寸的窗口:

全尺寸的窗口

来源:UXPin

另一个优点是卡的样式适合于手势控制。在触摸屏上，卡片作为按钮，无需任何额外的努力。这个想法很简单:点击卡片与内容交互。

当Fitts的法律适用于网页设计时，按钮的可点击区域越大，就越容易与之交互。有多少次我们都在移动设备上点击小文本链接?

卡和材料设计

材料设计在很大程度上依赖于卡片，而他们对这种技术的深入分析也很有分量。如果你正在寻找一个完整的解释，他们对材料设计指南中的卡片的描述是值得检查的。

边缘

图片来源:谷歌

未来的卡片

虽然卡片用户界面模式不断地重塑自身以适应新的挑战，但响应性和应用程序设计可能是最受影响的设计学科。正如2015年和2016年的网页设计趋势所描述的那样，这一转变部分是由于纸质的影响材料设计正在开发Android应用程序。

1。技术

卡片可能不会停留太久。随着web性能的提高，支持更丰富的多媒体内容的能力也会提高。您可能会看到更详细的元素，比如自动更新内容，不会降低整个体验。

用你的接口

照片信用:使用你的界面。

视频取代图像(一些设计师多年来一直与之调情的想法)可能会变得更受欢迎。使用你的界面(上面)有动画的GIF卡片，使主页成为一个快乐的体验。

2。更深层次的互动

在不久的将来，卡片也可能比作为链接更有创意。正如我们在材料设计中看到的，卡片根据个体的相互作用而变化。 本文来源：港联智慧云，转载请注明出处！如果需要营销型网站建设、小程序商城、多端小程序 请联系我们！