|
静电说： iPhone X 作为一台全面屏的设备，和上一代的苹果手机还是有着很大的区别，这些区别不仅体现在材质和工业设计上，在界面交互上也有一些差异。iPhone X额头上的“刘海”，尽管这块布满了黑科技传感器的区域肯定有存在的理由，比如Face ID等，但是其将影响许多原来的UI界面元素。 再加上 iPhone X 去掉了最为标志性的 Home 键，这两点直接导致的就是界面的布局和交互会发生相应的变化。 取消了home键，接下来我们来看看在 iPhone X 上都有哪些交互变化： 注：下文中的「iPhone 7」指搭载 iOS 10 的 iPhone 7，「iPhone X」指搭载 iOS 11 的 iPhone X。 Home 键 iPhone 7：为实体 Home 键。 iPhone X：官方称呼为 Home Indicator，形状为一根横线，在主屏幕时是自动隐藏的。在使用软件时，例如观看视频，如果手指长时间不触碰屏幕也会自动隐藏。 △ 屏幕底部的横线（Home Indicator） 主屏幕 iPhone 7：按下 Home 键。 iPhone X：从底部向上轻扫一下，即可返回主屏幕。 多任务 iPhone 7：双击 Home 键； iOS 10 中可以在屏幕边缘使用 3D Touch 按压进入多任务列表。 iPhone X：从底部向上轻扫并停顿一下，就能激活多任务界面。 快速切换回上一个应用 iPhone 7：重按（3D Touch）屏幕左边缘，然后向右滑动，就能切换回上一个应用。 iPhone X：有两种方式：从屏幕底部向上轻扫并停顿一下，然后向右滑动，就能切换回上一个应用。 △ 图 / iMore 或者直接在屏幕底部的小横线（Home Indicator）上左右滑动，也能快速切换应用。 △ 图 / Apple 解锁屏幕 iPhone 7：抬起手机点亮屏幕，按下 Home 键并同时完成 Touch ID 解锁，识别后自动进入主屏幕。 iPhone X：抬起手机点亮屏幕（或用手指点一下屏幕来点亮），使用 Face ID 解锁，识别后会停留在解锁完成的界面，需要从底部向上轻扫才能进入主屏幕 。 △ 图 / The Verge 呼出 Siri iPhone 7：长按 Home 键呼出 Siri ，或者对 iPhone 说「嘿，Siri」。 iPhone X：长按侧边按钮（原「电源键」，后改名为「侧边按钮」），就能呼出 Siri。 Apple Pay iPhone 7：锁屏状态下双击 Home 键呼出 Wallet。 iPhone X：连按两下侧边按钮，即可使用 Apple Pay。 控制中心 iPhone 7：由屏幕底部向上滑动呼出控制中心。 iPhone X：从屏幕右上角向下轻扫。 通知中心 iPhone 7：由屏幕顶部向下滑动呼出通知中心。 iPhone X：从屏幕左上角或者中间向下轻扫即可（暂不清楚中间区域是否和控制中心对半分），关闭时向上轻扫。 （图 / The Verge） 屏幕截图 iPhone 7： Home 键和电源键同时按下，即可截图。 iPhone X：因为 iPhone X 没有实体 Home 键，所以改成同时按下侧边按钮和音量上键。 引起吐槽最多的无疑是iPhone X额头上的“刘海”，尽管这块布满了黑科技传感器的区域肯定有存在的理由，比如Face ID等，但是其将影响许多原来的UI界面元素，短期内用户难免不接受改变。  为iPhone X设计时的注意点 iPhone X没有了home键，采用全面屏设计，精准贴合机身的曲线，一直延伸至优雅圆润的边角。那么在为“齐刘海”、大屏幕的iPhoneX设计时，UI设计师应该注意哪些问题呢？ 注意点1：状态栏和home操作区域的颜色 在iPhone X发布后苹果更新了“人机交互界面设计准则”，特别指出应用开发者不应该尝试“隐藏设备显示的圆角边沿部分、传感器遮蔽区域，”也不许在顶部或底部设置黑色栏尝试隐去这部分。
可能很多人会不习惯，iPhone X屏幕上方的“刘海”，可能会有设计者或开发者，直接把状态栏和底部系统home操作区域，设置成黑色。就像下图中的左侧一样，要知道苹果是禁止这样做的哦~
还有，苹果也不允许对home操作区进行特殊定制化的设计。
也就是说像尝试用黑栏让刘海区域融为一体，或者用黑栏突出底部的HOME唤出滑条都是苹果认为错误的UI设计方案。 注意点2：全屏图片的适配 对于像启动页，全屏广告等这些图片的适配，UI设计师需要多提供一个iPhone X的尺寸。 下图例1，用iPhone 8尺寸的全屏图片，用到iPhone X中，按比例，让高度自适应于屏幕高度，会出现图片宽度超出屏幕显示区域，图片左右两边被裁切。
下图例2，用iPhone 8尺寸的全屏图片，用到iPhone X中，按比例，让宽度自适应于屏幕宽度，居中显示，会出现图片高度不足以填充全屏，导致屏幕上下没有内容。
苹果称大部分应用标准的系统UI元素的应用都会自动适应iPhone X的全新显示区域，背景元素将自动延展覆盖这些区域。
苹果的官网提供了许多UI设计实例，演示正确的交互原则下应用在iPhone X下的视觉外观。 当然。这些宣传实例缺少了横屏状态下的UI外观演示，不少开发商通过新Xcode的模拟器演示了iOS 11在iPhone X下的横屏截图。在浏览网页时左右异形显示区域会空出一部分，这部分颜色将取到网页的默认背景色。
注意点3：手势和边缘保护 就像上面我们看到的，iPhone X使用炫酷的屏幕边缘手势来访问主屏幕，应用程序切换器，通知中心和控制中心。
为了确保一些可操作交互元素和重要视觉元素不被iPhone X的圆角区域覆盖，原则上这些操控元素都应该置于下图的“安全区域”内，App Store审核应用时会评估这一准则是否得到应用。苹果特别提到了不要将任何互动操控件放置在全面屏的最下方，这将影响HOME唤出滑条。
由于这样的边缘保护会使用户难以访问系统级的操作，苹果公司建议谨慎使用。
|
|
|
