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

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

1、教案编号：3 课 题：第3章UI中的控件设计 课 时：16课时 授课类型：讲授+实训 工程目标： 了解控件的基础知识 掌握按钮控件的制作 掌握选择控件的制作 掌握加减控件的制作 掌握分段控件的制作 掌握页面控件的制作 掌握反应控件的制作 掌握文本框控件的制作工程重点： 按钮控件的制作 选择控件的制作 加减控件的制作 分段控件的制作 页面控件的制作 反应控件的制作 文本框控件的制作工程难点：各类控件的规那么工程技能点：按钮控件的制作、选择控件的制作、加减控件的制作、分段控件的制作、页面控件的制 作、反应控件的制作、文本框控件的制作工程教学技巧：1 .知识讲解.案例实训默认状态：主题色/行为/情绪

2、点击状态：默认状态+黑色遮罩禁用状态：默认状态+背景灰化忙磔状态：默认状态+忙碌图标按钮的不同状态2. 4课堂案例制作旅游类App按钮控件【案例设计要求】1 .运用软件Photoshop制作工具栏中的“立即预定”按钮控件，设计效果、环境效果如下图。2工具栏尺寸：750px（宽）x98px （高），控件尺寸：80px （高3.符合控件的设计规那么。【案例学习目标】学习使用软件Photoshop制作立即预定按钮控件。即预定设计效果图豪华三人间26-28m2三床有窗辛299起o386 已减87立即预定环境效果图【案例知识要点】使用圆角矩形工具绘制按钮，使用横排文字工具输入文字。（1 ）按Ctrl+N

3、组合键,弹出新建文档对话框，将宽度设为750像素,高度设为98像素,分辨率设为72像素/英寸，背景内容设为白色，如下图。单击创立按钮，完成文档新建。(2 )选择圆角矩形工具。，在属性栏的选择工具模式选项中选择形状，将填充颜色设为橘黄色( 255、151、1 )，描边颜色设为无，半径选项设置为16像素。在图像 窗口中适当的位置绘制圆角矩形，在图层控制面板中生成新的形状图层圆角矩形1选择窗口 属性命令，弹出属性面板，设置如下图，按Enter键确定操作，效果如下图。(3 )选择横排文字工具在适当的位置输入需要的文字并选取文字，选择窗口字符命令，弹出面板，将颜色设为白色，其他选项的设置如下图，按Ent

4、er键确定操作,效果如下图，在图层控制面板中生成新的文字图层。 X字符三立即预定(4 )在图层控制面板中，按住Shift键的同时,单击圆角矩形1图层，将需要的图层同时选取。按Ctrl+G组合键，群组图层并将其命名为预定按钮。单击背景图层左侧的眼睛图标0 ，隐藏该图层，如下图，效果如下图。旅游类App按钮控件制作完成。/X 3 立即预定3. 3选择控件的设计选择控件作为ui设计中的常用控件之一，具有符合预期、一目了然的特点。下面分别从概念、 类型以及规那么这三个方面进行按钮控件的讲解。3. 3.1选择控件的概念选择控件(Selection Controls )允许用户选择选项，如下图。工程一工程

5、二 工程一O 工程二开工翻开关闭选择控件3. 3.1选择控件的类型1.单项选择按钮单项选择按钮指列表中仅可以选一个，如下图。产品三角置物架长方形置物架2.复选框颜色浅蓝色 深蓝色 白灰色 浅粉色网易严选App复选框指从列表中选择一个或多个选项，如下图。自由摆放，音画俱佳，家庭影院投影仪W2O投影仪735991 | +合合作仓免那。7天无忧退换。不可用券/红包打价三角长方形多场景，5kg承 重免打孔置物架O I长方形置物架；深蓝色7价格:27.9 29已选：长方形置物架深蓝色27.9 29合自营仓新品满99免第 0 30天无忧退换 不可用券网易严选复选框3.开关开关指立即激活或停用某项，如下图。

6、百度网盘锁屏码自动识别笔记链接百度网盘App3. 3. 3选择控件的规那么.选择控件的尺寸选择控件的尺寸参考如下图。1 .选择控件的状态选择控件的状态包括选择及未选择状态，如下图。20pt工O24pt工 口选择控件的尺寸参考3. 3. 4课堂案例制作旅游类App选择控件【案例设计要求】1 .运用软件Photoshop制作App选择控件，设计效果、环境效果如下图。2 .控件尺寸：32pxo3 .符合控件的设计规那么。【案例学习目标】学习使用软件Photoshop制作选择控件。设计效果图。未注册游儿账号的手机号，登陆时将自动注册，是 否同意用户协议和隐私保护环境效果图【案例知识要点】使用椭圆工具和

7、圆角矩形工具绘制形状，使用相应快捷键合并形状并将形状 旋转到适当的角度。(1 )按CW+N组合键，弹出新建文档对话框，将宽度设为32像素，高度设为32像素,分辨率设为72像素/英寸，背景内容设为白色，如下图。单击创立按钮，完成文档新建。(2 )单击图层控制面板下方的创立新图层按钮Q ,新建图层。将前景色设为橘黄色(255、151、1 ),按Alt+Delete组合键，用前景色填充图层，效果如下图。(3 )选择椭圆工具O,在属性栏的选择工具模式选项中选择形状，将填充颜色设为无，描边颜色设为白色，设置形状描边宽度选项设为2像素。按住Shift键的同时, 在图像窗口中适当的位置绘制圆形，在图层控制面

8、板中生成新的形状图层椭圆选择窗口 属性命令，弹出属性面板，在面板中进行设置，如下图，效果如下图。(4)将椭圆1图层拖曳到图层控制面板下方的创立新图层按钮Q上进行复制，生成新的形状图层椭圆1拷贝二在属性栏中将填充颜色设为无描边颜色设为橘黄色( 255)(5 )在图层控制面板中，选中椭圆1图层，按住Shift键的同时，单击图层1图 层，将需要的图层同时选取。按Ctrl+G组合键，群组图层并将其命名为未填充。单击图层组左 侧的眼睛图标 ,隐藏该图层组，并选中椭圆1拷贝图层,如下图，效果如下图。“X匡层三q 垃 v s o t n a 正常2不S明度：100% 7(6 )将椭圆1拷贝图层拖曳到图层控制

9、面板下方的创立新图层按钮上进行复 制，生成新的形状图层椭圆1拷贝2。按Ctrl+T组合键，在图形周围出现变换框，按住Alt+Shift 组合键的同时，拖曳右上角的控制手柄等比例缩小图形，按Enter键确定操作，如下图。(7 )选择椭圆工具。一在属性栏中将填充颜色设为橘黄色(255、151、1 ),描边颜色设为无，在属性面板中进行其他设置，如下图，效果如下图。(8 )选择圆角矩形工具口，在属性栏中将半径选项设置为1像素，在图像窗口中适当的位置绘制圆角矩形，在属性栏中将填充颜色设为白色，描边颜色设为无，效果如图所 示，在图层控制面板中生成新的形状图层圆角矩形在属性面板中进行其他设置,如下图，效果如

10、下图。(9 )使用相同的方法再次绘制一个圆角矩形，在属性面板中进行其他设置，如下图,效果如下图，在图层控制面板中生成新的形状图层圆角矩形2。(10 )在图层控制面板中，按住Shift键的同时，单击圆角矩形1图层，将需要的图层同时选取，按Ctrl+E组合键,合并形状,如下图。(11 )按Ctrl+T组合键，在图形周围出现变换框,如下图。按住Alt键的同时,将变换参考点拖曳到适当的位置，如下图。将指针放在变换框的控制手柄右下角，指针变为旋转图标， 按住Shift键的同时，拖曳鼠标将图形旋转到-45。，如下图。按Enter键确定操作，效果如图所 示。旅游类App选择控件制作完成。(12 )在图层控制

11、面板中，按住Shift键的同时，单击椭圆1拷贝图层，将需要的图 层同时选取。按Ctrl+G组合键，群组图层并将其命名为已填充，如下图。按住Shift键的同 时，单击未填充图层组，将需要的图层组同时选取。按Ctrl+G组合键，群组图层组并将其命 名为选择控件，如下图。3. 4加减控件的设计加减控件作为UI设计中的常用控件之一，具有简洁高效、操作方便的特点。下面分别从概念、类型以及规那么这三个方面进行按钮控件的讲解。3. 4.1加减控件的概念加减控件又称为步进器(Steppers ),是用于增加或减少增量值的两段控制，如下图。加减控件3. 4.2加减控件的类型.常规常规的加减控件通常一段显示加号，

12、另一段显示减号，如下图。自家得优品 领券韩国布拖鞋手工拖鞋不伤地板布 软底男女款静音防滑透气可机女款式2建议大1码;38库存紧张39，1+本店活动满68元,享包邮去凑单淘宝App.自定义自定义的加减控件可以运用图像替换加号和减号，如下图。赞同4109。喜欢98 收藏O评论55知乎App. 4. 3加减控件的规那么尺寸上，高度建议在2040Pt之间，如下图。工程过程：（一）课前准备.授课前准备准备好教学用具和教学设备.板书课题：第3章UI中的控件设计工程目标： 了解控件的基础知识掌握按钮控件的制作 掌握选择控件的制作掌握加减控件的制作 掌握分段控件的制作掌握页面控件的制作 掌握反应控件的制作掌握

13、文本框控件的制作1 .课程引入通过课堂案例效果展示引入UI控件设计的概念立即预定按钮控件选择控件2 O加减控件推荐 北京周边 上海 巴厘岛 天津 O分段控件页面控件反应控件14：51搜索14：51搜索Q想吃什么授一搜点餐评价605商家故事热销猪排饭套餐口优惠招牌排骨麻炸素食香炸肉肉小食套餐汉堡套名猪排饭 套餐招牌卤肉猪排饭（猪排 +配菜+米饭+果饮） 卤肉.,四济.抒甘远.惠大 月售5739.8O日式肥牛猪排饭（猪排+配菜+米饭年肉.播掰.蚪咨,媒甘i5. UK 月售9*39.8 I 1。1 iiii咖喔牛肉猪排饭（猪排 +配菜+米饭+果饮）牛肉、wnr.鸿蛋、竦日抵、sa.月1639.8 3

14、。高度20pt鸡排饭套餐畅爽饮品鸡排饭套餐畅爽饮品鸡排饭套餐日式肥牛鸡排饭（鸡排 +配菜+米饭牛肉.8HL烂法.uSRB.黑木.月含1126.9已减44元可享优惠满120花42.津贴Y2已减44元可享优惠满120花42.津贴Y2饿了么App饿了么App步进器中的左右两个按钮，需要合理的减去内侧的圆角，如下图。步进器中左右按钮的设计3. 4. 4课堂案例制作旅游类App加减控件【案例设计要求】1 .运用软件Photoshop制作App选择控件，设计效果、环境效果如下图。2 .加减控件尺寸：48px （宽）x48px （高X3 .符合控件的设计规那么。【案例学习目标】学习使用软件Photoshop

15、制作加减控件。2 O设计效果图奥利奥咖啡口感独特，值得品尝本店力荐月售2826起 2环境效果图【案例知识要点】使用椭圆工具和圆角矩形工具绘制形状，使用减去顶层形状命令修饰形状， 使用横排文字工具输入文字。(1 )按Ctrl+N组合键,弹出新建文档对话框，将宽度设为168像素,高度设为48像素, 分辨率设为72像素/英寸，背景内容设为白色，如下图。单击创立按钮，完成文档新建。(2 )选择椭圆工具。一在属性栏的选择工具模式选项中选择形状，将填充 颜色设为无，描边颜色设为深黄色(255、121、0 ),设置形状描边宽度选项设为2像素。按 住Shift键的同时，在图像窗口中适当的位置绘制圆形，在图层控

16、制面板中生成新的形状图层 椭圆1选择窗口 属性命令，弹出属性面板，在面板中进行设置，如下图，效果 如下图。(3 )选择圆角矩形工具口，在属性栏中将半径选项设置为2像素。在图像窗口中适当的位置绘制圆角矩形，在属性栏中将填充颜色设为深黄色( 255、121、0), 描边颜色设 为无，在图层控制面板中生成新的形状图层圆角矩形在属性面板中进行其他设置，如下图，效果如下图。(4 )在图层控制面板中选中椭圆1图层，将其拖曳到图层控制面板下方的创立新图层按钮Q上进行复制，生成新的形状图层椭圆1拷贝，将其拖曳到圆角矩形1图层的上方，如下图。(5 )选择移动工具出一按住Shift键的同时,将复制的圆形水平向右拖

17、曳到适当的位置,如下图。选择椭圆工具。，在属性栏中将填充颜色设为深黄色( 255、0), 描边颜色设为无，效果如下图。(6)选择圆角矩形工具Q ,在属性栏中将半径选项设置为2像素。按住Alt键的同 时，在图像窗口中适当的位置绘制圆角矩形，在属性面板中进行设置，如下图，效果如图所ZFo(7 )使用相同的方法，在图像窗口中适当的位置再次绘制一个圆角矩形，在属性面板中进行设置，如下图，效果如下图。(8 )选择横排文字工具在适当的位置输入需要的文字并选取文字，选择窗口 字 符命令，弹出面板，将颜色设为深黄色(255、0 ),其他选项的设置如下图，按Enter键确定操作，效果如下图，在图层控制面板中生成

18、新的文字图层。“ X字符三苹方|中等V1 34点V(自动)呦oF国oRIT 100% 工 too%Aa n dggt(=t, . IOaBWe- |T T TT Tt T1 Tx T Tfi扰共2 IS T产|寤英语，|aa平滑 (9 )在图层控制面板中,按住Shift选取。按CtrH-G组合键，群组图层并将其命 制作完成。键的同时，单击椭圆1图层，将需要的图层同时名为加减控件，如下图。旅游类App加减控件层层“XQ理V 国 0 T 口 M 髓2不透明度：100% v豌：0 /中口：。麻：100% 7口力调控件 11 1聘boo门匚口 。，口 Q电3. 5分段控件的设计分段控件作为UI设计中的

19、常用控件之一 类型以及规那么这三个方面进行按钮控件的讲角 3. 5.1分段控件的概念分段控件(Segmented Controls )在相关W 中,Material Design 称其为选项卡(Tabs ),标签一标签一标签二13. 5. 2分段控件的类型，具有内容丰富、选项同行的特点。下面分别从概念、 ?03处于相同层次结构的内容组之间进行导航。Android 如图所小。标签二标签三示签三标签四标签五标卷分段控件L固定固定选项卡会在一个屏幕上显示所有选项，它们不会滚动以显示更多项选择项，如下图。产品特色理赔说明立即投保常见问题更多问题色在哪些医院接受治疗可以获得理赔？就诊医院限二级及以上的公

20、立医院普通部。色 可以赔付哪些医疗费用？V年免赔额1万元，怎么理解？众安保险Approi关注推荐 Q O微博App.滚动滚动标签没有固定的宽度，它们是可滚动的，因此某些选项卡将保持在屏幕外，直到滚动为 止，如下图。推荐LOOK直播#相信未来#热歌放映厅网易云音乐App精选推荐互联网产品 IT认证 平 +腾讯课堂App2 . 5. 3分段控件的规那么.分段控件的尺寸(1)分段控件的高度高：高度在4048Pt ,适用于App导航栏中。低：高度在2836Pt ,适用于App页面中部。如下图。分段控件的高度示意图(2 )分段控件的宽度选项少时，直接进行均分显示。选项较多，采取定宽模式，宽度最小建议在6

21、4Pt以上，如图 所示。推荐平面电商UII1 1/4控件宽|180pt推荐平面电商UI交互分段控件宽度示意图1 .分段控件的文字通常分页器是没有背景色的，但背景需通过隐藏填充和描边的方式画出，这样才可以通过垂 直居中的方式，来确定中间文字的位置，如下图。分段控件的文字位置示意图.分段控件的下画线下画线的位置：可以放置在控件底部或直接在文字下方悬浮。下画线的高度：不大于2ptoF画线的宽度：位于控件底部宽度和每个选项的背景区域等长，在文字下方悬浮那么建议在8 6Pt （小于文字总宽X如下图。下画线示意图3. 5. 4课堂案例制作旅游类App分段控件【案例设计要求】1 .运用软件Photoshop

22、制作分段控件，效果如下图。2 .控件尺寸：750px （宽）x88px （高3 .符合控件的设计规那么。【案例学习目标】学习使用软件Photoshop制作分段控件。推荐北京周边上海巴厘岛天河。效果图【案例知识要点】使用矩形工具、椭圆工具和圆角矩形工具绘制形状，使用横排文字工具输入 文字，使用添加图层蒙版命令和画笔工具修饰文字，使用减去顶层形状命令修饰形状。（1 ）按Ctrl+N组合键,弹出新建文档对话框，将宽度设为750像素,高度设为88像素, 分辨率设为72像素/英寸，背景内容设为白色，如下图。单击创立按钮，完成文档新建。0量近使用项 已保存 照片 打印图短和播图web移动设谷胶片和视频X让

23、我们开始尝试新事物吧。从亳自己的文档设公或一系列文档预设开始以快速开始工作.餐近使用的套目（21）531x90像素072第因自定32x32像看72.0白走240x72 像拿。72 ppi未标题上S3? 750像去vs方向 m板88E E 72像5R/英寸v婕财 RGB颜色V 8位 7H品内容 目mV高汲选15P在Mobesiock上查找模板（旭往）（关闭）（2 ）选择视图 新建参考线版面命令，弹出新建参考线版面对话框,设置如下图。单击确定按钮，完成参考线的创立，效果如下图。（3 ）选择横排文字工具T,，在适当的位置输入需要的文字并选取文字，选择窗口 字符命令，弹出面板，将颜色设为深灰色（52、

24、52、52 ）,其他选项的设置如下图，按Enter 键确定操作，效果如下图，在图层控制面板中生成新的文字图层。 X方 4 O 1范“V/A-IT方 4 O 1范“V/A-ITTt 100% 颜fe： |驾。点aa平滑 理英语粗体y盘（自动）v K3 o I v推荐（4 ）选择“矩形”工具口，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为黄色（241、168、72 ）,描边颜色设为无。在图像窗口中适当的位置绘制矩形，在“图层”控制面 板中生成新的形状图层“矩形选择窗口属性命令，弹出属性面板，在面板中进行 设置，如下图。禹性三口 期那状属性(5 )在图层控制面板中选中推荐文字图层

25、，将其拖曳到矩形1图层的上方，如图Q理 V 回0 T 口四Q理 V 回0 T 口四 背景合河口 0, 口 Q电所示，效果如下图。推荐(6 )选择横排文字工具/一在适当的位置分别输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为浅灰色(80、80、80 ),其他选项的设置如下图，按Enter键确定操作，效果如下图，在图层控制面板中分别生成新的文字图层。苹方 X小日为启了产理英语 -|aa平滑推荐 北京周边 上海 巴厘岛 天津 三亚(7)分别单击哈尔滨、云南和三亚文字图层左侧的眼睛图标0 ,隐藏图层。选中天津文字图层，单击图层控制面板下方的添加图层蒙版按钮口，为图层添加图层蒙版, 如下图。

26、将前景色设为黑色。选择画笔工具,在属性栏中单击画笔预设选项右侧的 按钮L在弹出的面板中选择需要的画笔形状和大小，如下图，在图像窗口中进行涂抹，擦除不 需要的局部，效果如下图。(二)课程内容控件的初始控件作为UI设计中最基本的交互单位，具有便于操作、便于控制的特点。下面分别从控件的 概念及控件的获取这两个方面进行控件的基础讲解。3.1.1 控件的概念控件是App界面中最基本的交互单位,具有可操作、控件是App界面中最基本的交互单位,具有可操作、可控制的特性，如下图。按钮按钮按钮工程一工程一O 工程二工程二标签一标签一标签二标签三标签标签一 标签二标签三标签四标签五标签文本世皇件网络不给力，请检查

27、网络设置.反惯售札QQ App也知嘉为你更新了一组内容新会员注册领1288大礼包。即领取件JM App此田提示控件3.1.2 控件的获取控件可以从iOS以及Material Design官方网站进行获取。UI设计师通常会在官方控件的基础之上再进行设计。3. 2按钮控件的设计按钮控件作为ui设计中的常用控件之一，具有易于发现、状态明确的特点。下面分别从概念、 类型以及规那么这三个方面进行按钮控件的讲解。3. 2.1按钮控件的概念按钮控件(Button Controls )即适用于App的特定操作，由文字或图标组成，如下图。匡层T云南T 30E天津T巴厘岛t .beT才原周边推荐北京周边上海巴厘岛

28、天津(8 )选择椭圆工具Q ,在属性栏中将填充颜色设为深灰色(52、52、52 ), 描边 颜色设为无。按住Shift键的同时，在图像窗口中适当的位置绘制圆形，在图层控制面板中生成新的形状图层椭圆1。在属性面板中进行设置，如下图，效果如下图。推荐 北京周边 上海 巴厘岛 天滓 (9)选择圆角矩形工具。一在属性栏中将半径选项设置为2像素。按住Alt键的同时，在图像窗口中适当的位置绘制圆角矩形，在属性面板中进行设置，如下图，效果如图所(10 )使用相同的方法，在图像窗口中适当的位置再次绘制一个圆角矩形，在属性面板中进行设置，如下图，效果如下图。在图层控制面板中，按住Shift键的同时，单击矩形1图

29、层，将需要的图层同时选取。按Ctrl+G组合键，群组图层并将其命名为分段控件，如图所示。旅游类App分段控件制作完成。 2像素寓性口 那才形状属性GO2像素3. 6页面控件的设计页面控件作为ui设计中的常用控件之一，具有小巧便利、状态明确的特点。下面分别从概念、 类型以及规那么这三个方面进行按钮控件的讲解。3. 6.1页面控件的概念页面控件(Page Controls )显示当前页面在平面页面列表中的位置。它以一系列小指示点的形式出现，表示可用页面的翻开顺序，其中实心点表示当前页面，如下图。页面控件3. 6.2页面控件的类型筹划筹划L圆形0J产邮司今国营W中给少年的你QQ音乐App轮播图2.矩

30、形齐零基础八门Pytfiim人工智能齐零基础八门Pytfiim人工智能前500名报名送福利礼包I立即报名网易云课堂App轮播图网易专家讲师毕湮授课 全网10W+学员推荐43. 6.3页面控件的规那么1 .页面控件的尺寸圆形：8ptx 10pts 12pt矩形：14ptx2ptx 16ptx2ptx 20ptx3pt如下图。3Pl xW2Qpt页面控件尺寸示意图2 .页面控件的状态选中时：透明度为1。未选中时：透明度为40%60选中时：透阻度为100%未选中时：透明度为40%60%如下图。选中时：透明度为100%未选中时：透明度为40%60%页面控件状态示意图3. 6. 4课堂案例制作旅游类Ap

31、p页面控件【案例设计要求】1 .运用软件Photoshop制作页面控件,设计效果、环境效果如下图。2 .控件尺寸：32px （宽）x2px （高X3 .符合控件的设计规那么。【案例学习目标】学习使用软件Photosh叩制作页面控件。环境效果图【案例知识要点】使用直线工具绘制形状。（1 ）按Ctrl+N组合键,弹出新建文档对话框，将宽度设为240像素，高度设为72像素, 分辨率设为72像素/英寸，背景内容设为橘黄色（ 255、151、1）,如下图。单击“创立按钮, 完成文档新建，如下图。（2 ）选择“直线”工具在属性栏的选择工具模式选项中选择形状，将填充颜色设为无描边”颜色设为白色，“粗细”选项

32、设为2像素，按住Shift键的同时，在适当的位置绘制一条直线，在“图层”控制面板中生成新的形状图层“形状r如下图。(3 )在属性栏中将“粗细”选项设为1像素，按住Shift键的同时，在适当的位置再次绘制一条直线，在“图层”控制面板中生成新的形状图层“形状2、如下图。(4 )在“图层”控制面板中将其不透明度”选项设为50% ,如下图，效果如下图。(5 )将“形状2”图层拖曳到图层控制面板下方的创立新图层按钮Q上进行复制，生成 新的形状图层形状2拷贝、选择移动工具一按住Shift键的同时，将复制的形状水平向 右拖曳到适当的位置，如下图。旅游类App页面控件制作完成。(6 )在图层控制面板中，按住S

33、hift键的同时，单击形状1图层，将需要的图层同时 选取。按Ctrl+G组合键，群组图层并将其命名为页面控件，如下图。旅游类App页面控件 制作完成。麦层Q 地 ” 国。T 口 A 箍v襁明度：100% V豌：E3 /。色 0 就：100% J 页面控件 o匚二I背曷岛OO /X o Q. 3.7反应控件的设计反应控件作为ui设计中的常用控件之一，具有传达信息、吸引用户的特点。下面分别从概念、 类型以及规那么这三个方面进行按钮控件的讲解。3. 7.1反应控件的概念反应控件即产品与用户交互的视觉和行为接触点，如下图。14：42网曷产iSApp称谷匕S0 Aop日 分类B 值同买的物车S令GB因*

34、60万句,力政处分不废靖网不络力14：45手机海室为什么思在当代不餐了O途牛全直营门店龙现住总万科店VIPMO来霎峭不总公司 共遇遇的人，新会员注册领1288K礼包立即领取 一改历史：商业JK15：27度索?QQ App4.底部提示栏(1)底部提示栏的尺寸宽度：建议在344pto高度：单行建议在48pt,双行建议在68pto(2 )底部提示栏的间距针对按钮建议8pt ,针对文字16pto如下图。344pt带有按钮的单行文本底部提示栏。按钮68pti=6ptH16ptH8pt=r=6pt带有按钮的双行文本底部提示栏按钮底部提示栏尺寸示意图3. 7. 4课堂案例制作旅游类App反应控件【案例设计要

35、求】1 .运用软件Photoshop制作反应控件，设计效果、环境效果如下图。2 .控件尺寸：32px （宽）x2px （高3 .符合控件的设计规那么。【案例学习目标】学习使用软件Photoshop制作反应控件。设计效果图环境效果图【案例知识要点】使用椭圆工具绘制形状，使用横排文字工具输入文字。（1 ）按Ctrl+N组合键，弹出新建文档对话框，将宽度设为32像素，高度设为32像素,分辨率设为72像素/英寸，背景内容设为白色，如下图。单击创立按钮，完成文档新建。(2 )选择椭圆工具。一在属性栏的选择工具模式选项中选择形状，将填充颜色设为红色( 240、60、27), 描边颜色设为无。按住Shift

36、键的同时，在图像窗口中适当的位 置绘制圆形，在图层控制面板中生成新的形状图层椭圆选择窗口 属性命令，弹出属性面板，在面板中进行设置，如下图，效果如下图。(3 )选择横排文字”工具在适当的位置输入需要的文字并选取文字，选择窗口 字 符命令，弹出面板，将颜色设为白色，其他选项的设置如下图，按Enter键确定操作,效 果如下图，在图层控制面板中生成新的文字图层。 X字符三(4 )在图层控制面板中，按住Shift键的同时，单击椭圆1图层，将需要的图层同时选取。按Ctrl+G组合键,群组图层并将其命名为反应控件，如下图。旅游类App反应控件 制作完成。“X匡层三Q 理 v S Q T n S） 穿透不透明度：100% v豌：E3 / 中 Q:。填充：100% ; o 皮镶控件 背景合A，口 0, 口 Q 电3. 8文本框控件的设计文本框控件作为ui设计中的常用控件之一，具有易于发现、操作高效的特点。下面分别从概 念、类型以及规那么这三个方面进行按钮控件的讲解。3. 8.1文本框控件的概念文本框（Text Fields ）允许用户输入和编辑文本，当用户点击它时会自动调出键盘。使用文本 框来可获得少量信