项目十　手机UI的质感表现电子课件 网页图片与移动界面（WebApp)的UI设计.ppt

《项目十　手机UI的质感表现电子课件 网页图片与移动界面（WebApp)的UI设计.ppt》由会员分享，可在线阅读，更多相关《项目十　手机UI的质感表现电子课件 网页图片与移动界面（WebApp)的UI设计.ppt（14页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目十手机UI的质感表现电子课件 网页图片与移动界面（WebApp)的UI设计网页图片与移动界面 网页图片与移动界面(Web/App)(Web/App)的 的UI UI设计 设计项目十手机UI的质感表现主讲：XXX 时间：2020.X网页图片与移动界面(Web/App)的UI设计网页图片与移动界面 网页图片与移动界面(Web/App)(Web/App)的 的UI UI设计 设计u掌握在手机UI元素设计过程中的图层样式和渐变填充工具的使用；u使用形状工具、路径工具、路径选择工具、路径控制面板等创建、编辑和存储路径以及路径和选区的相互转换的技巧与方法；u能制作金属质感、玻璃质感和手机光滑表面的效果

2、制作。教学目标 网页图片与移动界面 网页图片与移动界面(Web/App)(Web/App)的 的UI UI设计 设计10.1.1任务引入 在手机UI设计设计过程中，金属质感是常用的质感表现，也体现出手机UI的高贵和大气，故需学会金属质感的制作方法。10.1.2知识引入 1.UI设计的概念 UI即User Interface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。10.1 金属网页图片与移动界面 网页图片与移动界面(Web/App)(Web/App)的 的UI UI设计 设计2.UI设计原则(1)一致性和必要的个性化：软件风格一致，要有统一的字体字号、统一

3、的色调、统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置；(2)使用用户的语言：界面中要注意使用用户的语言，而不是设计者的语言，最有效的方法：让数据说话，如询问用户、用户投票等。因此，用户使用系统的错误会降到最低；(3)用户记忆负担最小化：在设计时一定要考虑到减轻用户的记忆负担；(4)用户界面的功能性：功能界面存在的基础与价值用户界面一定要有基本的功能，设计者不能片面追求界面外观漂亮而导致华而不实。10.1 金属网页图片与移动界面 网页图片与移动界面(Web/App)(Web/App)的 的UI UI设计 设计10.1.3 任务实现-金属按钮的制作 1.任务分析 本任务主要学会使用椭

4、圆工具绘制由中心向外的正圆，通过“图层样式”的“描边”效果为正圆添加金属光泽，通过椭圆工具和“路径”面板配合使用绘制金属效果的外围效果，通过渐变填充工具制作按钮内部金属效果。2.任务操作(1)金属外围制作(2)内部金属质感制作(3)制作装饰圆点10.1 金属网页图片与移动界面 网页图片与移动界面(Web/App)(Web/App)的 的UI UI设计 设计10.2.1任务引入 玻璃因为它透明靓丽的质感，自显精致，手机UI设计中，很多UI按钮等部件设计常采用玻璃质感来体现。能设计制作玻璃质感的按钮是一名UI设计师的必备技能之一。10.2.2 知识引入1内发光图层样式 将内发光想象为一个内侧边缘安

5、装有照明设备的隧道的截面。添加了“内侧发光”样式的层上方会多出一个“虚拟”的层，这个层由半透明的颜色填充，沿着下面层的边缘分布。2内阴影图层样式 内阴影就是物体内侧的阴影，光源在外侧，阴影投影到对象内侧的效果，对象看上去有厚度的效果。10.2 玻璃网页图片与移动界面 网页图片与移动界面(Web/App)(Web/App)的 的UI UI设计 设计10.2.3 任务实现-玻离质感的制作1.任务分析 本案列主要运用“内发光”、“内阴影”、“投影”和“渐变叠加”图层样式制作按钮的体感、发光边缘和投影效果。使用钢笔工具绘制按钮高光部分的形状，结合渐变叠加制作高光效果，高光部分的运用“高斯模糊”滤镜执着

6、高光的投影部分。10.2 玻璃网页图片与移动界面 网页图片与移动界面(Web/App)(Web/App)的 的UI UI设计 设计2.任务操作(1)背景制作(2)按钮外形制作(3)按钮高光制作(4)高光投影制作(5)高光、反光细节制作(6)按钮投影制作10.2 玻璃网页图片与移动界面 网页图片与移动界面(Web/App)(Web/App)的 的UI UI设计 设计10.3.1任务引入 本任务中，主要学会结合不同的工具来绘制手机的外形，大量运用图层的“图层样式”效果来为形状添加效果，使手机表现完美的立体感和质感。10.3.2 知识引入 1.图层面板 在图层面板中，效果前面的眼睛图标 用来控制效果

7、的可见性，如果要隐藏一个效果，可以单击该效果名称前的眼睛图标。2.渐变工具 选择线性渐变图标，在图像上按住鼠标左键拖拉出来渐变条，可谓图像填充渐变。10.3 手机光滑表面网页图片与移动界面 网页图片与移动界面(Web/App)(Web/App)的 的UI UI设计 设计10.3.3 任务实现-手机表面的制作1.任务分析 本任务主要通过“描边”图层样式为手机外壳增加金属质感和厚度感，使用“内阴影”和“渐变叠加”图层样式为手机屏幕添加质感效果，使用钢笔工具绘制手机底部按钮形状，用“渐变叠加”图层样式添加光感和质感效果，用矩形工具绘制手机外部开关按钮，使用渐变填充工具和“内发光”图层样式添加光感和质感效果。10.3 手机光滑表面网页图片与移动界面 网页图片与移动界面(Web/App)(Web/App)的 的UI UI设计 设计2.任务操作(1)手机外壳质感制作(2)手机屏幕制作(3)手机底部按钮制作(4)手机屏幕高光制作(5)开关音量按钮制作10.3 手机光滑表面网页图片与移动界面 网页图片与移动界面(Web/App)(Web/App)的 的UI UI设计 设计要求：结合所学知识，制作如图金属质感按钮。课后练习 金属质感按钮网页图片与移动界面 网页图片与移动界面(Web/App)(Web/App)的 的UI UI设计 设计感 谢 各 位主讲：XXX