大厂设计师教你如何更好的使用卡片设计！

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

大 厂 设 计 师 教 你 如 何 更 好 的 使 用 卡 片 设计 ！

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