|
卡片式设计在很早之前就已经出现过了，而现在它大多被用于移动端的UI设计，其受欢迎程度也是越来越高。卡片式设计凭借其简单方便又充满逻辑的特性，逐渐流行起来。 现如今，我们浏览各个设计网站时，80%的网站设计都是卡片式风格。卡片式设计长什么样呢？来看一组图： ▲ 网站设计 看完这4张图之后，相信大家对卡片式设计有了一定的认识。 简单来说，卡片式设计就是将“卡片”置于一个图片或形状背景上，通常会给卡片添加阴影，使页面有立体效果。 复杂来说，卡片式设计是我们在各个网站/APP中常常见到的承载着图片、文字等内容的矩形区块，它是交互信息的承载体，通常以直角矩形或圆角矩形的方式呈现。 ▲ UI 交互 ▲ 网站排版 生活中处处可见卡片，诸如：银行卡、身份证、交通卡等等。那么，卡片式设计在PPT中怎么应用呢？其实跟网站设计相差无几。 1 封面 这是锐普之前为“上海家化（六神花露水）”做的PPT，封面采用卡片式设计，使得页面更新颖。相关文章链接：我给六神做了一份产品介绍PPT 还有一种设计封面的思路，不知道有没有小伙伴知道。下图这样的设计方式，可以让形状和背景图片有连贯性，可以说很新颖了。 ▲ 来自网络 2 目录 这是锐普给“中瑞”做的PPT，用卡片式设计使得观众的视线“聚焦”，使人一眼就能看到这份PPT讲的主要内容。 ▲ 中瑞-案例 3 内页 比如锐普给六神做的产品介绍页，这里结合了一些国外优秀的设计思路，用“异形”打造页面。 还以“中瑞”为例，下面这种版式设计是很常见的，企业介绍PPT里尤为常见，也是多数老板要的效果。 ▲ 中瑞-案例 这是锐普给“君亭酒店”做的PPT，卡片式设计还可以结合笔刷做出穿插的效果。
▲ 君亭酒店-案例 还是“君亭酒店”的案例。卡片式设计还可以用作全图型排版，不信来看看？如果要在图片上添加文字，一定要记得加渐变蒙版。
▲ 君亭酒店-案例 除了这些玩法，我们还可以怎样玩呢？下面我们来看看高阶用法。 锐普作为华为荣耀PPT长期的服务商（支持华为荣耀
▲ 华为荣耀-案例 可以看出，卡片式设计在内页的应用更常见。 4 操作步骤 接下来我给大家说说最基础的卡片式设计怎么做，其实很简单。 步骤1 到素材网站（网址：https:///illustrations）下载一个适合主题的素材，我这里选择的是一名正在办公的女性图片。该网站上的素材可自由调节颜色，下载的素材为SVG格式，可直接拖入 Office 365版PPT，省时省力。将素材置于合适的位置，如下图：
步骤2 给页面添加参考线，固定圆角矩形框（卡片）的位置，可通过调节圆角矩形上的黄色小点，调整圆角半径。觉得圆角不够满意，可以再做细微的调整，调整满意后，去除圆角矩形的线条。 圆角矩形参数：高度：16.4 厘米；宽度：31.4 厘米
▲ 动图 步骤3 通常我们见到的卡片都是白色的，所以我们需要给页面添加一个对比强烈的渐变色，这里选择较流行的：蓝紫渐变。 渐变颜色设置好后，将圆角矩形的颜色改为白色，并置于底层。
▲ 效果图 步骤4 给矩形添加阴影，这也是让页面更加生动的方式之一。 圆角矩形阴影参数：
▲ 圆角矩形参数
▲ 效果图 步骤5 同样的，为页面添加参考线，目的是划分各个文本、图片的区域，同时也为了让元素对齐。
▲ 添加参考线 最后一步，给页面添加文字，再加一些图标也是可以的。
▲ 效果图 这样，就完成了卡片式设计页面啦，我说简单吧~ 5 总结 卡片式设计应用场景
总有一些意想不到的设计蓄势待发，总有一些潮流趋势我们需要跟随。卡片式设计能成为新的设计趋势也是迎合了社会发展的需求。 要我说，卡片式设计一点都不过时。 * 本文所用客户案例的文字内容均已修改 * 本文所用客户案例不予分享 |
|
|
