iphonex后台样式（X移动端界面设计规则是怎样的）

iphonex后台样式（X移动端界面设计规则是怎样的）1谢天谢地！没有@4x图哎，不管你赞同这是创新也好，认为是瞎胡闹也罢，苹果爸爸决定的新局势都已经定好了。话不多说，小编带大家看看，这项改动会给我们的设计思路带来哪些需要关注的细节，怎样妥善处理才能设计出美美的界面吧！当你们都在欢快地吐槽它“销魂”的齐刘海你们有没有考虑过这条小刘海给设计师们的工作带来了多大的改变！！如果你开黑时掏出iPhone X准备装个逼，结果装备都出不了，你还笑得出来吗？

不论褒贬评价如何，苹果一年一度的发布会依然会在我们的社交圈刷屏。

本次苹果的新品神奇地跳过了iPhone 9，直接来了一个十周年纪念版的iPhone X（不是爱疯差哦，是罗马数字10的意思，跟小编一起念：爱疯疼）。大家的目光也略过了iPhone 8，将注意力都集中在X身上。

GIF

除了iPhone 9贴吧吧主和Windows 9贴吧吧主相约谈人生以外，UI设计师们也很想上天台吹吹风……

当你们都在欢快地吐槽它“销魂”的齐刘海

你们有没有考虑过这条小刘海给设计师们的工作带来了多大的改变！！

如果你开黑时掏出iPhone X准备装个逼，结果装备都出不了，你还笑得出来吗？

哎，不管你赞同这是创新也好，认为是瞎胡闹也罢，苹果爸爸决定的新局势都已经定好了。话不多说，小编带大家看看，这项改动会给我们的设计思路带来哪些需要关注的细节，怎样妥善处理才能设计出美美的界面吧！

1谢天谢地！没有@4x图

大家都知道，之前在做iOS的应用的时候，最常用到的就是@2x和@3x，这代表着不同的屏幕密度与图片大小之间的适配关系，326左右PPI的iPhone5/iPhone6/iPhone7 都使用了@2x大小的图片，虽然它们的分辨率有差异，但是最终决定我们用哪种图片素材的，还是要看手机的PPI，也就是密度。

在纵向方向上，iPhone X 显示屏的宽度与 iPhone6，iPhone 7 和 iPhone8 的 4.7 英寸的显示屏宽度相同。然而，iPhone X 上的屏幕比 4.7 英寸显示屏高 145pt，导致多出了大约 20％的垂直高度。

• 竖屏尺寸：1125px × 2436px(375pt × 812pt)

• 横屏尺寸：2436px × 1125px(812pt × 375pt)

经过小编测算，这台新机PPI达到了458左右，这意味着屏幕密度比Plus的401PPI更大，但是只是多了50多哦，根据苹果的iOS11的规范，我们可以揭晓答案啦，没有四倍图，依然延续@3x。

@3x你画不了吃亏，@3x你画不了上当！@3x就可以为应用程序中的所有图稿提供高分辨率图像~

对于字形和其他平面的矢量图形，最好提供与分辨率无关的 PDF 格式。而光栅化图稿，可以提供@3x和@2x版本的作品。

不过，整个APP布局还需要再动一动哦。怎么动？小编接着往下说。

2老板，我需要一台样机调试布局

在设计iPhone X的界面时，我们还必须确保布局填满屏幕，并且不会被设备的圆角、传感器外壳或被主屏幕的指示灯遮蔽。

大部分使用系统提供的标准UI元素（如导航栏）的APP会自动适应iPhone X（松了口气）。

左图：4.7英寸iPhone 右图：iPhone X

如果是自定义布局的APP，适配iPhone X也应该比较容易，只要在设计APP布局的时候遵守了安全区域和边距布局指南。在上架APP之前，同学们最好使用Simulator（Xcode内置）来预览APP，检查是否存在布局问题。但如果是测试功功或色彩校对，最好在实际设备上预览。

“老板，我们可不是随便说着玩的，绝对是本着对产品认真负责的态度才提新机的需求！”

如果提供全屏体验时，还需要确保背景延伸到显示器的边缘，并且垂直可滚动的布局。

要注意状态栏的高度哦。iPhone X的状态栏比在其他iPhone上更高。如果你所设计的APP内容定位在状态栏的下方，则必须更新APP。

请注意，当背景任务（如录音和位置跟踪）处于活动状态时，iPhone X上的状态栏不会改变高度。

如图所示，iPhone新机型中大家可以发现，状态栏只剩下半个了。UI设计师小伙伴又要开始忙活了，之前100%宽的状态栏好歹可以显示个提示信息啥的，这下可好，设计又要重新改了。状态栏空间显得很局促，怎么办？

大家可以看到，iPhone X为新的头帘儿设计，而iPhone8与Plus则为正常设计。

状态栏常态

状态栏通话状态

顶部返回按钮

如果你的APP目前隐藏状态栏的话，请重新考虑iPhone X布局。因为iPhone X提供了更多的内容垂直空间，可以让用户获得更多有用的信息，比隐藏隐藏价值大。

在使用图片时，请注意长宽比差异。iPhone X具有不同于其它iPhone的长宽比，因此，全屏其它iPhone图片在iPhone X上全屏显示时会出现裁剪。同样，全屏iPhone X图片在其它iPhone也会出现裁剪，所以请注意两种设备适配。

还有要注意不要将交互控件放置在屏幕底部和角落。因为这些区域是用户不好操作的位置，或者操作起来不舒服~

至于操作起来怎么舒服……嗯，老板，您听见了吗？我们需要真机测试！（重要的话说三遍）

3要紧随iOS11的设计新趋势！

iPhone X上的显示器支持P3色彩空间，可以产生比sRGB更丰富，更饱和的颜色。使照片和视频的颜色更加逼真，增强视觉体验，能更清晰全名地展示我们UI设计师精心搭配的色彩~

至于图形设计方面，我们可以看到，之前曝光的iOS11应用商店图像中透出了苹果对于“圆”的设计倾向。

圆，像曲线一样，有圆滑、活泼、动感、柔和的感觉，更容易让人亲近。亲和力有了，吸引用户就更多了，iOS 的圆角在不同 UI 上使用的圆角大小略有不同，这就是细节，看来 iOS 在圆角的运用已到了出神入化之境。

Material Design 虽然也存在圆角，但要么圆角太小了，要么就是直角。

而 Windows 的扁平化，就是一块方形。

新版 Store 的图标从线性改为面形，图标也加入了圆角，看起来更加圆滑，同时和 iOS 10中的 iTunes 相关应用风格也统一了。

Icon 颜色比原来的线性浅了一点，这样做看起来就不会过重，所以大家在使用面形的图标设计时，颜色要把握好。

△ iOS 10 App Store

△ iOS 11 App Store

在新版的 iOS 11 界面，有不少的地方采用了卡片式/宫格式排列，卡片式的设计非常适合图文排版，并且在手机端有不错的阅读体验。

在 Material Design 中也是很重视卡片式设计，所以日后可以多考虑使用卡片式风格哦。

当转为卡片式设计后，为了提升层级表现，界面也增加了大块投影，是不是和 Material 风格有点像？

小编细看了下， APP 在 iPad 的封面与手机端的尺寸不一样，一个是横，一个是竖，加上销魂的小刘海，额，工作量又成吨地增加了……

小编的碎碎念

大体上要注意的地方就是这些了，小编说得比较口头化一些，如果你有不清楚的细节，可以查看苹果官方给出的UI设计指南：

https://developer.apple.com/design/resources/#ios-apps

还有什么不懂的！我们海文国际的老师可以通过更丰富的案例来指导你的设计思路。

最后一个小小的“图槽”：苹果啊苹果，X猫给了你多少广告费，我X东出两倍！