《交互界面设计》课件-1.3UI设计规范

双击安装字体，安装后重启PPT请安装字体山东科技职业学院UI设计UIdesignUI设计UIdesign山东科技职业学院1.3UI设计规范讲课人：王萃学习目的1.掌握UI设计规范的原则2.掌握UI设计规范的内容3.了解不同系统的UI设计规范UI设计规范的原则1.3.1UI设计规范的原则没有规矩，不成方圆，UI设计也不例外。设计师不能单凭个人的主观经验做设计，要想提升用户体验、高效且顺畅地完成设计任务，就需要遵守一些设计原则。很多时候，设计原则是为了解决统一性和效率问题，避免开发过程中重复、烦琐的低效工作。1.3.1UI设计规范的原则UI设计规范的一致性原则表现在产品界面的各个方面，如在设计布局界面时，需要使标题字体、内容字体、链接字体等保持一致；在进行交互设计时，界面中的交互组件、交互流程、用户行为、交互样式、界面元素等应保持一致。一致性高效性与准确性建立通用的设计细节规范必不可少，这不仅能够降低设计人员的沟通成本，提高设计的准确性，还遵循了UI设计规范的高效性和准确性原则。UI设计规范的内容1.3.2UI设计规范的内容01图标设计规范图标是具有高度概括性的、用于传达视觉信息的小尺寸图像，常与文本搭配使用。图标不仅能传达出丰富的信息，还能提升整个界面美感和信息可识别性。同时，有的图标还具有交互性和功能性，用户点击这些图标会执行特定的操作，触发相应的功能。1.3.2UI设计规范的内容02色彩使用规范色彩使用规范主要是确定产品UI设计中所能使用的色彩种类。如图所示为界面中文字的色彩使用规范示例。1.3.2UI设计规范的内容03字体和行间距的设计规范

UI设计中对不同字号下的行间距要求也会有不同，一般来说，行间距的大小为字号的1~1.5倍，当然设计人员可根据实际需要标注出产品界面中不同文字内容对应的行间距大小。1.3.2UI设计规范的内容04按钮设计规范设计人员应将按钮的设计规范进行文字说明，包括将按钮尺寸大小、按钮圆角大小、描边大小，以及按钮中的文字大小等标识清楚。此外，按钮的视觉体现主要包括默认、点击和禁用3种状态。1.3.2UI设计规范的内容05图片设计规范图片也是UI设计中的重要组成部分之一，设计人员可按照用途对其进行分类，并遵循一定的设计规范，包括图片的比例与尺寸规范等。1.3.2UI设计规范的内容06组件设计规划UI设计中的组件包括以下内容。下拉列

表框文本输入框进度条提示框分割线弹出面板搜索框单选项和复选框不同系统的UI设计规范1.3.3iOS系统的UI设计规范01界面尺寸规范与框架要了解界面尺寸规范首先需要对iOS设备的分辨率和框架有所了解，其中iOS移动设备界面中常见的分辨率和框架主要有4种，如图所示。1.3.3iOS系统的UI设计规范02控件规范

iOS系统中的界面控件以下内容。这些控件都有一定的设计规范，下面进行详细介绍。导航栏选项卡开关搜索栏标签栏提示框1.3.4Android系统的UI设计规范01界面尺寸规范与框架

Android系统界面的尺寸大小一般包括320px×480px、426px×800px、720px×1280px、1080px×1920px，其中状态栏高度为72px，Android系统界面的尺寸规范并不明确，设计人员可根据需要进行调整。Android系统界面框架包括状态栏、导航栏、主菜单栏、内容区域4个部分。1.3.4Android系统的UI设计规范02Android系统中的单位换算与iOS系统不同的是，Android系统的开发通常会使用dp作为单位，而一般的UI设计图则以px为单位。因此在Android系统中需要进行单位的换算，这可以通过程序人员在后期代码中实现。1.3.4Android系统的UI设计规范03控件规范

Android系统中的控件与iOS系统中的控件有很多相似之处，不同的是Android系统中的UI设计更加多样化，自定义控件很多。下面主要讲解与iOS系统不同的控件的设计规范。ABCD顶部标签栏单行列表框卡片全局导航栏1.3.4Android系统的UI设计规范04Windows系统的界面尺寸规范由于Windows系统也在不断的升级改版，其界面尺寸有很多，常见的界面尺寸主要包括如图所示的8种主要尺寸。1.3.4Android系统的UI设计规范05控件规范与Android系统和iOS系统一样，Windows系统