【UI设计】苹果UI的那些高级卡片效果，惨遭破解了

卡片设计自从苹果系统升级后，在越来越多场景中备用，这些年也越来越被设计师喜欢，卡片作为一些信息容器，里面可以承载很多信息，视频，图形，文字，按钮，基本你做的业务属性都可以放进去，那么卡片设计有哪些技巧，今天分享给你。

1. 什么是卡片设计

卡片是一个UI组件，它包含了很多模块和内容在里面，你可以理解为是一个杯子，杯子里面你可以放各种饮料。但是它们都是一个主题里。

卡片是鼻祖是facebook公司，最早它们旗下产品facebook，ins等社交产品最先使用的，每个卡片代表一个功能。用户看见一个卡片就能很清晰的理解里面是什么内容，并且知道卡片是可以点击的，不需要去教育。

2. 卡片设计有什么优点

卡片设计为什么受很多设计师喜欢，甚至苹果系统也全部改为卡片设计，因为卡片是模块化的，每个卡片代表一个内容。能让用户更加清晰直接的了解，另外排版也不会混乱。

另外卡片里面可以交互的点很多，可以是数字，也可以是图像，也可以是视频。用户那个很好理解，而且特别直观，用户能一眼知道里面内容。比如上图耐克的设计，用户一看就知道每个卡片是什么。

▍1.卡片很直观

直观：卡片在UI里面和我们现实生活中的卡片基本一样，比如名片卡片，会员卡，便利贴，银行卡基本一样，所以我们的大脑能直观的将卡片和代表的内容关联起来。

▍2.卡片很容易被理解

容易理解：卡片不会占据页面很大空间，设计师能够根据内容重要性去划分卡片大小，优先级高的大点，优先级小一点。也能让用户更好找到他们感兴趣的内容。

▍3.卡片很有吸引力

卡片有吸引力：做好一个卡片设计非常依赖于设计师手法，在理解信息架构以后，你要思考用什么配色，什么样字体，用图片还是视频，这些都是能让这个卡片加分，比如上图设计，卡片就非常具有吸引力。

▍4.卡片更符合多端适配

响应式设计：因为卡片是矩形的，能很容易在不同屏幕下面做适配，比如你在PC上一排显示6个卡片，在移动端就可以显示3个，能更好让你产品获得一致性的体验。

▍5.卡片更方便用户分享

方便传播：因为卡片像一个用户熟悉的事物，所以也很容易分享，我只分享这个卡片内容，比如看见facebook一个好玩的视频卡片，我可以直接把这个卡片内容分享给朋友，所以这也是很多产品热爱卡片设计的原因。

3. 什么场景适合卡片

卡片虽然很好用，但不是全部页面都适合，你 要去根据你的产品场景去思考，一般来说以下场景可能更适合卡片。

▍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.办公产品

在很多办公产品，比如很多看板设计，日程任务管理场景，也特别适合卡片设计，每一个任务就像一个便利贴一样，能帮用户更好去理解。

所以，如果你们公司产品是类似办公产品，日程管理，任务管理，那就一定要试试卡片设计。