寫在前面的廢話(總的來說就是第一次用簡書维蒙，多包涵)：

本著我愛工作的原則，順便鞏固當年背單詞的老本果覆，心血來潮第一次翻譯了完整的文章木西。

希望還會有第二篇第三篇和第四篇之后的就再說了長長久久。

如有不妥之處大可指正随静，大家共同探討進步八千。學習是活下去的源泉。

每段中文之后會貼英文原文燎猛，方便中英文對比恋捆。

最后有英文屠宰場。(為什么要有英文解釋單詞呢重绷？因為會學到更多沸停，永無止盡直至崩潰)

如有不適，現請移步或者硬著頭皮看下去昭卓。

祝好運愤钾。

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

原文作者：Joseph Angelo Todaro

發(fā)布時間： 2017年9月27日

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

隨著Apple這件最前沿設備的發(fā)布候醒，開發(fā)者和設計師們都磨刀霍霍為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獨有的細節(jié)和關鍵點伙菊，又如何根據他們做設計。

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.創(chuàng)建新的像素密度適配

2. Create assets for the new pixel density

(最好不要)禮貌地問：“不想畫兩套可以嗎矩欠？”

新的顯示屏不僅變高了财剖，而且分辨率也隨著提高了悠夯。iPhone X的全新Super Retina Display令人驚嘆的2436×1125分辨率，被塞進了一個5.8英寸的屏幕峰伙，這使得它擁有了令人發(fā)指的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

劉海大王叫我來巡山

新的顯示屏不但增高了匣摘，它還是圓角的，并且在頂端被拿掉了一塊裹刮，作為前置攝像頭音榜、面部識別器和接收器的位置。這被拿掉的圓弧塊將狀態(tài)欄分成了兩部分捧弃。為了給屏幕邊緣的圓角一個舒服的邊界范圍赠叼，狀態(tài)欄的垂直高度也加倍了，從22pt變?yōu)?4pt违霞。好消息是狀態(tài)欄現在遠遠偏離的屏幕上的主內容嘴办，而且占據了一個不規(guī)整的區(qū)域，你大可以減少試圖去用到他們的機會买鸽。正因為這一點涧郊，Apple要求大家重新考慮任何關于想要隱藏狀態(tài)欄的決定。

Apple同時也要求我們設計時眼五，不要在屏幕的不規(guī)則(邊緣)形狀上作遮罩或引起用戶額外的注意妆艘。比如，不要讓你畫的帶顏色的小條停在狀態(tài)欄起始的地方(這句不是太理解啥意思)看幼。又比如批旺，不要把狀態(tài)欄的底色設置為黑色，試圖將它假裝成一個“正乘薪”形狀朱沃。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恰巧是全屏沉浸式的體驗殿怜，比如一個游戲转唉，需要優(yōu)先設置一些手勢操作，那么第一次操作會喚起App內的行為操作赠法，而第二次操作將會觸發(fā)系統手勢操作。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萬個隱藏掃描點块请，來創(chuàng)建一個精確的立體臉模型娜氏。如果你的設計涉及到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.利用更加強有力的色彩優(yōu)勢

7. Take advantage of more impactful color

顯示不出來有??用??

Apple鼓勵設計師和開發(fā)者們在為iPhone X創(chuàng)建用戶界面時贸弥，用Display P3 Color Space(相反于sRGB)，利用它在手機上具有更廣色彩顯示的優(yōu)勢海渊。這意味著绵疲，在Display P3色彩文檔中哲鸳，更加豐富、更加艷麗的適配可以被導出為16bit/每通道的PNG格式盔憨，Photoshop能做得到徙菠，但Sketch不行。

另一方面需要考慮的是郁岩，并不是所有電腦顯示器都可以顯示Display P3這種超寬色域婿奔，這使得我們無法準確的進行設計。2015年秋季款的Retina iMac是第一個擁有超寬色域顯示屏的Mac驯用，帶有Touch Bar的Macbook Pro也隨之擁有這個能力脸秽。Apple也建議儒老，為了能夠最優(yōu)并且最精確地在非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做設計薇正。如果這場游戲的名字叫“受限于新屏幕的顯示尺寸”和“控制好這個新屏幕”，已經讓你覺得棘手囚衔，那么就試試去創(chuàng)造一套驚艷世人的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，跟肌肉一樣的發(fā)音

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:不規(guī)則啰劲，不整齊躏筏，非正式

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！