想为 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

相关推荐

  • 交互设计的闭环体验

    交互闭环体验的定义交互设计的闭环体验体现在产品的每个功能的细节上,产品可以看作是一整套交互的集合。一般只涉及一种使用场景的交互,只体现为一种功能,且只完成一件事。比如:修改设置、上传文件、设定闹钟、更改密码、打开家用电器、登录、设置状态消息、收藏等。交互设计的闭环体验主要由4方面构成:触发控件:交互闭环的起始点设计规则:交互闭环所遵循的交互方式信息反馈:用户与产品的互动过程关闭(循环)模式:交互闭环过程的结束(循环)模式交互闭环体验的定...

    2018-02-14
  • Axure基础

    目录(使用微信自带页面搜索功能)第一章 使用元件基础1. 添加元件到画布基础2. 添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5. 设置元件颜色与透明基础6. 设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9. 设置元件文字边距/行距基础10. 设置元件默认隐藏基础11. 设置文本框输入为密码基础12. 设置打开选择文件窗口基础13. 限制文本框输入字符位数基础14. ...

    2018-03-15
  • 关于“用户体验动效”的十二项原则

    前言关于“用户体验动效“的十二项原则,本文分为四部分来引入说明:1. “用户体验动效” 不等于 “界面动画”;2. 实时与非实时交互的区别;3.  动效的四种可用性提升方式;4. “用户体验动效”的十二项原则。1.  “用户体验动效”不等于“界面动画”在用户界面设计中,大部分动态的效果被设计师理解为“界面动画”,事实却并非如此。在介绍“用户体验动效”的十二项原则之前,我们先明确一下二者之间的不同。大部分设计师认为,“界面动画”是为了让用...

    2018-04-01
  • CTB50成员周红军| 从互联网用户体验谈交易银行创新发展思路

    诚邀各领域专家学者、从业者及机构投稿或荐稿与30余万行业精英分享与共同发展投/荐稿邮箱:tougao@sinotf.com中国交易银行50人论坛:客户在使用交易银行服务过程中所关注的用户体验,是竞争激烈的交易银行服务能否在市场上取得优势地位的决定性因素。文/安邦保险集团国际部总经理、中国交易银行50人论坛(CTB50)成员 周红军来源:中国交易银行50人论坛 学术成果汇编(2017)当下,随着互联网技术的迅猛发展,各行各业已经融入到“互...

    2018-03-31
  • 给用户带来新的feel|5个好玩的交互设计效果

    真正的科学家应当是个幻想家;谁不是幻想家,谁就只能把自己称为实践家。—— 巴尔扎克近期在工作中偶然发现的3种移动界面布局,从移动端的分辨率、配合设计布局变化的web端响应式、以及H5的设计布局。另外加上2个好玩的设计方式,更多的让点击率、产品凸显展示,总共5个好玩的交互效果给大家分享。开发资源不够或快速上线的页面交互设计上图在专业术语中叫做流体交互效果,这种交互效果的好处与坏处优点:避免小分辨率的情况下,出现水平条的情况。缺点:分辨率小...

    2018-04-17
  • 依靠强大品牌影响力,注重“用户体验”,“3000家企业定制酒计划”对白金酒意味着什么?

    在茅台集团白金酒公司的目标规划里,今年要选择1000家企业进行定制酒合作,未来3~5年要与3000家企业合作,打造“企业定制酒”这一细分市场的“当家品牌”。11月5日上午,华拓金服集团、神州长城股份有限公司、 永新华控股集团等数十家家国内知名企业与茅台集团白金酒公司签署战略合作协议,现场签约总额达近亿元,“定制酒计划”再迈出一步。直接面向企业需求这一细分市场,为企业打造专属的定制产品,满足其商务接待、宴请、礼赠等需求,白金酒公司确立了清...

    2018-02-01
  • 用户体验才是王道

    出生在委内瑞拉的亚历山德拉(ALEXANDRA VASQUEZ),在美国的波士顿大学毕业后不久就结婚了,婚后的她与德国籍的先生定居在柏林。和许多年轻女孩一样,对于新成立的家,亚历山德拉有许多憧憬,急着想布置有个人风格的家居特色。〝我去了大卖场,买了所有成家的基本家具,从床、沙发到餐桌。当这些东西送到我家时,我意识到我的家一点也不温暖,看起来像是一个商场的陈列间。它缺乏属于我和先生的个性以及属于自己生活的种种细节。〞〝意识到了这点后,对于...

    2018-02-03
  • 网络心理学与用户体验:如何使用户爱上我们的产品?

    什么是网络心理学?网络心理学(Cyberpsychology)是研究人与科技交互的背景下人们的心理与行为的新兴学科。它关注网络世界以及网络对人们行为产生的影响。近年来,网络心理学逐渐脱离其他研究人类行为的学科(如社会心理学),形成了自己专门的心理学研究领域。了解来自这个新领域的研究可以帮助设计人员更准确地预测人类在使用不同技术时会如何反应。因此,在思考如何使用户爱上我们的产品时,了解网络心理学是一个非常有用的手段。通过更好地理解用户与技...

    2018-02-23
  • 交互设计 | 除了镜子,原来你还能在这发现真实的自己

    Create Your Difference. by CYD艺术设计作品: WHAT DEFINES YOU?现在,艺术家们已经不再为了审美而艺术,也不再为了艺术而艺术.在他们的创作过程中,它们通过各种形式,对身边的或遥远的一切事物进行讽刺、抗议、质疑或推崇,以此向他人传达比文字更立体的新兴概念或特殊感情。而交互装置——这种特殊的装置艺术,由于有我们人类/观众直接的参与,创作者/艺术家/设计师尝试表达的感情更为直观;更由于人机的互动,他...

    2018-05-05
  • 关注用户体验的酒店设计永不过时

    目前110000+人已加入品筑设计位于德国巴登-巴登(Baden-Baden)的Roomers酒店,建筑的外观采用简洁的黑白灰格调,错落有致的立面构成,干净利落。建筑的外观采用简洁的黑白灰格调,干净利落、错落有致的立面构成。酒店共设有130间客房及套房,另外还有餐厅与酒吧、屋顶酒吧、500m²的水疗中心、户外花园、无边泳池等等。在精品酒店的设计中,越来越关注客人的亲身体验感,其中有几个重要的关键点:家的温馨感、艺术馆般的艺术气息、现代极...

    2018-04-10