第一部分：資源合集
交互規(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í)或颊，您必須確保布局填滿屏幕砸紊，并且不會被設(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)用程序會自動適應(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)助泽。確保背景延伸到屏幕的邊緣啰扛，并且垂直可滾動的布局（如表格和集合）一直延續(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)該是居中對稱的，所以它在任何方向看起來都很棒诫睬，不會被角落或設(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è)備動態(tài)定位內(nèi)容。請注意痹雅，當(dāng)背景任務(wù)（如錄音和位置跟蹤）處于活動狀態(tài)時(shí)仰担，iPhoneX 上的狀態(tài)欄不會改變高度。
如果您的應(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)容保持在兩種顯示尺寸上货岭。
避免將交互式控件放置在屏幕最底部和角落里路操。人們使用顯示屏底部的滑動手勢訪問主屏幕和應(yīng)用程序切換器，這些手勢可能會取消您在此區(qū)域中實(shí)現(xiàn)的自定義手勢千贯。屏幕的兩個(gè)角落很難讓人觸及屯仗。
不要遮擋或突出顯示關(guān)鍵的顯示特性。請勿嘗試隱藏設(shè)備的圓角搔谴、傳感器外殼或通過在屏幕頂部和底部放置黑色條來指示主屏幕的指示器魁袜。不要使用像括號、邊框敦第、形狀或教學(xué)文字等視覺裝飾來讓人注意這些區(qū)域峰弹。
允許自動隱藏虛擬 Home 鍵，以便輕松訪問主屏幕芜果。當(dāng)啟用自動隱藏時(shí)鞠呈，如果用戶沒有觸摸屏幕幾秒鐘，Home 鍵將自動隱藏师幕。當(dāng)用戶再次觸摸屏幕時(shí)粟按，它會重新出現(xiàn)。這種行為應(yī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è)滑動會調(diào)用特定于應(yīng)用的手勢安岂，而第二次滑動則會調(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 按鈕也自動顯示在鍵盤的下方。您的應(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)會更清晰啡专，場景感知會更強(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)的動態(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è)問題辜限，還有就是以后用戶會更多的運(yùn)用到了掃屏幕這個(gè)操作，以及側(cè)邊實(shí)體按鍵的組合運(yùn)用严蓖，在用戶體驗(yàn)上應(yīng)該考慮到這兩點(diǎn)薄嫡。
避免干擾到系統(tǒng)級別的屏幕邊緣手勢。人們使用這些手勢來使用所有應(yīng)用颗胡，在極少數(shù)情況下毫深，像游戲這樣的沉浸式應(yīng)用程序可能需要自定義的屏幕邊緣手勢。優(yōu)先于系統(tǒng)的手勢：第一次滑動會調(diào)用自定義手勢毒姨，而第二次滑動則會調(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)，這樣做看起來就不會過重鸠蚪，所以大家在使用面形的圖標(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è)是豎（工作量又增加了……）
無處不在的圓角
圓琳轿，像曲線一樣，有圓滑、活潑崭篡、動感挪哄、柔和的感覺，更容易讓人親近琉闪。親和力有了迹炼，吸引用戶就更多了，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)移動支付的場景、未帶來明顯的優(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)來判斷颗祝，靠人臉識別來啟動手機(jī)在效率上不一定會比靠指紋來識別手機(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)品和目前移動支付的安全性有著不小的沖突栗菜。有待驗(yàn)證產(chǎn)品的穩(wěn)定性和安全性，并且風(fēng)險(xiǎn)極大蹄梢。
?? 在干擾場景中疙筹，該產(chǎn)品的開啟形態(tài)，并未明顯提升效率禁炒，反而會干擾一些用戶其他的開啟場景而咆。
這是三個(gè)挑戰(zhàn)。
