网页设计中的卡式设计

本文格式为Word版，下载可任意编辑——网页设计中的卡式设计网页设计中的卡式设计

卡片，可以是任何外形、颜色和形式。但是总的来说，他们都包含了图片、图标和一些根本的文字信息，例如标题、用户名和位置信息。"然而，其流行起来的核心还在于其简朴性。你很少见到繁杂的卡片设计，它之所以展现的目的就是为了引导用户去点击它'，作为网页设计师，你该如何使用卡片?当在设计卡片时，你理应留神些什么?下面让我们来谈谈。

是什么让卡式设计势不成挡

当提及实用性和美感，卡片式设计可谓当仁不让的雄踞上风。以下所列的特性可能是它能胜出的理由。

1、响应式

响应式是个老生常谈，它成为了一项硬性要求。大片面客户都为各种层出不穷的移动设备打定好了响应式方案，那么卡式就是如此应运而生。在得志各种屏幕尺寸需要之上，卡式设计能分外便捷地扶助用户焦距到特定的内容，也让设计师在设计时合理又干脆地举行内容的布局。

2、有序性

混乱不堪的网站令人头疼，当我们在整理页面不同种类的元素时，卡式设计就能为这些内容的排版供给一种奇异的有序性。这对于设计师和用户来说都是项利好。KelseyDrake的网站可能能表示出这一特点。

3、易读性

卡式设计一个分外重要的特性就是它们包含的信息特别干脆，这让它们变得好玩且引人入胜，但这也让网站内容变得对比单一，很快就一览无余。像NamesForC这样的网站就把每张卡片都设计得生动且让人理解起来毫不吃力。

4、为社交媒体平台所青睐

想想一个社交媒体的网站是怎样建立起来的?它们需要的是明显易读和快捷的表示方式。再考虑到卡式设计，你莫非没有察觉这之间的联系?最出名的卡式设计的例子就是Pinterest和Dribble啦!

5、对等性

卡式设计还有一个特性就是对等，这里的对等当然不是十足的，也就是说，卡式设计里每张卡片，它在整个网页中的重要性是差不多一致的。这也就让大家省去了为内容举行等级排序的麻烦。不妨看看AHH的网站，你就能明白。

6、通用性

卡式设计几乎可以用于任何行业任何用途，它的创作弹性分外大。在设计风格上可以说没有任何定论，给了设计师分外大的可发挥的创意空间。就拿Futurefabric.co.uk这个网站来说，设计师利用了卡式设计去表示他的不同类型的.作品。

卡式设计中我们理应留神什么

来到重点了!作为UI设计师，假设你要运用到卡片式风格的话，有这些地方是你需要留神的以下是我的阅历之谈

1、留白

留白是老话题，但卡式设计会分外轻易疏忽这个问题，由于你的留神力焦点都在卡片上面，一不提防你就陷入到了一片混乱里。你务必善用留白或者也叫负空间。不仅是卡片外的空间，甚至卡片内部，对于产品表示以外的空间也需要精心的处理。看看Danishcompany网站的产品表示就运用留白，将网站做得分外流畅自然。

2、细节

卡式设计带来了干脆，但与此同时也务必强调一点，那就是内容的丰富性。这在确定根基上务必保证页面能供给足够多的页面内容来引导用户，否那么用户只会感到茫然。[SilkTricky]SilkTricky的网站完备地平衡了干脆性和内容丰富性，它让两个相邻卡片之间共同表示同一内容，一图一文，又削减掉页面因平铺的画面而显出的单调。它还利用了"VIEW'的高亮按钮来指点和吸引用户点击进入细致。

3、来点不一样的

卡式设计有其重复性，但并不意味着它务必得单调沉闷。别怕给你的工程中增加点吸引人的天性化的东西。客户可能不热爱而反对掉，但它增加了你为创作所付出的一种可能性。炫目的小动画、别具一格的配色风格或者是让人耳目一新的字体，这些都值得去尝试。就像WhiteFrontier这个网站所做的努力一样。

4、使用网格

这一条其实不用多说，想要让网页看上去更协调，网格可谓功不成没。

飞屋轻网站卡式设计范例

飞屋从卡式设计开头之初就在好多