在现实生活在,视觉信息老是很吸引人的眼球,好的页面设计老是可以脱颖而出,而卡片设计的应用就是一种趋势。设计模式
有数据显示移动端使用率远远高于桌面端,网页设计都能很好的适应小屏幕。这个结论就是:简单的界面风格,好比:扁平化设计,极简设计,尤为是卡片设计比往年都要流行。网络
卡片式网页设计框架
判断一个卡片设计的好坏,重点看下面两个:布局
好的卡片设计不会使用太多的加载时间,性能
同时它也能在不一样的屏幕上切换自如。字体
小的模块对于用户来讲更能吸引注意力(尤为在移动端),它在Pinterest上培养你们的习惯,而后在Facebook和Twitter上面推广,卡片设计能应用于各个领域的网站设计。动画
更多免费教程资源,欢迎添加小编的私人QQ(1058484219)索取~~网站
在这篇文章中,咱们将会探讨卡片设计的崛起:为何它们有用,它们如何适应于响应设计和material design,在将来又会发生什么?spa
为了了解抽屉式设计,你首先得先了解卡片是什么。设计
每个卡片拥有属于本身的信息。一张卡片能包含全部信息 — 视觉、文本、连接等等— 可是全部这些内容都是一张卡片里面的内容。
这种独立填满整个屏幕抽屉式展示信息的方式 被Guardian 叫作“抽屉模式”。它让用户更加直接清晰的看到整个界面,也有利于用户快速的寻找他们须要的信息。(最重要的是,这种方式可以有利于咱们本身控制,下面的文章我会解释为何。)
让人以为颇有吸引力的是:它们使用的卡片界面是相互叠加的。
叠加的卡片界面
“网页的将来这种设计可以在移动端随意很好的转换。”,卡片设计有以下的优势:
Trello 能让用户建立他们本身想要的任何卡片列表。全部人都能建立“to-do”卡片 ,同时可以按照本身的需求进行分类。
Trello不只让卡片具备灵活性,并且还能被用户随意摆放。Trello的成功是由于相较于传统列表式布局,它让用户感受很简单。
UI卡片在移动端和响应式设计中的应用 正如上文提到的,卡片为响应式框架提供了出色的兼容性
The Verge 网页端
首先,它可以本身扩展或者收缩去适应任何屏幕的尺寸。设计师能够很灵活的控制卡片的比例(几组卡片可以更好的适应彼此)。例如,你能够设计固定的宽度和一致的间距来适应可变更的高度。
比较上面The Verge的网页截图和下面的移动端截图:
The Verge移动端
注意他们两个的文本信息、图像和颜色的风格都是一致的。卡片设计让用户在不一样的设备上有一致性的体验。
你能够看到这个优点在UXPin的e-book里面被利用。注意他们从移动端到全屏的界面是很是清晰的。
UXPin移动端界面
UXPin全屏的界面
另一个优点是如何让卡片适应人们手指操做。在触屏上,操做它就像按动一个按钮同样不须要花费多少精力。这个想法很简单:点击卡片,让它与内容交互。
像菲茨定律适应于网页设计展现那样,点击区域越大就越容易相互做用。还记得咱们有多少次挣扎在移动设备上点击一些文本连接么?
卡片和Material Design很依赖卡片式设计,卡片描述在Material Design指南里值得你去寻找一个好的解释。
Material Design
卡片设计模式不断的重塑自身以适应新的挑战,而响应式和移动端也许会受最大的影响(没错,说的就是Android)
1.技术
卡片不可能永远是静态的。随着网络性能的提升,也可以支持更丰富的多媒体内容。你可能会看到更多细节的元素,好比自动更新内容可是不会影响整个用户体验。
Use Your Interface
视频能更换图片(设计师思考这个问题不少年了)也许会变得很流行。Use Your Interface(上图),这些GIF动画功能让整个页面体验很是愉悦。
2.深度的交互
在不久的未来,卡片也许可以变得更加的有创意。就像咱们看见 Material Design,它很是依赖我的的交互,随着自动排序和实时更新等功能的更新(好比天气预报)。
Material Design
Windows手机里面已经开始应用卡片式自动分类方式,颇有可能其余移动手机也会使用这种方式。
3.尺寸
图片并列的布局趋势,也让卡片更好的使用大尺寸屏幕。
大卡片上能布局更多的细节和复杂的字体,它从视觉上让用户感受很舒服。大小卡片交替的时候,大卡片在视觉上更让人感受舒服。
Arkitekter
Arkitekter(如上图)是怎样应用大尺寸和中等尺寸做为信息布局的。有些卡片有连接,有些卡片是静态的信息。大小不一样的卡片呈现方式,让整个页面更有呼吸感。
4.可穿戴的
多亏了谷歌眼镜,它让卡片的UI设计在穿戴设备上奠基了基础。
谷歌眼镜
尽管有不少人认为谷歌眼镜会失败,可是也有一部分人认为它有市场。无论怎样,穿戴设备的UI设计必需要很好的利用空间来设计,而卡片设计是它最实用的选择。
要点 在全部的媒介和设备上,卡片设计已经成为设计经常使用的一种方式。他们当前的形式可能会随着技术的发展有所改变,可是他们确实是存在的。
毕竟,这些布局并非一个表格。别忘了,在不久前卡片只是一张包含内容的纸片而已。