恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
iPhone X home指示键适配
0.0°
2017-10-24 自译外文 规范/资料 原作者: Jordan Morgan 举报 1731 1 2 2

iPhone X home指示键适配深度解析

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具


Image title


众所周知,苹果公司推出了iPhone X。随之而来的是一个新的白色线条,幸福地坐在底部的触摸板上,它替代了原有了home键。这也唤起了人们对物理home键的怀旧情结。


对消费者来说,这意味着苹果公司在硬件和软件创造出了美丽的奇迹,到时可以在预定期预定给予支持。对很多开发者来说,这意味着我应该做什么?谢天谢地,答案相当简单。


本周,我们将看看苹果公司在适配Home指示键上给我们提供了什么。


首先


Image title


我们并不是每天都有新视频和硬件公告,但这正是此后不久发生的事情:


在“为iPhone X而设计”一文中,苹果公司元老级设计大师迈克·斯特恩(Mike Stern)制定了一些基本规则。所有的东西都是平等的,在你使用下面的新功能之前,你先停住脚步,看看你的使用方法是否符合相关要求。


尝试避免在home指示键附近区域做交互式控制,尤其是通过手势识别驱动的交互控制。


不要隐藏指示键、在它周围添加任何装饰品、或者试图改变它的外观。在iPhone X顶部的相机遮光板也是如此。


通常情况下,你不希望隐藏home指示键,除非你有被动观看体验(如:视频,照片幻灯片等)。


TL; DR - 苹果公司表示, 大多数时候,不要去理会糟糕的指示键。


但是,这篇文章说的是特殊时间。


UI视图控制器新增功能


不管你是喜欢在每个控制器的基础上适配状态栏,还是对你来说适配都是令人厌恶的,苹果公司一直在以实例的方式做出这样的决定,而不是选择一个全球的所有设计。


隐藏home指示键基本上与适配状态栏的方式相同:


class ViewController: UIViewController

{

override func prefersHomeIndicatorAutoHidden() -> Bool

{

return true

}

}


如上所述,这样的场景应该是异常的,因为这样的默认实现返回false。然而,文件中有一个特别的评论:


这个系统会考虑你的偏好,但返回YES并不能保证home指示键被隐藏。


似乎没有提到为什么或者在什么时候UIKit会不尊重你所选择的偏好,尽管它认为苹果会强制执行自己认为最好的。当苹果认为它是最好时-就会不顾布尔值。因此,这应该是一些有趣的Stack Overflow 帖子。


此外,这可能看起来很明显,但可能是最初令人困惑的根源。特别提到的功能名称是以自动隐藏结束而不是隐藏,这就是说从这里返回到true意味着UIKit会在它的状态良好并准备就绪时隐藏指示键(通常情况下是指,控制器几秒钟都没有接收任何触摸事件),而不是立即隐藏指示键。


UIKit信号


继续并行使用应用程序状态栏,只是简单地覆盖或分配给有条件地控制覆盖函数的变量是不够的。我们还有另一个新增的功能来查看控制器强大的

setNeedsSomethingDone函数:


class ViewController: UIViewController{ var shouldHideHomeIndicator = false

override func prefersHomeIndicatorAutoHidden() -> Bool { return shouldHideHomeIndicator }

override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) self.shouldHideHomeIndicator = true self.setNeedsUpdateOfHomeIndicatorAutoHidden() }}


这是一个传递函数,因为它只是向UIKit发出信号,我们改变了先前选择的用于home指示键可见性的值。不过,与状态栏不同的是,自UIKit自己隐藏它之后,这并没有技术上的动效。因此,像这样的代码没有效果:


override func viewDidAppear(_ animated: Bool)

{

super.viewDidAppear(animated)

DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {

self.shouldHideHomeIndicator = true

UIView.animate(withDuration: 1, animations: {

self.setNeedsUpdateOfHomeIndicatorAutoHidden()

})

}

}


对setNeedsUpdateOfHomeIndicatorAutoHidden()发送一个简单的任务都将执行一个轻微的alpha渐变,这与它是否包含在动画区块中无关。


容器控制器


查看控制器的最后一个新增加功能是通知UIKit子视图控制器是否应该指示home指示键的可见性。如果你开发iOS足够长时间,你可能会利用容器视图控制器来更好地促进抽象和封装模式。


override func childViewControllerForHomeIndicatorAutoHidden() -> UIViewController?

{

return myChildController

}


这些控制器可能会发现自己靠近屏幕底部,如果是这样 - 你可能希望home指示键忽略你。一个简单的覆盖返回隐藏的实例或是正在执行的实例解决了这个问题:


如果你确实指出子控制器应该指示其可见性,你也有责任重写以前讨论的函数:


class MyChildViewController: UIViewController

{

override func prefersHomeIndicatorAutoHidden() -> Bool

{

return true

}

}


该函数的特性是允许零返回值。 如果是这种情况,那么UIKit将依靠当前的控制器作出决定 - 如果你选择不覆盖该函数,那么这个决定将是“显示home指示键”。


这也可以是一个运行时决定, UIKit将再次要求你调用它的我们刚刚提及的函数来通知框架应该再次查询prefersHomeIndicatorAutoHidden():


override func childViewControllerForHomeIndicatorAutoHidden() -> UIViewController?{ return myChildController}

func initializeChildController(){ myChildController = MyChildController() self.setNeedsUpdateOfHomeIndicatorAutoHidden()}


以上函数就是实现这种功能。


虽然可以将其视为需要应用于日常iOS事件(即处理控制器)的更多思考过程,但你将发现应用程序界面几乎与现有的处理类似问题的UIKit函数相同。


更新:回答读者问题


Fabian Kuenzel提问:


新的home指示键还将放在网站的底部导航之上吗?


详细回答请看这里:


iPhone X 网页设计


我现在不是一个网络开发人员,但似乎有一个可以处理自动输入的元标签:


默认值为auto,它应该是需要插入内容的- 虽然你可以对此忽视而选择封面覆盖整个视口的内容。但是,如果你应该选择整个屏幕,则使用一个新的CSS函数,常量(),可以使用预定义的常量来对围绕安全区域的元素进行填充。这类似于iOS的应用程序界面安全区域布局指南。


这是指南中的一个实例:


.post {

padding: 12px;

padding-left: constant(safe-area-inset-left);

padding-right: constant(safe-area-inset-right);

}


Bogdan有更全面的理解:


我不明白为什么在默认情况下苹果不关闭home指示键,或者至少给用户一个选项来关闭。将新用户引入操作是一个很好的功能,但最终情况是(如用户使用手机10分钟后),每个人都会记得如何切换应用程序,那么这时候就是一个令人讨厌和令人分心的线条。我说错什么了吗?


这是一个很好的观点。


就像一个凹槽不仅仅是一个凹槽,它更接近于是硬件的一部分及iPhone的品牌认知度,我认为软件和home指示键同等重要。它是其DNA的一部分,另外我还怀疑,苹果公司的想法是,它的出现使用户对UX有信心。它避免了一系列的问题,诸如:“为什么现在已经消失了? 它什么时候会显示? 什么时候会隐藏? 我返回的时候还会显示吗?


也就是说,我同意你的看法 - 这些是常见的假设,这似乎有点多,但我还没有使用iPhone X,所以我会在正式体验后再做出判断。


Will Kampmann 提问:


你知道当全屏显示应用如玩游戏时会发生什么吗?Home指示键会被不同的滑动方式唤醒吗?如推送通知及常用iPhone上的控制中心?


有一个应用程序来忽视这个操作,但是苹果真的真的希望你不要这样做。他们提到的一个使用情景是什么? 全屏游戏。以下是关于此问题的人机界面指南:


在极少数情况下,像游戏这样的沉浸式应用可能需要自定义的、优先于系统的屏幕边缘手势, 第一个滑动调用特定于应用的手势,而第二次滑动则会调用系统手势。


这是一个简单的可覆盖任何视图控制器的实例:


override func preferredScreenEdgesDeferringSystemGestures() -> UIRectEdge {

return .top

}


总结:


iPhone X 注意事项:


对iOS工程师来说,它仅仅设计之后表现出的成就感,还是另一个视图控制器对修复和编码的考虑? 也可能是两者的混合。如果时间在软件开发的连续统一体中教会了我们什么,那就是时间流逝+一个生态系统=新的应用程序界面。在今天的智能手机领域,更现实的说法是,时间流逝+苹果的生态系统=新的硬件=新的应用程序界面。


我们通过增加iPhone的高度成功适配了。我们通过不同的决议来推动进程。我们可以处理导航栏中的一个小相机配件,以及靠近底部挡板的2点线条。


原文作者:Jordan Morgan


原文地址:https://medium.com/the-traveled-ios-developers-guide/iphone-x-dealing-with-home-indicator-2e8e47f5647f


Mockplus做原型,更快更简单,现在下载Mockplus,免费体验畅快的原型设计之旅。

更新:2017-10-24

收藏

1人已收藏

mo311

一名PM,分享个人与设计(UI/UX等)相关的经验与教程。

  • 205

    作品

  • 272

    粉丝

  • 5

    关注

  • B端和C端产品设计有哪些差异?
  • 用户体验之如何设计一个完美的新手引导流程?(附带案例)
  • UI设计、交互设计、UI交互设计的联系和区别是什么?
  • 前方高能!15个外挂级别的设计插件, 助你效率逆天

    猜你喜欢

      2017-10-24 自译外文 规范/资料 原作者: Jordan Morgan 举报 1731 1 2 2

      iPhone X home指示键适配

      0.0°

      你确定要举报 iPhone X home指示键适配

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年10月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      1
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录