移动端UI设计规范指南

从事UI设计，一直没看到完整版的UI设计规范学习资料，特此总结整理方便你们学习交流~

不少新人在开始作移动端UI设计的时候，每每对界面的一些尺寸规范不是十分清楚，对作UI设计的基础概念也没有清晰的认识，不少时候都是凭借本身的感受和经验去绘制界面，内心并无一个清晰的概念，致使作出来的页面老是不那么尽如人意。本文整理汇总了一些界面设计（iOS系统）中经常使用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不必定要严格遵照，但对这些规范应有所了解，并融会贯通。

01.UI基础概念

02.UI元素设计规范

03.UI版式设计规范

04.UI文字使用规范

05.UI颜色使用规范

06.UI输出规范

07.UI交互介绍

08.总结

在开始UI设计以前必须搞清楚物理像素、逻辑像素、倍率三个词。

屏幕都是由许多像素点组成，每一个点发出不一样颜色的光，构成咱们看到的画面。像咱们的熟悉iphone 6s 屏幕就是由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设计时选择何种倍率？

要从开发换算、设计成本、效果查看、倍率转换、切图5个方面来综合选择。

开发换算，程序员拿到设计师提供的标注图之后，须要将标注中的物理像素转换成逻辑像素，即px转换为pt，这里便涉及到换算的问题。一般设计图中元素尺寸在三位数之内，对于通常人而言三位数之内除以1最容易，2其次，3最后，本轮排1x>2x>3x

设计成本，在2x逻辑像素下，列表高60pt，头像高51pt，两者不可能恰好居中对齐，势必偏移1pt，手机实际显示偏移2px；在3x物理像素下，列表高150px，头像高100px，转换到1x逻辑像素，100不能被3整除，势必形成偏移。为保证落地效果，1x倍率下尺寸必须为偶数，2x倍率下尺寸必须为4的倍数，3x倍率下尺寸必须为6的倍数，本轮排序1x>2x>3x

效果查看，咱们一般会将效果图导入对应设备中进行查看，目前主流设备都采用2x，3x倍率，1x的设计图在主流设备上成倍放大的同时，分割线，描边线也会成倍的放大，若是不对这些细节二次调整，终端效果会很不理想。因为2x，3x之间等比缩放跨度不大，故而逻辑像素相同的两个2x，3x能够直接查看彼此的效果图，3x比2x效果好些，本轮排序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是否须要另出一套图呢？答案是看需求，能够一稿配双平台。

在2x倍率下，ios有640x113六、750x133四、750x1624三种主流分辨率，android统一为720x1280,两平台采用相同的APP设计规范，逻辑像素换算方式同样，程序员根据同一份标注图开发，实现页面中元素尺寸彻底相同，在ios3种尺寸中750x1334也最接近720p，宽度仅相差30px,相差比仅为0.04适配无差异，故而能够一稿配双平台，若是对实现效果要求较高，那就须要按720x1280再出图。

iPhone X依然可用750x1334设计,只是高度增长了290px，尺寸750*1624（@2x）注意状态栏的高度由原来的40px变成了88px，另外底部要预留68px的主页指示器的位置。