“I want a card”, this is the first demand point that the customer said in the last issue when talking to me about demand. There is no doubt that the card type is excellent for both PC and mobile phones. From online shopping malls to social media sites, card design has become a powerful trend in web design. The most important reason must be its flexibility.

“我要一张卡”，这是客户在与我谈论需求时在上一期中所说的第一个需求点。 毫无疑问，该卡类型对于PC和移动电话都非常适用。 从在线购物中心到社交媒体网站，名片设计已成为网页设计中的一种强大趋势。 最重要的原因必须是它的灵活性。

Cards can be of any shape, color and form. But in general, they all contain pictures, icons and some basic text information, such as title, user name and location information.

卡可以是任何形状，颜色和形式。 但通常，它们都包含图片，图标和一些基本的文本信息，例如标题，用户名和位置信息。

“However, the core of its popularity is its simplicity. You rarely see complex card designs. The reason why it appears is to guide users to click it.”

“但是，其受欢迎程度的核心是其简单性。 您很少看到复杂的卡设计。 它出现的原因是为了引导用户单击它。”

As a web designer, how do you use cards? When designing cards, what should you pay attention to? Let’s talk about it below.

作为网页设计师，您如何使用卡片？ 设计卡时，应注意什么？ 让我们在下面谈论它。

是什么让名片设计势不可挡 (What makes card design unstoppable)

When it comes to practicality and beauty, card-style design can be said to be superior to others. The characteristics listed below may be the reason why it can win.

在实用性和美观性方面，可以说卡片式设计优于其他设计。 下面列出的特征可能是它可以获胜的原因。

1.ReactSwift (1. Responsive)

Responsiveness is an old saying, it has become a hard requirement. Most customers have prepared responsive solutions for various endless mobile devices, so the card-type is born. In order to meet the needs of various screen sizes, the card design can help users focus on specific content very conveniently, and also allow designers to lay out the content reasonably and concisely during design.

响应能力是一句老话，它已经成为一项硬性要求。 大多数客户已经为各种无休止的移动设备准备了响应式解决方案，因此，卡片式诞生了。 为了满足各种屏幕尺寸的需求，卡片设计可以帮助用户非常方便地专注于特定内容，还允许设计人员在设计过程中合理，简洁地布置内容。

2.井然有序 (2. Orderliness)

The chaotic website is a headache. When we organize different kinds of elements on the page, the card design can provide a wonderful order for the layout of these contents. This is good for designers and users. Kelsey Drake ‘s website may show this feature.

混乱的网站令人头疼。 当我们在页面上组织各种元素时，名片设计可以为这些内容的布局提供出色的顺序。 这对设计者和用户来说是好的。 Kelsey Drake的网站可能显示此功能。

3.易读性 (3. Legibility)

A very important feature of the card design is that the information they contain is very concise, which makes them interesting and fascinating, but it also makes the content of the website relatively simple and quickly glances at a glance. Websites like NamesForChange.org make every card vivid and easy to understand.

卡片设计的一个非常重要的特征是它们所包含的信息非常简洁，这使它们变得有趣而引人入胜，但是这也使网站的内容相对简单，并且快速一目了然。 诸如NamesForChange.org之类的 网站使每张卡片都生动而易于理解。

4.受到社交媒体平台的青睐 (4. Favored by social media platforms)

Think about how a social media website is built? What they need is a clear, easy-to-read and fast display. Considering the card design again, don’t you find the connection? The most famous examples of card design are Pinterest and Dribbble.

想想如何建立社交媒体网站？ 他们需要的是清晰，易读且快速的显示。 再次考虑卡的设计，您没有找到连接吗？ 卡设计最著名的例子是Pinterest和Dribbble 。

5.平等 (5. Equality)

Another characteristic of the card design is equality. The equality here is of course not absolute. That is to say, the importance of each card in the card design in the entire web page is almost the same. This saves everyone the trouble of ranking the content. You might as well look at the AHH website and you will understand.

卡设计的另一个特点是平等。 当然，这里的平等不是绝对的。 也就是说，整个网页中卡片设计中每张卡片的重要性几乎相同。 这省去了所有人对内容进行排名的麻烦。 您不妨查看AHH网站，您将了解。

6.多功能性 (6. Versatility)

The card design can be used for almost any purpose in any industry, and its creative flexibility is very great. It can be said that there is no conclusion on the design style, which gives the designer a very large creative space to play. Take the website Futurefabric.co.uk , for example, the designer uses a card design to display his different types of works.

名片设计几乎可以在任何行业中用于任何目的，并且其创意灵活性非常好。 可以说，关于设计风格尚无定论，这给了设计师很大的创作空间。 以Futurefabric.co.uk网站为例，设计师使用卡片设计来展示他的不同类型的作品。

名片设计中应注意什么 (What should we pay attention to in the card design)

Come to the point! As a UI designer, if you want to apply the card style, you need to pay attention to these places (the following is my experience)

说到重点！ 作为UI设计师，如果要应用卡片样式，则需要注意这些地方(以下是我的经验)

1.留空 (1. Leave blank)

Blank space is an old topic, but card design will easily ignore this problem, because your focus is on the card, and you will fall into a mess if you are not careful. You must make good use of blank space (or negative space). Not only the space outside the card, but even inside the card, the space outside the product display also needs to be handled carefully. Take a look at the product display on the Danish company website and use the blank to make the website very smooth and natural.

空格是一个古老的话题，但是卡的设计很容易忽略此问题，因为您的注意力集中在卡上，如果不小心，会陷入混乱。 您必须充分利用空白(或负数空间)。 不仅卡片外的空间，甚至卡片内的空间，产品展示之外的空间也都需要小心处理。 看一下丹麦公司网站上的产品展示，并使用空白使网站非常平滑自然。

2.细节 (2. Details)

The card design brings simplicity, but at the same time it must be emphasized that the richness of the content. This must ensure that the page can provide enough page content to guide the user on a certain basis, otherwise the user will only feel dazed. [Silk Tricky] (Silk Tricky) ‘s website perfectly balances simplicity and content richness. It allows two adjacent cards to display the same content, one picture and one text, and cuts the page due to the tiled screen. Out of monotony. It also uses the highlight button of “VIEW” to remind and attract users to click to enter the details.

卡的设计带来了简单性，但同时必须强调内容的丰富性。 这必须确保页面可以提供足够的页面内容以在一定基础上指导用户，否则用户只会感到头晕。 [Silk Tricky](Silk Tricky)的网站完美平衡了简单性和内容丰富性。 它允许两张相邻的卡显示相同的内容，一张图片和一个文本，并由于平铺屏幕而剪切页面。 出于单调。 它还使用“查看”的突出显示按钮来提醒和吸引用户单击以输入详细信息。

3.有所不同 (3. Something different)

The card design has its repeatability, but it does not mean that it must be monotonous. Don’t be afraid to add attractive personalized things to your project. The client may reject it if he doesn’t like it, but it increases the possibility of paying for your creation. Dazzling little animations, unique color matching styles or refreshing fonts are all worth trying. Just like the efforts made by the White Frontier website.

卡的设计具有可重复性，但这并不意味着它必须单调。 不要害怕在您的项目中添加有吸引力的个性化内容。 客户可能会拒绝它(如果他不喜欢它)，但是这增加了为您的作品付款的可能性。 令人眼花little乱的小动画，独特的色彩匹配样式或令人耳目一新的字体都值得尝试。 就像White Frontier网站所做的努力一样。

4.使用网格 (4. Use grid)

Needless to say, this one is really useful for making web pages look more coordinated.

不用说，这对于使网页看起来更加协调非常有用。

后记 (Postscript)

The extension of the card design is almost endless. Open your Photoshop and see how many card design layouts you can come up with?

卡设计的扩展几乎是无止境的。 打开您的Photoshop，看看可以提供多少种卡片设计布局？