iphone11ui设计尺寸
1.iPhone X概览
1.1屏幕尺寸
增加了 20％的内容垂直空间
1.2布局
概述
当为iPhone X设计时，必须确保布局填满屏幕，而不被设备的圆角、传感器外壳或访问主屏幕的指示器所掩盖。
圆角、传感器外壳
标准
UI元素
设计指南：
①使用标准的、系统提供的控件元素和自动布局来设计，布局应遵循遵循间隔区。
安全区域
②遵循安全区域和边缘布局指南；
③提供全屏体验，背景延伸到屏幕边，工具栏始终位于底部；
④注意状态栏高度。状态栏最好别隐藏；
⑤多版本设备设计时，要确保在不同尺寸的屏幕上保留重要的视觉内容。
4.7寸设备界面在 iPhone X上会被左右裁切或是上下黑边处理
⑤iPhone X的下边缘使用滑动手势来返回主屏幕或者进行应用切换，避免放置交互控件。角落操作不舒服，也不要放；
⑥启用自动隐藏时，如果用户几秒钟没有触摸屏幕，指示器就会淡出。再次触摸屏幕时会显示，给用户沉浸式体验。
1.3颜色
更漂亮了
1.4手势
概述
iPhone X使用屏幕边缘的手势来返回主屏、应用切换、查看通知中心和控制中心。
避免干扰系统屏幕边缘手势。系统手势优先于特定应用手势（除游戏），维系系统级操作。
①返回主屏：从底部向上轻扫一下。
返回主屏
②应用切换：向上轻扫并停顿一下，可显示所有打开的 app。
应用切换
③控制中心：向下轻扫。
控制中心
1.5其他
身份验证：人脸身份认证。 Face ID和 Touch ID不要同时引用。
键盘：表情/世界按钮和听筒按钮自动显示在键盘下方，避免在键盘中重复这些按钮。
iosui设计尺寸规范
iosUI设计尺寸规范如下：
1、界面尺寸大小为750乘以1334px；
2、电量条高度为40px；
3、导航栏高度为88px；
4、主菜单栏高度为98px；
5、内容区域高度为1108px；
6、设置界面的图标高度和开关滑动按钮高度为58px；
7、内容区域的文字大小为20px24px，26px，28px，30px，32px，34px。
iOS（原名为iPhoneOS），是苹果公司为其移动设备所开发的专有移动操作系统，为其公司的许多移动设备提供操作界面，支持设备包括iPhone、iPad和iPodtouch。iPhoneOS自iOS4起便改名为iOS，它是全球第二大最受欢迎的移动操作系统，仅次于Google开发的Android系统。2007年1月9日苹果公司在Macworld展览会上公布，随后于同年的6月发布第一版iOS操作系统，最初的名称为“iPhoneRunsOSX”。2007年10月17日，苹果公司发布了第一个本地化iPhone应用程序开发包（SDK），并且计划在2月发送到每个开发者以及开发商手中。2008年3月6日，苹果发布了第一个测试版开发包，并且将“iPhonerunsOSX”改名为“iPhoneOS”。2008年9月，苹果公司将iPodtouch的系统也换成了iPhoneOS。2010年2月27日，苹果公司发布iPad，iPad同样搭载了“iPhoneOS”。这年，苹果公司重新设计了“iPhoneOS”的系统结构和自带程序。2010年6月，苹果公司将“iPhoneOS”改名为“iOS”，同时还获得了思科iOS的名称授权。
Iphone6 plus UI设计规范
为什么要写iphone6 plusUI设计规范呢？只需要动动手指就能搜出一堆UI设计规范来呀？以前我们都是按照iphone6来设计的，但是当我看了京东的手机市场，以及周围朋友使用的手机屏幕，再加上iphonex的出现，所以我认为按照iphone6来设计并不准确了，纯粹是自己想了解这方面知识，做的笔记而已，已经了解的朋友可以忽略这篇文章。
一．界面尺寸目前市面上的苹果手机主要是：iphone6/6s，iphone6/6s plus，iphone7，iphone7 plus，iphone8，iphone8 plus，iphonex。
我们可以简单归纳为：iphone6，750*1334，326ppi；iphone6 plus，1242*2208，461ppi；iphonex，1125*2436，458ppi。它们分别对应的图片素材是：@2x，@3x，@3x。
所以我建议把1242*2208作为设计稿尺寸，对应@3x图。
为什么iphone6 plus的设计稿分辨率是1242*2208而不是1080*1920呢？
确实iphone6 plus的实际屏幕分辨率是1080*1920，屏幕密度是401ppi。我们知道163ppi条件下，苹果系统规定1pt=1px，所以401/163=2.46，也就是此时1pt=2.46px，这并不是一个整数，那苹果系统为了方便开发，从写代码到渲染这一步，都是采用@3x素材，此时1pt=3px，ppi=489，到这里可能就有人问了，苹果系统采用的是1242*2208，461ppi啊！怎么不是489ppi呢？？别急，我用下面这张图来说明原因。
想必到这里，大家应该知道1242*2208是怎么来的了。那有人就会发现这里存在误差的呀，对的，原本x=1318，取舍之后变成x=1242，相差76px。但是别忘了还有最后一步处理，渲染之后等比缩小处理到1080*1920屏幕上，继续看图。
结论：iphone6 plus屏幕分辨率实际上是1080*1920，ppi=401，它既不满足@2x，也不满足@3x，所以为了方便开发和设计，苹果系统把它归类到@3x里，但画布分别率是1242*2208而不是1318*2344，主要是考虑到X:Y必须等于9:16，这里产生的误差很小，可忽略。
二．组件大小iphone6 plus
状态栏高度：60px
导航栏高度：132px
标签栏高度：148px
（大家也可以截屏在PS里测量）
注意：以下是个人总结的数值，仅供参考
导航栏图标：范围54*54px~66*66px
标签栏图标：范围68*68px~76*76px
列表最小高度：132px
内容和页边的距离：30px
最小点击区域：132px（如果是图标，那它的透明区域应该大于或等于132px）
字体大小
导航栏标题文字：50px
标签栏文字：28px
最小字号：26px
标题常用字号：46px
正文常用字号：42px
说明文字常用字号：36px
其他常用字号：34px，36px，38px
字体常用灰度等级
20%亮度：标题，正文
40%亮度：二级标题，补充文本
60%亮度：说明文本，摘要
（肉眼容易区别相差20%亮度值的色彩）
三．单位单位大家基本都能烂熟于心了，这里还是拿出来写写吧。
Px——像素
这个单位我们不陌生，它是图像的基本单位，也是最小单位。但要记住，它是相对单位，尺寸可大可小。
Pt——点
iOS系统规定的物理绝对单位，大概是1pt=0.16毫米，它的大小是固定的，可以用量尺测量。
那为什么iOS系统要发明这么一个单位出来呢？因为px是相对单位，即大小是根据显示屏变化的，为了保证不同屏幕尺寸手机上的组件物理尺寸是一样的，所以只需要保证pt值相同，我们肉眼看到的就是一样大的。那有人就会问，明明小手机比大手机字号小啊，确实，这个问题应该是缩放显示造成的吧。
PPI——像素密度
指屏幕1英寸长度上排列的像素点数量，PPI值越高代表屏幕显示效果越精细。
它的意义是为了区别屏幕显示的清晰程度，可以作为我们买手机的参考值。
需要注意的是163ppi这个数值，因为它是苹果公司规定的普屏像素密度，且此条件下1pt=1px，所以作为设计师，看到326ppi的屏幕时，自然想到1pt=2px，对应@2x素材。
分辨率
分辨率就是手机屏幕长宽上显示的做大像素数量，比如iphone6手机，分辨率时750*1334，表示x方向上最多显示750个像素，y方向上，最多显示1334个像素。分辨率并不能体现屏幕的显示清晰度，但设计师可以利用这个参数作为设计稿的尺寸。
四．色彩我们知道，一个产品颜色最多不能超过三个自定义色相。这三个色相是：主题色，作为软件的标识和识别色彩；邻近色，作为辅助色彩，既可以和主题色有所区别体现层次，又不会显得跳跃；对比色，作为软件的醒目提示，但使用比例要小，起到强调的作用。
一些常用色彩
五．适配适配原理
我们知道市面上苹果手机至少有四五种屏幕密度，那设计和开发不可能兼顾这么多屏幕的，所以苹果公司就发明了一个简单的方法，只需要设计一套图写一套代码，就可以适配所有机型。这个简单的方法是什么呢？
苹果公司发明了定义屏幕密度，也就是自定义的屏幕密度分类，它们是163ppi，326ppi，489ppi，对应的是@1x，@2x，@3x图片素材。这样我们就可以把市面上的苹果手机归类到某一定义屏幕密度下，把图片素材放大缩小就可以了。需要注意的是，定义屏幕密度和实际屏幕密度并不相等，所以会有小的误差，至于为什么苹果手机不按照定义屏幕密度来生产手机呢？原因是屏幕比例，技术，性价比造成的吧，话说只要误差不影响显示，苹果公司愿怎么造就怎么造吧。
程序员如何操作
开发其实并不关心你设计的是多少像素，而是你设计的素材是多少pt的，或者是几倍图，因为开发环境有专门针对定义屏幕密度的素材库文件，你切图给开发，他放到对应的素材库就好了。为了保证显示效果一致，原则上一个文字对应的pt值是固定的，所以无论你按照几倍图设计，换算成pt都是一样的，在标注这一环节，你要么全部标注成pt，要么用px标注，但要告诉开发要除以多少倍数。一句话，开发单位是pt，一套代码搞定。
设计师应该知道什么
你设计的几倍图到底是什么意思，如何和开发沟通。
六．切图先明确你的设计稿是几倍图，比如你设计的是@3x图，那1:1切出的图就是3倍图。
切完图之后，不要忘了规范命名和压缩图片，一定要压缩图片！压缩图片！我推荐智图压缩工具。
标注
标注也是很重要的，没有标注，开发根本不知道你设计的是啥，像素大厨标注就很方便。
七．交互其实交互才是真正考验设计师水平的方面，上面那些规范都是固定不变的知识，看一篇文章就能学到手。但是交互不一样，准确的说，它更像是组件的灵活应用，需要考虑的方面有用户体验，排版布局，功能逻辑。
举个简单的例子，有这样一个需求：六个大分类下有各自的内容，这里我们可以用tab选项卡，也可以用列表或者图标来设计这个功能，也许还有其它更好的解决办法，但到底哪个方法才是最优解呢？所以我们需要根据功能，结合用户体验和产品逻辑，来选择设计样式。
那怎么才能在交互上有所提升呢？首先，我们要了解开发组件库，因为用组件库里现成的样式，开发效率高，交互不会出错；其次，要多搜集组件样式，比如我们想加入一些创意，就可以参考网络资源，修改一些基本样式，这样既可以避免我们脑洞的设计实现不了或者出现逻辑问题，也可以把链接发给开发看，提高沟通效率。
一句话就是，平时要多留意一些组件样式和交互方式，比如常见的搜索，输入框，日历，弹框，开关，按钮，列表，tab，卡片等等。
八．补充对于iphonex的适配，我的解决办法是：按照iphone6 plus设计界面，但是要针对iphonex的屏幕重新布局，因为它的屏幕比例并不是9:16，特别是还有底部横条，按钮不能被横条挡着，影响美观不说，还会造成误操作，我们可以把底部按钮设计到右下角，避开那个横条。这里总结了设计规范包含的方面，这只是一个提纲，每个标题下还包含很多内容，需要大家去完善。完。
番茄设计匠（公众号）
作者：番茄设计匠
