Photoshop UI设计实战案例教程（移动端+Web端） 课件 第3章 移动端 App 的卡片设计.pptx

;第3章移动端App的卡片设计;;本节概述

概念阐述

首先明确了卡片是一种综合性信息集合组件，它能够将文字、图像、图标等多种元素整合在一起，以一种简洁、直观的方式呈现给用户。

作用及优势

强调了卡片在移动端UI设计中的重要作用。它可以有效地组织信息，使用户能够快速浏览和获取关键内容。同时，卡片的形式具有灵活性和可扩展性，能够适应不同的屏幕尺寸和设备类型。

设计要点

还提到了一些卡片设计的要点。例如，要注意卡片的尺寸和比例，以确保在不同设备上的显示效果；要合理运用色彩、字体和图标等元素，增强卡片的视觉吸引力；要考虑卡片之间的间距和排列方式，以提高用户的操作体验。;3.1.1UI中的卡片是什么

此小节着重介绍了移动端UI设计中卡片的定义。卡片是一种集成多种元素的信息集合组件，它将文字、图像、图标等融合在一起。这种设计形式简洁直观，能高效地向用户传达信息。它具有一定的独立性和完整性，在界面中可作为一个独立的模块存在，同时又能与其他卡片或组件相互配合，构成完整的UI界面，是移动端UI设计中一种重要的信息组织和展示方式。

;3.1.2卡片的常见应用场景

该小节阐述了卡片在移动端UI设计中的常见应用场景。卡片广泛应用于各类App中，如音乐App中用于展示专辑封面、歌曲信息等；天气App中呈现天气状况和相关数据；日历App里展示日程安排。它还可用于新闻资讯类App，以卡片形式展示新闻标题和图片等内容。通过这些应用场景可知，卡片能够有效地组织和分类信息，使用户可以快速浏览和获取所需内容，提升了用户体验。

;;3.2.1绘制第一张卡片

1.新建文档与背景设置

新建一个空白文档。然后将背景图层转换为普通图层，重命名为“底层背景”。

双击“底层背景”图层，调出“图层样式”窗口，勾选“渐变叠加”图层样式，调整参数

;3.2.1绘制第一张卡片

2.绘制卡片主体形状

（1）绘制卡片外形

选择矩形工具，设置绘制模式为“形状”，填充色值为#FFFFFF，描边为无，在画面中央绘制一个矩形。

;3.2.1绘制第一张卡片

2.绘制卡片主体形状

（2）添加投影效果

??击调出“图层样式”窗口，勾选“渐变叠加”样式和“投影”图层样式，调整参数。

;3.2.1绘制第一张卡片

3.绘制卡片内部元素

1)为第一张卡片添加文字元素

文字元素包含日期、城市名称、当前温度、当天的最高温度/最低温度等信息。

;3.2.1绘制第一张卡片

3.绘制卡片内部元素

3)为第一张卡片绘制天气图标

(3)按Shift键选中这两个胶囊圆角矩形，再按Ctrl+G组合键编组，并命名为“光芒组1”。

(4)为太阳填色，添加“渐变”图层样式。

(5)为太阳添加发光效果。

(6)调整整体的太阳形状，模拟一定的透视效果。

;3.2.1绘制第一张卡片

3.绘制卡片内部元素

4)为天气图标制作立体效果

(1)复制“太阳”编组图层，并调整位置。

(2)对厚度层的路径形状进行微调，进一步优化太阳的厚度效果。

(3)使用上一步骤中同样的方法，对太阳其他部分的路径形状进行微调

;3.2.1绘制第一张卡片

3.绘制卡片内部元素

5)为太阳图标制作投影

(1)绘制投影的形状,并在图层面板上更改图层顺序至“太阳”编组图层之下,按Ctrl+T组合键调出自由缩放变换手柄框，并切换到“透视”状态，先向上移动右侧中间的端点，再向右上方移动下侧中间的端点，调整图形

;3.2.1绘制第一张卡片

3.绘制卡片内部元素

5)为太阳图标制作投影

(2)调整投影的颜色和模糊效果。

调整投影，先调出“图层样式”窗口，添加“渐变叠加”样式。在渐变编辑器中设置颜色和不透明度指示器。再设置角度，然后为投影添加“高斯模糊”滤镜，需将矢量形状图层转换为智能对象

;;;;;;;;;;3.2.3绘制雷雨天气卡片

1.新建文档

设置文档参数：打开Photoshop后，按Ctrl+N组合键新建一个空白文档，命名为“3.3实例2:音乐卡片设计”，将宽度设为1080，高度设为1920，单位为像素。

转换背景图层：新建空白文档后，双击默认生成的背景图层，转换为普通图层，并将其命名为“底层背景”。;3.2.3绘制雷雨天气卡片

2.绘制主卡片背景

添加圆角矩形：在工具栏选中圆角矩形工具，在工具属性栏中设置绘制模式为“形状”，“填充”为任意纯色，“描边”为无，“半径”即圆角半径为90像素，在新建文档的画布范围内任意位置单击，调出“创建矩形”对话框，设置宽度为900像素，“高度”为1150像素，单击“确定”按钮，生成一个圆角矩形

调整位置并添加样式：选中新建的圆角矩形图层，双击圆角矩形