設計有方|iPhoneX中英文對比交互規范指南+UI組件官方源文件+大V洞見


閱讀本文大約需要20分鐘,多圖長文預警

第一部分:資源合集

交互規范官網原文地址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

源文件應該怎么用?看這篇:《進階好文!一份超詳細的「iOS 10 UI KIT」使用手冊(附源文件)》:http://www.uisdc.com/ios-10-uikit-guideline

第二部分:中英文對比交互規范

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 擁有一個寬大的、高分辨率、圓角的、擴展到邊緣的屏幕,提供了以前從未有過的沉浸式、內容豐富的體驗。

屏幕尺寸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,導致多出了大約 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.

為您的應用程序中的所有圖稿提供高分辨率圖像。iPhone X 具有比例因子為 @3x 的高分辨率。對于字形和其他平面的矢量圖形,最好提供與分辨率無關的 PDF 格式。對于光柵化圖稿,您可以提供 @3x 和 @2x 版本的作品。請參閱 圖像大小和分辨率 和 自定義圖標。

布局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 中設計時,您必須確保布局填滿屏幕,并且不會被設備的圓角、傳感器外殼或用于訪問主屏幕的指示燈遮蔽。

原文: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.

大多數使用標準系統提供的 UI 元素(如導航欄、表格和集合)的應用程序會自動適應設備的新外形。背景材料延伸到屏幕的邊緣,并且 UI 元件被適當地插入和定位。


原文: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.

對于具有自定義布局的應用程序,支持 iPhone X 也應該比較容易,特別是如果您的應用程序使用 Auto Layout 并遵守安全區域和邊距布局指南。

在 iPhone X 上預覽您的應用程序。您可以使用 Simulator(附帶 Xcode)來預覽應用程序,并檢查剪輯和其他布局問題。如寬彩色圖像這樣的屬性,最好在設備上預覽。

提供全屏體驗。確保背景延伸到屏幕的邊緣,并且垂直可滾動的布局(如表格和集合)一直延續到底部。

原文: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.

插入必要內容以防止裁剪。一般來說,內容應該是居中對稱的,所以它在任何方向看起來都很棒,不會被角落或設備的傳感器外殼裁剪,或被訪問主屏幕的指示器遮擋。 為獲得最佳效果,請使用標準的系統提供的界面元素和 Auto Layout 構建您的界面。所有應用程序都應遵循 UIKit 定義的安全區域和布局邊距,這些區域可以根據設備和上下文進行適當的填充。安全區域還可以防止內容覆蓋狀態欄、導航欄、工具欄和標簽欄。

注意狀態欄的高度。狀態欄在 iPhone X 上比在其他 iPhone 上更高。如果您的應用程序的固定狀態欄高度在狀態欄的下方,則您必須更新您的應用程序,才能根據用戶的設備動態定位內容。請注意,當背景任務(如錄音和位置跟蹤)處于活動狀態時,iPhoneX 上的狀態欄不會改變高度。

如果您的應用程序目前隱藏狀態欄,請重新考慮 iPhone X 上的決定。iPhone 上的顯示高度為 4.7 英寸,iPhone 的顯示屏提供了更多的垂直空間內容,狀態欄占據了您應用程序本可能贏得的屏幕區域,狀態欄還顯示了人們發現的有用的信息,只有在交換附加值時候才能被隱藏。

原文: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.

SeeAdaptivity and Layout.

在重復使用現有圖稿時,請注意長寬比差異。iPhone X 具有不同于 4.7 英寸 iPhone 的長寬比,因此,全屏 4.7 英寸 iPhone 圖形在 iPhone X 上全屏顯示時出現裁剪或 letterboxed。同樣,全屏 iPhone X 圖稿在顯示時被裁剪或被添加黑邊。 全屏顯示在 4.7 英寸 iPhone 上,確保重要的視覺內容保持在兩種顯示尺寸上。

避免將交互式控件放置在屏幕最底部和角落里。人們使用顯示屏底部的滑動手勢訪問主屏幕和應用程序切換器,這些手勢可能會取消您在此區域中實現的自定義手勢。屏幕的兩個角落很難讓人觸及。

不要遮擋或突出顯示關鍵的顯示特性。請勿嘗試隱藏設備的圓角、傳感器外殼或通過在屏幕頂部和底部放置黑色條來指示主屏幕的指示器。不要使用像括號、邊框、形狀或教學文字等視覺裝飾來讓人注意這些區域。

允許自動隱藏虛擬 Home 鍵,以便輕松訪問主屏幕。當啟用自動隱藏時,如果用戶沒有觸摸屏幕幾秒鐘,Home 鍵將自動隱藏。當用戶再次觸摸屏幕時,它會重新出現。這種行為應該只能用于被動觀看體驗,如播放視頻或幻燈片。請參閱 適應性和布局。

顏色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 色彩空間,可以產生比 sRGB 更豐富,更飽和的顏色。使用多元的顏色來增強視覺體驗。 使用寬顏色的照片和視頻更加逼真,使用寬色的視覺數據和狀態指示器更有影響力。 請參閱 顏色管理。

手勢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 上的顯示屏使用屏幕邊緣手勢來訪問主屏幕、應用程序切換器、通知中心和控制中心。避免干擾系統范圍的屏幕邊緣手勢。人們依靠這些手勢在每個應用程序中工作。在極少數情況下,像游戲這樣的沉浸式應用程序可能需要自定義的屏幕邊緣手勢,優先于系統的手勢 - 第一個滑動會調用特定于應用的手勢,而第二次滑動則會調用系統手勢。這種行為(稱為邊緣保護)應該謹慎實施,因為它使得用戶難以訪問系統級的操作。 參閱手勢

附加設計注意事項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.

準確的參考認證方法。iPhone X 支持 Face ID 進行身份驗證。 如果您的應用程序與 Apple Pay 或其他系統身份驗證功能集成,請勿在 iPhoneX 上引用 Touch ID。同樣,請確保您的應用程序在支持 Touch ID 的設備上未引用 Face ID。 請參閱 驗證。

在 iPhone X 上不要重復系統提供的鍵盤功能。即使用自定義鍵盤,Emoji/Globe 按鈕和 Dictation 按鈕也自動顯示在鍵盤的下方。您的應用程序不能影響這些按鈕,因此避免在鍵盤中重復這些按鈕造成混亂。 請參閱 自定義鍵盤。

第三部分: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,你能夠創作出比以往任何時候都要強大、對用戶友好的應用。

原文:Augmented reality.With Augmented reality, apps can deliver immersive, engaging experiences that seamlessly blend realistic virtual objects with the real world.

AR 增強現實利用 AR 增強現實,可無縫融合虛擬對象與真實世界,提供浸入感十足的愉悅體驗。





原文:Bolder navigation.To improve clarity and context when browsing and searching, apps can implement navigation bars that include large, bold titles.

更重的導航:在瀏覽和搜索時,使用含更大字號、更粗字重標題的導航欄,頁面結構會更清晰,場景感知會更強烈。





原文:Clearer icons.Filled-in shapes and thicker stroke weights keep icons minimal, while improving contrast. SeeCustom IconsandSystem Icons.

更簡潔的圖標:填充圖形和厚重的筆觸使得圖標更小,還能增強對比度。參見自定義圖標和系統圖標。


Custom Icons


Custom Icon Sizes


原文: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.

拖放操作僅用一根手指,就能將圖片、文字等內容從一個地方移到另一個地方。在 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:可為應用集成系統級的生物識別安全特性,以提供人們信任的、安全且熟悉的身份驗證。




原文:Near field communication.Apps running on supported devices can wirelessly read data from electronic tags attached to real-world objects.

NFC 近場通信:在支持的設備上運行的 App 能無線讀取實物上的電子標簽的信息。



原文: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.

安全區布局指南:遵循布局指南,確保正確地在安全區內插入內容,防止內容與狀態欄、導航欄、工具欄或標簽欄重疊。



原文: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.

排版發生變化:更大的字號和更粗的字重有助于整個系統的可讀性。另外,考慮到對輔助功能有需求的用戶,除了標準的動態字號,系統也提供了一系列更大的字號。


第四部分:交互手勢

1、臉部識別解鎖

沒有 Touch ID,全新 Face ID(面容識別)以后用戶可以刷臉就能解鎖。

2、返回主屏幕的操作

去掉了home鍵,當用戶在一個應用內部時,從底部向上輕掃,即可返回主屏幕。

3、激活多任務操作

當用戶需要啟用多任務時,只需屏幕向上輕掃并停頓一下,就能激活多任務界面。

4、激活控制中心

之前打開控制中心的手勢是從上往下拉出,現在則更改為從屏幕的右上角向下輕掃。

5、激活Siri

沒有了實體的Home鍵,用戶想要激活 Siri,變為了長按側邊的實體鍵。

6、激活Apple Pay

用戶打開Apple Pay 的式更改為連按兩下側邊按鍵。

因為實體的Home鍵的取消,交互變化還是有區別的,設計師都要考慮到這個問題,還有就是以后用戶會更多的運用到了掃屏幕這個操作,以及側邊實體按鍵的組合運用,在用戶體驗上應該考慮到這兩點。

避免干擾到系統級別的屏幕邊緣手勢。人們使用這些手勢來使用所有應用,在極少數情況下,像游戲這樣的沉浸式應用程序可能需要自定義的屏幕邊緣手勢。優先于系統的手勢:第一次滑動會調用自定義手勢,而第二次滑動則會調用系統手勢。這種自定義行為(稱為邊緣保護)應該謹慎使用,因為它使得用戶難以訪問系統級的操作。

第五部分:ios11發布時值得關注的設計細節

圖標:從線性改為面形

新版 Store 的圖標從線性改為面形,圖標也加入了圓角,看起來更加圓滑,同時和 iOS 10中的 iTunes 相關應用風格也統一了。

Icon 顏色比原來的線性淺了一點,這樣做看起來就不會過重,所以大家在使用面形的圖標設計時,顏色要把握好。

? iOS 10 App Store


? iOS 11 App Store


卡片式設計

在新版的 iOS 11 界面,有不少的地方采用了卡片式/宮格式排列,卡片式的設計非常適合圖文排版,并且在手機端有不錯的閱讀體驗。

在 Material Design 中也是很重視卡片式設計,所以日后可以多考慮使用卡片式風格。

大投影

當轉為卡片式設計后,為了提升層級表現,界面也增加了大塊投影,是不是和 Material 風格有點像?

小編細看了下, APP 在 iPad 的封面與手機端的尺寸不一樣,一個是橫,一個是豎(工作量又增加了……)

無處不在的圓角

圓,像曲線一樣,有圓滑、活潑、動感、柔和的感覺,更容易讓人親近。親和力有了,吸引用戶就更多了,iOS 的圓角在不同 UI 上使用的圓角大小略有不同,這就是細節,看來 iOS 在圓角的運用已到了出神入化之境。

Material Design 雖然也存在圓角,但要么圓角太小了,要么就是直角。

而 Windows 的扁平化,就是一塊方形。

想做出讓人親近的界面?學會用「圓」也許是很大的秘訣。


第六部分:大V洞見:于iPhone X 無 Home 按鍵,一個改變、二處優勢、三個挑戰

原文地址:http://mp.weixin.qq.com/s/oqpshL6FkGPoKxx1w8EReA

作者:集創堂創始人,知乎大V 慈思遠

這是蘋果技術導向品牌策略的延續,但是挑戰用戶養成習慣,挑戰移動支付的場景、未帶來明顯的優勢效應,風險比較大

先說下 X帶來的變革里優勢的場景,取消了 Home 按鈕,提升屏幕占比,這無疑可以讓用戶進行AR、電影等場景時,可以獲取更多的信息。不再受邊上 Home 按鈕帶來的干擾。這可以更加提升產品的娛樂性和沉浸感。

其次關于產品的效率,沒有拿到手機,我們還沒法做真實的對比試驗,但是根據作者對于傳感器和攝像頭識別技術的經驗來判斷,靠人臉識別來啟動手機在效率上不一定會比靠指紋來識別手機更加快速。

兩個優勢:

?? 在信息的獲取上,屏占比變高,信息的獲取的確提升。

?? 在AR等場景里,這個產品確實能發現更多的作用,增強用戶的沉浸感。

三個挑戰:

?? 在效率上,臉部識別的交互方式,并未見得比以往指紋識別能帶來更多的效率,甚至有點破壞使用慣性,挑戰以往的習慣。

?? 在落地環境里:該產品和目前移動支付的安全性有著不小的沖突。有待驗證產品的穩定性和安全性,并且風險極大。

?? 在干擾場景中,該產品的開啟形態,并未明顯提升效率,反而會干擾一些用戶其他的開啟場景。

這是三個挑戰。


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,001評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,786評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,986評論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,204評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,964評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,354評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,410評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,554評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,106評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,918評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,093評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,648評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,342評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,755評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,009評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,839評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,107評論 2 375

推薦閱讀更多精彩內容

  • PLEASE READ THE FOLLOWING APPLE DEVELOPER PROGRAM LICENSE...
    念念不忘的閱讀 13,511評論 5 6
  • ~1~ 前幾天搬進了新的宿舍,宿舍是新修的,所以看起來特別的干凈整潔,本來自己東西就不多,所以都收拾好之后顯得特別...
    木子不愛糖閱讀 482評論 0 2
  • 今天第一次用簡書說,試一下。 今天心情不錯,出去轉了一圈兒,遇到一個同學,在遼寧家和大爺,他媽聊了一會兒。下午打算...
    泓名閱讀 143評論 0 0
  • 中國文化中最有名的IP有兩個: 一個是孫悟空,一個是關二爺 盡管和那只一會兒和白晶晶談戀愛,一會兒想要暴打師傅的猴...
    藥山閱讀 1,868評論 0 51
  • [TOC] go程序主要包含下面幾個部分:- 包聲明:package main- 引入包 :import "fmt...
    Eric木子閱讀 646評論 0 0