Human Interface Guidelines （补）

---

What's New in iOS 11

• Augmented Reality 增强现实
• Bolder navigation
• Clear icons
• Drag and drop
• Face ID and Touch ID
• Near Field Communication 近距离无线通信
• Safe area layout guides
• Typographic changes 增强可读性
• ps：基本延续了iOS 10以来“去UI化”的大方向。

---

iPhone X

Screen Size

pt point，点，印刷行业常用单位，等于1/72英寸；

• iPhone X在水平方向和iPhone6、7、8的设计尺寸是相同的，都是375points，但是在垂直方向上比其他3种机型要高145points，约20%；

  
  landscape dimensions
  portrait dimensions

Layout

• Preview your app on iPhone X.
  如果你的app支持landscape模式，确保它无论向左还是向右翻转时，都有良好的表现；
  Upside-down mode不支持；

• Inset essential content to prevent clipping.
  设计时要考虑到Safe area 和 Margins；

  
  Safe Area & Margin
  safe area

Safe Area：iOS 7 之后苹果引入具体属性来描述不希望被透明的状态栏或者导航栏遮挡的最高位置(status bar, navigation bar, toolbar, tab bar 等)，iOS 11 开始弃用了对应属性， 并且引入了Safe Area这个概念。苹果建议: 不要把 Control 放在 Safe Area 之外的地方；

Home indicator Home键

• Be mindful of the status bar height.
  you must update ur app to dynamically position content based on the user's device.
• Be mindful of aspect ratio differences when reusing existing artwork.
• Don't mask or call special attention to key display features.

Video

• 两种视频full-screen模式：Full-screen viewing mode和Fit-to-screen viewing mode，通俗理解就是以长度尺寸缩放或是以宽度尺寸缩放。常见的4种比例视频：4:3 Video、16:9 Video、2:1 Video和21:9 Video；

Gestures

• Avoid interfering with systemwide screen-edge gestures.
  Dont make it harder for people to access the system-level actions cause of ur specific gesture.

Additional Design Considerations

• Reference authentication methods accurately.
  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.
• Don't duplicate system-provided keyboard features.
  iPhone X 有自己特定的Emoji/Globe key，不要从老版本简单的拷贝设计；
• Make sure your website looks great on the edge-to-edge display of iPhone X.

edge-to-edge display：无边框设计

Reference

Design for iPhone X

status bar 设计
safe area相关1
safe area相关2