从事UI设计，还没有看过完整版的UI设计规范学习资料，特此总结整理，方便大家学习交流~很多新手经常对界面感到困惑当他们开始做移动端UI设计的时候。有些尺寸规格不是很清楚，对UI设计的基本概念也不是很清楚。很多时候，我是根据自己的感受和经验来画界面的。做得好。本文总结了界面设计（iOS系统）中常用的一些尺寸规范和方法，如控件间距、适配、标注、图片裁剪等，设计师在设计时不必严格遵守，但这些规范应该了解并整合。01.UI基本概念02.UI元素设计规范03.UI布局设计规范04.UI文字使用规范05.UI颜色使用规范06.UI输出规范07.UI交互介绍08.开始UI设计前必须清楚的总结三单词：物理像素、逻辑像素和放大倍率。屏幕是由许多像素组成的，每个点都会发出不同颜色的光，从而形成我们看到的画面。像我们熟悉的iphone6s屏幕就是一个由750行1334列像素组成的矩阵图。设计师用于绘图的分辨率是指物理像素。总之，物理像素=分辨率，单位px。逻辑像素也称为逻辑点。它们是控制显示的屏幕内容量的单位。单位符号为pt。开发过程必须将设计者提供的物理像素转换成逻辑像素，并用逻辑像素来控制页面显示什么内容。不同的设备具有不同的逻辑像素与物理像素的比率。每个设备的物理像素都是固定的，我们在调整显示器的分辨率时，实际上是在调整逻辑像素。物理像素在硬件层面构成液晶屏，逻辑像素在软件层面构成屏幕图像放大倍数，1个逻辑像素对应1个物理像素，1pt=1px，放大倍数1x，1个逻辑像素对应1.5个物理像素，1pt=1.5px，放大1.5x，1个逻辑像素对应2个物理像素，1pt=2px，放大2x，1个逻辑像素对应3个物理像素，1pt=3px，放大3x，放大=物理像素/逻辑像素。由于开发工具的不同，逻辑像素在ios和android中的叫法不同，ios是pt，android是dp，那么在设计ios的时候应该选择什么样的放大倍率呢？应从显影转换、设计成本、效果查看、倍率转换、图像裁切五个方面综合选择。开发转换，程序员拿到设计者提供的注解后，需要将注解中的物理像素转换成逻辑像素，即px转pt，这就涉及到转换的问题。通常设计图中的单元尺寸在三位数以内。对于普通人来说，最简单的三位数除以1，其次是2，最后是3。本轮排名1x>2x>3x设计成本。2x逻辑像素下，列表高度为60pt，头像高度为51pt。两者不可能对齐在中心。必然要偏移1pt，手机实际显示偏移2px。3整除必然造成偏移。为了保证落地效果，1倍大小必须是偶数，2倍大小必须是4的倍数，3倍大小必须是6的倍数。本轮排序1x>2x>3x效果查看，我们通常将效果图导入到相应的设备中进行查看。目前，主流设备使用2倍和3倍放大。1x的设计图在主流设备上倍增时，分界线和笔画线也会倍增。如果不对这些细节进行二次调整，最终的效果会很不理想。由于2x和3x之间的比例缩放跨度不大，逻辑像素相同的两个2x和3x可以直接查看对方的效果图。3倍优于2倍。这一轮排序是3x>2x>1x倍率转换，1x转换2x和3x极其方便；将2x转换为1x需要除以2，转换3x需要乘以1.5；3x转2x需要除以3再乘以2，转1x需要除以3，比较麻烦。本轮排序1x>2x>3x切图，1x设计图除了2x、3x两套切图外还必须导出，2x设计图导出3x需要放大1.5倍，3x导入2x需要拆分3乘以2，麻烦，这一轮排序2x>3x>1x综合对比分析，只有2x放大设计图方便上下适配转换。那么在确定了ios的设计尺寸之后，android是不是还需要另外一套图纸呢？答案是看需求，一个草稿可以搭配两个平台。2倍放大下，ios有640x1136、750x1334、750x1624三种主流分辨率，android统一为720x1280。两个平台采用相同的APP设计规范，逻辑像素转换方式相同。元素大小完全相同。在ios的三种尺寸中，750x1334也是最接近720p的。宽度差异仅为30px，差异比例仅为0.04。适应性没有区别。因此，一份稿件可以匹配两个平台。如果实现效果要求高，那么需要先按720x1280再导出图片。iPhoneX依然可以设计成750x1334，但高度增加了290px，尺寸为750*1624（@2x）。注意状态栏的高度从原来的40px变成了88px，底部要预留一个68px的主页指示符。
