蒋珍珍，知名电商设计师，擅长各电商平台（天猫、淘宝、京东、微店等）店面整体形象设计，优化商品视觉美感。同时也是一名UI设计师，精通UI界面各元素的设计，特别是移动APP基于用户体验、人机交互的图形化设计，以及H5的设计与制作，有着丰富的一线实战经验。
第11 章 苹果系统：常见苹果系统UI 设计
学习提示
苹果公司的移动产品( 如iPhone 系列手机、iPad 平板电脑、iPod 音乐播放器等) 如今已风靡全球，其iOS 操作系统对硬件性能要求不高，应用程序丰富，操作非常流畅，其独特的魅力吸引了越来越多的用户。本章主要介绍苹果系统UI 的设计方法。
本章重点导航
设计天气控件界面的背景效果
设计天气控件界面的主体效果
设计日历APP 界面的背景效果
设计日历APP 界面的主体效果
11.1 天气界面：掌握天气控件界面的设计
在苹果智能移动设备上经常可以看到各式各样的天气软件，这些天气软件的功能都很全面，除了可以随时随地查看本地甚至其他地方连续几天的天气和温度，还有其他资讯小服务，是移动用户居家旅行的必需工具。本实例最终效果如图11-1 所示。
图11-1 实例效果
素材文件
素材\ 第11 章\ 苹果系统天气控件背景.jpg、天气控件界面状态栏.psd、天气图标1.psd、天气图标2.psd
效果文件
效果\ 第11 章\ 苹果系统天气控件界面.psd、苹果系统天气控件界面.jpg
视频文件
视频\ 第11 章\11.1.1 设计天气控件背景效果.mp4、11.1.2 设计天气控件主体效果.mp4
11.1.1 设计天气控件界面的背景效果
下面主要使用“亮度/ 对比度”命令、“曲线”命令、“USM 锐化”命令及图层混合模式等，设计苹果系统天气控件界面的背景效果。
步骤 01 选择“文件”|“打开”命令，打开“苹果系统天气控件背景”素材图像；选择“图像”|“调整”|“亮度/ 对比度”命令，弹出“亮度/ 对比度”对话框，设置“亮度”为18、“对比度”为31，单击“确定”按钮，即可调整背景图像的亮度与对比度，效果如图11-2 所示。
步骤 02 选择“图像”|“调整”|“曲线”命令，弹出“曲线”对话框，在曲线上添加一个控制点，设置“输出”和“输入”的参数值分别为187、175，然后在曲线上添加另一个控制点，设置“输出”和“输入”的参数值分别为70、77，如图11-3 所示，单击“确定”按钮，即可调整背景图像的色调。
图11-2 使用“亮度/ 对比度”命令调节图像 图11-3 设置“曲线”参数值步骤 03 选择“滤镜”|“锐化”|“USM 锐化”命令，弹出“USM 锐化”对话框，设置“数量”为30%、“半径”为3.6 像素、“阈值”为19 色阶，单击“确定”按钮，即可锐化背景图像，如图11-4 所示。
图11-4 锐化背景图像
步骤 04 展开“图层”面板，按Ctrl+J 组合键复制“背景”图层，得到“图层1”图层，设置“图层1”图层的“混合模式”为“叠加”、“不透明度”为60%，即可改变图像效果，如图11-5 所示。
步骤 05 打开“天气控件界面状态栏.psd”素材图像，将其拖曳至“苹果系统天气控件背景”图像编辑窗口中的合适位置处，效果如图11-6 所示。
图11-5 调整图像效果 图11-6 添加状态栏素材图像
11.1.2 设计天气控件界面的主体效果
下面主要使用矩形工具、“投影”图层样式、渐变工具、魔棒工具、横排文字工具等，设计苹果系统天气控件界面的主体效果。
步骤 01 在“图层”面板中，新建“图层2”图层，设置前景色为浅蓝色(RGB 参数值为121、140、239)，如图11-7 所示。
图11-7 设置前景色
步骤 02 选择工具箱中的矩形工具，在工具属性栏中设置“选择工具模式”为“像素”，绘制一个矩形。双击“图层2”图层，弹 出“图层样式”对话框，勾选“投影”复选框，保持默认设置即可，如图11-8 所示。
图11-8 勾选“投影”复选框
步骤 03 单击“确定”按钮，应用“投影”图层样式，效果如图11-9 所示。
步骤 04 在“图层”面板中，为“图层2”图层添加图层蒙版，如图11-10 所示。
图11-9 应用“投影”图层样式效果 图11-10 添加图层蒙版
步骤 05 使用渐变工具，从右至左填充黑色到白色的线性渐变，效果如图11-11 所示。
步骤 06 在“图层”面板中设置“图层2”图层的“不透明度”为60%，如图11-12 所示。
图11-11 填充线性渐变效果 图11-12 设置图层的不透明度
步骤 07 复制“图层2”图层，得到“图层2 拷贝”图层，将“图层2 拷贝”图层中的图像拖曳至相应位置处，效果如图11-13 所示。
步骤 08 按Ctrl+T 组合键，调出变换控制框，适当调整图像的大小和位置，按Enter 键确认操作，如图11-14 所示。
图11-13 复制并移动图像 图11-14 调整图像的大小和位置
步骤 09 选择工具箱中的魔棒工具，单击调整后的图像，创建选区，如图11-15 所示。
步骤 10 设置前景色为蓝色(RGB 参数值为78、111、231)，按Alt+Delete 组合键，为选区填充前景色，按Ctrl+D 组合键，取消选区，效果如图11-16 所示。
图11-15 创建选区 图11-16 填充效果
步骤 11 在“图层”面板中，复制“图层2”图层，得到“图层2 拷贝2”图层，适当调整“图层2 拷贝2”图层中图像的大小和位置，效果如图11-17 所示。
步骤 12 选择工具箱中的魔棒工具，单击调整后的图像，创建选区，如图11-18 所示。
图11-17 调整图像大小和位置 图11-18 创建选区
步骤 13 设置前景色为白色，按Alt+Delete组合键，为选区填充前景色，按Ctrl+D组合键，取消选区，效果如图11-19 所示。
步骤 14 设置“图层2 拷贝2”图层的“不透明度”为80%，即可改变图像效果，如图11-20 所示。
图11-19 填充效果 图11-20 调整图层的不透明度
步骤 15 选择“图层2 拷贝2”图层，按住Ctrl+Alt 键的同时向下拖曳，复制两个图层，如图11-21 所示。
步骤 16 适当调整各图像的位置，效果如图11-22 所示。
图11-21 复制图层 图11-22 调整图像的位置
步骤 17 打开“天气图标1.psd”素材图像，将其拖曳至“苹果系统天气控件背景”图像编辑窗口中的合适位置处，效果如图11-23 所示。
步骤 18 打开“天气图标2.psd”素材图像，将其拖曳至“苹果系统天气控件背景”图像编辑窗口中，并适当调整各图像的位置，效果如图11-24 所示。
图11-23 拖入素材图像 图11-24 拖入素材图像
步骤 19 选择工具箱中的横排文字工具，确认插入点，在“字符”面板中设置“字体系列”为“微软雅黑”、“字体大小”为60 点、“颜色”为白色(RGB 参数值均为255)，如图11-25 所示。
步骤 20 使用横排文字工具在图像中输入相应文本，如图11-26 所示。
图11-25 设置文字属性 图11-26 输入相应文本
步骤 21 使用横排文字工具确认插入点，在“字符”面板中设置“字体系列”为“微软雅黑”、“字体大小”为12 点、“颜色”为白色(RGB 参数值均为255)，如图11-27 所示。
步骤 22 在图像中输入相应文本，完成苹果系统天气控件界面的设计，最终效果如图11-28所示。
图11-27 设置文字属性 图11-28 最终效果
新书资讯