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

;第4章移动端App的创意小组件设计;;本节概述

介绍了移动端App界面常见的小组件，具体如下：;4.1.1切换标签组件

功能与定义

切换标签组件英文术语一般称为Tag或Tab，用于在移动端App界面中切换不同的模块或者页面。

应用场景

电商App与iOS系统应用：在电商类App底部导航栏用于切换首页、购物车、会员中心等模块；在iOS系统自带的“电话”应用中用于切换“个人收藏”“最近通话”“通讯录”“拨号键盘”“语音流言”等界面。

设计优势

这些页面在功能或信息层级上是平行的，移动端屏幕空间有限，该组件按标签分类内容，用户切换标签才能看到对应内容，能聚焦所需内容，且交互简单，所见即所得。;4.1.2开关组件

功能与定义

开关组件英文术语一般称为Switch，是一种用于控制某项功能开启/关闭，或者信息内容显示与否的组件。

应用场景

例如控制移动设备Wi-fi和蓝牙的开启与关闭，以及控制是否显示“电池百分比”信息等。

设计特点

开关组件虽然看起来很小且简单，但设计创意空间很大，可以融入各种创意元素，如太阳和月亮元素表示设备的白天或夜晚模式，也可模拟复古样式的物理开关等。;4.1.3复选框/单选按钮组件

功能与定义

复选框：英文术语为CheckBox，用于表示是否勾选

单选按钮：英文术语为Radiobutton，用于只能单选的选项设计样式

复选框：多数采用矩形或圆角矩形外形，勾选状态一般使用打钩形状的图标。部分如iOS系统应用可能采用圆形外框，但选中状态仍为打钩形状图标。

单选按钮：一般使用正圆形状，选中状态多数采用同心圆的样式，但iOS系统部分单选按钮使用无背景的简单打钩形状。传统同心圆选中样式一般不用于表示多选，以免用户产生疑惑。;4.1.4进度条组件

功能与定义

进度条组件是移动端App界面设计中常见的一类组件，用于控制某项指标数据的变化，如音量大小、亮度的高低等。

设计样式

一种是较细的进度条，通常需要一个比较大的手柄图标，方便用户在较小的移动设备屏幕上进行交互操作。

另一种是本身较大的进度条，没有手柄元素，但也能便于用户操作，例如iOS系统控制中心上的亮度控制和???量控制进度条。;4.1.5表盘类组件

功能与定义

表盘类组件是一类设计比较复杂且体积通常比较大的UI组件，用于控制某个指标数据区间量的大小，例如设置一段睡眠时长。

设计样式

与进度条组件不同，它有两个可交互的点，表盘中的弧形两端均可以拖动，可分别控制两个时间点，如就寝时间点和起床时间点，以此控制时间区间的大小。;;4.2.1制作进度条背景

1.新建文档

设置文档参数：打开Photoshop后，按Ctrl+N组合键新建一个空白文档，将宽度设为1080，高度设为640像素，单击“创建”按钮，然后双击背景图层，将其转换为普通图层，并命名为“底层背景”。

2.为背景添加渐变效果

添加图层样式：双击“底层背景”图层调出图层样式，勾选“渐变叠加”图层样式，将渐变色条左右两端色值分别设为#3f3f40和#292b2c，“角度”为135度。

绘制椭圆并添加模糊效果：选择椭圆工具，设置“填充”色值为#515156，描边设为无，绘制一个椭圆形状，将其转换为智能对象图层，添加一个“半径”为150像素的“高斯模糊”滤镜，将图层混合模式改为“滤色”，并与“底层背景”图层编组，命名为“背景”。

;4.2.1制作进度条背景

3.添加主副标题

添加主标题：按T键切换到横排文字工具，设置字体为Light，字体大小为60点，“字距调整”为150，输入文本“PROGRESSBAR”，双击字符图层调出“图层样式”窗口，勾选“投影”图层样式，设置“混合模式”为“正片叠底”，颜色值为#000000，“不透明度”为45%，“角度”为135度，“距离”为30像素，“大小”为9像素。

添加副标题：复制主标题文本图层，将文本内容修改为“Dataindicatorgrowth”，字体大小改为40点，“字距调整”改为50，修改“投影”图层样式的参数，将“不透明度”改为20%，“大小”为6像素。;4.2.2绘制创意进度组件

1.绘制进度条背景

绘制圆角矩形：选择椭圆工具，设置“填充”为任意颜色，“描边”为无，“半径”为10像素，绘制一个宽度为860像素，高度为40像素的圆角矩形，将该图层重命名为“进度条背景”，“填充”改为0%。

添加图层样式：双击“进度条背景”调出“图层样式”窗口，勾选“渐变叠加”