第一部分：資源合集
交互規(guī)范官網(wǎng)原文地址：https://developer.apple.com/ios/human-interface-guidelines/overview/themes/
官方視頻觀看：http://pan.baidu.com/s/1boFZk8B
源文件下載：
PS格式：http://pan.baidu.com/s/1kVtEE6F
Adobe XD 格式：http://pan.baidu.com/s/1bo00asv
Sketch 格式：http://pan.baidu.com/s/1gf8FGUv
源文件應(yīng)該怎么用？看這篇：《進(jìn)階好文！一份超詳細(xì)的「iOS 10 UI KIT」使用手冊（附源文件）》：http://www.uisdc.com/ios-10-uikit-guideline
第二部分：中英文對比交互規(guī)范
iPhone X
原文：iPhone X includes a large, high-resolution, rounded, edge-to-edge display that delivers an immersive, content-rich experience like never before.
iPhone X 擁有一個(gè)寬大的、高分辨率、圓角的、擴(kuò)展到邊緣的屏幕，提供了以前從未有過的沉浸式、內(nèi)容豐富的體驗(yàn)。
屏幕尺寸Screen Size
原文：In portrait orientation, the width of the display on iPhone X matches the width of the 4.7" displays of iPhone 6, iPhone 7, and iPhone 8. The display on iPhone X, however, is 145pt taller than a 4.7" display, resulting in roughly 20% additional vertical space for content.
在縱向方向上，iPhone X 顯示屏的寬度與 iPhone6，iPhone 7 和 iPhone8 的 4.7 英寸的顯示屏寬度相同。然而，iPhone X 上的屏幕比 4.7 英寸顯示屏高 145pt，導(dǎo)致多出了大約 20％的垂直高度。
豎屏尺寸：1125px × 2436px(375pt × 812pt @3x)? ? ? 橫屏尺寸：2436px × 1125px(812pt × 375pt @3x)
原文：Supply high-resolution images for all artwork in your app.iPhone X has a high-resolution display with a scale factor of @3x. For glyphs and other flat, vector artwork, it's best to provide resolution-independent PDFs. For rasterized artwork, provide both @3x and @2x versions of your artwork. SeeImage Size and ResolutionandCustom Icons.
為您的應(yīng)用程序中的所有圖稿提供高分辨率圖像。iPhone X 具有比例因子為 @3x 的高分辨率。對于字形和其他平面的矢量圖形，最好提供與分辨率無關(guān)的 PDF 格式。對于光柵化圖稿，您可以提供 @3x 和 @2x 版本的作品。請參閱 圖像大小和分辨率 和 自定義圖標(biāo)。
布局Layout
原文：When designing for iPhone X, you must ensure that layouts fill the screen and aren't obscured by the device's rounded corners, sensor housing, or the indicator for accessing the Home screen.
在 iPhone X 中設(shè)計(jì)時(shí)，您必須確保布局填滿屏幕，并且不會(huì)被設(shè)備的圓角、傳感器外殼或用于訪問主屏幕的指示燈遮蔽。
原文：Most apps that use standard, system-provided UI elements like navigation bars, tables, and collections automatically adapt to the device's new form factor. Background materials extend to the edges of the display and UI elements are appropriately inset and positioned.
大多數(shù)使用標(biāo)準(zhǔn)系統(tǒng)提供的 UI 元素（如導(dǎo)航欄、表格和集合）的應(yīng)用程序會(huì)自動(dòng)適應(yīng)設(shè)備的新外形。背景材料延伸到屏幕的邊緣，并且 UI 元件被適當(dāng)?shù)夭迦牒投ㄎ弧?/p>
原文：For apps with custom layouts, supporting iPhone X should also be relatively easy, especially if your app uses Auto Layout and adheres to safe area and margin layout guides.
Preview your app on iPhone X.You can use Simulator (included with Xcode) to preview your app and check for clipping and other layout issues. Some features, like wide color imagery, are best previewed on actual devices.
Provide a full-screen experience.Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like tables and collections, continue all the way to the bottom.
對于具有自定義布局的應(yīng)用程序，支持 iPhone X 也應(yīng)該比較容易，特別是如果您的應(yīng)用程序使用 Auto Layout 并遵守安全區(qū)域和邊距布局指南。
在 iPhone X 上預(yù)覽您的應(yīng)用程序。您可以使用 Simulator（附帶 Xcode）來預(yù)覽應(yīng)用程序，并檢查剪輯和其他布局問題。如寬彩色圖像這樣的屬性，最好在設(shè)備上預(yù)覽。
提供全屏體驗(yàn)。確保背景延伸到屏幕的邊緣，并且垂直可滾動(dòng)的布局（如表格和集合）一直延續(xù)到底部。
原文：Inset essential content to prevent clipping.In general, content should be centered and symmetrically inset so it looks great in any orientation and isn't clipped by corners or the device's sensor housing, or obscured by the indicator for accessing the Home screen. For best results, use standard, system-provided interface elements and Auto Layout to construct your interface. All apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.
Be mindful of the status bar height.The status bar is taller on iPhone X than on other iPhones. If your app assumes a fixed status bar height for positioning content below the status bar, you must update your app to dynamically position content based on the user's device. Note that the status bar on iPhone X doesn't change height when background tasks like voice recording and location tracking are active.
If your app currently hides the status bar, reconsider that decision on iPhone X.The display height on iPhone provides more vertical space for content than the displays of 4.7" iPhones, and the status bar occupies an area of the screen your app probably won't fully utilize. The status bar also displays information people find useful. It should only be hidden in exchange for added value.
插入必要內(nèi)容以防止裁剪。一般來說，內(nèi)容應(yīng)該是居中對稱的，所以它在任何方向看起來都很棒，不會(huì)被角落或設(shè)備的傳感器外殼裁剪，或被訪問主屏幕的指示器遮擋。 為獲得最佳效果，請使用標(biāo)準(zhǔn)的系統(tǒng)提供的界面元素和 Auto Layout 構(gòu)建您的界面。所有應(yīng)用程序都應(yīng)遵循 UIKit 定義的安全區(qū)域和布局邊距，這些區(qū)域可以根據(jù)設(shè)備和上下文進(jìn)行適當(dāng)?shù)奶畛?。安全區(qū)域還可以防止內(nèi)容覆蓋狀態(tài)欄、導(dǎo)航欄、工具欄和標(biāo)簽欄。
注意狀態(tài)欄的高度。狀態(tài)欄在 iPhone X 上比在其他 iPhone 上更高。如果您的應(yīng)用程序的固定狀態(tài)欄高度在狀態(tài)欄的下方，則您必須更新您的應(yīng)用程序，才能根據(jù)用戶的設(shè)備動(dòng)態(tài)定位內(nèi)容。請注意，當(dāng)背景任務(wù)（如錄音和位置跟蹤）處于活動(dòng)狀態(tài)時(shí)，iPhoneX 上的狀態(tài)欄不會(huì)改變高度。
如果您的應(yīng)用程序目前隱藏狀態(tài)欄，請重新考慮 iPhone X 上的決定。iPhone 上的顯示高度為 4.7 英寸，iPhone 的顯示屏提供了更多的垂直空間內(nèi)容，狀態(tài)欄占據(jù)了您應(yīng)用程序本可能贏得的屏幕區(qū)域，狀態(tài)欄還顯示了人們發(fā)現(xiàn)的有用的信息，只有在交換附加值時(shí)候才能被隱藏。
原文：Be mindful of aspect ratio differences when reusing existing artwork.iPhone X has a different aspect ratio than 4.7" iPhones. As a result, full-screen 4.7" iPhone artwork appears cropped or letterboxed when displayed full-screen on iPhone X. Likewise, full-screen iPhone X artwork appears cropped or pillarboxed when displayed full-screen on a 4.7" iPhone. Make sure that important visual content remains in view on both display sizes.
Avoid explicitly placing interactive controls at the very bottom of the screen and in corners.People use swipe gestures at the bottom edge of the display to access the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area. The far corners of the screen can be difficult areas for people to reach comfortably.
Don't mask or call special attention to key display features.Don't attempt to hide the device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don't use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either.
Allow auto-hiding of the indicator for accessing the Home screen sparingly.When auto-hiding is enabled, the indicator fades out if the user hasn't touched the screen for a few seconds. It reappears when the user touches the screen again. This behavior should be enabled only for passive viewing experiences like playing videos or photo slideshows.
在重復(fù)使用現(xiàn)有圖稿時(shí)，請注意長寬比差異。iPhone X 具有不同于 4.7 英寸 iPhone 的長寬比，因此，全屏 4.7 英寸 iPhone 圖形在 iPhone X 上全屏顯示時(shí)出現(xiàn)裁剪或 letterboxed。同樣，全屏 iPhone X 圖稿在顯示時(shí)被裁剪或被添加黑邊。 全屏顯示在 4.7 英寸 iPhone 上，確保重要的視覺內(nèi)容保持在兩種顯示尺寸上。
避免將交互式控件放置在屏幕最底部和角落里。人們使用顯示屏底部的滑動(dòng)手勢訪問主屏幕和應(yīng)用程序切換器，這些手勢可能會(huì)取消您在此區(qū)域中實(shí)現(xiàn)的自定義手勢。屏幕的兩個(gè)角落很難讓人觸及。
不要遮擋或突出顯示關(guān)鍵的顯示特性。請勿嘗試隱藏設(shè)備的圓角、傳感器外殼或通過在屏幕頂部和底部放置黑色條來指示主屏幕的指示器。不要使用像括號、邊框、形狀或教學(xué)文字等視覺裝飾來讓人注意這些區(qū)域。
允許自動(dòng)隱藏虛擬 Home 鍵，以便輕松訪問主屏幕。當(dāng)啟用自動(dòng)隱藏時(shí)，如果用戶沒有觸摸屏幕幾秒鐘，Home 鍵將自動(dòng)隱藏。當(dāng)用戶再次觸摸屏幕時(shí)，它會(huì)重新出現(xiàn)。這種行為應(yīng)該只能用于被動(dòng)觀看體驗(yàn)，如播放視頻或幻燈片。請參閱 適應(yīng)性和布局。
顏色Color
原文：The display on iPhone X supports a P3 color space, which can produce richer, more saturated colors than sRGB.
Use wide color to enhance the visual experience.Photos and videos that use wide color are more lifelike, and visual data and status indicators that use wide color are more impactful. SeeColor Management.
iPhone X 上的屏幕支持 P3 色彩空間，可以產(chǎn)生比 sRGB 更豐富，更飽和的顏色。使用多元的顏色來增強(qiáng)視覺體驗(yàn)。 使用寬顏色的照片和視頻更加逼真，使用寬色的視覺數(shù)據(jù)和狀態(tài)指示器更有影響力。 請參閱 顏色管理。
手勢Gestures
原文：The display on iPhone X uses screen-edge gestures to provide access to Home screen, app switcher, Notification Center, and Control Center.
Avoid interfering with systemwide screen-edge gestures. People rely on these gestures to work in every app. In rare cases, immersive apps like games might require custom screen-edge gestures that take priority over the system's gestures—the first swipe invokes the app-specific gesture and a second-swipe invokes the system gesture. This behavior (known asedge protect) should be implemented sparingly, as it makes it harder for people to access the system-level actions. SeeGestures.
iPhone X 上的顯示屏使用屏幕邊緣手勢來訪問主屏幕、應(yīng)用程序切換器、通知中心和控制中心。避免干擾系統(tǒng)范圍的屏幕邊緣手勢。人們依靠這些手勢在每個(gè)應(yīng)用程序中工作。在極少數(shù)情況下，像游戲這樣的沉浸式應(yīng)用程序可能需要自定義的屏幕邊緣手勢，優(yōu)先于系統(tǒng)的手勢 - 第一個(gè)滑動(dòng)會(huì)調(diào)用特定于應(yīng)用的手勢，而第二次滑動(dòng)則會(huì)調(diào)用系統(tǒng)手勢。這種行為（稱為邊緣保護(hù)）應(yīng)該謹(jǐn)慎實(shí)施，因?yàn)樗沟糜脩綦y以訪問系統(tǒng)級的操作。 參閱手勢
附加設(shè)計(jì)注意事項(xiàng)Additional Design Considerations
原文：Reference authentication methods accurately.iPhone X supports Face ID for authentication. If your app integrates with Apple Pay or other system authentication features, don't reference Touch ID on iPhone X. Likewise, make sure your app doesn't refer to Face ID on devices that support Touch ID. SeeAuthentication.
Don't duplicate system-provided keyboard features.On iPhone X, the Emoji/Globe button and Dictation button automatically appear beneath the keyboard—even when using custom keyboards. Your app can't affect these buttons, so avoid causing confusion by repeating them in your keyboard. SeeCustom Keyboards.
準(zhǔn)確的參考認(rèn)證方法。iPhone X 支持 Face ID 進(jìn)行身份驗(yàn)證。 如果您的應(yīng)用程序與 Apple Pay 或其他系統(tǒng)身份驗(yàn)證功能集成，請勿在 iPhoneX 上引用 Touch ID。同樣，請確保您的應(yīng)用程序在支持 Touch ID 的設(shè)備上未引用 Face ID。 請參閱 驗(yàn)證。
在 iPhone X 上不要重復(fù)系統(tǒng)提供的鍵盤功能。即使用自定義鍵盤，Emoji/Globe 按鈕和 Dictation 按鈕也自動(dòng)顯示在鍵盤的下方。您的應(yīng)用程序不能影響這些按鈕，因此避免在鍵盤中重復(fù)這些按鈕造成混亂。 請參閱 自定義鍵盤。
第三部分：iOS 11 新特性What's New in iOS 11
原文：https://developer.apple.com/ios/human-interface-guidelines/overview/whats-new/
翻譯：Fishpaw?
原文：With iOS 11, you can deliver more powerful, user-friendly apps than ever before.
有了 iOS 11，你能夠創(chuàng)作出比以往任何時(shí)候都要強(qiáng)大、對用戶友好的應(yīng)用。
原文：Augmented reality.With Augmented reality, apps can deliver immersive, engaging experiences that seamlessly blend realistic virtual objects with the real world.
AR 增強(qiáng)現(xiàn)實(shí)：利用 AR 增強(qiáng)現(xiàn)實(shí)，可無縫融合虛擬對象與真實(shí)世界，提供浸入感十足的愉悅體驗(yàn)。
原文：Bolder navigation.To improve clarity and context when browsing and searching, apps can implement navigation bars that include large, bold titles.
更重的導(dǎo)航：在瀏覽和搜索時(shí)，使用含更大字號、更粗字重標(biāo)題的導(dǎo)航欄，頁面結(jié)構(gòu)會(huì)更清晰，場景感知會(huì)更強(qiáng)烈。
原文：Clearer icons.Filled-in shapes and thicker stroke weights keep icons minimal, while improving contrast. SeeCustom IconsandSystem Icons.
更簡潔的圖標(biāo)：填充圖形和厚重的筆觸使得圖標(biāo)更小，還能增強(qiáng)對比度。參見自定義圖標(biāo)和系統(tǒng)圖標(biāo)。
原文：Drag and drop.Drag and drop allows people to use a single finger to move selected photos, text, and other content from one location to another—and even between apps on iPad.
拖放操作：僅用一根手指，就能將圖片、文字等內(nèi)容從一個(gè)地方移到另一個(gè)地方。在 iPad 上，甚至能在 App 間拖放。
原文：Face ID and Touch ID.Your app can integrate with the system's biometric security features to offer secure, familiar authentication that people trust.
Face ID 和 Touch ID：可為應(yīng)用集成系統(tǒng)級的生物識別安全特性，以提供人們信任的、安全且熟悉的身份驗(yàn)證。
原文：Near field communication.Apps running on supported devices can wirelessly read data from electronic tags attached to real-world objects.
NFC 近場通信：在支持的設(shè)備上運(yùn)行的 App 能無線讀取實(shí)物上的電子標(biāo)簽的信息。
原文：Safe area layout guides.Adhering to the system's safe area ensures appropriate insetting of content within layouts and prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.
安全區(qū)布局指南：遵循布局指南，確保正確地在安全區(qū)內(nèi)插入內(nèi)容，防止內(nèi)容與狀態(tài)欄、導(dǎo)航欄、工具欄或標(biāo)簽欄重疊。
原文：Typographic changes.Increased text sizes and weights help with readability throughout the system. The system also offers a range of larger type sizes—in addition to standard dynamic type sizes—for users with accessibility needs.
排版發(fā)生變化：更大的字號和更粗的字重有助于整個(gè)系統(tǒng)的可讀性。另外，考慮到對輔助功能有需求的用戶，除了標(biāo)準(zhǔn)的動(dòng)態(tài)字號，系統(tǒng)也提供了一系列更大的字號。
第四部分：交互手勢
1、臉部識別解鎖
沒有 Touch ID，全新 Face ID（面容識別）以后用戶可以刷臉就能解鎖。
2、返回主屏幕的操作
去掉了home鍵，當(dāng)用戶在一個(gè)應(yīng)用內(nèi)部時(shí)，從底部向上輕掃，即可返回主屏幕。
3、激活多任務(wù)操作
當(dāng)用戶需要啟用多任務(wù)時(shí)，只需屏幕向上輕掃并停頓一下，就能激活多任務(wù)界面。
4、激活控制中心
之前打開控制中心的手勢是從上往下拉出，現(xiàn)在則更改為從屏幕的右上角向下輕掃。
5、激活Siri
沒有了實(shí)體的Home鍵，用戶想要激活 Siri，變?yōu)榱碎L按側(cè)邊的實(shí)體鍵。
6、激活A(yù)pple Pay
用戶打開Apple Pay 的式更改為連按兩下側(cè)邊按鍵。
因?yàn)閷?shí)體的Home鍵的取消，交互變化還是有區(qū)別的，設(shè)計(jì)師都要考慮到這個(gè)問題，還有就是以后用戶會(huì)更多的運(yùn)用到了掃屏幕這個(gè)操作，以及側(cè)邊實(shí)體按鍵的組合運(yùn)用，在用戶體驗(yàn)上應(yīng)該考慮到這兩點(diǎn)。
避免干擾到系統(tǒng)級別的屏幕邊緣手勢。人們使用這些手勢來使用所有應(yīng)用，在極少數(shù)情況下，像游戲這樣的沉浸式應(yīng)用程序可能需要自定義的屏幕邊緣手勢。優(yōu)先于系統(tǒng)的手勢：第一次滑動(dòng)會(huì)調(diào)用自定義手勢，而第二次滑動(dòng)則會(huì)調(diào)用系統(tǒng)手勢。這種自定義行為（稱為邊緣保護(hù)）應(yīng)該謹(jǐn)慎使用，因?yàn)樗沟糜脩綦y以訪問系統(tǒng)級的操作。
第五部分：ios11發(fā)布時(shí)值得關(guān)注的設(shè)計(jì)細(xì)節(jié)
圖標(biāo)：從線性改為面形
新版 Store 的圖標(biāo)從線性改為面形，圖標(biāo)也加入了圓角，看起來更加圓滑，同時(shí)和 iOS 10中的 iTunes 相關(guān)應(yīng)用風(fēng)格也統(tǒng)一了。
Icon 顏色比原來的線性淺了一點(diǎn)，這樣做看起來就不會(huì)過重，所以大家在使用面形的圖標(biāo)設(shè)計(jì)時(shí)，顏色要把握好。
卡片式設(shè)計(jì)
在新版的 iOS 11 界面，有不少的地方采用了卡片式/宮格式排列，卡片式的設(shè)計(jì)非常適合圖文排版，并且在手機(jī)端有不錯(cuò)的閱讀體驗(yàn)。
在 Material Design 中也是很重視卡片式設(shè)計(jì)，所以日后可以多考慮使用卡片式風(fēng)格。
大投影
當(dāng)轉(zhuǎn)為卡片式設(shè)計(jì)后，為了提升層級表現(xiàn)，界面也增加了大塊投影，是不是和 Material 風(fēng)格有點(diǎn)像？
小編細(xì)看了下， APP 在 iPad 的封面與手機(jī)端的尺寸不一樣，一個(gè)是橫，一個(gè)是豎（工作量又增加了……）
無處不在的圓角
圓，像曲線一樣，有圓滑、活潑、動(dòng)感、柔和的感覺，更容易讓人親近。親和力有了，吸引用戶就更多了，iOS 的圓角在不同 UI 上使用的圓角大小略有不同，這就是細(xì)節(jié)，看來 iOS 在圓角的運(yùn)用已到了出神入化之境。
Material Design 雖然也存在圓角，但要么圓角太小了，要么就是直角。
而 Windows 的扁平化，就是一塊方形。
第六部分：大V洞見：于iPhone X 無 Home 按鍵，一個(gè)改變、二處優(yōu)勢、三個(gè)挑戰(zhàn)
原文地址：http://mp.weixin.qq.com/s/oqpshL6FkGPoKxx1w8EReA
作者：集創(chuàng)堂創(chuàng)始人，知乎大V 慈思遠(yuǎn)
這是蘋果技術(shù)導(dǎo)向品牌策略的延續(xù)，但是挑戰(zhàn)用戶養(yǎng)成習(xí)慣，挑戰(zhàn)移動(dòng)支付的場景、未帶來明顯的優(yōu)勢效應(yīng)，風(fēng)險(xiǎn)比較大。
先說下 X帶來的變革里優(yōu)勢的場景，取消了 Home 按鈕，提升屏幕占比，這無疑可以讓用戶進(jìn)行AR、電影等場景時(shí)，可以獲取更多的信息。不再受邊上 Home 按鈕帶來的干擾。這可以更加提升產(chǎn)品的娛樂性和沉浸感。
其次關(guān)于產(chǎn)品的效率，沒有拿到手機(jī)，我們還沒法做真實(shí)的對比試驗(yàn)，但是根據(jù)作者對于傳感器和攝像頭識別技術(shù)的經(jīng)驗(yàn)來判斷，靠人臉識別來啟動(dòng)手機(jī)在效率上不一定會(huì)比靠指紋來識別手機(jī)更加快速。
兩個(gè)優(yōu)勢：
?? 在信息的獲取上，屏占比變高，信息的獲取的確提升。
?? 在AR等場景里，這個(gè)產(chǎn)品確實(shí)能發(fā)現(xiàn)更多的作用，增強(qiáng)用戶的沉浸感。
三個(gè)挑戰(zhàn)：
?? 在效率上，臉部識別的交互方式，并未見得比以往指紋識別能帶來更多的效率，甚至有點(diǎn)破壞使用慣性，挑戰(zhàn)以往的習(xí)慣。
?? 在落地環(huán)境里：該產(chǎn)品和目前移動(dòng)支付的安全性有著不小的沖突。有待驗(yàn)證產(chǎn)品的穩(wěn)定性和安全性，并且風(fēng)險(xiǎn)極大。
?? 在干擾場景中，該產(chǎn)品的開啟形態(tài)，并未明顯提升效率，反而會(huì)干擾一些用戶其他的開啟場景。
這是三個(gè)挑戰(zhàn)。
