取消了Home键的 iPhone X,交互方式都有哪些变化?

iPhone X 作为一台全面屏的设备,和上一代的 iPhone 7 还是有着很大的区别,这些区别不仅体现在材质和工业设计上,在界面交互上也有一些差异。iPhone X 的显示屏所能显示的内容和 4.7 英寸的 iPhone 7 一样「宽」(同为 375pt),但在高度方面就比原先多出了 145 pt ,再加上 iPhone X 去掉了最为标志性的 Home 键,这两点直接导致的就是界面的布局和交互会发生相应的变化。

文章目录[隐藏]

取消了Home键的 iPhone X,交互方式都有哪些变化?

iPhone X 作为一台全面屏的设备,和上一代的 iPhone 7 还是有着很大的区别,这些区别不仅体现在材质和工业设计上,在界面交互上也有一些差异。iPhone X 的显示屏所能显示的内容和 4.7 英寸的 iPhone 7 一样「宽」(同为 375pt),但在高度方面就比原先多出了 145 pt ,再加上 iPhone X 去掉了最为标志性的 Home 键,这两点直接导致的就是界面的布局和交互会发生相应的变化。

取消了Home键的 iPhone X,交互方式都有哪些变化?

△ 图 / Apple

接下来我们来看看在 iPhone X 上都有哪些交互变化。

注:下文中的「iPhone 7」指搭载 iOS 10 的 iPhone 7,「iPhone X」指搭载 iOS 11 的 iPhone X。

Home 键

  • iPhone 7:为实体 Home 键。
  • iPhone X:官方称呼为 Home Indicator,形状为一根横线,在主屏幕时是自动隐藏的。在使用软件时,例如观看视频,如果手指长时间不触碰屏幕也会自动隐藏。

取消了Home键的 iPhone X,交互方式都有哪些变化?

△ 屏幕底部的横线(Home Indicator)

主屏幕

  • iPhone 7:按下 Home 键。
  • iPhone X:从底部向上轻扫一下,即可返回主屏幕。

取消了Home键的 iPhone X,交互方式都有哪些变化?

多任务

  • iPhone 7:双击 Home 键; iOS 10 中可以在屏幕边缘使用 3D Touch 按压进入多任务列表。
  • iPhone X:从底部向上轻扫并停顿一下,就能激活多任务界面。

取消了Home键的 iPhone X,交互方式都有哪些变化?

快速切换回上一个应用

  • iPhone 7:重按(3D Touch)屏幕左边缘,然后向右滑动,就能切换回上一个应用。
  • iPhone X:有两种方式:从屏幕底部向上轻扫并停顿一下,然后向右滑动,就能切换回上一个应用。

取消了Home键的 iPhone X,交互方式都有哪些变化?

△ 图 / iMore

或者直接在屏幕底部的小横线(Home Indicator)上左右滑动,也能快速切换应用。

取消了Home键的 iPhone X,交互方式都有哪些变化?

△ 图 / Apple

解锁屏幕

  • iPhone 7:抬起手机点亮屏幕,按下 Home 键并同时完成 Touch ID 解锁,识别后自动进入主屏幕。
  • iPhone X:抬起手机点亮屏幕(或用手指点一下屏幕来点亮),使用 Face ID 解锁,识别后会停留在解锁完成的界面,需要从底部向上轻扫才能进入主屏幕 。

取消了Home键的 iPhone X,交互方式都有哪些变化?

△ 图 / The Verge

辅助功能快捷键

  • iPhone 7:在「设置 – 通用 – 辅助功能 – 辅助功能快捷键」中选择需要使用的功能后(比如 VoiceOver),按三下 Home 键即可快速激活。
  • iPhone X:设置过程类似,激活方式改为连按三下侧边按钮。

SOS 紧急联络

  • iPhone 7:iOS 10 中无 SOS 紧急联络功能;iOS 11 在「设置 – SOS 紧急联络」中打开,激活方式为连按五次电源键。
  • iPhone X:设置过程类似,长按侧边按钮和音量上键来激活。

呼出 Siri

  • iPhone 7:长按 Home 键呼出 Siri ,或者对 iPhone 说「嘿,Siri」。
  • iPhone X:长按侧边按钮(原「电源键」,后改名为「侧边按钮」),就能呼出 Siri。

取消了Home键的 iPhone X,交互方式都有哪些变化?

Apple Pay

  • iPhone 7:锁屏状态下双击 Home 键呼出 Wallet。
  • iPhone X:连按两下侧边按钮,即可使用 Apple Pay。

取消了Home键的 iPhone X,交互方式都有哪些变化?

控制中心

  • iPhone 7:由屏幕底部向上滑动呼出控制中心。
  • iPhone X:从屏幕右上角向下轻扫。

取消了Home键的 iPhone X,交互方式都有哪些变化?

通知中心

  • iPhone 7:由屏幕顶部向下滑动呼出通知中心。
  • iPhone X:从屏幕左上角或者中间向下轻扫即可(暂不清楚中间区域是否和控制中心对半分),关闭时向上轻扫。

取消了Home键的 iPhone X,交互方式都有哪些变化?

(图 / The Verge)

屏幕截图

  • iPhone 7: Home 键和电源键同时按下,即可截图。
  • iPhone X:因为 iPhone X 没有实体 Home 键,所以改成同时按下侧边按钮和音量上键。

关机

  • iPhone 7:长按电源键后,滑动关机滑块;在「设置 – 通用」里滑到底部,有个「关机」按钮;按 5 下侧边按钮激活 SOS 紧急联络模式后,顶部有个关机滑块。
  • iPhone X:在「设置 – 通用」里滑到底部,有个「关机」按钮;长按侧边按钮和音量上键激活 SOS 紧急联络模式后,顶部有个关机滑块。

取消了Home键的 iPhone X,交互方式都有哪些变化?

△ iOS 11

「最全面的iPhone X 设计资源」

  1. 《最新版iOS 11设计规范发布了,来下载官方源文件!》
  2. 《优设首发!iPhone X 官方人机交互指南中文版》
  3. 《优设首发!800M高质量的iPhone X+8展示模板免费打包下载》

取消了Home键的 iPhone X,交互方式都有哪些变化?

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34252/

(0)
震天下震天下
上一篇 2017-09-16 14:05
下一篇 2017-09-18

相关推荐

  • 如何培养交互设计思维?

    什么是交互思维?上网找度娘会有一堆交互设计的方法,但这里要告诉大家的是,交互设计应具备的思维方式。在国内交互设计并不成熟,未来还有很长的路要走,所以需要我们对其进行了解,首先培养交互思维方式。以下几点可以培养你的交互设计思维:1、设计不能脱离目标交互设计师沟通方式是:“我们需要为想要购买商品的用户提供信息,可选的商品数量有N个,用户最感兴趣的信息有……,有的人不会看但必须附上的信息有……”。不要觉得这样做很矫情,这样可以将不同的信息和重...

    2018-02-01
  • 微信小程序设计指南 · 小程序

    概要 基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同…

    2016-09-24
  • 【汇总】2015年阿里巴巴交互设计师笔试题目

    经验分享之交互设计面试 从网上各种渠道扒下来有关2015年阿里巴巴交互设计师的笔试题目 按照各方面的信息初步确定一共是四题,基本上都是要码字 要交作品,要交简历(应该是第一题的公共问题) ps:出题应该是一套…

    交互设计 2015-08-19
  • 交互设计 | 这到底是交互设计还是黑科技?

    Create Your Difference.           by CYD01能看透你的灯光今天创艺典与你分享的交互装置不再是学习你、跟随你的灯光装置了无论你怎么装高冷当面瘫今天的它能把你扒光把你一览无余地看透我觉得你必需服Aura这是Aura,一个视听和互动装置它解读和翻译人类的情感,然后将其转化成发光窗帘光的强度、形状和颜色会随着人情绪的变化而精确地改变这样的绿,或许代表了平静而这位哥们儿的绿,恕我直言,或许是一种失恋的绿这样...

    2018-04-30
  • 做完了产品分析和运营分析,如何做一份视觉竞品分析?

    做好一份竞品分析、输出优秀的设计观点,可能是衡量一个团队专业与否的第一步。

    2017-05-18
  • Axure画产品原型最新常用组件分享(一)

    画产品原型是产品经理必备的一项硬技能,一般使用axure进行制作,很多人可能都知道axure,但是怎么利用axure把产品原型画的又快又好并不是一件容易的事;原型要画的好,最重要的不是你掌握多复杂的功能,而是要制定好设计规范;下面我把移动产品原型制作中常见的一些元素按照一定的设计规范制作成组件分享给大家,你只要把相应的元件拖动到自己的工作界面,简单修改文字就可以使用了,这是第一个部分,包括以下内容:一. 手机外壳二. 空页面模板三. 常...

    2018-04-05
  • 【译】2016年UX发展状态

    原文:The State of UX in 2016 作者:Fabricio Teixeira 译者:冬火鸟 简介:总结2015,了解目前发展趋势,hold住2016UX发展动态 #1 抠像素的时代已经结束了 2015年,你将“UX”这个流行的词汇加入到了你的简历中——…

    2016-01-29
  • 产品上线了,你咋都不好意思说是你设计的

    对于界面来讲,我们设计师过于关注设计的美观度,而忽略了图片和文字的内容的真实性。而界面内容的真实性相当关键,这往往关乎自己的设计最终能不能高还原度地呈现。

    2017-05-21
  • Adobe的UX设计系列:如何为移动应用设计错误状态

    人非圣贤,孰能无过。当人们操作用户界面的时候,错误难免会发生。有时候是因为用户做了错误操作,有时候则是由于应用本身出了问题。无论原因如何,出现的错误以及对其处理的方式,都对用户体验产生巨大的影响。糟糕的错误处理方式以及无用的报错信息会让用户感到万分沮丧,甚至会导致用户放弃继续使用你的应用程序。

    2017-05-15
  • 干货推荐|关于无线C端产品的一些UX建议

    开始之前,先来看一下Eric WK.See-To的一项最新研究成果(Eric WK.See-To等人针对如何提升移动端视频的UX满意度做了以下研究)。

    2017-05-29