加入我们 登录
 找回密码
 加入我们
搜索
创梦者 首页 技术控 查看内容

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

2017-9-17 10:41| 发布者: 残梦| 查看: 790| 评论: 22

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


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 底部向上滑回到主屏幕或多任务处理界面。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

关于 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 设计”的视频。

那么,如何预览 App 的 UI?

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

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

Apple 有很多 Sketch、Photoshop 以及 Adobe XD 的新资源。你可以在这里找到:Apple Design Resources

Note:大多数的信息都来自于 Apple UI Guidelines


完美

给力

泪奔

无聊

跪了
发表评论

最新评论

引用 游客 2018-1-28 08:23
Running late with the deadline for your work? Then ...
引用 游客 2017-11-11 22:30
Hey all! Recently I have been battling with a lot  ...
引用 游客 2017-10-30 08:58
Hi all! Recently I have been dealing with a lot of ...
引用 游客 2017-10-29 21:45
https://www.flickr.com/photos/153842732@N04/372893 ...
引用 游客 2017-10-27 10:38
My friend and I went camping the other day. It was ...
引用 游客 2017-10-23 19:25
Thesis Writing Service - EssayErudite.com

If yo ...
引用 游客 2017-10-23 18:33
Paper Writing Service - EssayErudite.com

We val ...
引用 游客 2017-10-23 08:16
http://nextdifferencegames.com/profile/dannygollan
引用 游客 2017-10-22 18:37
Write My Essay For Me - EssayErudite.com

Can Yo ...
引用 游客 2017-10-21 21:59
Write My Paper - EssayErudite.com

Looking for a ...
引用 游客 2017-10-21 21:16
Essay Writing Service - EssayErudite.com

Our <a ...
引用 游客 2017-10-12 12:13
http://bit.ly/2hiePjo - BrainRush – натура ...
引用 游客 2017-9-30 12:53
http://writepapersonline.org/ - Write my research  ...
引用 游客 2017-9-30 09:43
<a href=http://writepapersonline.org/>Write my res ...
引用 游客 2017-9-29 00:35
<a href=http://writepapersonline.org/tipps-bachelo ...
引用 游客 2017-9-28 18:35
<a href=http://writepapersonline.org/writing-paper ...
引用 游客 2017-9-28 09:39
<a href=http://abcinform.org/houston-a-in/>houston ...
引用 游客 2017-9-27 20:41
<a href=http://writepapersonline.org/>research pap ...
引用 游客 2017-9-27 06:45
<a href=http://abcinform.org/board-production/>typ ...
引用 游客 2017-9-26 20:30
<a href=http://abcinform.org/str-sett-com/>structu ...

查看全部评论(22)

精彩导读
想为 iPhone X 做交互设计?你需要读这篇文章
想为 iPhone X 做交互设计?你需
iPhone X(称之为 iPhone 10)已经正式发布,并将于 11 月 3 日开始... ...
信用已被透支殆尽,乐视汽车或成贾跃亭弃子
信用已被透支殆尽,乐视汽车或成
尽管在爆发了一系列讨债风波、资金危机、股权变动和易主剧情,并被愤... ...
人工智能时代,是时候学点Python了
人工智能时代,是时候学点Python
“是时候学点Python了”。作为一名不怎么安分的程序员,你或许觉得,... ...
《绝地求生》为什么这么火?
《绝地求生》为什么这么火?
当他们在“吃鸡”时,到底是在干嘛?分享一篇关于 “吃鸡”游戏《绝... ...
Python和Ruby两大语言全方位对比
Python和Ruby两大语言全方位对比
最近在考虑学习一门后端语言,在Ruby和Python直接犹豫,然后自己做了... ...
关注我们

关注微信公众号,了解最新精彩内容

WeChat

创梦者(cm-z.net)创建于2016年。

 

专注专业的技术学术讨论,前沿的科技资讯新闻,以及智能硬件结构拆解,电子产品评测等内容的科技媒体。



关于我们|Archiver|手机版|小黑屋|创梦者-与梦想者共创未来 ( 晋ICP备13003410号 )

GMT+8, 2018-10-22 19:42 , Processed in 0.057639 second(s), 21 queries .

本站由: 腾讯云 提供云服务器 Discuz! 提供后端支持

© 2015-2017 CMZ Inc.

返回顶部