UI界面设计与制作（全彩慕课版）配套教材电子课件（完整版）.pptx

第1章 初识UI设计;掌握UI设计的基本概念 掌握UI设计的常用软件 了解UI设计的行业发展 了解学习UI的正确姿势 掌握UI设计的制作流程 ;UI即User Interface（用户界面）的简称，UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。优秀的UI设计不仅要保证界面的美观，更要保证交互设计的可用性及用户体验的友好度。;根据软件的专业性、市场的认可度及用户的使用量等因素可以将UI设计的常用软件总结为界面设计、动效设计、网页设计、3D渲染、思维导图以及交互原型这六类。;从早期的专注于工具的技法型表现，到现在要求UI设计师参与到整个商业链条，兼顾商业目标和用户体验，可以看出国内的UI设计行业发展是跨跃式的。UI设计从设计风格、技术实现到应用领域都发生了巨大的变化。;1.整体学习 进行相关课程学习及文章学习，针对初学者建议进行课程学习，这样可以系统的学习UI的相关知识和设计应用方法。;2.作品收集 建议设计师每天拿出1-2小时到UI中国、站酷（ZCOOL）、追波（Dribbble）等网站，浏览最新的作品，并加入收藏，形成自己的资料库。;3.项目临摹 首先推崇的是从应用中心下载优秀的App，截图保存进行临摹。临摹一定要保证完全一样并且要多临摹。;4.项目实战 经过一定的积累，最好通过一套完整的企业项目来提升。从原型图到设计稿再到切图标注，甚至可以制作成动效Demo 。;针对整个产品的设计流程而言，UI设计仅是其中的一部分。一个产品从启动到上线，会经历多个环节、由多个角色共同协作完成。每个角色基本都会有对应的1个或多个环节。;1.单位介绍 （1）DPI和PPI PPI：像素密度（Pixels Per Inch，PPI）是屏幕分辨率单位，表示的是每英寸所拥有的像素数量，通常代表苹果手机。 DPI：网点密度（Dots Per Inch，DPI）是打印分辨率单位，表示每英寸打印的点数，通常代表安卓手机。;（2）px、pt、dp、sp;2.设计尺寸 在进行界面设计时，为了适配大部分尺寸，推荐以iPhone X/Xs/11 pro为基准。如果使用Photoshop就创建750px×1624px尺寸的画布，如果使用Sketch就建立375pt×812pt尺寸的画布。;3.适配方案 一套App界面设计数量通常在80～150页。由于Photoshop是使用px单位进行UI设计，因此在适配时还需要额外设计出其他机型的页面。而Sketch、XD、Figma等软件是使用pt单位进行UI设计，因此在适配时无需额外设计。;4.设计结构 在iOS系统中，界面通常由状态栏、导航栏、安全涉及区以及标签栏组成。自全面屏上市，界面较之前还多了虚拟主页键。;5.间距规范 在App间距中，8倍数和10倍数的尺寸常被使用。例如在iOS中以@2x为基准,常见的边距有20px、24px、30px、32px、40px及50px。而4倍数的尺寸则可以用于较亲密的元素之间。;6.文字规范 （1）系统字体 ·iOS系统 旧金山字体：旧金山字体是非衬线字体，其中SF字体有SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SF UI Text（文本模式）适用与小于19pt的文字，SF UI Display（展示模式）适用于大于20pt的文字。;·Android系统 Roboto：在Android系统中，英文使用的是Roboto字体，该字体共有6个字重。 思源黑体：在Android系统中，中文使用的是思远黑体字体，又称为“Source Han Sans”或“Noto”，共有7个字重。;（2）字体尺寸 苹果和Material Design提供的字号参考并不完全适用于中文，因为相同字号下，中文比西文大。如iOS官方规范正文为17pt，但使用中文时14pt和12pt更加合适。为了区分标题和正文，字体大小差异至少保持在2pt及以上。行高西文通常为1.3～1.5倍，中文采用1.5～2倍。;7.图标尺寸 （1）应用图标 ?概念： 应用图标即产品图标，是品牌和产品的视觉表达，主要出现在主屏幕上。;?尺寸： 应用图标的设计尺寸可以采用1024px，并根据iOS官方模版进行规范。正确的图标设计稿应是直角矩形不带圆角的，iOS会自动应用一个圆角遮罩将图标的4个角遮住。;（2）功能图标 ?概念： 功能图标即系统图标，是通过简洁现代的图形表达一些常见功能。主要应用于界面中的导航栏、工具栏以及标签栏等模块。;?尺寸： 创建功能图标时，可以参考MaterialDesign设计语言，以24dp尺寸为基准。图标应该留出一定的边距，保证不同面积的图标有协调一致的视觉效果。;8.图片比例 图片通常需要按照固定比例进行设计，并应用于特定环境，如1:1尺寸的图片通常会作为头像使用。以下为整理好