《PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第3章.docx》由会员分享，可在线阅读，更多相关《PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第3章.docx（100页珍藏版）》请在课桌文档上搜索。
1、教案编号：3课题：第3章APP界面设计课时：16课时授课类型：讲授+实训教学目标： 了解APP的基础知识 掌握APP的设计规范 认识APP常用界面类型教学重点：APP的设计规范、APP常用界面的设计方法教学难点：App常用界面的设计方法本章技能点：社交类APP-闪屏页的绘制方法、社交类APP-欢迎页的绘制方法、社交类APP-首页的绘制方法、社交类APP-消息列表页的绘制方法、社交类APP-聊天页的绘制方法、社交类App-个人中心页的绘制方法本章教学技巧：1 .知识讲解2 .案例实训教学过程：（一）课前准备1 .授课前准备准备好教学用具和教学设备2 .板书课题：第3章APP界面设计项目目标： 了
2、解APP的基础知识 掌握App的设计规范 认识APP常用界面类型3 .课程引入通过“制作侃侃App”案例效果展示引入APP界面设计的概念（二）课程内容3.1 APP基础知识本节介绍App相关的基础知识，包括App的概念、App的流程以及App设计的原则。3.1.1 APP的概念App是应用程序Application的缩写,一般指智能手机的第三方应用程序，如图所示。用户主要从应用商店下载App,比较常用的应用商店有苹果的APPStore、华为应用市场等。应用程序的运行与系统密不可分，目前市场上，主要的智能手机操作系统有苹果公司的iOS和谷歌公司的Android系统。对于UI设计师而言，要进行移动
3、界面设计工作，需要分别学习两大系统的界面设计知识。由RonDesignAgency创作的App界面3.1.2 .App设计的流程APP设计可以按照分析调研、交互设计、交互自查、界面设计、界面测试、设计验证的步骤来进行，如图所示。分析调研El交互设计El交互自食El界面设计El界面溯试El设计验证APP设计的流程图1 .分析调研App的设计是根据品牌的调性、产品的定位而进行的，不同应用领域的App,设计风格也会有区别。因此，我们在设计之前应该先分析需求，了解用户特征，再进行相关竞品的调研，明确设计方向，如图所示。(Wi: m必书东*nWM .0安IMi文AeG) 88M WS KLx QQ音乐（
4、左）、网易云音乐（中）、虾米音乐（右），三款虽然同是音乐App,但产品定位不同，因此设计风格也有所区别2 .交互设计交互设计是对整个App设计进行初步构思和流程制定的环节。一般需要进行纸面原型设计、架构设计、流程图设计、线框图设计等具体工作，如图所示。MoM9w*vuVWrvam乌克兰UI/UX设计师TatianaLazarenko创作的App交互设计3 .交互自查交互设计完成之后，进行交互自查是整个APP设计流程非常重要的一个阶段。可以在执行界面设计之前检查出是否有遗漏缺失的细节问题，如下所示。3EWtB三a届次角度自宣点B值加附的的值加解值从策杓是否白曷理解信息层级是否清晰AU分类是否合理
5、信息税货流是否流畅用尸体!M8*ft返回和出口是否符合用户Hl期O逆向防的Ift计是否与撕金跳转名称与目的是否一致是否充分.Jt了骨作的再钳性界面呈现控件呈现控件是否符合用户i知50具有T使控件交互行为是否具有一致性数据呈现控件冷不可用状酬:他呈现空态如何呈现字IMna制时超1C何处理无法完整显示的数据如何处理殴据过咖何提示用户畋据按什么现JM排序欧值是帝酸埼定的精式的显示畋娓是否存在极值文健现句式是否一致用词星否一致.准确文玄是否有输入与遗捧是否为用户提供了默认值O输入过狎是南I驻刖M是否存在不必要的箱入是否推定了侬雁盘引起的页面滚动交互过程与反馈是否周全地考虑了所有掾作成功的反愦是否周全培
6、学Jrr所E段IR的反惯攥作过程中是否允许取消特殊情形角色权限与状态不同造成会造成BJ些差异是否提供将次横式4.界面设计原型图审查通过之后，就可以进入界面的视觉设计阶段了，这个阶段的设计图就是产品最终呈现给用户的界面。界面设计要求设计规范，图片、文字内容真实，并运用墨刀、PrinCiPIe等软件制作成可交互的高保真原型，以便后续的界面测试，如图所示。AccountoverviewUMrcrr*oeO*1u*IO*xtvbAatcutuf*9MrPto乌克兰设计师StaSAriStov、AlyaPrigotskaxThanhDO联合创作的APP界面5 .界面测试越南设计师Tran Mau Tri
7、 Tam进行的APP细节调整界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、记录。在测试中可以对设计的细节进行相关的调整，如图所示。6 .设计验证设计验证是最后一个阶段，是为APP进行优化的重要支撑。在产品正式上线后，通过用户的数据反馈进行记录，验证前期的设计，并继续优化，如图所示。APP界面优化，由XTokenOX设计师创作，图片来源于追波网3.1.3APP设计的原则在进行App设计时，需要遵循iOS和Android系统的规范，因此可以根据iOS下的设计原则以及Android系统下MaterialDesign语言中的设计原则进行设计。1. iOS设计原则iO
8、S系统设计有清晰、遵从、深度三大原则。(1)清晰在整个系统中，文字在各种尺寸上都要清晰易读，图标精确而清晰，装饰精巧且恰当，令用户更易理解功能。利用负空间、颜色、字体、图形等界面元素巧妙地突出重要内容，并传达交互性，如图所示。以色列设计师VIadTyZUn创作的APP界面，各元素通过精心设计后，巧妙的突出重要内容(2)遵从流畅的动画和清晰美观的界面可以帮助用户理解内容并与之互动，同时不干扰到用户的使用。内容一般填满整个屏幕，而半透明和模糊效果通常暗示有更多内容。最I氐限度地使用边框、渐变和阴影可使界面轻盈，同时确保内容明显，如图所示。印度设计师AbhiSekDaS创作的APP界面。其中位于左侧
9、APP界面中橙色渐变银行卡旁边的卡采用了半透明效果，暗示用户可以进行滑动查看更多内容。两张APP界面的渐变、边框以及阴影都不是很明显，使界面非常轻盈(3)深度独特的视觉层级和真实的动画效果传达层次结构，赋予界面活力，并促进用户理解。令用户通过触摸和探索发现程序的功能，不仅会使用户提高乐趣,更力口方便用户了解功能,还能使用户关注到额外的内容。在浏览内容时,层级的过渡可提供深度感,如图所示。於篇乌克兰设计公司CadabraStUdiO创作的APP界面2. MaterialDesign设计原则MaterialDeSign语言有材质隐喻、大胆夸张、动效表意、灵活、跨平台五大原则。(1)材质隐喻Mate
10、riaIDesign的灵感来自物理世界及其纹理，包括它们如何反射光线和投射阴影。它对材料表面进行了重新构想，加入了纸张和墨水的特性，如图所示。材质隐喻(2)大胆夸张MaterialDeSign以印刷设计方法中的排版、网格、空间、比例、颜色和图像为指导，来创造视觉层次、视觉意义以及视觉焦点,使用户沉浸其中，如图所示。(3)动效表意通过微妙的反馈和平滑的过渡使动效保持连续性。当元素出现在屏幕上时，它们在环境中转换和重组，相互作用并产生新的变化，如图所示。(4)灵活MaterialDeSign系统旨在实现品牌表达。它与自定义代码库集成，允许无缝实现组件、插件和设计元素，如图所示。灵活(5)跨平台Ma
11、terialDesign使用包括Android、iOS、FIUlIer和Web的共享组件跨平台管理，如图所示。跨平台3.2APP设计的规范App设计的规范分为iOS设计规范和Android设计规范两部分。3. 2.1iOS设计规范iOS的基础设计规范包括单位及尺寸、界面结构、布局、字体4个方面。1. iOS设计单位及尺寸(1)相关单位PP1：像素密度(PixelsPerlnch,PPI)是屏幕分辨率单位，表示的是每英寸所拥有的像素数量，如图所示。像素密度越大，画面越细腻。因此，iPhone4与iPhone3GS屏幕尺寸虽然相同，但实际像素大了T音，清晰度自然变高。4802+320163=3.5
12、PPI的计算公式(X、Y分别为横向、纵向的像素数)Asset:比例因子。标准分辨率显示器具有1：1的像素密度，用1X表示，其中一个像素等于一个点。高分辨率显示器具有更高的像素密度，比例因子为2.0或3.0,分别用2X和3X表示,如图所示。因此，高分辨率显示器需要具有更多像素的图像。逻辑像素和物理像素：逻辑像素(LOgiCPoint),单位为点(points,pt),是根据内容尺寸计算的单位。iOS开发工程师和使用Sketch软件设计界面的UI设计师使用的单位都是pto物理像素(PhysicalPixel),单位像素(pixels,px),是按照像素格计算的单位，也就是移动设备的实际像素。使用P
13、hotoshop软件设计界面的UI设计师使用的单位都是pxo例如，iPhoneX/XS逻辑像素是375x812pt,由于视网膜屏像素密度的增加，即lpt=3px,因此iPhoneX/XS的物理像素是11252436px,如图所示。逻辑像素与物理像素的转换(2)设计尺寸iOS常见的设备尺寸，如图下所示。在进行界面设计时，为了一稿适配多种尺寸，都是以iPhone66s78为基准的。如果使用Photoshop就创建7501334px尺寸的画布，如果使用Sketch就建立375667pt尺寸的画布。iOS常见设备的尺寸设备宫行屏幕尺寸PPIAsset鱼屏点(point)置屏分辨室(px)IPboneX
14、SMAX6.5In4583X414x8961242x2688iPhoneXS5.8in4583X375x8121125x2436iPhoneXR6.1In3262X414x896828x1792iPhoneXS.8in4583x375x8121125x2436iPhone8+,7*r6s+r6+5.5in4013X414x7361242x220iPhone8f7,65.64.7in3262X375x667750x1334iPhoneSE.5r5S.5C4.0in3262x320x568640x1136iPhone4f4S3.5In3262x320480640x960IPhone1,3G.3GS
15、3.5in1631X320480320x480iPadPro12.912.9In2642X1024x13662048x2732iPadPro10.510.5in2642X834x11121668x2224iPadProriPadAir2.RetinaiPad9.7in2642X768x10241536x2048iPadMini4lIPadMini27.9in3262x768x10241S362O48iPad1,29.7in1321X768x1024768x10242X640 X 960PXIoS设计稀液尺寸2X2x3x640X1136750X13341125X2436IPhone4IPhone
16、5IPhone67IPhoneXiOS设计标准尺寸2. iOS界面结构iOS界面主要由状态栏、导航栏、标签栏组成，其结构如图和图所示。3PPl标签日UKMontXSMAi1242*2688PM45PP!MoneX1125hM36f45SfI88p176(tKM*6P.6SP.7P.8P1242220tP401W6OP三132pi4ePon6-6S-77S0l3Mp3丽I40RMPX98P-iPone5-SC-SS6401136Pi326W40PX88p丽Phone4-4S640960px32611,4OP-SSPXWP三_*ToucMfr-K.BZ一ftB=K320*480px16511I44
17、p三49P三320PXP6640PX9veapx9OpxPhon4 - iPhone4S10pxttCAS4px导 g1328(1920PXM 整栏 (M6pxPt0e6PUs 馀丽22(PX640px9tUXpx1136PXPnOneSS 50 SS1242 px状态受熹60PXC146pxFi85Fjs设i版9tte132PiOS手机端界面结构图图片来源于520设计网iftfi尺寸5三*状i5EfltOMt一3.4.$.6*A-Air?.一f22O48m1516px264Pn40PX88px98PPM11-21024x768px132PW20PX44p三49PiPadMini1024n76
18、8Px163W20PX44PX49P三1536px768PX7pxiOSiPad界面结构图，图片来源于520设计网3. iOS布局(1)网格系统网格系统(GridSystems),又称为栅格系统,是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子,再以这些格子为基准，进行页面布局设计的方式,能使布局规范、简洁、有秩序，如图所示。网格系统(2)组成元素网格系统由列、水槽以及边距3个元素组成，如图所示。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距离。o组成元素(列、水槽、边距)(3)网格的运用单元格：iOS的最小点击区域是44pl,即
19、88px(2x因此,在适用性方面,能被整除的偶数4和8作为iOS最/J埠元格比较合适。其中4px容易将页面切割细碎，所以比较推荐使用8px,如图所示。单元格列：列的数量有4、6、8、10、12、24这几种情况。其中4列通常在2等分的简洁页面时使用，6、12和24基本满足所有等分情况,然而24列将页面切割太碎，如图3-27所示，因此实际列的使用6列使用还是以12列和6列为主。分3WS，身分SWS分水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置，如24、32、40o其中32px(16pt2x)最为常用,如图所示。所有间距均为最小单元格的整数倍32px24px 16px
20、 32px水槽边距：边距的宽度也可以与水槽有所区别。在iOS中以2X为基准,常见的边距有20pxx24pxx30pxx32px、40px以及5Opx边距的选择应结合产品本身的气质，其中3Opx是最为舒适的边距，也是绝大多数App首选的边距，如图所示。10：35，令设置通用10：34.I V ,设置Q飞行模式Q无线局域网CMCC-4TkyQ蓝牙未连接|建窝移动网络西个人热点关闭；Q VPNiOS中的“设置”及“通用关于本机软件更新隔空投送接力CarPIay车教页面都采用了30px的边距4.iOS字体(1)系统字体iOS英文使用的是SanFrancisco(SF)字体，其中SF字体有SFUITex
21、t(文本模式)和SFUIDisplay(展示模式)两种尺寸。SFUIText适用于小于等于9pt的文字，SFUIDisplay适用于大于等于20pt的文字。中文使用的是苹方字体，共有6个字重，如图所示。纤细细体正常中黑中粗JThinLightRegMedSmBdiOS系统字体(2)字号大小iOS设计时要注意字号的大小，下所示。苹果官网的建议全部是针对英文SF字体而言的，中文字体需要Ul设计师灵活运用,以最终呈现效果的实用性和美观度为基准进行调整。其中IOpt(2x为20px)是手机上显示的最小字体，一般位于标签栏的图标底部。为了区分标题和正文，字体大小差异至少保持在4px(2pt2x),正文的
22、合适行间距在L52倍之间。革果对于字体大小的建议I位.字体行距大原Rgular34pt68px41pt11*-Regular28pt28PX34p，13m二RguUr22pt44px2pt1m帐三Regular20Pt40px25pt19m头条Sni*8oldITPt34px22pt-24m正文RegUSr17pt34px22pt-24am峰注ReguUr16pt32px21p-2OemRoguSr15pt3Opx20pt-16m注Regular13pt26px18pt-6m注料一R0ulr12pt24px1pt0nM二RguUr11pt22PX13pt6mill分9：41AMt100%Tit
23、IeI监一EditI。.iPhorw78常规导IR栏ell令9:41AMt100%,Edit1.argeTitle*sone7大标导航型Al-T-，十*寸A*1CKjCKjCKjEKjCKUMLaMLaMlnpa141UMSomttxrtaiPh678底都标莅利基于2X即iPhone678App界面中的字号3.2.2Android设计规范AndrOid系统基础规范也包括设计尺寸及单位、界面结构、布局、字体4个方面。1.AndrOid设计尺寸及单位(1)相关单位DPI:网点密度(DotPerinch,DPl)是打印分辨率的单位，表示每英寸打印的点数。在移动设备上等同于PPl,表示的是每英寸所拥有
24、的像素数量。通常PPl代表苹果手机，DPI代表安卓手机。独立密度像素与独立缩放像素：独立密度像素(Density-independentpixels,dp)是安卓设备上的基本单位，等同于苹果设备上的ptAndroid开发工程师使用的单位是dp,所以UI设计师进行标注时应将PX转化成dp,公式为dpppi160=px0当设备的DPl值是320时，通过公式可得出ldp=2px,如图所示(类似iPhone678的高清屏320x480480x800720X1280100X19202160x3840ildpUl设计师进行Android界面的设计时，标记字体的单位选用sp(2)设计尺寸Android常见的
25、设备尺寸，如下所示。在进行界面设计时，如果想要一稿适配Android和iOS,就使用Photoshop新建7201280px尺寸的画布。如果根据MaterialDesign新规范单独设计Android设计稿,就使用Photoshop新建10801920px尺寸的画布。无论哪种需求，使用Sketch只建立360640dp尺寸的画布即可。AndrOid常见的设备尺寸名称分辨率PXdpi像素比示例dp对应像素xxxhdpi2160x38406404.048dp192pxhdpi1080x19204803.048dp144pxxhdpi720x12803202.048dp96pxhdpi480X800
26、2401.548d72pmdpi320x4801601.048dp48px720x12PXI1080x1920PX21x3840px320x480PX480xpxmdpihdpixhdpixxdplxxxhdpiAndroid设计标准尺寸2. Android界面结构应用栏腐IlRXAndrOid界面主要由状态栏、导航栏、顶部应用栏组成，其结构如图所示。1920Android界面结构3. Android布局在iOS的设计规范中，我们已经剖析了网格系统及其组成元素,因此在Android布局中不再赘述,直接进行Android中网格的布局。单元格Android的最小点击区域是48dp如图所示因此能被整
27、除的偶数4和8作为Android最小单元格比较合适。所有组件都与移动设备的8dp网格对齐，如图所示。移动设备的8dp网格4 =8工12 11图标、文字和组件中的某些元素可以与4dp网格对齐，如图所示。-一同比.JumOoeMaxJtfiDiTwoMax.Ueromee.Max_J与4dp网格对齐列：列的数量在手机设备上推荐4歹I，平板电脑上推荐8歹IJ,如图所示。水槽：水槽和边距的宽度在手机设备上推荐16dp,平板电脑上推荐24dp,如图所示。MD建议网格数Xa(op)口大小列边1E水槽I0-359Xsmall416360-399Xtmall416400-479Xsmall416480-599
28、XtmaII416600-719small816720-39small824840-959small1224960-1023small12241024-1279medium12241280-1439medium12241440-1599large12241600-1919large12241920*XIarge1224手机设备、平板电脑水槽和边距的宽度边距：边距的宽度可以和水槽统一。另外边距可以根据产品的设计要求，和水槽不同，如图所示。当Android中边距的宽度和水槽不同时，其宽度的设置具体可以参考iOS布局中边距的宽度。边距的宽度4.Android字体规范(1)系统字体Android英文使
29、用的是Roboto字体，共有6个字重。中文使用的是思源黑体，又称为“SourceHanSansw或Noto”,共有7个字重，如图所示。RobotoUght Roboto RegiJar RobotoMwiwm RobotoBoM RobotoBUck话话话话话话话RoMCLighfftaicRobototMcRobotoMediumnAbRoMOMdIUACRcbofoBUckIUlic思源黑体(2)字号大小Android设计时要注意字号的大小，如下所示。Android系统APP的字体建议字号字体字,字号使用情况HlRobotoLigt968PSentence-1.5emH2RobotoUt6
30、3PSentence-e.SomH3RobotoRegular482SentenceemH4RobotoRegular34SPSentencee.2SemH5RobotoRegular24SpSentence0所H6RobotoNediUB203pSentence6.1SmSubtitle1RobotoRegular16叩SntecO.ISemSubtitle2RobotoY4SpSentence6.1mBody1RobotoRegular16叩Sentencee.5mBody2RobotoRegularMSpSntcnc.25mBUTTONRobotoMedium14SPAllcps1.25
31、mCptoRobotoReulr1?8pSntnce.4nRobotoRegularspAll-1.SmOVERLiNtAndroid各元素以7201280px为基准设计，可以与iOS对应,其常见的字号大小为24px、26px、28pxx30pxx32px、34px,36px等,最小字号为20px,如图所示。12:30/I.III令12：3OPM80%,TitleTitleSwitchSwitchAndroidSwitchOniOSSwitchOn.)AndroidSwitchOff.JBiOSSwitchOff.X-SinglecheckSinglecheckOption1Option1VO
32、ption2QOption2MultiplecheckMultiplecheckOption1QOption1Option2QOption2Option30Option3Android（左）与iOS（右）对应界面3.3APP常用界面类型界面设计是产品用户体验里非常重要的一环。在APP中，常用界面类型为闪屏页、引导页、首页、个人中心页、详情页以及注册登录页。3.3.1 闪屏页闪屏页又称为“启动页，是用户点击APP应用图标后，预先加载的一张图片。闪屏页承载了用户对APP的第一印象，是情感化设计的重要组成部分，其设计类型可以细分为品牌推广型、活动广告型、节日关怀型等。1 .品牌推广型品牌推广型闪屏页
33、是为表现产品品牌而设定的。基本采用产品log。+产品名称+宣传语的简洁化设计形式，如图所示。1号店（左）闲鱼（右）的品牌推广型闪屏页2 .活动广告型活动广告型闪屏页是为推广活动或广告而设定的，通常将推广的内容直接设计在闪屏页内。多采用插画和海报的设计形式，常用暖色营造热闹的氛围，如图所示。A百度同盘g8a置入嵌入对象命令,弹出“置入嵌入的对象对话框。选择云盘中的Ch03素材制作侃侃App制作侃侃APP闪屏页01文件,单击置入按钮，按Enter键确认操作,效果如图所示，在“图层控制面板中生成新的图层并将其命名为“底图”。(3)按CtrlT组合键,在图片周围出现变换框，拖曳右上角的控制手柄，调整图
34、片的大小及其位置，按Enter键确认操作,如图所示。(4)选择“视图新建参考线命令，弹出新建参考线”对话框,在40像素的位置新建一条水平参考线，设置如图所示，单击“确定按钮，完成参考线的创建,效果如图所示。(5)j择文件置入嵌入对象命令,弹出置入嵌入的对象对话框,选择云盘中的Ch03素材制作侃侃App制作侃侃APP闪屏页02文件。单击置入按钮，将图片置入到图像窗口中，将其拖曳到适当的位置，按Enter键确定操作，效果如图所示,在“图层控制面板中生成新的图层并将其命名为状态栏。(6)选择“横排文字”工具T.,在适当的位置输入需要的文字并选取文字，选择窗口字符”命令，弹出面板，将颜色设为白色,其他选项的设置如图所示，按Enter键确认操作,效果如图所示。(7)选择椭圆工具O.,在属性栏的选择工具模式”选项中选择形状，将填充颜色设为白色，描边”颜色设为无。按住Shifl键的同时,在图像窗口中适当的位置绘制圆形,效果如图所示，在“图层控制面板中生成新的形状图层椭圆I。(8)单击图层控制面板下方的添加图层样式按钮仅一在弹出的菜
