摘要：基础概念元素设计规范版式设计规范文字使用规范颜色使用规范输出规范交互介绍总结在开始设计之前必须搞清楚物理像素逻辑像素倍率三个词。依然可用设计只是高度增加了，尺寸注意状态栏的高度由原来的变成了，另外底部要预留的主页指示器的位置。
从事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有640x1136、750x1334、750x1624三种主流分辨率，android统一为720x1280,两平台采用相同的APP设计规范，逻辑像素换算方式一样，程序员根据同一份标注图开发，实现页面中元素尺寸完全相同，在ios3种尺寸中750x1334也最接近720p，宽度仅相差30px,相差比仅为0.04适配无差别，故而可以一稿配双平台，如果对实现效果要求较高，那就需要按720x1280再出图。
iPhone X依然可用750x1334设计,只是高度增加了290px，尺寸750*1624（@2x）注意状态栏的高度由原来的40px变成了88px，另外底部要预留68px的主页指示器的位置。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116365.html
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的 更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfr...
阅读 1079·2021-11-23 09:51
阅读 2416·2021-09-03 10:47
阅读 2081·2019-08-30 15:53
阅读 2276·2019-08-30 15:44
阅读 1254·2019-08-30 15:44
阅读 1090·2019-08-30 10:57
阅读 1795·2019-08-29 12:25
阅读 962·2019-08-26 11:57
