网页图片与移动界面（WebApp)的UI设计PPT课件（共12章）项目十　手机UI的质感表现.pptVIP

网页图片与移动界面(Web/App)的UI设计 项目十　手机UI的质感表现 主讲：XXX 时间：2020.X 网页图片与移动界面(Web/App)的UI设计 掌握在手机UI元素设计过程中的图层样式和渐变填充工具的使用； 使用形状工具、路径工具、路径选择工具、路径控制面板等创建、编辑和存储路径以及路径和选区的相互转换的技巧与方法； 能制作金属质感、玻璃质感和手机光滑表面的效果制作。 教学目标 10.1.1任务引入 在手机UI设计设计过程中，金属质感是常用的质感表现，也体现出手机UI的高贵和大气，故需学会金属质感的制作方法。 10.1.2知识引入 1. UI设计的概念 UI即User Interface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。 10.1 金属 2. UI设计原则 (1) 一致性和必要的个性化：软件风格一致 ，要有统一的字体字号、统一的色调、统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置； (2) 使用用户的语言：界面中要注意使用用户的语言，而不是设计者的语言，最有效的方法：让数据说话，如询问用户、用户投票等。因此，用户使用系统的错误会降到最低； (3) 用户记忆负担最小化：在设计时一定要考虑到减轻用户的记忆负担； (4) 用户界面的功能性：功能界面存在的基础与价值用户界面一定要有基本的功能，设计者不能片面追求界面外观漂亮而导致华而不实。 10.1 金属 10.1.3 任务实现 ---金属按钮的制作 1. 任务分析 本任务主要学会使用椭圆工具绘制由中心向外的正圆，通过“图层样式”的“描边”效果为正圆添加金属光泽，通过椭圆工具和“路径”面板配合使用绘制金属效果的外围效果，通过渐变填充工具制作按钮内部金属效果。 2. 任务操作 (1) 金属外围制作 (2)内部金属质感制作 (3)制作装饰圆点 10.1 金属 10.2.1任务引入 玻璃因为它透明靓丽的质感，自显精致，手机UI设计中，很多UI按钮等部件设计常采用玻璃质感来体现。 能设计制作玻璃质感的按钮是一名UI设计师的必备技能之一。 10.2.2 知识引入 1．内发光图层样式 将内发光想象为一个内侧边缘安装有照明设备的隧道的截面。添加了“内侧发光”样式的层上方会多出一个“虚拟”的层，这个层由半透明的颜色填充，沿着下面层的边缘分布。 2．内阴影图层样式 内阴影就是物体内侧的阴影，光源在外侧，阴影投影到对象内侧的效果，对象看上去有厚度的效果。 10.2 玻璃 10.2.3 任务实现 ---玻离质感的制作 1. 任务分析 本案列主要运用“内发光”、“内阴影”、“投影”和“渐变叠加”图层样式制作按钮的体感、发光边缘和投影效果。使用钢笔工具绘制按钮高光部分的形状，结合渐变叠加制作高光效果，高光部分的运用“高斯模糊”滤镜执着高光的投影部分。 10.2 玻璃 2. 任务操作 (1) 背景制作 (2) 按钮外形制作 (3) 按钮高光制作 (4) 高光投影制作 (5) 高光、反光细节制作 (6) 按钮投影制作 10.2 玻璃 10.3.1任务引入 本任务中，主要学会结合不同的工具来绘制手机的外形，大量运用图层的“图层样式”效果来为形状添加效果，使手机表现完美的立体感和质感。 10.3.2 知识引入 1. 图层面板 在图层面板中，效果前面的眼睛图标 用来控制效果的可见性，如果要隐藏一个效果，可以单击该效果名称前的眼睛图标 。 2. 渐变工具 选择线性渐变图标 ，在图像上按住鼠标左键拖拉出来渐变条，可谓图像填充渐变。 10.3 手机光滑表面 10.3.3 任务实现 ---手机表面的制作 1.任务分析 本任务主要通过“描边”图层样式为手机外壳增加金属质感和厚度感，使用“内阴影”和“渐变叠加”图层样式为手机屏幕添加质感效果，使用钢笔工具绘制手机底部按钮形状，用“渐变叠加”图层样式添加光感和质感效果，用矩形工具绘制手机外部开关按钮，使用渐变填充工具和“内发光”图层样式添加光感和质感效果。 10.3 手机光滑表面 2.任务操作 (1) 手机外壳质感制作 (2) 手机屏幕制作 (3) 手机底部按钮制作 (4) 手机屏幕高光制作 (5) 开关音量按钮制作 10.3 手机光滑表面 要求：结合所学知识，制作如图金属质感按钮。 课后练习—— —金属质感按钮 感谢各位 主讲：XXX * * * * * * * * * * * * * 网页图片与移动界面(Web/App)的UI设计 * * * * * * * * * * * * *