虎课网为您提供字体设计版块下的UI的适配和规范-UI/UX设计系列课图文教程，难度等级为初级练习，下面开始学习这节课的内容吧！

本节课讲解 - 1.4 UI的适配和规范，同学们可以在下方评论区进行留言，老师会根据你们的问题进行回复，作业也可以在评论区进行提交。

课程核心知识点：行业这些规范的来源、个平台设计规范解读、尺寸单位换算 。

学完本课内容后，同学们可以根据下图作业布置，在视频下方提交作业图片，老师会一一解答。

那我们开始今天的教程吧。

1.我们的规范可以从官网上找到，例如苹果官网，我们可以看到跟设计相关的规范，如图所示。

2.我们首先讲解一下IOS的设计规范，最上方的红色选框为状态栏，这是无法去进行修改的部分，如图所示。

3.最下方的红色选框为虚拟主页键，和状态栏一样都是无法进行修改的部分，如图所示。

4.上方绿色部分叫做导航栏，这是可以进行更改的部分，并且是重点设计的部分，如图所示。

5.下方绿色部分叫做标签栏或者工具栏，可以使用这个部分快速找到自己想要的部分，如图所示。

6.中间的部分叫做安全设计区，这个区域没有固定高度，随着手机的大小来进行调整，如图所示。

7.Android设计规范基本如此，安卓从曾经的实体按键转变为现在的虚拟按键，也有新的手机设计为全面屏，彻底将下方的虚拟按键进行了隐藏，如图所示。

8.在小程序的设计规范中，和我们之前两个系统的设计并没有太大区别，唯一的区别就是小程序的顶部必然是转发和关闭按钮，这个位置也是无法更改的部分，如图所示。

9.后台的界面设计是没有标准的设计规范，但是阿里巴巴网站上给我们列出了基本的设计，如果我们可以创造出全新的设计规范也可以使用，如图所示。

10.如果说我们制作网页设计规范，最好的方法就是找到相似类型，直接裁切对比，我们可以找到网站，然后使用截图工具等直接截取一个范围来查看尺寸，如图所示。

11.Px的意思就是像素，全称叫做Pixel，是一个抽象概念，并不是设计软件中的小像素块，也不是电子设备的一个或物理量，它仅是图形显示的基本单元，影像显示的基本单位，如图所示。

12.另一个词叫做逻辑像素，逻辑像素，也叫做设备独立像素，与设备无关的像素，为了现在设备的种类太多，而出现的一个新的概念，可以做一个尺寸，自动适配各种不同设备，通常使用Points作为单位，缩写为PT，如图所示。

13.IOS使用到的一般叫做Pt，Android设备使用的是Dp和Sp，设计到专利问题，但是我们只需要知道它们是一样的即可，如图所示。

14.那么规范错误设计为适配会怎么样呢，我们来看右侧的图片，搜索栏无法点击，这属于设计未适配，搜索栏不应该去占据状态栏，如图所示。

15.我们来看下面的图片，左边是安卓的设备参数对应右侧IOS的参数，这是我们需要去记的知识点，如图所示。

16.我们可以使用蓝湖来对我们设计好的图片进行标注，右侧会显示各种大小位置甚至代码等参数，如图所示。

17.目前设计师切的只有功能图标，切图主要包含视觉范围和切图范围，视觉范围是图片真实的尺寸，而切图范围主要针对用户手指触碰范围，如图所示。

18.除了切图我们还需要了解的就是命名，每个设计的按钮都会有不同的英文名，如图所示。

19.切图的命名也是有标准化的，必须是字母不能是中文，必须使用下划线、最好有状态，例如：默认、选中、高亮、不可用等，最后则是对命名尽量的使用缩写，如图所示。

20.状态类型移动端和电脑端鼠标状态，其中电脑端较多，具体如图所示。

21.字体的标准也有规范，不同的终端的规范不同，具体如图所示。

22.回顾本节课所学的内容，同学们可在视频下方的评论区留言并提交作业，老师会根据提出的问题回复。

23.视频学百遍，不如上手练一练，你学会了吗！

以上就是UI的适配和规范-UI/UX设计系列课图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！