原文链接：https://uxdesign.cc/designing-cards-for-beginners-9ed9454d27f6
Cards? You mean like Poker? 卡片? 你是说扑克牌吗?
Close. But no, not exactly. 接近，但不完全是这样。
We’re talking about “cards” in User Interface terms. Although it’s not untrue that the concept of cards in UX is inspired by its real-life counterpart.
我们正在讨论的是用户界面术语中的“卡片”。尽管用户体验中卡片的概念就是受到了现实生活中卡片的启发。
So what’s a card in UI/UX terms? The Nielsen Norman Group defines it as below:
所以，在UI/UX术语中，card是什么?尼尔森诺曼团队对它的定义如下:
Definition: A card is a container for a few short, related pieces of information. It roughly resembles a playing card in size and shape, and is intended as a linked, short representation of a conceptual unit.
定义:卡片是一个容器，包含一些简短的、相关的信息。它在大小和形状上大致类似于一张扑克牌，主要用来作为一个含有链接的、简短的概念单元展示。
In my relatively short, but exciting design career, almost every project I’ve worked on invariably involved the design of cards. One of my very early projects was a redesign of a “post” card for an e-learning forum. Not to mention, I spent the majority of the past year solely focused on bringing various types of cards to life on the GoIbibo app home screen.
在我相对较短但令人兴奋的设计生涯中，几乎我参与过的每个项目都无一例外地涉及到卡片的设计。我早期的一个项目是为一个电子学习论坛重新设计“邮件”卡片。更不用说，过去一年的大部分时间我都在专注于在GoIbibo应用的主屏幕上展示各种类型的卡片。
I’ve come to realise that cards are one of the basics to master when it comes to interaction design and visual design.
我开始意识到，在交互设计和视觉设计中，卡片是我们必要掌握的基础知识之一。
Cards are the building blocks of a web-based product, be it an app or site. They’re like little Lego pieces for a user interface.
卡片是网络产品的基石，无论是应用程序还是网站。它们就像是为用户界面设计的小乐高积木。
When it comes to presenting a heterogeneous collection of data, there are very few sites or apps which I’ve encountered which doesn’t use some form of card layout.
当谈到展示不同种类的数据时，我很少遇到有网站或应用程序不使用某种形式的卡片布局。
Basic Anatomy of a Card 一张卡片的基本结构
1. Title Text 标题文本
This is your card summary. At a glance, a user must know what the card is about. Titles should be short and to-the-point.
标题就是你的卡片概要。瞥一眼用户就能够知道这张卡片是关于什么的。标题应该短小精悍。
Determine whether your title requires one line or two lines, and what happens in case of text-overflow (e.g. truncation, ellipsis, etc).
确定你的标题需要一行还是两行，以及如果出现文本溢出(例如截断、省略等)会发生什么。
2. Secondary Text / Sub-title 次要文本/副标题
Use this to provide more information. Secondary text may get ignored when the user is scanning, so keep the copy crisp.
使用副标题来提供更多信息。当用户浏览时，次要文本可能会被忽略，所以要保持标题文字清晰。
3. Tertiary Text (Optional) 三级文本(可选)
If more information needs to be conveyed to the user, a tertiary line of text can be added. This should be non-essential data.
如果需要向用户传达更多信息，可以添加第三行文本，这行文本应该是非必要的信息。
Make sure to maintain a visible hierarchy between all thee tiers of text.
确保在所有文本层之间保持清晰可见的层次结构。
4. Media 媒体
This could be an image, illustration or video. The media could span the entire container, be part of the background, or be confined to shape within the card. In most cases, a card contains a single hero image.
这可以是一个图像，插画或视频。这个媒体可以跨越整个容器，成为背景的一部分，或变成被限制在卡片内的形状。在大多数情况下，一张卡片只包含一个主要图片。
5. Call to Action 行动召唤
This could be an explicit button, or a link, inviting the user to interact with the card. The card itself may be clickable in some cases, or an affordance is provided in the form of icons e.g. chevrons and arrows.
这可以是一个显式按钮或链接，邀请用户与该卡交互。在某些情况下，卡片本身可以点击，或者以图标的形式提供（可点击的）示意，例如v型线条和箭头。
6. Tags / Labels / Status Indicator 标签/标签/状态指示器
Cards may require a tag or indicator to make it stand out in a crowd.
卡片可能需要一个标签或指示器，以使其在界面的众多元素中脱颖而出。
Examples of these are:
Tags like “New” or “Updated”
Status indicators like “Live” or “Expired”
Labels like “Most Rated” or “Exclusive”
例子如下:
如“新的”、“已更新的”的标签
如“直播”或“过期的”的状态指示器
如“评分最高的”或“独家的”的标签
Tips to design your cards 设计卡片的技巧
Finally, coming to some things to keep in mind while dealing with various types of cards. Of course, there could be many more, and the rules are in no way limited to only this list.
最后，在处理不同类型的卡片时你要记住一些事情。当然，还可以有更多，规则也绝不仅限于以下这些。
1. Is it absolutely required? If not, discard it 它是必需吗? 如果不是，别用它
Don’t get carried away and stuff your cards with excess information. Card complexity varies with context — they can be simple or very detailed. Make a list of all the data points you have, and for each list item, ask: is this necessary or can I remove it?
不要得意忘形，然后用多余的信息填满你的卡片。卡片的复杂性随上下文而变化——它们可以是简单的，也可以是非常详细的。将你拥有的所有数据点列成一个列表，对于每个列表项，问你自己：这是必要的吗还是我可以删除它?
2. Identify ‘hooks’ in your card 确认你卡片上的“钩”（吸引用户的点）
Depending on the use case, your card should have one or more ‘hooks’. These are the hero elements of the card. Users will scan these during their decision-making process.
根据用例，您的卡应该有一个或多个“钩”（像鱼钩一样把用户钓上来）。这些就是卡上的亮点元素。用户会在做决定的过程中浏览这些信息。
If I’m browsing hotels, my hooks are the price, and then the picture. But if I’m ordering food, I’d rather go by the image and the restaurant name.
如果我浏览酒店，吸引我的会是价格，然后是图片。但是如果我点餐的话，我更喜欢看图片和餐厅的名字。
3. Make your cards scannable 确保你的卡片是易于浏览的
The overall structure of the card must not change. Familiarity and repetition is key — your card should be easily scannable by the users’ eye.
卡的整体结构不能改变。熟悉和重复是关键-你的卡片应该要很容易被用户的眼睛浏览。
A user should be able to predict where the Title of the 100th card would appear by simply looking at 2–3 cards.
用户只需看2-3张卡片就可以预测第100张卡片的标题会出现在哪里。
4. Ensure your card scales 确保你的卡片可以伸缩
While designing, consider all edge cases e.g. text overflows, truncation and image scaling factors. Your card template should look good for both the best and the worst case — if a card has very little data, if the content is not available or if images are of low-quality.
设计时，考虑所有极端情况，如文本溢出、截断和图像缩放因素。你的卡片模板应该在最好和最坏的情况下看起来都很好——如果一张卡片有很少的数据，如果内容是不可用的，或者如果图像是低质量的。
5. At the same time, keep things interesting 同时，保持设计的趣味性
When things on your page start to look the same, the user loses focus. That's when you break the pattern and grab their attention.
当界面上的内容开始变得相同时，用户就会失去焦点。这时你就可以打破常规，抓住他们的注意力。
Cards within a set must be uniform, however, there need not be uniformity across different sets.
同一组卡片必须是一致的，但是，不同类型的卡片就不需要一致。
Play with visuals — Some cards may have rounded corners; some may have a shadow. Use differently shaped cards. Some commonly used shapes are circles and rectangles: don’t hesitate to experiment.
玩视觉游戏——有些卡片可能有圆角；有些可能有投影。你可以使用不同形状的卡片，圆形和矩形是设计卡片时常用的形状，不要犹豫去尝试。
6. Define behaviour and limits 定义行为和限制
Before handing off your design for implementation, ask yourself:
在将设计交付实现之前，问问自己:
How would this look if there were only one or two cards?
如果这里只有一两个卡片，界面会是什么样子?
How many cards go in a line?
一排有多少张卡片?
In what order will these cards be sorted?
这些卡片将按什么顺序排列?
Which part(s) of the card are clickable? Is the whole card clickable?
卡片的哪些部分可以被点击? 整张卡片都可以点击吗?
What happens on-hover?
悬停时会发生什么?
Ask the questions, and define the rules.
多问一些问题，并且定义规则。
7. Don’t forget Accessibility and Localisation 不要忘记可访问性和本地化
When a visually challenged user interacts with your card, they must be able to make sense of the information in an orderly fashion.
当有视觉障碍的用户与卡片交互时，他们必须能够有序地理解信息。
Define alt text for media elements and links, and a tab order for the elements within your cards.
为媒体元素和链接定义alt文本，并定义卡片中元素的标签顺序。
Make sure user is able to jump between cards in a set, and is not forced to tab through each and every individual card element to proceed.
确保用户能够在一组卡片之间跳转，而不是为了进行下去，被迫点击每个tab去浏览每一个单独的卡片。
Ensure clickable areas are fat-finger friendly.
确保可点击区域是对胖手指用户友好的。
Apple recommends a minimum target size of 44 px by 44 px, while for Android it is 48dp by 48dp.
苹果建议最小的目标尺寸为44px * 44px，而Android的最小目标尺寸为48dp * 48dp
If your card will be localised into other languages, then keep character count and legibility in mind. e.g. Chinese characters take up more space than Latin scripts.
如果你的卡片将被本地化为其他语言，那么请记住字符数和易读性。例如，汉字比拉丁文占更多的空间。
In order to innovate, we must think out of the box. But, before breaking or bending rules, we must first learn and master them. Once you’ve got most of the basics right, designing cards will be a piece of cake. Good luck!
为了创新，我们必须跳出固有的思维模式。但是，在打破或改变规则之前，我们必须首先学习和掌握规则。一旦你掌握了大部分基本技能，设计卡片将是小菜一碟。祝你好运！
References:
https://www.nngroup.com/articles/cards-component/
https://material.io/components/cards
More about accessibility: https://webaim.org/
More about localisation: https://www.interaction-design.org/literature/article/localizing-the-user-experience
单词：
1. term
n. 词语；术语；措辞；学期
例：a technical/legal/scientific, etc. term 技术、法律、科学等术语
例：the spring/summer/autumn/fall term 春季╱夏季╱秋季学期
n. 期；期限；任期
例：a long term of imprisonment 长期监禁
n. 数列、方程等的）项
v. 把…称为；把…叫做
例：At his age, he can hardly be termed a young man. 到了这个年纪，他称不上是年轻人了。
2. counterpart
n. 副本；配对物；极相似的人或物
例：counterpart expenditure 对应支出
3. resemble
vt. 类似，像
例：She closely resembles her sister. 她和她姐姐很像。
例：The plant resembles grass in appearance. 这种植物的外形像草。
4. intend
vt. 打算；计划；想要
例：We finished later than we had intended. 我们完成时已超出原定时间。
vt. 意指
例：He intended it as a joke. 他只想开个玩笑
vi. 有打算
5. representation
n. 代表；表现；表示法；陈述
6. invariably
adv. 总是；不变地；一定地
例：This is not invariably the case. 事情并非总是如此。
7. majority
n. 大部分；大多数
例：The majority was/were in favour of banning smoking . 大多数人支持禁烟。
n. 成年
8. solely
adv. 单独地；仅仅
例：She was motivated solely by self-interest. 她完全是出于私利。
9. web-based
adj. 基于网络的
10. heterogeneous
a.由很多种类组成的；各种各样的
例：the heterogeneous population of the United States 由不同族裔组成的美国人口
11. placement
n.（对人的）安置，安排
例：a job placement service 职业介绍所
n. 实习工作；实习课
例：The third year is spent on placement in selected companies. 第三年是在选定的公司里实习。
12. to-the-point
a. 中肯的，扼要的；切题的
例：Write a short and to-the-point headline stating that advantage. 写个简短到位的标题，指出那些优势
13. text-overflow n. 文本溢出
14. truncation
n. 截断；切掉顶端
例：In the German environment, though, the same field, now labeled with a longer string, can cause a truncation problem, as shown in figure 18. 但是，在德语环境中，这个文本字段使用了更长的字符串标签，这可能导致截断问题，如图18所示。
15. ellipsis
n. 省略；省略符号；脱漏
例：Click the icon for the current image, and then click the ellipsis button next to the icon. 单击当前图像的图标，然后单击该图标旁边的省略号按钮。
17. crisp
adj. 脆的；新鲜的；易碎的
例：Bake until the pastry is golden and crisp. 把油酥糕点烤至金黄酥脆。
例：a crisp winter morning 冬天一个寒冷的早晨
vt. 使卷曲；使发脆
vi. 卷曲；发脆
n. 松脆物；油炸马铃薯片
18. orphan
n. 孤儿；孤行
例：He was an orphan and lived with his uncle. 他是个孤儿，和他叔叔一起生活。
v. 使成为孤儿
例：She was orphaned in the war. 战争使她成为孤儿。
19. convey
vt. 传达；运输；让与
例：Colours like red convey a sense of energy and strength. 红色之类的颜色可给人以充满活力与力量的感觉。
例：He tried desperately to convey how urgent the situation was. 他不顾一切地试图说明情况是多么紧急。
20. tier
n. 层，排；行，列；等级
例：a wedding cake with three tiers 三层的结婚蛋糕
例：The seating is arranged in tiers . 座位是一级级排列的。
vt. 使层叠
vi. 成递升排列
21. span
n. 跨度，跨距；范围
例：I worked with him over a span of six years. 我和他共事达六年之久。
vt. 跨越；持续；
例：His acting career spanned 55 years. 他的演艺生涯长达55年。
vt. 横跨；跨越
例：a series of bridges spanning the river 架在河上的一系列桥梁
22. confine
n. 边界；范围；限制
例：The work will not be confined to the Glasgow area. 此项工作不会局限于格拉斯哥地区。
vt. 限制；禁闭；（因疾病、残疾）无法离开（床 、家、轮椅）；将（自己或自己的活动）局限于；
例：Keep the dog confined in a suitable travelling cage. 把狗关进适于旅行的笼子里。
23. explicit
adj. 明确的；清楚的；直率的；详述的
例：He gave me very explicit directions on how to get there. 他清楚地向我说明了去那儿的路线。
24. affordance
n. 功能可见性；自解释性；给养
例：Affordance allows us to look at something and intuitively understand how to interact with it. 可视性允许我们一见到某事物就直截了当地知道如何与其交互。
25. chevron
n. V形线条、V形图案或箭头交通标志表示左方或右方有急转弯；
26. discard
vt. 抛弃；放弃；丢弃
例：The room was littered with discarded newspapers. 房间里到处是乱扔的报纸。
例：She could now discard all thought of promotion. 她现在可以放弃晋升的念头了。
vi. 放弃
n. 抛弃；被丢弃的东西或人
27. stuff
n. 东西；材料；填充物；素材资料
例：The chairs were covered in some sort of plastic stuff. 椅子都包了一种塑料膜。
例：Could you move all that stuff off the table? 请你把桌上那些玩意儿全都拿走好不好？
vt. 塞满；填塞；让吃饱
例：His hands were stuffed in his pockets. 他两手插在口袋里。
例：He sat at the table stuffing himself. 他坐在桌前大吃大嚼。
vi. 吃得过多
28. excess
n. 超过，超额；过度，过量；无节制
例：Are you suffering from an excess of stress in your life? 你生活中的压力太大吗？
adj. 额外的，过量的；附加的
例：Excess food is stored as fat. 多余的食物作为脂肪贮存起来。
29. familiarity
n. 熟悉，精通；亲密；随便
例：His familiarity with the language helped him enjoy his stay. 他通晓这种语言，所以逗留期间过得很惬意。
例：She addressed me with an easy familiarity that made me feel at home. 她和我谈话亲切随和，使我不感到拘束。
30. uniform
adj. 统一的；一致的；相同的；均衡的；始终如一的
例：Growth has not been uniform across the country. 全国各地的发展程度不一。
n. 制服
例：a military/police/nurse's uniform 军装；警服；护士制服
vt. 使穿制服；使成一样
31. proceed
vi. 开始；继续进行；发生；行进
例：We're not sure whether we still want to proceed with the sale. 我们不确定是否还要继续减价促销。
例：He outlined his plans and then proceeded to explain them in more detail. 他简单介绍了他的计划，接着又进行了较详细的解释。
n. 收入，获利
32. legibility
n. 易读性；易辨认
例：Legibility indicates how clear the text is visually. 易读性是指文章在视觉上是否明确。
33. script
n. 脚本；手迹；书写用的字母
例：That line isn't in the original script. 原剧本中没有那句台词。
例：She admired his neat script. 她欣赏他写的一手好字。
vt. 把…改编为剧本
vi. 写电影脚本
词组：
not to mention 更不必说；不必提及
building blocks 积木，建筑模块；生命控制中心
at a glance 一瞥；看一眼
in case of 万一；如果发生；假设
a visible hierarchy 一个明显的层次结构
stand out in a crowd 在众多中脱颖而出
in no way 绝不
get carried away 得意忘形；失去理智
decision-making process 决策过程
edge cases 极端案例
break the pattern 打破这个模式
grab one's attention 吸引某人的注意力
a visually challenged user 视力有问题的用户
fat-finger friendly 对胖手指友好的
take up more space 占用更多空间
think out of the box 跳出思维定式
break and bend rules 打破和改变规则
