发布时间：2022-10-3 分类： 电商动态
iPhone X已经发售了一个星期，许多小伙伴已经有了真正的机器。目前，iPhone X没有申请。我相信他们正在加班加点调整。否则，效果真的很糟糕。 11月6日晚上8点30分，Statics还播放了iPhone X的实际操作以及UI设计师在SketchChina Live中需要注意的适应点！但是，一些小伙伴可能看不到加班，没关系，现场评论视频静态已被压制上传完成！可以看到邮票下面的地址。此外，一些小型合作伙伴可能无法观看视频版本。静电还专门组织了本文中文本版的内容。这是非常亲密的吗？
如果你不想观看视频的小朋友，那么适应iPhone X的最快点即将到来。只要掌握了这些要点，公司的APP改编工作绝对不是问题。
如果您不想查看详细分析，可以直接拉到最后查看静电摘要。
分辨率对比
首先，我们来看看iPhone X和其他iPhone之间的比较，以便我们可以设计，看看屏幕密度，iPhone 6/7/8没有逻辑分辨率，但Plus模型和iPhone X都有逻辑分辨率。 。请注意！
机型实际大小对比
不要看iPhone X是一款5.8英寸的屏幕，但真正的感觉比Plus要小得多，而且只比iPhone 7大一点，一个人讨厌像静电这样的大屏幕，没有iPhone X的问题。我妈妈再也不用担心在床上看手机时舔她的脸了！
分辨率产生的设计差异
虽然我们似乎有很多iPhone X，但是没有成长的145pt，差异仍然很大。 iPhone X的物理分辨率是1125X2436，那么双重图片是什么？ 375-812pt，那么看起来屏幕的宽度并没有改变，所以设计师朋友们松了一口气。适应的成本和难度已经大大降低。
但不要担心，我们还没有计算密度。密度是决定手机适应难度的重要指标。你还记得密度计算公式吗？是的，这是以下，PPI（每英寸像素数）是水平方+垂直平方然后生根。
我们看到，在逻辑分辨率下，iPhone X的屏幕密度大于Plus，分别为444和401，但真实密度，iPhone X小于Plus，分别为458和489。这时，我们可以从屏幕密度知道，实际上它们都是@ 3x，这是三位数的数字。因此，从加号到iPhone X，适应的大部分成本将提供给工程师。
设计师要做的-注意安全区域
如果需要在任何移动电话上注意屏幕两侧的安全区域（即，在屏幕两侧留下适当的空白以避免误触摸，您还可以确保视觉效果。特定的空白区域由你的设计草案，Apple和没有具体的规定。）
所以在iPhone X上，我们还需要关注其他两个重要的安全区域，即屏幕顶部和底部的两个内容：上半部分是“刘海”区域，只有一些系统状态和其他内容可以放置，刘海区域需要在设计草案中反映出来。然后屏幕的底部，许多设计师会忽略，是一个虚拟控制栏，它与主页按钮起作用，所以我们不能让内容与本文冲突，所以你会发现标准与应用程序，屏幕底部留有很多空间。接下来，让我们看一下现在已知的适用于世界的应用程序，哪些是正确的，哪些是有问题的？
显然，左边的淘宝有点夸张。中间的微信很合适，最右边的微信也没有适应。
另外，我们也可以在这个截图中知道截图不是刘海的样子。
安全区域的尺寸?
在双图设计模式中，上部状态栏的高度为44pt，下部控制栏的高度至少为34pt。请注意，我说的是加倍设计模式，单位是pt而不是像素。有些学生可能会问，如何转换为像素？毕竟，iPhone X是三重图像，然后乘以3得到实际像素。
现在，大部分适应工作已经完成。实际上，我们只需要根据之前的设计草案进行一些小的改动。这很简单吗？
设计师要做的-修改全屏图片的大小
由于iPhone X长大，之前的全屏缩放图像将在iPhone X上失真，如下图所示，因此开发工程师可能会放大原始图像以填满整个屏幕，如果不是大的话，那么将出现下图第一行中最右边的数字的效果。上下都非常难看。在另一种情况下，您的图片可能被压扁，这是第二行图片。
因此，设计人员应根据iPhone X的分辨率设计一组图片，用于启动界面，启动画面图像和一些全屏浮动提示框。好吧，我们的工作量增加了。
设计师要做的-注意色彩空间
iPhone X的显示屏使用P3色彩空间。与传统的sRGB色彩空间相比，显示的色彩将更丰富，更逼真，因此设计师的老问题是“我为什么要在草图中导出图像””手机的颜色有所不同？答案就在这里。但是，静电感觉我们无法解决这个问题。毕竟，颜色空间跟随显示介质。例如，您的显示器是一个色彩空间，而手机则是另一种类型。因此，忽略了这种不可见的色差。好的。
设计师必须做的事情 - 注意视频的显示方式。你肯定会在这里呕吐这个大爆炸。毕竟，您可以覆盖部分视频内容，但您也可以选择缩小范围。这也是一个好主意。不要放下任何东西。以下是Apple的建议。让我们来看看。
什么？你说国王的杀虫剂是什么样的？来！看下面的图片，但它不太合适。
设计师必须做什么 - 交互式改变iPhone X上的交互变化非常明显，例如通过底部控制栏滑回桌面等等。您可以查看本文开头的视频显示。每个人都会详细介绍静电。简而言之，无论您是否拥有新手机，都必须尽快进行调整。对于人脸识别等黑色技术，静电体验感觉太好了！识别速度和指纹识别具有可比性，更加平滑。像静电这样的汗湿的手真的是一种祝福。
不想看长文?那直接看总结!
1.务必注意iPhone X的安全区域，不要直接扩展设计稿。
2.注意全屏图像和视频的改编
3.在双图下，您可以使用375-812px进行设计。这与iPhone plus兼容。换句话说，三重图像是主流吗？
4.状态栏区域高44pt，下控制栏区域至少高34pt（在双图的情况下）
5.注意交互方式变化的影响。
思考问题的小提示：请注意静电分析的方法。当您遇到新的东西时，例如新的手机，您可以从其分辨率和大小开始，然后计算其屏幕密度，这样您就可以立即了解它的一些设计规则。是否与旧款不同。你对这个问题的思考方式至关重要。您应该尝试从这方面进行分析，例如分析静态文章，而不是仅仅想要最终结果。因为这个过程实际上非常重要，所以设计师也是如此。
