海文国际：iPhone X移动端UI界面设计规则.docx

《海文国际：iPhone X移动端UI界面设计规则.docx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、高考海文国际：iPhoneX移动端UI界面设计规则不论褒贬评价如何，苹果一年一度的发布会依然会在我们的社交圈刷屏。本次苹果的新品神奇地跳过了iPhone9，直接来了一个十周年纪念版的iPhoneX（不是爱疯差哦，是罗马数字10的意思，跟小编一起念：爱疯疼）。大家的目光也略过了iPhone8，将注意力都集中在X身上。除了iPhone9贴吧吧主和Windows9贴吧吧主相约谈人生以外，UI设计师们也很想上天台吹吹风……当你们都在欢快地吐槽它“销魂”的齐X海高考你们有没有考虑过这条小X海给设计师们的工作带来了多大的改变！！万一设计师们没有做好布局，那么你打游戏的时候就会是这样的高考如果你开黑时掏出

2、iPhoneX准备装个逼，结果装备都出不了，你还笑得出来吗？高考哎，不管你赞同这是创新也好，认为是瞎胡闹也罢，苹果爸爸决定的新局势都已经定好了。话不多说，小编带大家看看，这项改动会给我们的设计思路带来哪些需要关注的细节，怎样妥善处理才能设计出美美的界面吧！1谢天谢地！没有4x图大家都知道，之前在做iOS的应用的时候，最常用到的就是2x和3x，这代表着不同的屏幕密度与图片大小之间的适配关系，326左右PPI的iPhone5/iPhone6/iPhone7都使用了2x大小的图片，虽然它们的分辨率有差异，但是最终决定我们用哪种图片素材的，还是要看手机的PPI，也就是密度。在纵向方向上，iPhone

3、X显示屏的宽度与iPhone6，iPhone7和iPhone8的4.7英寸的显示屏宽度相同。然而，iPhoneX上的屏幕比4.7英寸显示屏高145pt，导致多出了大约20％的垂直高度。高考·竖屏尺寸：1125px×2436px(375pt×812pt)·横屏尺寸：2436px×1125px(812pt×375pt)经过小编测算，这台新机PPI达到了458左右，这意味着屏幕密度比Plus的401PPI更大，但是只是多了50多哦，根据苹果的iOS11的规X，我们可以揭晓答案啦，没有四倍图，依然延续3x。3x你画不了吃亏，3x你画不了上当！3x就可以为应用程序中的所有图稿提供高分辨率图像~对于字形

4、和其他平面的矢量图形，最好提供与分辨率无关的PDF格式。而光栅化图稿，可以提供3x和2x版本的作品。不过，整个APP布局还需要再动一动哦。怎么动？小编接着往下说。2老板，我需要一台样机调试布局在设计iPhoneX的界面时，我们还必须确保布局填满屏幕，并且不会被设备的圆角、传感器外壳或被主屏幕的指示灯遮蔽。高考a大部分使用系统提供的标准UI元素（如导航栏）的APP会自动适应iPhoneX（松了口气）。高考左图：4.7英寸iPhone 右图：iPhoneX如果是自定义布局的APP，适配iPhoneX也应该比较容易，只要在设计APP布局的时候遵守了安全区域和边距布局指南。在上架APP之前，同学们最

5、好使用Simulator（Xcode内置）来预览APP，检查是否存在布局问题。但如果是测试功功或色彩校对，最好在实际设备上预览。如果提供全屏体验时，还需要确保背景延伸到显示器的边缘，并且垂直可滚动的布局。高考要注意状态栏的高度哦。iPhoneX的状态栏比在其他iPhone上更高。如果你所设计的APP内容定位在状态栏的下方，则必须更新APP。请注意，当背景任务（如录音和位置跟踪）处于活动状态时，iPhoneX上的状态栏不会改变高度。如图所示，iPhone新机型中大家可以发现，状态栏只剩下半个了。UI设计师小伙伴又要开始忙活了，之前100%宽的状态栏好歹可以显示个提示信息啥的，这下可好，设计又要

6、重新改了。状态栏空间显得很局促，怎么办？大家可以看到，iPhoneX为新的头帘儿设计，而iPhone8与Plus则为正常设计。高考状态栏常态状态栏通话状态顶部返回按钮高考如果你的APP目前隐藏状态栏的话，请重新考虑iPhoneX布局。因为iPhoneX提供了更多的内容垂直空间，可以让用户获得更多有用的信息，比隐藏隐藏价值大。高考在使用图片时，请注意长宽比差异。iPhoneX具有不同于其它iPhone的长宽比，因此，全屏其它iPhone图片在iPhoneX上全屏显示时会出现裁剪。同样，全屏iPhoneX图片在其它iPhone也会出现裁剪，所以请注意两种设备适配。还有要注意不要将交互控件放置在屏

7、幕底部和角落。因为这些区域是用户不好操作的位置，或者操作起来不舒服~高考至于操作起来怎么舒服……嗯，老板，您听见了吗？我们需要真机测试！（重要的话说三遍）3要紧随iOS11的设计新趋势！iPhoneX上的显示器支持P3色彩空间，可以产生比sRGB更丰富，更饱和的颜色。使照片和视频的颜色更加逼真，增强视觉体验，能更清晰全名地展示我们UI设计师精心搭配的色彩~至于图形设计方面，我们可以看到，之前曝光的iOS11应