共计 1863 个字符，预计需要花费 5 分钟才能阅读完成。
从事 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 有 640×1136、750×1334、750×1624 三种主流分辨率，android 统一为 720×1280, 两平台采用相同的 APP 设计规范，逻辑像素换算方式一样，程序员根据同一份标注图开发，实现页面中元素尺寸完全相同，在 ios3 种尺寸中 750×1334 也最接近 720p，宽度仅相差 30px, 相差比仅为 0.04 适配无差别，故而可以一稿配双平台，如果对实现效果要求较高，那就需要按 720×1280 再出图。
iPhone X 依然可用 750×1334 设计, 只是高度增加了 290px，尺寸 750*1624（@2x）注意状态栏的高度由原来的 40px 变成了 88px，另外底部要预留 68px 的主页指示器的位置。
