项目1　走进UI设计的世界-UI设计基础

本章介绍：

本章对UI设计的基本概念、常用软件、项目流程以及规范与规则进行系统讲解。通过本章的学习，读者可以对UI设计有一个系统的认识，有助于高效便利地进行后续的UI设计工作。项目1走进UI设计的世界—UI设计基础学习引导理解UI设计的基本概念了解UI设计的常用软件熟悉UI设计的项目流程熟悉UI设计的软件操作掌握UI设计的规范与规则培养对UI设计的基本兴趣任务1.1

理解UI设计的基本概念任务引入任务知识任务实施1.1.1任务引入

本任务通过掌握UI设计的相关概念了解UI设计，并通过到花瓣网调研UI设计的实际应用，进一步理解UI设计的基本概念。1.1.2任务知识：UI设计的基本概念UI即UserInterface（用户界面）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。优秀的UI设计不仅要保证界面的美观，更要保证交互设计（InteractionDesign，IxD）的可用性及用户体验（UserExperience，UE/UX）的友好度。1.1.3任务实施（1）启动浏览器，打开花瓣网官网，单击右侧的“登录/注册”按钮，在弹出的对话框中选择登录方式并登录。1.1.3任务实施（2）在搜索框中输入关键词“UI设计”，按Enter键，进入搜索页面。（3）单击页面上方的“画板”选项，发现与UI设计相关的有图标设计、App界面设计以及网页设计等画板。选择其中的“APP界面”画板，单击“关注”按钮，收藏该画板。也可以根据调研需要关注收藏其他UI设计相关的画板。1.1.3任务实施（4）单击收藏的“APP界面”画板，进入该画板，通过调研赏析该画板中UI设计的实际应用案例，更好地理解UI设计的基本概念。使用上述方法，调研赏析其他UI设计相关的画板，进一步理解UI设计。任务1.2了解UI设计的常用软件任务引入任务知识任务实施1.2.1任务引入本任务通过了解UI设计的常用软件来熟悉UI设计的具体内容，并通过到各软件相关官网调研了解软件辅助UI设计的功能、技术和实现效果。1.2.2任务知识：UI设计的常用软件根据软件的专业性、市场的认可度及用户的使用量等因素可以将UI设计的常用软件总结为界面设计、动效设计、网页设计、3D渲染、思维导图以及交互原型这六类，建议初学者先掌握Photoshop（简称PS）和Illustrator（简称AI），有条件购买苹果电脑的话还要掌握Sketch和Figma。1.2.3任务实施（1）以软件Photoshop为例。Photoshop是Adobe公司旗下的图像处理软件，因此，启动浏览器，打开Adobe公司中国官网，单击“创意和设计”按钮，在展开的选项中选择“Photoshop”选项，跳转到Photoshop相关网页。1.2.3任务实施（2）在此页面中有着Photoshop软件的相关功能介绍和具体操作方法，能够更好地了解Photoshop软件，使用上述方法，了解Illustrator、Sketch和Figma等其他UI设计常用软件的相关功能、技术和实现效果。任务1.3熟悉UI设计的项目流程任务引入任务知识任务实施1.3.1任务引入本任务通过到UI中国调研、赏析UI设计中的完整项目，熟悉UI设计的项目流程。1.3.2任务知识：UI设计的项目流程针对整个产品的设计流程而言，UI设计仅是其中的一部分。一个产品从启动到上线，会经历多个环节、由多个角色共同协作完成。每个角色基本都会有对应的1个或多个环节。1.3.3任务实施（1）启动浏览器，打开UI中国官网，单击右侧的“登录/注册”按钮，在弹出的对话框中选择登录方式并登录。1.3.3任务实施（2）单击左侧的“发现”按钮，在弹出的菜单中选择“作品”选项，进入作品页面。1.3.3任务实施（3）单击页面左上角的“全部分类”选项，选择“App”选项，出现了大量App项目。点击进入其中一个项目，可以查看到该项目的完整设计过程，通过调研赏析该App项目，可以熟悉UI设计的项目流程。使用上述方法，调研赏析其他UI设计项目，进一步熟悉UI设计的项目流程。任务1.4掌握UI设计规范与规则任务引入任务知识任务实施1.4.1任务引入本任务通过掌握设计单位、设计尺寸、适配方案、设计结构、间距规范、文字规范、图标尺寸以及图片比例掌握UI设计规范与规则，并通过到优设网收集、阅读UI设计规范相关的文章，进一步掌握UI设计的规范与规则。1.4.2任务知识：UI设计规范与规则UI设计的基础规范与规则可以令设计师在进行设计时更加事半功倍。下面主要介绍单位、尺寸、适配、结构、间距、文字图标以及图片的基础规范与规则。1.4.2任务知识：UI设计规范与规则1.单位介绍（1）DPI和PPIPPI：像素密度（PixelsPerInch，PPI）是屏幕分辨率单位，表示的是每英寸所拥有的像素数量，通常代表苹果手机。DPI：网点密度（DotsPerInch，DPI）是打印分辨率单位，表示每英寸打印的点数，通常代表安卓手机。1.4.2任务知识：UI设计规范与规则1.单位介绍（2）px、pt、dp、sppx：像素（pixels，px）是物理像素（PhysicalPixel）的单位，属于相对单位，会因为屏幕像素密度变化而变化。运用Photoshop软件进行UI设计时使用的单位,运用此单位需要兼容不同分辨率的界面。pt：点（points，pt）是逻辑像素（LogicPoint）的单位，属于绝对单位，不会因为屏幕像素密度变化而变化。iOS开发及运用Sketch软件进行UI设计使用的单位。dp：独立密度像素（Density-independentPixels，dp），是安卓设备上的基本单位，用于非文字单位，等同于苹果设备上的pt。sp：独立缩放像素（Scale-independentPixels，sp），是Android设备上的字体单位。用户可以根据自己需求调整字体尺寸，当文字尺寸是“正常”状态时，1sp=1dp。1.4.2任务知识：UI设计规范与规则2.设计尺寸iOS常见的设备尺寸在进行界面设计时，为了适配大部分尺寸，推荐以iPhoneX/Xs/11pro为基准。如果使用Photoshop就创建750px×1624px尺寸的画布，如果使用Sketch就建立375pt×812pt尺寸的画布。Android常见的设备尺寸，在进行界面设计时，如果想要一稿适配Android和iOS，就使用Photoshop新建720px×1280px尺寸的画布。如果根据MaterialDesign新规范单独设计Android设计稿，就使用Photoshop新建1080px×1920px尺寸的画布。无论哪种需求，使用Sketch只建立360dp×640dp尺寸的画布即可。1.4.2任务知识：UI设计规范与规则3.适配方案一套App界面设计数量通常在80～150页。由于Photoshop是使用px单位进行UI设计，因此在适配时还需要额外设计出其他机型的页面。而Sketch、XD、Figma等软件是使用pt单位进行UI设计，因此在适配时无需额外设计。1.4.2任务知识：UI设计规范与规则4.设计结构在iOS系统中，界面通常由状态栏、导航栏、安全涉及区以及标签栏组成。自全面屏上市，界面较之前还多了虚拟主页键。Android和iOS一样，只是叫法不同。在Android中，界面通常由状态栏、顶部应用栏、安全设计区、底部应用栏以及虚拟导航栏组成。1.4.2任务知识：UI设计规范与规则5.间距规范在App间距中，8倍数和10倍数的尺寸常被使用，例如在iOS中以@2x为基准,常见的边距有20px、24px、30px、32px、40px及50px。而4倍数的尺寸则可以用于较亲密的元素之间。1.4.2任务知识：UI设计规范与规则6.文字规范系统字体（1）iOS系统旧金山字体：旧金山字体是非衬线字体，其中SF字体有SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SFUIText（文本模式）适用与小于19pt的文字，SFUIDisplay（展示模式）适用于大于20pt的文字。纽约字体：纽约字体是衬线字体，旨在补充旧金山字体。对于小于20pt的文本使用小号，对于20到35pt之间的文本使用中号，对于36到53pt之间的文本使用大号，对于54pt或更大的文本使用特大号。1.4.2任务知识：UI设计规范与规则6.文字规范系统字体（2）Android系统Roboto：在Android系统中，英文使用的是Roboto字体，该字体共有6个字重。思源黑体：在Android系统中，中文使用的是思远黑体字体，又称为“SourceHanSans”或“Noto”，共有7个字重。1.4.2任务知识：UI设计规范与规则6.文字规范字体尺寸苹果和MaterialDesign提供的字号参考并不完全适用于中文，因为相同字号下，中文比西文大。如iOS官方规范正文为17pt，但使用中文时14pt和12pt更加合适。为了区分标题和正文，字体大小差异至少保持在2pt及以上。行高西文通常为1.3～1.5倍，中文采用1.5～2倍。1.4.2任务知识：UI设计规范与规则7.图标尺寸（1）应用图标概念：应用图标即产品图标，是品牌和产品的视觉表达，主要出现在主屏幕上。尺寸：应用图标的设计尺寸可以采用1024px，并根据iOS官方模版进行规范，正确的图标设计稿应是直角矩形不带圆角的，iOS会自动应用一个圆角遮罩将图标的4个角遮住。1.4.2任务知识：UI设计规范与规则7.图标尺寸（2）功能图标概念：功能图标即系统图标，是通过简洁现代的图形表达一些常见功能，主要应用于界面中的导航栏、工具栏以及标签栏等模块。尺寸：创建功能图标时，可以参考MaterialDesign设计语言，以24dp尺寸为基准。图标应该留出一定的边距，保证不同面积的图标有协调一致的视觉效果。1.4.2任务知识：UI设计规范与规则8.图片比例图片通常需要按照固定比例进行设计，