想为 iPhone X 做交互设计?你需要读这篇文章

点击上方“CSDN”,选择“置顶公众号”关键时刻,第一时间送达!作者丨NIELS译者丨陈冬【编者按】尽管 iPhone X 采用的全面屏设计方案已经是当下技术的最优解,但其“刘海”却依然引起了众多吐槽,在无法达到真正全面屏之下,为何苹果会选择使用非主流的“刘海”设计,而不是主流的“窄额头”?这是一个仍然在讨论的问题。对于众多的 iOS 工程师及设计师而言,为 iPhone X 进行屏幕适配以及交互设计才是重中之重。对此,本文作者 —— ...

点击上方“CSDN”,选择“置顶公众号”

关键时刻,第一时间送达!

作者丨NIELS

译者丨陈冬


【编者按】尽管 iPhone X 采用的全面屏设计方案已经是当下技术的最优解,但其“刘海”却依然引起了众多吐槽,在无法达到真正全面屏之下,为何苹果会选择使用非主流的“刘海”设计,而不是主流的“窄额头”?这是一个仍然在讨论的问题。对于众多的 iOS 工程师及设计师而言,为 iPhone X 进行屏幕适配以及交互设计才是重中之重。对此,本文作者 —— Pocket 交互设计师 NIELS 为我们分享了他的经验。


iPhone X(称之为 iPhone 10)已经正式发布,并将于 11 月 3 日开始发售。它拥有一个分辨率为 1125×2436 像素的超级视网膜全面屏。且在屏幕顶部有一个切口,在这里你可以发现一些与人脸解锁相关的功能。


为这款优雅的手机做设计会给我们带来一些挑战,同时也会有一些设计方面的机会。比如在竖屏模式下,iPhone X 设备的宽度和 iPhone 6、7 以及 8 相同均为 375pt,高度上增加了 145pt,于是垂直空间上就增加了 20%。当你在设计@1x 设计稿时,你需要一个 375×812px 的画板。由于新的 Retina 显示屏,你需要用 iPhone 7-8 Plus 上的@3x 图,而不是 iPhone 8 的@2x 图。


在 iPhone X 的设计中,你必须确保没有因为设备独特的特征(如圆角边,顶部的切口和 Home 指示器)而遮挡住你的 UI。 顺便说一句,Home 指示器现在是屏幕底部的一条小线,它取代了实体的 Home 按钮。你可以从任意一个 App 底部向上滑回到主屏幕或多任务处理界面。

想为 iPhone X 做交互设计?你需要读这篇文章

如果你现在的 App 都是使用 iOS 原生控件,那么你的 App 已经自动适应 iPhone X 了,包括导航条、表格视图、集合视图以及底部标签栏。这些控件将被自动地插入和定位。

想为 iPhone X 做交互设计?你需要读这篇文章

对于使用自定义布局的 App,可能需要一些更新来适配新屏幕的布局。 但是对于使用 Auto Layout 的应用来说,那可能非常容易。

1
 iPhone X,我们需要做出改变的 12 个地方

首先,拥抱 iPhone X 的设计。Apple 的设计师并没有让你为这台昂贵的 iPhone 令人惊艳的新特性在适配上花费太多的功夫。


  • 确保提供全屏体验。让滚动视图布局的底部滚动到屏幕的最底部,甚至要超过显示器弯曲的底部边界。同时 Apple 还友好地提示不要隐藏顶部的切口和底部弯曲的边缘,否则 iPhone X 就会看起来像一款常规的 iPhone 8。

  • 重要信息中心化。确保你的重要界面信息处于屏幕的中心位置,适当的时候使用一些必要的插入以便你的 UI 界面不会被设备的传感器和边角所剪裁。如果使用 Auto Layout,那么你的界面内容将被放置在一个安全区域内,这样你的设计便不会被边角,传感器或者 Home 指示器所遮挡。

想为 iPhone X 做交互设计?你需要读这篇文章

  • 新的状态栏。由于屏幕顶部的传感器,新的状态栏被分为两部分。如果你的 UI 在这块区域中有特别的设计(以前是 20pt 高,现在 44pt 高),那么你可能需要更新一下设计,因为 iPhone X 上这块空间的高度比以前更高了。确保顶部状态栏区域的设计高度可变。而当用户在打电话或者在使用导航 App 时,和其他 iPhone 一样,顶部的状态栏高度就不会变。

想为 iPhone X 做交互设计?你需要读这篇文章

  • 显示新的状态栏。如果在你的设计中当前的状态栏是隐藏的,Apple 则要求你重新考虑此设计。因为屏幕比以前更高了,你有更多的空间来展示内容,这样便不需要隐藏状态栏。用户可以在那里找到有用的信息,并且这部分空间在大部分时候也不会被其他 UI 元素所占用。

  • 全屏图。如果在设计中你使用了全屏的图片,你将需要更新一下。 因为它们可能会被剪裁并且部分重要的视觉元素也可能被隐藏。

想为 iPhone X 做交互设计?你需要读这篇文章

  • 不要在屏幕底部放置交互式控件。Home 指示器周边的控件是单纯为了向上滑动回到首页的手势而设计的。在指示器周边或者显示器底部圆角边附近放置按钮可能不是很好。用户可能不小心使用了 Home 手势,这时你的按钮便不可使用了。然而,你仍然可以使用标签栏和功能栏,但是它们不能和 Home 指示器相互冲突。

想为 iPhone X 做交互设计?你需要读这篇文章

  • 永远不要隐藏 Home 指示器。iOS 中可以在 App 内隐藏 Home 指示器。当用户手指离开屏幕数秒后,它将自动隐藏。然后当用户再次碰触屏幕时,它会重新出现。这个功能应该只被用于沉浸式体验,比如观看视频或浏览图片。Home 指示器会根据 App 的背景自动改变颜色。

  • 更多的颜色。新的超级视网膜显示屏用 P3 取代 sRGB,可以显示更多的颜色。这意味着它会显示更丰富和更饱和的颜色,特别是视频和照片将从这更加广泛的颜色中受益。

想为 iPhone X 做交互设计?你需要读这篇文章

  • 向上滑动时注意用户手势。由于实体 Home 按钮已经消失了,你现在只能通过手势和 iPhone 进行交互了。当你手势向上滑时,可以回到首页或者多任务管理界面。当从屏幕顶部向下滑时,会出现通知或者控制中心。在游戏中,你会自定义很多手势,可能有一些会覆盖重写 iOS 原生手势。你可以通过实现”边缘保护”来使用自己的手势。这个特性会优先调用 App 中特定的手势,之后再调用操作系统的手势 — 只有一次。由于这个功能会使用户很难访问系统特性(被重写的手势),你需要谨慎使用。

  • Face ID。以前的 iPhone 有一个很好用的功能 Touch ID,这允许用户使用指纹来解锁设备或者执行一些密码锁定操作。这个指纹传感器被隐藏在 Home 按钮中,但是在 iPhone X 中实体 Home 按钮已经消失了。Apple 使用一个更加先进和安全的方式来解锁设备。在输入 Face ID 时,设备用了非常好的算法来检测你的面部并解锁你的设备。Face ID 在 App 中有一些新的 UI,所以请确保给 iPhone X 的用户实现这些界面交互。

想为 iPhone X 做交互设计?你需要读这篇文章

  • 自定义键盘。现在,当你设计一款自定义键盘时,不应该在键盘中再添加 Emoji 或听写按钮。因为这两个功能都将被自动添加在键盘下方 Home 指示器附近。

  • 更大的导航栏。在 iOS 11 中原生导航条的设计得到了更新,它们现在更高了。 这款设计在较高的 iPhone X 上将会非常出色,并将与新的状态栏完美结合。在你的设计中,考虑使用它。在界面滑动的时候也会有一些非常好的原生动画。

想为 iPhone X 做交互设计?你需要读这篇文章

2
 关于 iPhone X 设计,必须注意的 13 点

  • iPhone X 的高为 145pt,所以设计尺寸为 375×812pt 而非 375x667pt;

  • iPhone X 使用@3x 图片;

  • 创建一个全屏体验,不要隐藏设备的独特功能;

  • UI 的重要内容处于中心位置,以确保它始终可见,并且不会被设备的传感器或边角遮挡;

  • 一个新的更高的一分为二的状态栏,以前是高度是 22pt,现在是 44pt;

  • 全屏图片可能/应该更新以完全显示;

  • 不要在屏幕底部 Home 指示器附近添加按钮;

  • 不要隐藏 Home 指示器,除了真的有必要;

  • 由于 P3 色谱,iPhone X 色彩更加丰富和饱和;

  • 注意 Home 指示器和状态栏附近的自定义手势,不要混淆用户预期的原生手势;

  • 用 Face ID 替换 Touch ID,更新 UI 以及涉及到 Touch ID 的文本;

  • 自定义键盘不需要添加表情符号和听写按钮;

  • 在高显示屏上更大的导航栏有一个好的外观和动画。


或者,你可以观看一下 Apple 关于“为 iPhone X 设计”(https://developer.apple.com/videos/play/fall2017/801/)的视频。

3
 
 那么,如何预览 App 的 UI?

你可以使用 Xcode 9 的模拟器来预览你的 App,如果 UI 需要更新,模拟器会立即展示出来告诉你。

4
在哪里可以找到 iOS 11 和 iPhone X 的资源?

Apple 有很多 Sketch、Photoshop 以及 Adobe XD 的新资源。你可以在这里找到:Apple Design Resources(https://developer.apple.com/design/resources/)。


注意:大多数的信息都来自于 Apple UI Guidelines(https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/)。


原文出自:Design for iPhone X(https://blog.prototypr.io/designing-for-the-iphone-x-4239d5ac736c)

想为 iPhone X 做交互设计?你需要读这篇文章

想为 iPhone X 做交互设计?你需要读这篇文章

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/34994/

(0)
交互精选交互精选
上一篇 2018-02-01
下一篇 2018-02-01

相关推荐

  • 关于增强移动端交互设计的7条小建议

    本文转译自TubikStudio,内容有删减如果你要问某个产品的移动端交互设计好不好?很简单,如果用户能够很轻松愉快的使用以至于没有感受到它的存在,这就表示这款产品的设计是专业的、成功的。另一方面,如果整套交互中存在不合理的地方,用户一定会注意到他们,并且引发吐槽。移动应用的设计,需要清晰易用,可以随时随地进行有效使用。设计师的认识是创建一个直观的界面,指导用户们,帮助他们顺利操作使用。1、降低学习成本每个产品经理或者交互设计师,都想创...

    2018-02-17
  • 设计神器Figma出马!Sketch、PS有些慌了,因为...

    这年头真的是“长江后浪推前浪,一浪更比一浪强”,许多新产品、新工具纷纷冒出头来,就拿我们设计师的设计工具来说吧,Photoshop 算是一名老将了,它也是我们走上设计不归路的第一个敲门砖(当然还有 CDR);被 PS 折磨的要死要活的时候 Sketch 和 Affinity 杀了出来,一个是专攻用户界面的矢量设计,另一个则像是加强版的 PS 和 AI;Sketch 和 Affinity 还没用熟又冒出个 Figma:说出来你可能不相信,...

    2018-04-17
  • UED建筑品谈 | 昭君博物馆:土木轮回

    📌编辑 | F.项目竣工的下午,一片低黑的云朵重重地飘盖过来,浓烈的阳光穿过云缝狠狠地砸在了和周围土地一样色质的“夯土”表面上,一派陌上苍歌的景象。新的“土木”谦虚地溶嵌在大地之上,迥异的材料体验感却反而没有让建筑消失,熟悉得甚至可以忘记的“土”和“木”。体验变得几分陌生,他们与大地一同构建了令人难忘的场所。这让我想到几米漫画书里的句子:“……看不见的,看见了;遗忘的,记住了。”——曹晓昕主创建筑师曹晓昕中国建筑设计院有限公司副总建筑师...

    2018-02-02
  • 超出预期的才叫用户体验

    什么是用户体验?我认为,用户体验其实就是一种心理感觉。拿最简单的吃饭这件事来打一个比方。我在饭店,吃饭付账,这个过程叫作体验吗?肯定谈不上。用户体验,肯定是特殊的,肯定是不正常的,肯定是在你的预期之外的。超出预期才形成用户体验如果做跟别人一样的东西,那这些功能并不叫体验。很多人在抄袭别人产品的时候,经常说某某公司做了什么功能,老板说照着做一个,但是你想没想过,如果做得跟别人一样,是没有机会的。当年我们做的是免费杀毒。当时所有其他品牌的杀...

    2018-04-08
  • 交互体验大升级 云视听极光3.0最新版本体验评测

    作为腾讯视频官方的电视端应用版本——云视听极光迎来了第三个大版本的更新:云视听极光3.0。在我之前的国内4大电视端视频应用软件的对比评测中我对云视听极光的老版本在交互体验上的感受只能用一般般来形容。这次的大更新官方声称对交互界面体验上针对用户需求和建议做了较大的改进,我也立马升级了软件进行了一番体验。让我们来看看云视听极光3.0在体验上到底如何吧。UI交互体验:界面设计进入软件就可以看到3.0版本的大变化,相比老版本,3.0的频道分类栏...

    2018-01-30
  • 用户体验(UX)专家是如何进行设计评审?

    设计评审是一种可用性测查工具,通常由一个评审员审查设计方案中的可用性问题。本文摘自https://www.nngroup.com/articles/ux-expert-reviews/原文标题:UX Expert Reviews原文作者:Aurora Harley什么是“设计评审”?定义:设计评审是一种可用性测查工具,通常由一个评审员审查设计方案中的可用性问题。“设计评审”一词颇为广义,涉及数种可用性测查方法,且每一种的运用因人(评审员...

    2018-04-19
  • 阿里巴巴UED的设计团队究竟为双11贡献了什么?

    在11月11日这个日子的前后一段时间,当你发现如下症状之一:当你被机场、地铁、公交站牌和网页里频繁出现的双11提醒,感觉重要的时刻就要来临;当你心跳加速,不管什么都先放到购物车里再说;当你最终等待在11号这天的凌晨用风一样的速度支付成功,并长吁一口气;当你认为一切都那么的简单、自然、纯粹,不过是一场轻松的购物。只能说你Too young,Too simple。你的一举一动已经被一个神秘的组织所引导,它让你下单时够快、够准、够狠,并且你毫...

    2018-02-01
  • 【软件资源】Axure RP 8.0软件安装教程——附下载地址

    本次给大家提供Axure RP8.0软件破解版,整个破解过程非常简单。软件适合32,64位的操作系统,破解文件下载地址在文末,请查看!软件介绍:Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。安装步骤:1、选择下载的软件压缩包,鼠标右击选择解压...

    2018-03-24
  • 用户体验与结婚教练

    我的朋友文敏,在做一个工作——结婚教练。具体就是指导30岁以上,下定决心要结婚的女生,如何在一年半之内搞定结婚。而且她的这套方法,已经帮助30多个30多岁的女生结婚了。我就很好奇,想了解她的核心方法,然后发现,几乎她是严格按照产品方法论,来培训想结婚的熟女,如何做判断、做交互、做优化。而判断、交互和优化三者,判断肯定是第一位的。古人云“男怕入错行,女怕嫁错郎”。第一步的判断和选择,决定了一个人在一个点线面体上的位置。而她做判断的方法,基...

    2018-02-02