写在前面的废话(总的来说就是第一次用简书，多包涵)：

本着我爱工作的原则，顺便巩固当年背单词的老本，心血来潮第一次翻译了完整的文章。

希望还会有第二篇第三篇和第四篇之后的就再说了长长久久。

如有不妥之处大可指正，大家共同探讨进步。学习是活下去的源泉。

每段中文之后会贴英文原文，方便中英文对比。

最后有英文屠宰场。(为什么要有英文解释单词呢？因为会学到更多，永无止尽直至崩溃)

如有不适，现请移步或者硬着头皮看下去。

祝好运。

另：在图片下面配文，不是原文作者干的

原文作者：Joseph Angelo Todaro

发布时间： 2017年9月27日

原文链接：https://www.invisionapp.com/blog/design-for-iphone-x/

随着Apple这件最前沿设备的发布，开发者和设计师们都磨刀霍霍为iPhone X做起了准备。并不是每件Apple的新设备都需要为其做好充足的准备，但这一件确实需要。

With the announcement of Apple’s most cutting-edge piece of hardware,designers and developers are gearing up to make sure their apps are ready for the iPhone X. Not every new piece of Apple hardware requires preparing for, but this one does.

让我们来看看一些iPhone X独有的细节和关键点，又如何根据他们做设计。

Let’s take a look at a few of the unique specs and features of the iPhone X and how to design for them.

1.运用新的iPhone X画板尺寸

1. Use the new iPhone X artboard size

孩子长高了

在移除了Home键和边框后，Apple在前一代较小的iphone基础上，为iPhone X增加了大约20%的显示屏高度。这20%相当于145pt的设计面积(“pt”是px在非retina显示屏上的单位。一会儿会详细说明)因此，这意味着你在Sketch或者Photoshop里做设计时，画板的尺寸设置应当是375×812.

With the removal of the home button and scalloped shape, Apple increased the display height of the iPhone X approximately 20% over the previous generation “small” iPhones. That 20% increase equals 145 pt of design space (“pt” being pixels in non-retina units. More on that in a moment.) Therefore, designing for iPhone X means creating your artboards in Sketch or Photoshop at a resolution of 375 x 812.

2.创建新的像素密度适配

2. Create assets for the new pixel density

(最好不要)礼貌地问：“不想画两套可以吗？”

新的显示屏不仅变高了，而且分辨率也随着提高了。iPhone X的全新Super Retina Display令人惊叹的2436×1125分辨率，被塞进了一个5.8英寸的屏幕，这使得它拥有了令人发指的458ppi。这对我们来着意味着什么呢？如此高的像素密度意味着，我们需要像Plus系列的iphone一样导出@3x，而不是@2x。

Not only is the new display a bit taller, but it’s also much higher resolution for its size. The iPhone X’s new Super Retina Display has a startling 2436 x 1125 resolution packed into only 5.8 inches making for an eye popping 458 ppi. What does this mean for us? Well, the new extra high pixel density means assets will need to be exported @3x like a plus-sized iPhone rather than @2x.

3.注意显示屏的(刘海)形状

3. Be mindful of the display shape

刘海大王叫我来巡山

新的显示屏不但增高了，它还是圆角的，并且在顶端被拿掉了一块，作为前置摄像头、面部识别器和接收器的位置。这被拿掉的圆弧块将状态栏分成了两部分。为了给屏幕边缘的圆角一个舒服的边界范围，状态栏的垂直高度也加倍了，从22pt变为44pt。好消息是状态栏现在远远偏离的屏幕上的主内容，而且占据了一个不规整的区域，你大可以减少试图去用到他们的机会。正因为这一点，Apple要求大家重新考虑任何关于想要隐藏状态栏的决定。

Apple同时也要求我们设计时，不要在屏幕的不规则(边缘)形状上作遮罩或引起用户额外的注意。比如，不要让你画的带颜色的小条停在状态栏起始的地方(这句不是太理解啥意思)。又比如，不要把状态栏的底色设置为黑色，试图将它假装成一个“正常”形状。Apple强调，我们要的是“全屏幕”体验，使得出血线不收阻挠的达到边缘。

The new display isn’t just taller—it also has rounded corners and a bite taken out of the top to give the front-facing camera, sensors, and receiver a home. That bite creates a scalloped top edge which splits the status bar in two. The vertical height allocated to the status bar has also doubled from 22pt to 44pt to give a comfortable margin from the rounded corners. The good news is that the status bar is now much more out of the way and occupies oddly shaped space that you’ll be less likely to attempt to reclaim. Because of this, Apple asks that you reconsider any past decision to hide the status bar.

Apple also asks that we design in a way that doesn’t mask or bring extra attention to these display irregularities. For example, don’t make the color of your title bar stop where the status bar begins. Also, don’t make the status bar black to disguise the screen as a “normal” shape. Apple asks that we make our experiences “full-screen,” allowing them bleed to the edges uninterrupted.

4.注意新的纵横比

4. Mind the new aspect ratio

总之就是不搭

iPhone X新的纵横比意味着，此前任何被设计为全屏显示在前几代iPhone上的图片都会变得有些奇怪。图片内容会被裁切或者无法显示上下方全屏(撑满高度时，左右会被裁切；撑满宽度时，上下会留出黑条)

同理，当iPhone X的图片被显示在小于4.5寸屏幕设备时，会导致图片内容无法左右或者上下显示全屏(左右两边有黑条或者上下黑条)。从而，你也许想要好好考虑下，是否要为不同的纵横比分开适配。

The new taller (or wider if you’re holding it landscape) aspect ratio of the iPhone X means that any fullscreen artwork previously designed to fit previous generation iPhones could get a little weird. As with most aspect ratio mismatches, content can either end up being cropped or letterboxed.

In the case of iPhone X content being displayed on a shorter 4.5-inch device, content can even wind up pillarboxed(vertically letterboxed). Moving forward, you may want to consider creating separate assets for the different aspect ratios.

总之就是得搞两套

5.避免手势操作干扰

5. Avoid gesture interference

一定会滑错的呀！呀呀呀！

在iPhone X上，有些系统级别的手势需要一些操作空间来弥补实体按键的缺失。没有了物理Home键，你只能依靠屏幕底部的Home提示条来操作。Apple恳请大家：第一，不要把Home提示条隐藏除非万不得已；第二，在添加一些交互元素时要下心，比如底部的按钮，不要太过靠近Home提示条(避免引起误操作)。

如果你的App恰巧是全屏沉浸式的体验，比如一个游戏，需要优先设置一些手势操作，那么第一次操作会唤起App内的行为操作，而第二次操作将会触发系统手势操作。Apple将它成为“边缘保护”，并且建议保守用之为妙。我们都不希望我们的用户做不必要的额外操作。

There are some system-wide gestures that need a little room to breathe on the iPhone X to rectify the lack of hardware buttons. The lack of physical home buy will have your using both expecting and relying on the home indicator at the bottom of the screen. Apple implores us to do a few simple things. First, don’t hide the home indicator unless it’s absolutely necessary. Second, be careful adding interactive elements like buttons too close to the home indicator.

If your app happens to be a full-screen immersive experience like a game that requires custom gesture that take priority, then the first swipe will invoke your app’s behavior and a second swipe invokes the system gesture. Apple calls this “edge protect” and suggests using it sparingly. We don’t want to make extra work for our users.

6.参考正确的授权方式

6. Reference authentication methods properly

喜欢手指放上去震一下的感觉的，请举手！

如果你过去设计的App涉及到任何Touch ID的运用，你也许想要把它换成Face ID。iPhone X删除了指纹扫描器，取而代之的是，通过投射并且分析你脸上超过3万个隐藏扫描点，来创建一个精确的立体脸模型。如果你的设计涉及到Apple Pay或者其他系统级别的解锁屏幕功能，一定要参考一下Face ID。

If you’ve designed an app in the past that makes any mention of Touch ID, you may want to change that to Face ID. The iPhone X omits the fingerprint scanner in favor of projecting and analyzing more than 30,000 invisible dots to create a precise depth map of your face. If your designs make mention of Apple Pay or other system unlock features, just be sure to reference Face ID.

7.利用更加强有力的色彩优势

7. Take advantage of more impactful color

显示不出来有🐦用👆

Apple鼓励设计师和开发者们在为iPhone X创建用户界面时，用Display P3 Color Space(相反于sRGB)，利用它在手机上具有更广色彩显示的优势。这意味着，在Display P3色彩文档中，更加丰富、更加艳丽的适配可以被导出为16bit/每通道的PNG格式，Photoshop能做得到，但Sketch不行。

另一方面需要考虑的是，并不是所有电脑显示器都可以显示Display P3这种超宽色域，这使得我们无法准确的进行设计。2015年秋季款的Retina iMac是第一个拥有超宽色域显示屏的Mac，带有Touch Bar的Macbook Pro也随之拥有这个能力。Apple也建议，为了能够最优并且最精确地在非P3显示屏上展示色彩，我们最好另做一套sRGB的适配。

Apple is encouraging designers and developers to create UI assets for iPhone X with the Display P3 Color Space (as opposed to sRGB) to take advantage of the wide color display on the phone. This means richer, more saturated assets could be exported at 16 bit/channel PNG in the Display P3 color profile, which is made possible by Photoshop but not Sketch.

Another thing to consider is that not every computer display is capable of displaying the extra wide gamut of Display P3 which would make it impossible to accurately design with it. The Late 2015 Retina iMac was the first Mac with a wide gamut display and the MacBook Pro with Touch Bar followed suit. Apple also recommends that for the best and most accurate colors on non-P3 displays, that we serve a separate set of sRGB assets.

好的终于结束语了

只要我们保持关注这些微妙的硬件改动，仍然可以顺畅的为iPhone X做设计。如果这场游戏的名字叫“受限于新屏幕的显示尺寸”和“控制好这个新屏幕”，已经让你觉得棘手，那么就试试去创造一套惊艳世人的Display P3适配色吧。

As long as we all remain cognizant of the subtle hardware changes, it’ll be smooth sailing in designing apps for iPhone X. Constraining to new display dimensions and making the most of new onscreen controls are the name of the game—and if you’re feeling spicy, maybe creating a set of Display P3 assets for out-of-this world color.

英文屠宰场

iPhone X：/ˈaɪˌfəʊn/ /ten/ 请表念成chā，X是罗马数字的10

（罗马数字1-10：Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ、Ⅵ、Ⅶ、Ⅷ、Ⅸ、Ⅹ）

cutting-edge: 前沿

noun

1.the sharp edge of a cutting implement.

2.forefront; lead:

on the cutting edge of computer technology.

scalloped shape：扇形或带扇贝形边缘的形状，文章里泛指了带圆角的屏幕的形状

1.在餐馆里点海鲜常会看到Scallop，口语里一般可以作为贝类的统称

2.点海鲜另一种常见的是Mussel，跟肌肉一样的发音

3.点海鲜还有一种常见的是。。。

noun

1.any of the bivalve(双壳类) mollusks(软体动物) of the genus Argopecten(Pecten) and related genera that swim by rapidly clapping the fluted shell valves together.

2.the adductor muscle of certain species of such mollusks, used as food.

3.one of the shells of such a mollusk,usually having radial ribs and a wavy outer edge.

4.a scallop shell or a dish in which food,especially sea food,is baked and served.

5.Cookery.a thin slice of meat,usually further flattened by pounding with a mallet or other implement.

6.any of a series of curved projections cut along the edge,as of a fabric.

irregularity:不规则，不整齐，非正式

1.中间有个regular，前面加了ir表示否定，后面加了ity表明身份是名词.

1.the quality or state of being irregular.(字典里常出现的废话类型)

2.something irregular.(字典里常出现的废话类型)

3.a breach of rules,customs,etiquette(礼仪),morality,etc.

4.occasional mild constipation(便秘).

disguise：掩饰、伪装、隐瞒、假装

1.想起另一个词ambush:埋伏，Bush就是出了两任美国前总统的那一家子，本意是灌木丛；“灌木丛容易埋伏敌人，前面加个am，就可以记住了”。这是当年XDF的一个帅老师教的。说岔了说岔了。。。

verb(used with object),disguised,disguising.

1. to change the appearance or guise of so as to conceal identity or mislead,as by means of deceptive garb: The king was disguised as a peasant.

2. to conceal or cover up the truth or actual character of by a counterfeit form or appearance; misrepresent: to disguise one's intentions.

letterboxed & pillarboxed：不知道怎么翻译

1.这两个可以比较具象的理解。

2.letterbox本意是寄信的邮筒。在科技和电视界是一个术语，就是画面撑满屏幕宽度，上下都留出黑条，姑且可以记忆为这个样子很像那种老式的绿色邮筒

3.pillarbox就是画面撑满屏幕宽度，左右都留出黑条；是letterbox旋转90°。

终于写完了，从scallop开始我就饿了

下次见，Peace！