Photoshop UI设计实战案例教程（移动端+Web端） 课件 第4章 移动端 App 的创意小组件设计

PhotoshopUI设计实战案例教程(移动端+Web端)第4章移动端App的创意小组件设计本章概述：第4章主要介绍了移动端App的创意小组件设计。首先阐述了移动端App界面常见小组件，包括切换标签组件（用于切换不同模块或页面）、开关组件（控制功能开启/关闭）、复选框/单选按钮组件（表示勾选和单选操作）、进度条组件（控制指标数据变化）以及表盘类组件（控制指标数据区间量大小且交互较复杂）。接着通过实例详细讲解了创意组件的设计过程。如创意进度条组件设计，涵盖制作进度条背景（新建文档、添加渐变效果、添加主副标题）、绘制创意进度组件（进度条背景及进度条绘制、添加光效、绘制树叶图标组并添加效果）以及绘制进度条刻度等步骤。还介绍了创意切换标签组设计和拓展训练的创意时钟表盘设计，包括各自的设计思路和详细设计过程。第4章移动端App的创意小组件设计4.1移动端App界面的常见小组件4.2实例1:创意进度条组件设计4.3实例2:创意切换标签组设计4.4拓展训练:创意时钟表盘设计本节概述介绍了移动端App界面常见的小组件，具体如下：4.1移动端App界面的常见小组件切换标签组件（Tag/Tab）用途：用于切换不同模块或页面，常见于电商App底部导航栏和iOS系统应用。优势：充分利用屏幕空间，使用户聚焦所需内容，交互简单。开关组件（Switch）用途：控制某项功能开启/关闭或信息内容显示与否，如Wi-fi、蓝牙、电池百分比显示开关。特点：设计创意空间大。复选框/单选按钮组件复选框（CheckBox）用途：表示是否勾选。样式：多数为矩形或圆角矩形外形，勾选状态为打钩形状图标。单选按钮（Radiobutton）用途：用于单选选项。样式：一般为正圆形状，选中状态多为同心圆样式。进度条组件用途：控制某项指标数据的变化，如音量、亮度等。样式：有较细且带大手柄图标和自身较大两种样式。表盘类组件用途：控制指标数据区间量大小，如设置睡眠时长。特点：设计复杂且体积大，交互相对复杂，有两个可交互点。4.1.1切换标签组件功能与定义切换标签组件英文术语一般称为Tag或Tab，用于在移动端App界面中切换不同的模块或者页面。应用场景电商App与iOS系统应用：在电商类App底部导航栏用于切换首页、购物车、会员中心等模块；在iOS系统自带的“电话”应用中用于切换“个人收藏”“最近通话”“通讯录”“拨号键盘”“语音流言”等界面。设计优势这些页面在功能或信息层级上是平行的，移动端屏幕空间有限，该组件按标签分类内容，用户切换标签才能看到对应内容，能聚焦所需内容，且交互简单，所见即所得。4.1移动端App界面的常见小组件4.1.2开关组件功能与定义开关组件英文术语一般称为Switch，是一种用于控制某项功能开启/关闭，或者信息内容显示与否的组件。应用场景例如控制移动设备Wi-fi和蓝牙的开启与关闭，以及控制是否显示“电池百分比”信息等。设计特点开关组件虽然看起来很小且简单，但设计创意空间很大，可以融入各种创意元素，如太阳和月亮元素表示设备的白天或夜晚模式，也可模拟复古样式的物理开关等。4.1移动端App界面的常见小组件4.1.3复选框/单选按钮组件功能与定义复选框：英文术语为CheckBox，用于表示是否勾选单选按钮：英文术语为Radiobutton，用于只能单选的选项设计样式复选框：多数采用矩形或圆角矩形外形，勾选状态一般使用打钩形状的图标。部分如iOS系统应用可能采用圆形外框，但选中状态仍为打钩形状图标。单选按钮：一般使用正圆形状，选中状态多数采用同心圆的样式，但iOS系统部分单选按钮使用无背景的简单打钩形状。传统同心圆选中样式一般不用于表示多选，以免用户产生疑惑。4.1移动端App界面的常见小组件4.1.4进度条组件功能与定义进度条组件是移动端App界面设计中常见的一类组件，用于控制某项指标数据的变化，如音量大小、亮度的高低等。设计样式一种是较细的进度条，通常需要一个比较大的手柄图标，方便用户在较小的移动设备屏幕上进行交互操作。另一种是本身较大的进度条，没有手柄元素，但也能便于用户操作，例如iOS系统控制中心上的亮度控制和音量控制进度条。4.1移动端App界面的常见小组件4.1.5表盘类组件功能与定义表盘类组件是一类设计比较复杂且体积通常比较大的UI组件，用于控制某个指标数据区间量的大小，例如设置一段睡眠时长。设计样式与进度条组件不同，它有两个可交互的点，表盘中的弧形两端均可以拖动，可分别控制两个时间点，如就寝时间点和起床时间点，以此控制时间区间的大小。4.1移动端App界面的常见小组件4.2实例1:创意进度条组件设计本节概述设计思路设计创意进度条组件，通过多种特效和自定义图标展现进度，包括利用智能对象与高斯模糊发光，内阴影模拟凹陷，远距离投影模拟灯光，以及使用自定义形状图标。设计过程1.制作进度条背景2.绘制创意进度组件绘制进度条背景：绘制圆角矩形作背景，添加“渐变叠加”和“内阴影”样式并设相关参数。绘制进度条：复制背景路径为矢量蒙版，在蒙版内绘新矩形作进度条，添加“渐变叠加”设为“变亮”模式，复制进度条层转为智能对象并添加“高斯模糊”滤镜实现光效。绘制树叶图标组：添加自定义形状，绘制8个树叶图标并排列编组。为树叶图标添加效果：为进度条位置树叶添加发光效果，复制粘贴相关样式，复制树叶图标转为智能对象添加“高斯模糊”滤镜，为其他图标复制粘贴不同样式并调不透明度。3.绘制进度条刻度绘制高亮刻度：用椭圆工具绘小圆点，圆角矩形工具绘矩形作刻度，编组后复制粘贴发光树叶样式并设“填充”为0%。绘制其他刻度：复制部分刻度线和圆点编组移动，复制粘贴进度条背景样式。添加刻度数字：添加文字层作刻度数字，复制粘贴发光树叶样式，复制数字层转为智能对象添加“高斯模糊”滤镜并为数字刻度添加投影。4.2.1制作进度条背景1.新建文档设置文档参数：打开Photoshop后，按Ctrl+N组合键新建一个空白文档，将宽度设为1080，高度设为640像素，单击“创建”按钮，然后双击背景图层，将其转换为普通图层，并命名为“底层背景”。2.为背景添加渐变效果添加图层样式：双击“底层背景”图层调出图层样式，勾选“渐变叠加”图层样式，将渐变色条左右两端色值分别设为#3f3f40和#292b2c，“角度”为135度。绘制椭圆并添加模糊效果：选择椭圆工具，设置“填充”色值为#515156，描边设为无，绘制一个椭圆形状，将其转换为智能对象图层，添加一个“半径”为150像素的“高斯模糊”滤镜，将图层混合模式改为“滤色”，并与“底层背景”图层编组，命名为“背景”。4.2实例1:创意进度条组件设计4.2.1制作进度条背景3.添加主副标题添加主标题：按T键切换到横排文字工具，设置字体为Light，字体大小为60点，“字距调整”为150，输入文本“PROGRESSBAR”，双击字符图层调出“图层样式”窗口，勾选“投影”图层样式，设置“混合模式”为“正片叠底”，颜色值为#000000，“不透明度”为45%，“角度”为135度，“距离”为30像素，“大小”为9像素。添加副标题：复制主标题文本图层，将文本内容修改为“Dataindicatorgrowth”，字体大小改为40点，“字距调整”改为50，修改“投影”图层样式的参数，将“不透明度”改为20%，“大小”为6像素。4.2实例1:创意进度条组件设计4.2.2绘制创意进度组件1.绘制进度条背景绘制圆角矩形：选择椭圆工具，设置“填充”为任意颜色，“描边”为无，“半径”为10像素，绘制一个宽度为860像素，高度为40像素的圆角矩形，将该图层重命名为“进度条背景”，“填充”改为0%。添加图层样式：双击“进度条背景”调出“图层样式”窗口，勾选“渐变叠加”和“内阴影”图层样式，设置“渐变叠加”图层样式的“混合模式”为“正片叠底”，渐变色条左右两端色值分别为#6d6f72和#555357，“角度”为4度；设置“内阴影”图层样式的“混合模式”为“正片叠底”，内阴影的色值为#323748，“不透明度”为30%，“角度”为90度，“距离”为12像素，“大小”为24像素。4.2实例1:创意进度条组件设计4.2.2绘制创意进度组件2.绘制进度条（1）制作矢量蒙版：切换到路径选择工具，选中“进度条背景”路径形状，按Ctrl+C组合键复制，然后按Ctrl+G组合键编组并重命名为“进度+背景”，再按Ctrl+V组合键粘贴刚才复制的矢量路径作为矢量蒙版。（2）绘制进度条并添加样式：选择圆角矩形工具，将“半径”改为5像素，在新建的编组图层“进度+背景”中绘制一个宽度为480像素，高度为40像素的圆角矩形，并将所在图层重命名为“进度”4.2实例1:创意进度条组件设计4.2.2绘制创意进度组件2.绘制进度条（3）为进度条添加样式：添加“渐变叠加”图层样式，设置“混合模式”为“变亮”，渐变色条左右两端色值分别为#b7ffe0和#ffefa4，“角度”为4度。（4）添加光效：按Ctrl+J组合键复制“进度”图层，将其拖出到编组图层“进度+背景”之外，重命名为“进度发光”，将“不透明度”改为40%，转换为智能对象，添加“高斯模糊”滤镜，“半径”设为15像素。4.2实例1:创意进度条组件设计4.2实例1:创意进度条组件设计4.2.2绘制创意进度组件3.绘制象征参数变化的树叶图标组添加预设形状：选择自定义形状工具，单击工具属性栏中“形状”右侧的向下箭头按钮弹出形状下拉面板，单击齿轮图标，在弹出的菜单中选择“全部”，追加全部预设图标。绘制树叶图标：从追加的预设图标中选择8个树叶图标，绘制在进度条上方，横向平均分布排列，按Ctrl+T组合键调出自由变换手柄，调整图标大小，从左到右逐个放大并调整倾斜角度，将图标图层依次命名为树叶1-树叶8，再选中这8个图层编组，命名为“树叶icon组”。注：读者也可以任意选择其他自己喜欢的图形图标4.2实例1:创意进度条组件设计4.2.2绘制创意进度组件4.为树叶图标添加效果（1）为进度条位置树叶添加发光效果：为树叶添加发光效果的步骤和为进度条添加发光效果相同，首先复制“进度”图层的图层样式，然后选中“树叶5”图层，单击鼠标右键，选择弹出菜单中的“粘贴图层样式”选项。（2）复制并转换为智能对象添加模糊效果：按Ctrl+J组合键复制“树叶5”图层，重命名为“树叶发光”，然后将其转换为智能对象，并添加“高斯模糊”滤镜。4.2实例1:创意进度条组件设计4.2.2绘制创意进度组件4.为树叶图标添加效果（3）为其他树叶图标添加不同效果：先复制进度条背景的图层样式，然后同时选中发光树叶右侧的3个树叶图标，粘贴图层样式；先复制发光的“树叶5”图标的图层样式，然后将这个图层样式粘贴到图层“树叶5”左侧的4个图标上，并将这4个图层的不透明度改为40%。4.2实例1:创意进度条组件设计4.2.2绘制创意进度组件1.绘制高亮刻度绘制刻度形状：使用椭圆工具绘制一排5个宽高都是8像素的小圆点，切换到圆角矩形工具，在每两个圆点之间绘制5条宽度为1像素，高度为12像素的矩形作为刻度，且平均分布。添加图层样式：将所有刻度图层编组并重命名为“高亮刻度组”，然后复制发光树叶的图层样式，粘贴到“高亮刻度组”编组图层上，并将“填充”改为0%。4.2实例1:创意进度条组件设计4.2.2绘制创意进度组件2.绘制其他刻度复制刻度组：将第1个圆点和第2个圆点之间的5条刻度线和第2个圆点同时选中，按Ctrl+J组合键复制，再将新复制的形状图层编组，重命名为“暗刻度组1”，将该编组图层拖出编组图层“高亮刻度组”之外，然后复制2组，分别重命名为“暗刻度组2”“暗刻度组3”，最后分别移动它们的位置。添加图层样式：复制“进度条背景”图层的图层样式，然后粘贴到编组图层“暗刻度组1”“暗刻度组2”和“暗刻度组3”上。4.2实例1:创意进度条组件设计4.2.2绘制创意进度组件3.添加刻度数字添加文字图层：使用横排文字工具在发光树叶所在的刻度下，添加一个字体大小为48点，字体为Light，字体颜色任意的数字“5.0”。添加发光效果：复制数字图层并转换为智能对象，并添加“高斯模糊”滤镜。添加投影：将作为发光效果的智能对象图层“5.0复制”移动到文字图层“5.0”下方，双击数字图层“5.0”调出“图层样式”窗口，勾选“投影”图层样式，设置“混合模式”为“正片叠底”，颜色为#000000，“不透明度”为76%，“角度”为135度，“距离”为24像素，“大小”为12像素。4.3实例2:创意切换标签组设计本节概述设计思路本实例要绘制一个创意切换标签组，被选中的标签自身发光且照亮底板。通过外发光、图层渐变和高斯模糊模拟标签发光效果，综合智能对象、高斯模糊和渐变图层蒙版实现底板照亮效果。设计过程1.绘制标签组背景新建文档并设置背景：新建文档，转换背景图层，添加“渐变叠加”图层样式，设置渐变色值和角度。2.创建标签底座的照亮效果和未选中标签的文字图标绘制标签底座并添加样式，包括更深色调的渐变和边缘照亮效果（通过复制、添加内阴影和外发光图层样式，并设置矢量蒙版），添加底座下方照亮效果（创建蒙版并添加投影样式，用画笔绘制照亮效果），添加未选中标签的图标和文字（拖入图片素材调整样式，添加文字并设置不透明度）。3.绘制选中样式的标签绘制圆形背景并添加渐变样式，添加细节（复制、调整不透明度和添加矢量形状蒙版），用画笔绘制内部发光效果，添加外发光和选中标签的图标及文字（导入图片素材并调整样式，添加文字）4.3.1绘制标签组背景1.新建文档设置文档参数：打开Photoshop后，按Ctrl+N组合键新建一个空白文档，将宽度设为1080，高度设为640像素，然后双击背景图层，将其转换为普通图层，并命名为“底层背景”。2.为背景添加渐变效果设置渐变样式：双击“底层背景”图层调出图层样式，勾选“渐变叠加”图层样式，设置渐变色条左右两端色值分别为#222227和#37383f，“角度”为135度，创建深蓝紫色调的渐变背景。4.3实例2:创意切换标签组设计4.3.1绘制标签组背景1.新建文档设置文档参数：打开Photoshop后，按Ctrl+N组合键新建一个空白文档，将宽度设为1080，高度设为640像素，然后双击背景图层，将其转换为普通图层，并命名为“底层背景”。2.为背景添加渐变效果设置渐变样式：双击“底层背景”图层调出图层样式，勾选“渐变叠加”图层样式，设置渐变色条左右两端色值分别为#222227和#37383f，“角度”为135度，创建深蓝紫色调的渐变背景。3.绘制标签底座用钢笔工具绘制矢量形状（可参考视频教程），确定其大小和位置。把新建矢量形状所在图层转为智能对象层，按Ctrl+J复制并水平翻转，移至合适位置拼成完整标签底座形状。因智能对象层调整方便，只需调整原始层，复制层会同步更新。将两个智能对象层编组，重命名为“标签底座”。4.3实例2:创意切换标签组设计4.3.2创建标签底座的照亮效果和未选中标签的文字图标1.为标签底座添加样式双击“标签底座”编组图层，打开“图层样式”窗口，勾选“渐变叠加”图层样式，将“角度”改为160度，渐变色条左右两端色值分别改为#161618和#1f2122，绘制一个比背景更深的深灰色调。4.3实例2:创意切换标签组设计4.3.2创建标签底座的照亮效果和未选中标签的文字图标2.为标签底座添加照亮效果（1）复制“标签底座”图层，添加一个“内阴影”图层样式，设置“混合模式”为变亮，阴影色值为#ff9abb，“角度”为90度，“距离”为4像素，“大小”为2像素（2）按Ctrl+G组合键再次编组并重命名为“标签底座照亮边缘”，添加“外发光”图层样式，设置“混合模式”为“线性减淡(添加)”，“不透明度”为30%，发光颜色为#ff517a，“大小”为30像素4.3实例2:创意切换标签组设计4.3.2创建标签底座的照亮效果和未选中标签的文字图标2.为标签底座添加照亮效果（3）添加图层蒙版。保持编组图层“标签底座照亮边缘”的选中状态，单击图层面板底部的“添加矢量蒙版”按钮，为该编组图层添加一个矢量蒙版，按G键切换到渐变工具，单击工具属性栏中的渐变色条调出“渐变编辑器”窗口，再单击渐变色条中间位置，为其添加一个颜色手柄并设为#ffffff，两端手柄均设为#000000。（4）设置好渐变工具之后，返回画布，选中编组图层“标签底座照亮边缘”的图层蒙版，将渐变工具从左往右拉出一条两边黑，中间白的渐变，这样就使得亮粉色边缘有了“两边黑，中间亮”的效果4.3实例2:创意切换标签组设计4.3.2创建标签底座的照亮效果和未选中标签的文字图标2.为标签底座添加照亮效果（5）细化照亮效果。复制多个“标签底座照亮边缘”编组图层并微调，使这个初步成型的照亮效果更加丰富。单击“标签底座照亮边缘”编组图层的文件夹图标，切换选中图层本身(刚才选中的是图层蒙版)，然后按2次Ctrl+J组合键复制2个编组图层，再使用渐变工具在两个图层蒙版上分别绘制一个更宽和更窄的黑白渐变条。将蒙版渐变条比较宽的那一个图层的“不透明度”改为10%，并关闭这一图层原先的“外发光”图层样式4.3实例2:创意切换标签组设计4.3.2创建标签底座的照亮效果和未选中标签的文字图标4.3实例2:创意切换标签组设计3.添加底座下方的照亮效果(1)创建蒙版并编组。选中“标签底座”相关图层按Ctrl+G编组并命名为“标签底座+效果”作为总编组。(2)形成完整选择区域。切换到“标签底座”层，按住Ctrl单击“圆角矩形1”，再按Ctrl+Shift单击“圆角矩形1复制”形成完整底座选择区域。(3)添加矢量蒙版。保持选择区域激活，选中总编组图层，点击“添加矢量蒙版”按钮生成蒙版。(4)创建投影样式。双击总编组图层调出“图层样式”窗口，勾选“投影”并设置颜色、不透明度等参数。4.3.2创建标签底座的照亮效果和未选中标签的文字图标4.3实例2:创意切换标签组设计3.添加底座下方的照亮效果(1)创建蒙版并编组。选中“标签底座”相关图层按Ctrl+G编组并命名为“标签底座+效果”作为总编组(2)形成完整选择区域。切换到“标签底座”层，按住Ctrl单击“圆角矩形1”，再按Ctrl+Shift单击“圆角矩形1复制”形成完整底座选择区域。(3)添加矢量蒙版。保持选择区域激活，选中总编组图层，点击“添加矢量蒙版”按钮生成蒙版。(4)创建投影样式。双击总编组图层调出“图层样式”窗口，勾选“投影”并设置颜色、不透明度等参数。(5)绘制照亮效果图层。按B键切换画笔工具，设置颜色、大小、硬度和不透明度等参数，新建图层绘制圆形模拟照亮效果。4.3.2创建标签底座的照亮效果和未选中标签的文字图标4.3实例2:创意切换标签组设计4.为未选中标签添加图标和文字图标添加从“图片素材/第4章/4.3综合实例:创意切换标签组”文件夹中找到图片素材“RecommendIcon.png”和“ProfileIcon.png”，并将其拖入Photoshop当前正打开的工程文件中，可以看到拖进来的图片素材自动转换为智能对象图层。将这2个图标分别摆放在底座的左右两侧，缩小其尺寸并移动到合适位置，并将这两个图层的“不透明度”改为20%。文字添加设置文字字体大小为28点，字体为Light，字体颜色为纯白色#ffffff，添加两个字符图层并编辑字符内容为“Recommend”和“MyProfile”，并摆放在左右两侧各自对应的图标下面，将字符图层的“不透明度”改为50%，4.3.3绘制选中样式的标签4.3实例2:创意切换标签组设计1.绘制圆形背景并添加渐变样式绘制圆形：使用椭圆工具绘制一个填充色值为#ffefe9，描边为无的圆形作为选中标签的背景，将其转换为智能对象图层并命名为“选中标签背景”添加渐变样式：为“选中标签背景”图层添加“渐变叠加”图层样式，设置渐变色条左右两端色值分别为#ffefe9和#ffa9bb，“角度”为135度。4.3.3绘制选中样式的标签4.3实例2:创意切换标签组设计2.添加细节（1）复制选中标签背景圆形，将“不透明度”改为60%，在新图层上双击调出“图层样式”窗口，将“混合模式”改为“滤色”，渐变色条左端色值改为#ff709c，单击选中渐变色条上面右端的手柄(用以控制颜色的不透明度)，将“不透明度”改为0%，（2）为选中的标签背景添加矢量形状蒙版。选择路径选择工具，选中“椭圆1”的正圆形矢量形状，按Ctrl+C组合键复制一个矢量形状图层，然后将这两个正圆形矢量形状图层编组，重命名为“选中标签背景”。保持这个编组图层的选中状态，按Ctrl+V组合键粘贴矢量形状为矢量蒙版，4.3.3绘制选中样式的标签4.3实例2:创意切换标签组设计2.添加细节(3)用画笔工具绘制内部发光效果。按B键切换到画笔工具，将画笔色值设为#ffb1b1，笔刷大小设为500像素，硬度设为0。新建一个图层，将其放置在标签背景矢量形状图层之上，然后在圆形上方区域单击，绘制一个笔刷点，也就是一个羽化模糊的圆点(4)新建一个图层，继续使用画笔工具，将颜色改为#ffbcd4，笔刷大小适当缩小一些，再将“硬度”设为0，在标签背景圆形下方区域单击，添加一个新的笔刷圆点。

(5)将两个图层的混合模式均改为“滤色”，再将两个图层同时选中，并将其拖动到编组图层“选中标签背景”内4.3.3绘制选中样式的标签4.3实例2:创意切换标签组设计3.为选中标签添加外发光双击编组图层“选中标签背景”，调出“图层样式”窗口，勾选“投影”图层样式，设置“混合模式”为“变亮”，投影颜色为#f24360，“不透明度”为30%，“距离”为