“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，看看可以提供多少種卡片設計布局？