UI界面设计与制作 教案 第4章教案.docx

《UI界面设计与制作 教案 第4章教案.docx》由会员分享，可在线阅读，更多相关《UI界面设计与制作 教案 第4章教案.docx（78页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教案编号：4 课 题：第4章UI中的组件设计 课 时：12课时 授课类型：讲授+实训 工程目标： 了解组件的基础知识 掌握导航栏的制作 掌握标签栏的制作 掌握金刚区的制作 掌握瓷片区的制作工程重点： 导航栏的制作 标签栏的制作 金刚区的制作 瓷片区的制作工程难点：导航栏、标签栏、金刚区、瓷片区的规那么工程技能点：导航栏的制作、标签栏的制作、金刚区的制作、瓷片区的制作工程教学技巧：1 .知识讲解2 .案例实训9：41.ill 令1登录有建展示效果图【案例知识要点】使用圆角矩形工具绘制形状，使用属性面板制作弥散投影，使用置入嵌入对 象命令置入图标，使用横排文字工具输入文字。(I )按Ctrl+N组

2、合键,弹出新建文档对话框，将宽度设为750像素,高度设为98像素, 分辨率设为72像素/英寸,背景内容设为浅蓝色(126、212、229 ),如下图。单击“创立按钮， 完成文档新建。(2 )选择“圆角矩形工具O.,在属性栏的”选择工具模式”选项中选择形状，将填 充颜色设为白色，描边颜色设为无，半径选项设置为34像素。在图像窗口中适当的位置 绘制圆角矩形，在图层控制面板中生成新的形状图层圆角矩形J选择窗口 属性” 命令，弹出属性面板，设置如下图，按Enter键确定操作，效果如下图。(3 )按Clrl+J组合键，复制图层，在“图层控制面板中生成新的形状图层圆角矩形1拷贝。在属性栏中将填充颜色设为深

3、绿色(77、105、110、在属性面板中进行设置，如图所示，按Enter键确定操作，效果如下图。在属性面板中单击蒙版按钮，设置如下图，按Enter键确定操作，效果如下图。(4 )在，图层控制面板中将圆角矩形1拷贝图层的不透明度”选项设为30% ,并将其施曳到圆角矩形1”图层的下方，如下图，效果如下图。S.S- a 0 t n 3 Taflfiig：|3o* M豌：3 / 中 ts 8 耽：8% vO =图角碗J3 ZZ图用桁形1律贝 9 =看事豌：3 / 中 ts 8 耽：8% vO =图角碗J3 ZZ图用桁形1律贝 9 =看事(5 )使用浏览器翻开Iconfont-阿里巴巴矢量图标库官网，单

4、击右侧的“快捷登录按钮，如下图，在弹出的对话框中选择登录方式并登录，如下图。在搜索框中输入文字搜索，如图所示，并单击右侧的搜索按钮，进入图标页面。(6 )在页面中将鼠标指针放置在需要下载的图标上，如下图。单击下方的下载按钮，在 弹出的对话框中设置需要的颜色，如下图。单击AI下载按钮，在弹出的对话框中设置文件名及下载路径，如下图，单击下载按钮，下载矢量图标。QQ tnQQ Q tnQ 99Cl tnQs nQQaQQQQQQasaaqQ 99Q nQQOQQQQ Q QQQQnstssn9999SI：QQQQQQq99SMMIt*(7 )在“图层”控制面板中选中圆角矩形1图层。选择文件 置入嵌入

5、对象命令，弹 出置入嵌入的对象对话框。选择云盘中的Ch04制作旅游类App导航栏 素材02文 件，单击“置入”按钮，将图片置入到图像窗口中。将其拖曳到适当的位置，按Enier键确定操作, 在“图层控制面板中生成新的图层并将其命名为“方形网格系统。在属性面板中进行设置，如下图，按Enter键确定操作，效果如下图。(7越择文件 置入嵌入对象命令，弹出置入嵌入的对象对话框。选择云盘中的Ch04 制作旅游类App导航栏 素材 01文件，单击置入按钮，将图标置入到图像窗口中。将 其拖曳到适当的位置并调整其大小，按Enter键确定操作，在“图层控制面板中生成新的图层并 将其命名为“搜索:在属性面板中进行设

6、置,如下图，按Enter键确定操作，将图标置于 图标盒子中，效果如下图。(8 )单击方形网格系统”图层左侧的眼睛图标。，隐藏图层,如下图。选择横排文字工具T.,在适当的位置输入需要的文字并选取文字，选择窗口 字符命令，弹出面板，将 颜色设为浅灰色(193、193、193 ),其他选项的设置如下图,按Enter键确定操作，效果如图所示,在“图层控制面板中生成新的文字图层。(9 )选择“圆角矩形”工具O.,在属性栏中将填充颜色设为白色，描边颜色设为无,半径选项设置为34像素。在图像窗口中适当的位置绘制圆角矩形，在图层控制面板中生成新的形状图层圆角矩形2。在属性面板中进行设置，如下图，按Enter键

7、确定操作，效果如下图。T1(10 )按Ctrl+J组合键,复制图层，在“图层控制面板中生成新的形状图层圆角矩形2拷贝。在属性栏中将“填充”颜色设为深绿色(77、105、110、在“属性面板中进行设置，如图 所示，按Enter键确定操作，效果如下图。在“属性面板中单击蒙版按钮，设置如下图,按Enler键确定操作，效果如下图。(II )在图层,控制面板中将圆角矩形2拷贝图层的不透明度”选项设为30% ,并将其拖曳到圆角矩形2”图层的下方，如下图，效果如下图。(12)在“图层”控制面板中选中圆角矩形2”图层。选择“横排文字”工具T.,在适当的位置输入需要的文字并选取文字，在字符面板中进行设置，将颜色

8、设为深灰色(52、52、52 ),其他选项的设置如下图，按Enter健确定操作，效果如下图，在“图层控制面板中生成新的文字图层。(13 )按住Shift键的同时，单击圆角矩形1拷贝图层，将需要的图层同时选取。按CtH+G组合键，群组图层并将其命名为“导航栏，如下图。旅游类App导航栏制作完成。ES=asaj 0 0T 口 a , 筑J二硒腑：100% .雌：E3 / 中 ts 8 财：100% V D导R栏 = Ar O qj Q4. 3标签栏的设计标签栏作为UI设计中的常用组件之一，具有指导用户、操作灵活的特点。下面分别从概念、 类型以及规那么这三个方面进行按钮控件的讲解。4. 3.1标签栏

9、的概念标签栏(tab栏)，位于App的底部，提供了位置指示及页面切换的作用。Android中，MaterialDesign称其为底部应用栏(bottom App Bar ),如下图。iOS标签栏Kn3RW晓峰，李将，在仔一咱m下周日可以去外面组露个.没问题！ 三一近想去巴黎JRIK,你去不去，可以一起“.9生日礼物陈志志受日礼襁你有没玄什么犯法，泡送什么/A值得裳试的美味安好玩的游戏WF 江皮皮一见吃火斛，QJII 首选项 常规命令，弹出首选项”对话框，将键盘增量”选项设 为Ipx ,如下图。选择单位选项，切换到相应面板中进行设置，如下图。(3 )选择参考线和网格选项，切换到相应的面板，将网格

10、线间隔”选项设为lPx ,如图(4 )选择”视图 显示网格命令，显示网格。选择视图 对齐网格命令，对齐网格。选择视图 对齐像素”命令，对齐像素。(5 )选择文件 翻开命令，弹出翻开对话框，选择云盘中的Ch04制作旅游类App标签栏 素材02文件，单击“翻开按钮.如下图。(6 )选择选择工具k ,选取网格系统，按Ctrl+C组合健，复制图形。返回到正在编辑的页面，按Clrl+V组合键，将其粘贴到制作旅游类App标签栏页面中,并拖曳复制的网格系统到适当的位置，效果如下图。(7 )选择矩形工具Q,在页面中单击鼠标左键，弹出矩形对话框，选项的设置如图 所示。单击确定按钮，出现一个圆角矩形。设置描边色为

11、灰色(153、153、153 ),填充描边， 并设置填充色为无，效果如下图。(8 )选择窗口 描边命令,弹出描边控制面板，将粗细”选项设为1.5px ,对齐 描边选项设为使描边内侧对齐，其他选项的设置如下图，效果如下图。(9 )选择钢笔工具C ,在矩形上方中间的位置单击鼠标左键，添加一个锚点，在“属性控制面板中，设置X选项为12px , Y选项为Ipx ,如下图，效果如下图。选择”直接选择”工具,按住Shift键的同时，选取需要的锚点，将其垂直向下拖曳7px的位置，效果如图 所示。口 0(10)选择钢笔工具在形状右侧的位置单击鼠标左键，添加一个锚点，在“属性控 制面板中，设置X”选项为24PX

12、 , Y选项为I()px ,如下图，效果如下图 选择直接选 择”工具,按住Shift键的同时，选取需要的锚点，将其水平向右拖曳5px的位置，效果如下图。(11)选择钢笔工具，在形状左侧的位置单击鼠标左键，添加一个锚点，在属性控制面板中，设置X选项为Opx , Y选项为10px ,如下图，效果如下图。选择”直接选择”工具按住Shift键的同时，选取需要的锚点，将其水平向左拖曳5px的位置，效果如下图。(12 )选择直接选择工具4.,在形状右侧选取需要的锚点，将其垂直向下拖曳2px的位置，效果如下图。按住Shift键的同时，选取需要的锚点，将其垂直向下拖曳3px的位置，效果 如下图。使用相同的方法

13、调整右侧的锚点，效果如下图。(13 )选择钢笔工具在形状下方的位置单击鼠标左键，添加一个锚点，在“属性控 制面板中，设置X选项为l()px , Y选项为22px ,如下图,效果如下图。使用相同的方法，分别在X”选项为1 Ipx、13Px和14px, Y选项均为22px的位置添加三个锚点,效果如图所示。(14 )选择直接选择工具,在形状下方选取需要的锚点，将其垂直向上拖曳5px的位置，效果如下图。选取左侧的锚点，将其水平向右拖曳Ipx的位置,效果如下图。使用相同的方法调整右侧的锚点，效果如下图(15)选取形状右下角的锚点，如下图，显示边角点，如下图。双击边角点，弹出“边角对话框，设置半径选项为2

14、px ,其他选项的设置如下图。单击“确定”按钮,效果如下图。(16)使用相同的方法调整左下角的锚点，效果如下图。选取形状顶端的锚点，如下图，显示边角点，如下图。双击边角点，弹出“边角对话框，设置半径选项为Ipx ,其他选项的设置如下图。单 击“确定按钮，效果如下图。使用相同的方法调整另外两个锚点，效果如下图。(17 )选择选择工具4，选取图标。在属性控制面板中，单击保持宽度与高度比例按钮R ,设置宣选项为21Px ,其他选项的设置如下图。单击保持宽度与高度比例按钮R ,设置宽”选项为22px , “Y”选项设为12px ,其他选项的设置如下图，效果如下图。(18 )选择画板”工具出，按住All

15、+Shift组合键的同时,将“画板1垂直向下拖曳到适当的位置，如下图，在文件中生成新的画板画板2。选择选择工具4，选取“画板2”中的图标，设置描边色为橘黄色(255、151、1 ),效果如下图。(19 )保持图形的选取状态，按Ctrl+C组合键，复制图形，按QH+F组合键，原位粘贴图形,设置填充色为橘黄色( 255、151、1 ),填充图形，并设置描边色为无，效果如下图。(20 )选择窗口 透明度命令，弹出透明度控制面板，将不透明度”选项设为30% , 其他选项的设置如下图。在图形上单击鼠标右键，在弹出的快捷菜单中选择排列后移一层命令，如下图，将形状后移一层，效果如下图。(21 )使用相同的方

16、法分别绘制其他图标，效果如下图。按住Shift键的同时，分别单击图（二）课程内容组件的初识组件作为UI设计中常用控件或元素的集合，具有灵活使用、便于复用的特点。下面分别从组 件的概念及组件的获取这两个方面进行控件的基础讲解。4.1.1 组件的概念组件是将图片、图形、图标、文字等多个元素进行组合进行更好的信息传递，便于用户进行交互，如下图。A0229 cas “MS3 M f 任劣中心陵6门注恬7 y *组件组件的获取组件同控件一样可以从iOS以及Material Desi即官方网站进行获取。UI设计师通常会在官方组件的基础之上再进行设计。4. 2导航栏的设计标的网格系统，将其同时选取，按Ctr

17、l+3组合键，隐藏网格系统，效果如下图。按CtrkS组合 键，将文件保存在Ch04制作旅游类App标签栏 素材”的路径中，命名为01疝。(22 )在Photoshop中，按Ctrl+N组合键，弹出新建文档”对话框，将宽度设为750像素， 高度设为98像素，分辨率设为72像素/英寸，背景内容设为白色，如下图。单击“创立按钮, 完成文档新建。(23 )选择视图 新建参考线版面命令，弹出新建参考线版面对话框，设置如下图。单击“确定按钮，完成参考线的创立，效果如下图。(24)选择“矩形”工具口.，在属性栏的“选择工具模式选项中选择“形状”，将“填充,颜色设为 黑色，描边颜色设为无。在图像窗口中适当的位

18、置绘制矩形，在“图层”控制面板中生成新的形 状图层矩形选择窗口 属性命令，弹出属性面板，在面板中进行设置。在w r选项中输入输入数值，如下图，按Enter键确定操作，如下图。去除小数点后的数值，保存整数，如下图，效果如下图。(25 )按Ctrl+R组合键，显示标尺。选择视图 对齐到全部命令。在图像窗口左侧标 尺上单击鼠标并水平向右进行拖曳，在矩形右侧锚点的位置松开鼠标，完成参考线的创立。效果 如下图。(26府图像窗口上方标尺上单击鼠标并垂直向下进行拖曳，在矩形上方锚点的位置松开鼠标,完成参考线的创立，如下图。使用相同的方法，在矩形下方创立一条参考线，效果如下图。(27 )按Ctrl+T组合键，

19、在图形周围出现变换框，如下图。在图像窗口左侧标尺上单击鼠标并水平向右进行拖曳，在矩形中心点的位置松开鼠标，完成参考线的创立，效果如下图。(28 )选择移动”工具包，按住Shift健的同时，将矩形水平向右移动到适当的位置，使矩 形左侧贴齐辅助线，如下图。使用上述的方法，分别在位于矩形中心和矩形右侧的位置添加两 条垂直辅助线，如下图。(29 )使用相同的方法，分别添加四条垂直辅助线，如下图。选择矩形工具口，在“属 性”面板中进行设置，如下图。 X 刻)形状amw： 138 IMF 8 H: SO信京tiftt 3 iU ”修 V同7。像未。僧篌按Qrl+T组合键，在图形周围出现变换框，在图像窗口左

20、侧标尺上单击鼠标并水平向右进行 拖曳,在矩形中心点的位置松开鼠标，完成参考线的创立，效果如下图。按Emer键确定操作, 在“图层控制面板中选中矩形I图层，按Delete键将其删除，效果如下图。(30 )选择文件 置入嵌入对象命令，弹出置入嵌入的对象对话框。选择云盘中的 ChO4 制作旅游类App标签栏 素材 01”文件,单击置入按钮，弹出翻开为智能对 象”对话框，选择页面1,如下图，单击确定按钮，将图标置入到图像窗口中，如图所 示。HSJtKEJ：由 a5678910土 I（能苑的大小CD：小将其拖曳到适当的位置并调整大小，按Enter键确定操作，在“图层控制面板中生成新的图 层并将其命名为首

21、页（未选中匚在“属性面板中进行设置，如下图,按Enter键确定操作, 效果如下图。（31 ）选择文件 置入嵌入对象命令，弹出置入嵌入的对象对话框。选择云盘中的Ch04 制作旅游类App标签栏 素材 01 ”文件，单击置入按钮，弹出翻开为智能对象”对话框，选择“页面2,如下图,单击确定按钮，将图标置入到图像窗口中，并调整 为与首页（未选中r图标相同的位置与大小，在图层控制面板中生成新的图层并将其命名 为首页（已选中r,如下图。陷囹5678910能苑的大小CD：小(32)单击”首页(未选中r图层左侧的眼睛图标,隐藏图层，如下图，效果如下图。(33 )使用相同的方法分别置入其他需要的图标并调整大小，

22、在属性面板中分别设置图标 位置，在“图层控制面板中生成新的图层并分别将其命名，设置图标的显示与隐藏，如下图,效果如下图。000(34 )选择视图 新建参考线命令，弹出新建参考线对话框，设置如下图。单击确定按钮，完成参考线的创立，效果如下图。(35 )选中背景图层。选择“横排文字”工具T.,在适当的位置输入需要的文字并选取文字,选择窗口 字符命令，弹出面板，将颜色设为橘黄色(255、1 ),其他选项 的设置如下图，按Enter键确定操作，在图层控制面板中生成新的文字图层，如下图，效果如下图。Q 060(37 )在“图层控制面板中选中(36 )使用相同的方法再次分别输入文字，在字符面板中，将颜色设

23、为灰色(153、153、153 ),其他选项的设置如下图，按Enler键确定操作，效果如下图，在“图层控制面板中分别生成新的文字图层。O (D”我的(已选中y图层，如下图。按住Shift键的同时，单击首页图层，将需要的图层同时选取。按Ctrl+G组合键，群组图层并将其命名为标签栏， 如下图。旅游类App标签栏制作完成。4. 4金刚区的设计金刚区作为UI设计中的常用组件之一,具有展现丰富、设计精美的特点。下面分别从概念、 类型以及规那么这三个方面进行按钮控件的讲解。4. 4.1金刚区的概念金刚区又称为快速功能入口，通常是位于搜索框、banner之下，是页面的核心功能区域，表 现形式为多行排列的宫

24、格区图标。具有趣味展示以及业务导流的作用，如下图。18：31 。新龙城一期H寸Q 中元tl色。新龙城一期H寸Q 中元tl色18：32- 新建参考线版面命令，弹出新建参考线版面对话框，设置如下图。单击确定按钮，完成参考线的创立，效果如下图。(3 )选择矩形”工具口.，在属性栏的,选择工具模式.选项中选择形状，将填充颜色设为 黑色，描边颜色设为无。在图像窗口中适当的位置绘制矩形，在“图层控制面板中生成新的形 状图层,矩形I。选择窗口 属性命令，弹出属性面板，在面板中进行设置。在w r 选项中输入输入数值，如下图，按Enter键确定操作，效果如下图。去除小数点后的数值，保存整数，如下图，效果如下图。

25、(4 )按Cirl+R组合键，显示标尺。选择视图 对齐到 全部命令。在图像窗口左侧标 尺上单击鼠标并水平向右进行拖曳，在矩形右侧锚点的位置松开鼠标，完成参考线的创立，效果 如下图。(5 )按Clrl+T组合键，在图形周围出现变换框，如下图。在图像窗口左侧标尺上单击鼠标并水平向右进行拖曳，在矩形中心点的位置松开鼠标，完成参考线的创立，效果如下图。(6 )选择移动”工具乜，演主Shift键的同时，将矩形水平向右移动到适当的位置，使矩 形左侧贴齐辅助线，如下图。使用上述的方法，分别在位于矩形中心和矩形右侧的位置添加两 条垂直辅助线，如下图。(7 )使用相同的方法，分别添加四条垂直辅助线，如下图。选择

26、矩形”工具口.，在属性 面板中进行设置，如下图。X-K 硼榭KttW： 138 OO H： Hflfl 5Ke Y； 111 .一n v 餐 y If v OtlOO按Qrl+T组合键，在图形周围出现变换框，在图像窗口左侧标尺上单击鼠标并水平向右进行 拖曳，在矩形中心点的位置松开鼠标，完成参考线的创立，效果如下图。按Enter键确定操作， 在图层控制面板中选中“矩形1图层，按Delete键将其删除，效果如下图。(8 )选择圆角矩形”工具O.,在属性栏中将半径选项设置为4像素。在图像窗口中适 当的位置绘制圆角矩形，在图层控制面板中生成新的形状图层“圆角矩形W 在属性面 板中进行设置，如下图，按E

27、nter键确定操作，效果如下图。（9 ）单击图层控制面板下方的添加图层样式按钮在弹出的菜单中选择渐变叠 加命令，弹出对话框，单击渐变”选项右侧的“点按可编辑渐变”按钮y,弹出渐 变编辑器”对话框，在位置选项中分别输入0、100两个位置点，分别设置两个位置点颜色的RGB值为0（ 1、206、149 1 100（4、219、64 ）,如下图，单击确定按钮。返回到渐变叠加对话框，其他选项的设置如下图，单击确定按钮，效果如下图。（1。）选择“圆角矩形工具O,在属性栏中将半径选项设置为2像素，在图像窗口中 适当的位置绘制圆角矩形,效果如下图，在“图层控制面板中生成新的形状图层圆角矩形 2。在属性面板中进行其他设置，如下图，效果如下图。(11 )选择直接选择,工具琳.，选中左上角的锚点，按住Shift键的同时，将其向右拖曳到适加命令，弹出