破解了，苹果的卡片效果原来是这样的
卡片设计自从苹果系统升级后，在越来越多场景中备用，这些年也越来越被设计师喜欢，卡片作为一些信息容器，里面可以承载很多信息，视频，图形，文字，按钮，基本你做的业务属性都可以放进去，那么卡片设计有哪些技巧，今天分享给你。
除了了解当下的设计趋势，还要多去看些大厂的一些设计，今天给大家分享近期搞到的小米品牌设计完整手册，需要的同学快来文末领取吧！
👆文末领取神器工具👆
如果你想看更多精华文章、经验分享，欢迎加入我们的设计日记星球，更多内容可在星球查看。
1. 什么是卡片设计
卡片是一个UI组件，它包含了很多模块和内容在里面，你可以理解为是一个杯子，杯子里面你可以放各种饮料。但是它们都是一个主题里。
卡片是鼻祖是facebook公司，最早它们旗下产品facebook，ins等社交产品最先使用的，每个卡片代表一个功能。用户看见一个卡片就能很清晰的理解里面是什么内容，并且知道卡片是可以点击的，不需要去教育。
2. 卡片设计有什么优点
卡片设计为什么受很多设计师喜欢，甚至苹果系统也全部改为卡片设计，因为卡片是模块化的，每个卡片代表一个内容。能让用户更加清晰直接的了解，另外排版也不会混乱。
另外卡片里面可以交互的点很多，可以是数字，也可以是图像，也可以是视频。用户那个很好理解，而且特别直观，用户能一眼知道里面内容。比如上图耐克的设计，用户一看就知道每个卡片是什么。
▍1.卡片很直观
直观：卡片在UI里面和我们现实生活中的卡片基本一样，比如名片卡片，会员卡，便利贴，银行卡基本一样，所以我们的大脑能直观的将卡片和代表的内容关联起来。
▍2.卡片很容易被理解
容易理解：卡片不会占据页面很大空间，设计师能够根据内容重要性去划分卡片大小，优先级高的大点，优先级小一点。也能让用户更好找到他们感兴趣的内容。
▍3.卡片很有吸引力
卡片有吸引力：做好一个卡片设计非常依赖于设计师手法，在理解信息架构以后，你要思考用什么配色，什么样字体，用图片还是视频，这些都是能让这个卡片加分，比如上图设计，卡片就非常具有吸引力。
▍4.卡片更符合多端适配
响应式设计：因为卡片是矩形的，能很容易在不同屏幕下面做适配，比如你在PC上一排显示6个卡片，在移动端就可以显示3个，能更好让你产品获得一致性的体验。
▍5.卡片更方便用户分享
方便传播：因为卡片像一个用户熟悉的事物，所以也很容易分享，我只分享这个卡片内容，比如看见facebook一个好玩的视频卡片，我可以直接把这个卡片内容分享给朋友，所以这也是很多产品热爱卡片设计的原因。
2. 什么场景适合卡片
卡片虽然很好用，但不是全部页面都适合，你 要去根据你的产品场景去思考，一般来说以下场景可能更适合卡片。
▍1.搜索场景
当用户去搜索一款商品适合，卡片就非常适合作为推荐商品使用，像pinterest，淘宝的很多搜索，寻找场景就是用卡牌作为搜索结果，让用户更容易寻找。
▍2.浏览常品场景
特别在电商场景里面，卡片能更好的浏览，比如我去买一条群里，搜出来都是一个一个商品卡片，每个卡片都是独立的，能很好的呈现在页面上，并且用户看起来也是舒服的。
▍3.任务管理场景
在一些管理软件，或者办公软件里，每个卡片就是一个单独的内容。卡片能很好当任务卡片去管理，每个卡片就是一个单独的应用，特别适合于做B端的场景。
▍4.可视化场景
如果你的产品有很多数据，很多可视化信息展示，那么卡片形式是最合适的。在这种情况下，每个卡片之间差异化很大，每张卡片都可以代表一个类型内容。特别适合可视化的场景使用。
4. 卡片由哪些结构组成
如上图，卡片一般由6个部分组成。
▍1.多媒体
这里多媒体可以包括，视频，图像，图标，或者LOGO，可以理解为全部的图像部分。
▍2.标题
标题文字可以是产品名称，也可以是新闻名称，也可以是姓名，总之卡片最主要的文字部分。
▍3.描述
比如一些文章摘要，或者短的文字描述。
▍4.行动点
对卡片的行动点引导，一般来说是一个大按钮。
▍5.副标题
副标题可以包含文章来源，或者一些位置信息，或者时间信息等等。
▍6.图标
卡片可以包含的一些操作图标等，比如看详情。
5. 卡片设计一些准则
那么卡片设计有哪些细节需要注意，我们在设计一个卡片时候该从哪些维度思考呢？接下来分享几个小技巧给大家。
▍1.卡片上多媒体要有品质感
卡片的核心多媒体一定要精美，无论你是放照片还是放视频，一定要高逼格，因为图片是吸引用户很核心元素。就像上图那样左边就很随意，右边就是精心设计过的。多媒体可以是优秀的插画，视频，或者和你想表达内容相关，但是要注意品质感。
卡片也可以是精美插画，也可以是商品，总之无论你放什么一定要有品质感，如果有第三方运营图片，需要设计师设计好规范文档。
▍2.卡片要有层次感
卡片内设计要有层次感，不是随便将信息摆上去，比如上图设计左边就是缺乏层次，看着粗糙。右边增加一些对比，标签小细节就能让页面看着更精致。
比如这个机票软件，卡片上视觉层次就很多，设计师很会通过留白，线条，图标，LOGO，按钮等元素增强卡片细节，让它看起来更精致，能更好突出重要信息。
▍3.内容要有限制
卡片上内容不能太多，一个卡片就说明一件事情，如果放太多用户反而不知道怎么操作。比如常见错误：文字太多，要展示全部内容。所以设计师对于卡片上内容版块，一定要做好设计规范，多少字号，显示多少排，都需要明确。
一个卡片就说一件事情，如果你有很多事情想完成，你可以设计多个卡片类型。而不是都丢在一个里面。比如上图设计师，就设计了很多不同模块，但是每个模块又足够简单，帮用户完成好一件事情。
▍4.卡片里面不要放跳转链接
一个卡片行动点有限的，不要里面放很多跳转，比如上图的卡片设计，左边就有好几个跳转，用户会很蒙圈。最好不要放这种跳转链接，如果放行动点可以采取按钮的形式。
▍5.按钮要有主次
一个卡片最好只有一个行动点，如果有多个行动点，用户就知道点那个，这个时候可能就需要视觉去解决，强化那个弱化那个。一般采用颜色深浅来解决，比如上图示例子。
比如这个卡片，行动点有两个，那么设计上就把要强引导的做成填充颜色，不那么重要做灰一点，视觉上轻一点。
▍6.减少线的使用
做卡片设计很重要的一点是尽量减少分割线的使用，尽量通过留白，通过色块来区分信息层次。如果实在要用线条，一点要轻一点，否则页面就会看着被切的很碎。比如上图那样，左边图就被切割的很碎，这样有山寨感。
尽量减少线条出现，多采用留白，字体粗细大小对比去增强设计层次。让页面干净利索点。
6. 卡片设计一些趋势
卡片并不是一个卡片，也要考虑现在用户审美喜好，以及一些行业设计趋势，这样才能帮助你把一个卡片做高级，接下来分享几个卡片常用趋势
▍1.使用圆角
在形状上，圆角更好，比如和苹果手机ID造型很温和，圆角也能更容易传递出年轻的感觉。现在很多产品都倡导年轻化，当然如果你产品是那种男性很硬朗的，该用直角就直角。
圆角会让产品整体更加年轻轻松，所以根据你产品用户人群喜好，去选择一个合适的圆角作为卡片圆角，另外卡片越大圆角越大，卡片越小圆角越小，这也是符合我们现实生活中物理定律。
▍2.卡片边缘要柔和
卡片边缘处理要柔和，如果是线条颜色一定要浅，如果你放投影的话，投影一定要柔和，也可以试试加一些弥散投影，也是被很多设计师经常使用的。
上图设计师做的设计，卡片投影非常柔和，很轻，还带一点点环境色，这样会让整体卡片更加通透轻易。
也可以用这种弥散投影，但是要注意不要泛滥，你可以把页面最想突出的用上弥散投影，而不要到处都是，那也会很凌乱。
▍3.卡片要有留白，字体要有对比
必须让每个卡片都能被用户看清楚，用户能理解，所以卡片设计留白一定要够，尽量卡片四周留白大一点，让它看起来有空间感。
另外字体设计上，要有粗细，颜色深浅，大小对比。另外尽量不要用花体，如果是中文黑体就够了，如果英文尽量用衬线体做设计。
7. 落地案例
卡片应用场景很多，我也总结了一些常用的场景，希望对大家有帮助。
▍1.社交产品
在一些社交产品里，比如tinder等产品，个人信息展示时候，这种用卡片设计就比较多。
ins还有facebook产品，也基本都是卡片设计，人们也习惯了这样的设计。
▍2.电商产品
以国内淘宝为例，都是采用卡片设计，包括国外很多电商设计都是采用卡片，卡片能很好的去看一个一个商品图片。
所以如果你在做个产品改版，你们是电商设计，不如试试卡片设计，但是要注意好我前面说多一些规则。
▍3.个人资料模版
在产品设计中，个人资料这个模块也是用卡片设计很多的一个场景，每个资料卡片代表一个组件，上面有各种重要的信息。
在个人资料设计里面，你可以用照片，多媒体，然后各种信息都可以设计在里面，所以也是很多设计师使用卡片的一个场景。
▍4.视觉可视化产品
在很多产品里，为了体现数据，让数据更加可视化，也会经常使用卡片设计作为布局方式。比如上图每个数据的展示，都运用的卡片设计，每个卡片都代表一个数据和功能。
在很多后台页面，B端产品，也很适合卡片设计，所以如果你是B端设计，页面都列表比较单调，想在视觉上出彩，完全可以试试运用卡片设计，把你页面数据可视化一样优化一遍。
▍5.办公产品
在很多办公产品，比如很多看板设计，日程任务管理场景，也特别适合卡片设计，每一个任务就像一个便利贴一样，能帮用户更好去理解。
所以，如果你们公司产品是类似办公产品，日程管理，任务管理，那就一定要试试卡片设计
最后
今天这篇文章在于帮助大家理解卡片，通过了解它的规则和它的设计技巧，这样我们才能将卡片运用到我们各行各业。希望这篇文章对大家有所启发。