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

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

1、教案编号：6 课 题：第6章UI设计输出 课 时：8课时 授课类型：讲授+实训工程目标： 掌握App页面标注 掌握App页面切图 掌握App页面命名工程重点： App页面标注 App页面切图 App页面命名工程难点：App页面标注、切图、命名规那么工程技能点：App页面标注、切图、命名工程教学技巧：1 .知识讲解.案例实训(3 )放大视图，选择区域标注工具,在需要标注的图标上绘制标注区域，如下图。使用相同的方法标注其他图标，如下图。M Jy未注册游儿账号的手机号，登录时将自动注册，是 否同意和X登录后更加精彩3.文字标注(1 )选中需要标注的文字，如下图。在属性栏中进行设置，如下图。单击智能标

2、注工下拉列表中的生成文本样式标注工具下拉列表中的生成文本样式标注工具,标注文字，如下图。使用相同的方法标注其他文字，如下图。登录后更加精彩.旅游，用眼睛享受风景，感受每座城的风情xjg*163 密码未注册游儿账号的手机号，登录时将自动注册，是 否同意登录验证码登录I国际手机号登录忘记密码？登录后更加精彩.#Hex(RGB,A) 自就RGBA | Hex) #Hex(ARGB) #Hex(RGB,A) / RGB.A ARGB4.按钮标注(1 )单击颜色标注工具目，将鼠标指针放置在按钮中需要标注颜色的位置，如下图, 单击鼠标，标注按钮颜色。(2 )单击距离标注工具目，在需要测量的位置单击鼠标，如

3、下图，拖曳鼠标指针到需要测量的位置，如下图，单击鼠标，生成按钮高度的距离标注。使用相同的方法，标注按钮宽度的距离，如下图。5 .间距标注(1 )单击距离标注工具,在需要测量的位置单击鼠标，如下图，拖曳鼠标指针到需 要测量的位置，如下图，单击鼠标，生成图标到文字之间的距离标注。登录后更加精彩I登录后更加精彩(2 )使用相同的方法，标注其他距离，效果如下图。旅游类App登录页标注完成。x登录后更加精彩.旅游,用眼枝享受风景，感受每座城的风情xjg*163 一未注册游号的手机号登录时将自动潮是 皿.和验证码登录I国际手批号登景忘记密码？6. 2 UI页面切图UI页面命名作为UI设计输出中的重要环节，

4、具有减小容量、适配页面的作用。下面分别从切图目的、切图类型、切图规那么、切图方法以及大小优化这五个方面进行UI页面命名的讲解。6. 2.1切图目的 减小文件包容量，增加运行效率。 适应多种屏幕分辨率。 提高组件复用性。 组件和尺寸规范标准统一化。6. 2. 2切图类型.图标类型应用图标应用图标切图只需要提供直角的图标切图，系统会自动生成圆角效果，如下图。微信裁剪图标 微信上线图标功能图标功能图标切图需要适配不同的屏幕从而提供不同尺寸的切图，如下图。二M2x3x适用于2x的48px X 48px功能图标到3x应放大1.5倍为72pxX72px1 .图片类型图片类型切图是指启动页、新手引导页、默认

5、提示、Banner等需要完整切图的图片。全屏切图全屏切图适用于背景丰富的引导页、闪屏页及活动页，如下图。十亿红包不止五折vivo0元抢!立即抢购。双12提前11115日开坦）中国移动 4G 1249。28%庆大放价燥理要“双11”、国庆、“双12”的闪屏页局部切图局部切图适用于背景为纯色的引导页、闪屏页及空页面等，如下图。1号店、闲鱼、蚂蚁财富的闪屏页2 .动效元素动效元素切图是指在App中加载动效所需要的切图元素，如下图。发现 推荐 日报QMONDAY. MAY 13开眼App.弹性控件弹性控件是指按钮、输入框等切图过程中可以对其进行瘦身压缩的元素，如下图。立即登录立即登录正常状态切图左右拉

6、伸开发还原效果横向拉伸切图立即登录立即登录正常状态切图上下拉伸开发还原效果竖向拉伸切图弹性控件的压缩切图示意图6. 2. 3切图规那么L图标输出多个平台尺寸在开发中由于各机型的屏幕分辨率不同，需要针对不同机型进行适配。因此图标在切图的时候需要输出2x和3x的切图。例如一个图标切图2x尺寸是48px ,那么3x尺寸是72px ,如图所示。72px HT 0学习计划知识城邦已购2x得到App图标切图43Px发现学习计划发现学习计划呼知识城邦3x得到App图标切图72Px图标输出多个平台尺寸示意图我时区已购我的2 .切图资源尺寸须为偶数单数切图会导致切图元素边缘模糊，造成开发出来的APP界面效果与原

7、设计效果差距甚远 如下图。44*44PX43*43PX双数像素切图的高清效果单数像素切图会出现模糊单数和偶数切图示意图3 .点击区域不能小于44ptiOS规定点击区域为44pt ,在2x中就是88px0.按钮需要输出相关状态在切图过程中，针对按钮不仅要输出默认状态的切图，更要输出按钮的其他状态，比方点击状态以及禁用状态状态，如下图。点击状毒按钮状态6. 2.4切图方法方案一:软件自带切图（PS、AI、Sketch ）方案二：使用切图工具（蓝湖、draw9patch.bat ）方案三：使用插件工具（cuttermanx Sketch Measure ）2. 5大小优化L点九切图/平铺切图弹性控件

8、通过压缩，可以极大地见效图片的大小提升用户在使用App中的加载速度。在iOS 中这种切图方式叫做平铺切图，在Android中这种切图方式叫做点九切图法，如下图。立即购买切图优化制作点九的软件是Draw9patch ,该软件不仅可以制作点九图还可以预览切图后的开发，如下图。设计师也可以在PS中用铅笔工具绘制点就图。Draw9patch2. TinyPNG运用TinyPng的智能png和jpg在线压缩工具，将较大的图片切图可以在不影响图片质量的 情况下压缩，如下图。2. 6课堂案例制作旅游类App登录页切【案例设计要求】1 .在Photoshop中安装插件Cutterman ,运用Cutterma

9、n为旅游类App登录页切图，效果如图 麻。2 .符合切图规那么。【案例学习目标】学习安装插件Cutterman的方法，并进行切图。登录（禁月状态）2x.png登录（禁用状态）3xpng登录（正常状 态）2xpng登录（正常状态）3x.png返回 2x.png返回 3x.png麦533x.png微诲 2x.png徵信 2x.png徵信 3x.png未 t防 2x.png未埴充3x.png显示 2x.png显示 3x.png已埴充2x.png除藏 2x.png；3x.png效果图【案例知识要点】学习下载并使用Cutterman插件。（1 ）使用浏览器翻开Cutterman官网的下载页面，单击页面中

10、的下载按钮，如下图。在弹出的对话框中设置下载路径，如下图，单击下载按钮，下载插件并解压压缩包，效果如图的。Cutterman_paneL3.6.0_20193251738.exe（2 ）双击应用程序，弹出对话框，如下图，在对话框中单击安装按钮，即可安装插件,如图所小。.Cutterman Installer 安装安装鼻成安装程序已成功地运行芫成。已完成Extract： CuttrnanStorinnr htol 31 byt” -504 byts)Extract： CuttrnAnStorczsftpp css (2.12 kB - 17.49 kB)Extract： CuttrnanStor

11、c55 list. scz:Extract： CuttrnftnStorczsp.scss (1.87 kB - 8.62 kB)41Extract： CutternanVStorcon_drk. png (415 byts - 5.Extract： CutternanVStorcViaagesVpanel-iconJight. png (413 bytesExtract： Cut tern anSt or ejsS tore, js (6.62 kB - 8. 86 kB)Extract： CutternanStorejsxird t. jsx (300 bytes - 720 bytes)

12、 删除文件：C： U3ersAdnxxustratorAppDataRoarringAdobeCEPcxten3io. 已完成w v3 04k上一步)取消C)(3 )启动Potoshop软件，按Ctrl+O组合键,翻开翻开云盘中的ChO5 制作旅游类App 制作旅游类App登录页 效果562-制作旅游类App登录页文件，如下图。睡录后更加精彩k讷.用w*享受艮泉,忌受每席时风情W9*-* 163 (4 )选择窗口 扩展功能 Cutterman-切图神器命令，弹出属性面板，在面板中设置输出文件的路径为ChO6制作旅游类App注册登录页切图，其他选项的设置如下图。域出制作旅游类App(5 )在图层

13、控制面板中展开导航栏图层组，选中返回图层，按住Shift键的同时,单击关闭图层，同时选取，如下图。在Cutterman-切图神器控制面板中，设置固定尺寸选项为48像素x48像素,如下图。单击导出选中图层按钮，输出切图文件，效果如图工程过程:（-）课前准备.授课前准备准备好教学用具和教学设备.板书课题：第6章UI设计输出工程目标： 掌握App页面标注掌握App页面切图 掌握App页面命名.课程引入通过课堂案例效果展示App页面的标注、切图、命名gir_ g103.C j ztogi-Jcw.choi .wkcWdSL P*Otogifvco5*oit .“Ucted 址Kk*gjc8.4中 ay

14、.tMauWXKdeQUtS.ff.3.3.卬廿8ad e4)C2pn)JC8.3 WCO.ddEbo.dHatO 3KLi 09*8.wh 人6，T2凯pM8.o$e49IogC8.r*K命名Q理Web合并导B选中的圉层口 B ns n0Android1X PDF固定尺寸48 X 48 遮罩Q a h 8城出制作旅游类App. 今 返回 2x.png返回 3x.png关闭 2cpng关闭 3x.png(6 )展开密码图层组，单击显示图层左侧的空白图标，显示图层，按住Shi仕键的 同时，选中需要的图层，如下图。展开选择控件图层组，单击未填充图层组左侧的空白 图标，显示图层组，按住Shift键的

15、同时，选中需要的图层，如下图。分别单击导出选中图 层按钮，输出切图文件，效果如下图。虎层E Q T (5不透明度：100%4* 口：。填充：100%B QBB 0. a国0 T 口分穿透-不透明度：100% V100% 返回 2x.png返回 3x.png关闭 2cpng关闭 3x.png未填充 2x.png未填充 3xpng显示 2x.png显示 3x.png已埴充2x.png已埴充3x.png 窿藏2x.png 隐藏3x.png(7 )在Cutterman-切图神器控制面板中，取消设置固定尺寸选项，如下图。展开登 录按钮图层组，单击登录(正常状态丫图层左侧的空白图标，显示图层组，按住Shi

16、ft键的 同时，选中需要的图层组，如下图。展开其他登录方式图层组，按住Shift键的同时，选中 需要的图层，如下图，分别单击导出选中图层按钮，输出切图文件，效果如下图。旅游类App登录页切图制作完成。Cutterman -切耍祥器室X Cutterman O导出选中匿层a且Android .Web 3X21XPDF会并导出选中的图里固定尺寸| S X 高遮罩输出制作旅游类App.层层三Q 理 v S Q T 5） 穿透-不透明度：100% v豌：E3 / ts ft 填充：100% y -B登录按钮 O登录（正常状态）O登录（禁用状态） T 未注册游私保护O 邮控件go h 口 0, 口 Q

17、电Q理 V 回0 T 口四 正常，襁明度：100% 豌：E3 /中Q：。填充： O O T其他登录方式 GO 卜 口 0, 口 Q 电其他登录方式微电QQ100% 登录（禁用状登录（禁用状登录（正常状登录（正常状返回2x.png态）2x.png 态）3xpng 态）2xpng 态）3x.png 登录（禁用状登录（禁用状登录（正常状登录（正常状返回2x.png态）2x.png 态）3xpng 态）2xpng 态）3x.png返回 3x.png关闭 2x.png关闭 3x.png；徵信2x.png微信3x.png未埴充2x.png未埴充3x.png显示2x.png微诲 2x.png3 UI页面命名

18、ui页面命名作为ui设计输出中的重要环节，具有便于整理、加强效率的作用。下面分别从命名原因、命名规那么以及常用名称这三个方面进行ui页面命名的讲解。6. 3.1命名原因自身层面：方便整理、便于修改、表达专业团队层面：助于任务交接开发层面：极大节省程序开发的时间本钱3. 2命名规那么 使用小写英文字母，不建议中文 符号使用下划线/ 遵守格式：组件.类别一名称状态倍数6. 3.3常用名称常用名称如下图。页面控件类别常见状态登陆页：login状态条：status图片：image默认：default登陆：sign in导航栏：nav滚动条：scroll按下：press注册：sign up标tab/ta

19、bbar进度条：progre点击：highlight主页：home搜索栏：searchbar图标：icon禁用：disabled发现：find工具栏：toolbar标签：tab选中：selected探索：explore按钮:btn标i己：sign搜索结果：search results编辑菜单；edit menus编辐椎：edit活动：activity活动：activity标签：lab管理：management管理：management分段选项卡：segmented controls信息：messages提醒视图：alert view新闻：news弹窗：popup音乐：music扫描：scann

20、ing笔记：notes选择器：picker设置：settings页面指示器：page controls个人中心：personal center进度指示器：progress Indicator常用名称6. 3.4课堂案例命名旅游类App登录页切图1 .对旅游类App注册登录页的切图进行命名，效果如下图。2 .符合UI命名规那么。【案例设计要求】选择一个切图进行命名，效果如下图。常用名称7. 3.4课堂案例命名旅游类App登录页切图3 .对旅游类App注册登录页的切图进行命名，效果如下图。4 .符合UI命名规那么。【案例设计要求】选择一个切图进行命名，效果如下图。【案例学习目标】学习针对切图效果进

21、行命名。login.btn.signin_default2x.plogin.btn.signin.default3x.plogin.btn.signin_disabled2x.login.btn.signin_disabled3x.loginjcon.choic e_default2x.ploginjcon.choic e_default3x.plogin jcon.choic e_selected2x.Ioginjcon-choic e_sdected3x.loginjcon.displ ay.default3x.loginjcon.display_default2x.pnglogin jc

22、on.hide. login jcon.sina weibo_default 2x.pngloginjcon_qq_d efauk3x.pngloginjcon.qq.d efault 2x.pngloginjcon.sina %veibo_default 3Kspngloginjcon.wech at_default3x.p ngnavjcon.closed _default3x.pn gnavjcon-closed _default2x.pn glogin jcon.wech at_default2x.p ngloginjcon.hide. default2x.pngnav.konretu

23、rn .9navjcon.retum.default 3x.png效果图【案例知识要点】按照UI页面命名规范对切图效果进行命名。(1 )UI页面命名应遵守格式为：组件一类别.名称.状态倍数。下面以图标返回的二倍状 态为例。(2 )其组件为导航栏，即nav ;类别为图标，即icon ;名称为返回，即return ;状态为默认， 即default ;倍数为2 ,即2x。因此,图标命名为nav_icon_retum_default2x ,效果如下图。使 用相同的方法命名其他图标，效果如下图。nav_icon_r eturn9图6图6-6.4 课堂练习一标注电商类App注册登录页并切图命名【案例设计要

24、求】1 .运用PxCook为电商类App注册登录页标注进行标注，如下图。2 .在Photoshop中安装插件Cutterman ,为电商类App注册登录页进行切图。3 .为电商类App注册登录页切图进行命名。【案例学习目标】学习针对页面效果进行标注、切图和命名。9:41点击注困欢迎登录.蚁您的账号以继续01 01 登录（禁用状 志）2x.png登录（正秘 态）2x.png登录（正常状 态）3x.png登录（禁用状态）3x.pngA(si O I png微信 2x png显示 2x.png0 x M 区区显示3x.png%2x.png超i藏3)cpng用户名2x.png 用户名3xpnglogi

25、n_btn_open. selectcd2x.pn9login_btn_open. selectcd2x.pn9login-btn-open. $clected3x.pn glogin-btn-sign in.defauh2x.plogin-btn-sign in.default3x.pIogin_btn_do5。d.default2x.pnglogin-btn-closed.dcfault3x.png.pngloginbtnsignin-di$abled2x.pnglogin.btn.dgnin.disabled3x.pnglogin-kon-display_default2x.pnglog

26、in Jcon,display.defaultP3x.pngwloginjcon.hide. wlogin Jcon.hide. default 3x.pngaloginjconjock.default2xpnglogin.iconjock. default3xpngloginjcon.qq.dlogin Jcon.qq-default3xpngloginjcon.sinaweibo.default2x-pngloginjcon.sinaweibo.default3xpng2loginjcon.username.default2xpng区login-kon.username.default3x

27、.pnglogin Jconwech loginjcon_wech at.defdukO2x.p at.defult3x.p 矽ngXnavjcon.closed.defduhO2x.pn9Xnavjcon-dosed.default 3x.png效果图【案例知识要点】使用PxCook软件标注页面，使用Cutterman进行切图，按照UI页面命名规 范对切图效果进行命名。6.5 课后习题标注餐饮类App登录页并切图命名【案例设计要求】1 .运用PxCook为餐饮类App注册登录页标注进行标注，如下图。2 .在Photoshop中安装插件Cutterman ,为餐饮类App登录页进行切图。3 .

28、为餐饮类App登录页切图进行命名。【案例学习目标】学习针对页面效果进行标注、切图和命名。欢迎登录.微信 2x.pngQQ3x.png炎信 3x.pnglogin.btn.otber login methods _defult2x.pXnvjcon.doscd _defuW2x.p本西号码一键登录-188*8888座用其他手机号暂录厢按按J$ffl22x.pnglogin_btn_other login.bignlogin methods in.dehultO2x.p in_default3x.p.default 3x.pnngngXnavjcon_clo$ed .default 3x.pnX关

29、闭 2x.pngIo9injcon-qq.d login jcon.qq.d lo9injcon,sinaeUugTx.png efault 3x.png weibo.defauW2工pngX关闭 3x.pnglogin jcon.sin4vveibo.default3xpngStffi2x.pnglo9injcon.wech at.default2x.plogin Jcon.vvechat_default3x.pn9S1S3x.png效果图【案例知识要点】使用PxCook软件标注页面，使用Cutterman进行切图，按照UI页面命名规范对切图效果进行命名。(-)课程内容UI页面标注ui页面标

30、注作为ui设计输出中的重要环节，具有还原设计、协助开发的作用。下面分别从标注原因、标注内容、标注规那么以及标注神器这四个方面进行UI页面标注的讲解。6-1.1标注原因标注可以更好的让开发还原设计。标注内容标注内容通常为文字、按钮、图标、图片6间距以及分割线，如下图。天天修红包X 松 Iffl!QO文字按钮裳88元现金jr,! O 鬲裳88元现金jr,! O 鬲专享福利王牌理财热销榜天天像红包 ”a MS图标小米金融App有圆角的地方，需要标注出圆角半径控件需要标注出所有状态如禁用、点击等有圆角的地方，需要标注出圆角半径控件需要标注出所有状态如禁用、点击等常用的图片尺寸比例(1：1、4：3、16

31、：9)由于适配，控件不要给出固定的尺寸大小标注内容示意图1.文字的标注文字通常标注字体、字号、字重、颜色以及透明度，如下图。PingFangSC-Bold/20pt/#333B4C标题I用于区分模块、内容标副超人气理财人行存款,1/2行存款众惠存14天PingFangSC-Medium/16pt/#333B4C正文I用于正文、标注文字年化收益率5.3 5%年化收益率14天返息100元起购A去抢购PingFangSC-Regular/12px/#8B8F99注释I用于标签、次要说明文字短期精选，双周返息，兼俪灵活和收益PingFangSC-Regular/10px/#D78434 注BI用于标釜

32、、次要说明文字Akrobat-Bold/28pt/#FF4040强调I用于价格、资产.洗幅文字标注（字体、字重、字号、颜色、不透明度）字体的字号都必须为偶数（可以被2整除）文字标注（字体、字重、字号、颜色、不透明度）字体的字号都必须为偶数（可以被2整除）文字标注示意图文字标注示意图2.图标的标注2.图标的标注图标标注的尺寸，应包含空白点击像素，即实际切图尺寸，如下图。基本属性领50万72px72px切图尺寸：36pt x 36Pt （包含空白像素）切图间距：38pt银行存款银行存款小米互助免费领0送红包体验有礼,QPX每日签到 在56px90Px更多切图尺寸：28pt x 28Pt （包含空白

33、像索）切图间距：45pt图标标注示意图3,按钮的标注按钮中重复出现的元素，只需标注其中之一，如下图。图标标注示意图3,按钮的标注按钮中重复出现的元素，只需标注其中之一，如下图。禁用56pt色 tcccccc, 100%禁用状态16pt正常I： UFFFFFF. 100% :Angular :20ptI 色 肝74747. 100%登录边距：左右边距16Pt圆角：28pt高度：56pt颜色：CCCCCC, 100%字体：肝FFFFF, PingFangSC-Regular, 20pt字体基于按钮水平、垂直居中,无需标注位置僖息正常状态颜色：MF74747. 100%点击点击Ml 色 fO33L4

34、1. 100、登录登录点击状态颜色：WD33E41, 100%按钮标注示意图按钮标注示意图4 .间距的标注间距通常以8倍数和4倍数为基准进行设计，如下图。稳健保险安增益31天!相同板块不同内容建议8pt3-430%31 天近七日年化收益率10。起购银行存款多利5年4.80%5 年满期年化收益率100元起购I达州银行间距标注示意图5.投影的标注投影的标注通常为颜色、透明度、位置以及效果，如下图。爆款保险全新升级-米医保百万医疗险2020版享600万住院医疗保障全新升级-米医保百万医疗险2020版享600万住院医疗保障 颜色透明度标注：（201, 210, 211, 0.4）rbga标注具体格式：

35、r,g,b,a R：红色，G:绿色，B:蓝色，A:透明度首月限时1元 28天-65周岁高龄均可投 100种重疾0免赔 7x24小时 医生服务投影位置标注：x=0px, y=-2px 投影模糊及扩散标注： 模糊=20px,扩散-4pxX为坐标左右偏移，y为坐标上下偏移投影标注示意图标注规那么.属性尺寸、颜色、透明度等,位置相对位置（元素之间）绝对位置（页面）.1.4标注神器1. PxCook夕设计 开发H Cl px pt设计图：2x 自动颜色模式 ,单位 ”描边 取整 *例如工程主页Crocfrd Doors Explore2. Sketch Fxpkom专演页面Measure区域间隔Croo

36、ked DoorsRoyal ThunderPlaylist1 Time MachineRoyal Thunder2 Forget You Royal Thunder备注颜色命名切换隐藏标注设置彩a1口回/ 。出尺寸尺寸属性设置切图规范导出切换锁定标注3.蓝湖为什么使用薇湖为什么使用薇湖资讯收费价格登录注册高效的产品设计协作平台无缝衔接产品，设计、研发流程，降低沟通本钱,缩短开发周期，提高工作效率开始使用QI大小KhloeKardashianMedHimPinoFtrSCHdp中齐课堂案例标注旅游类App登录页【案例设计要求】1 .运用PxCook标注旅游类App登录页，效果如下图。2 .符合页面标注规那么。【案例学习目标】学习使用软件PxCook标注旅游类App登录页。 | （(3 )弹出对话框，如下图，在对话框中单击安装按钮，安装应用程序。安装完成后，如下图，单击完成按钮。2 .图标标注(1 )启动Pxcook软件,如下图。选择工程 新建工程命令，弹出创立工程对话 框，设置如下图，单击创立本地工程按钮，新建工程。(2 )选择云盘中的ChO5 制作旅游类App制作旅游类App登录页 效果,562-制作 旅游类App登录页文件，将其拖曳到Pxcook工程图像窗口中，如下图，效果如下图。双击 画板，效果如下图。