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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
为iPhoneX设计(译文)
0.0°
2018-05-28 自译外文 设计趋势 原作者: NIELS 举报 3995 4 12 0

最近在Medium上看到来自The Pocket 交互设计师NIELS的一篇好文,文章介绍了要如何为最新的iPhone升级你的用户界面。希望这篇文章会帮到你。

写在前面的话:翻译水平有限,如有错误还请指正,你也可以直接跳至原文。



iPhone X (读:iPhone 10)它将于11月3日正式发行。震撼的超视网膜全屏显示,分辨率1125×2436px。屏幕顶部的裁切,你可以找到具有未来色彩的面部解锁功能。


为这台漂亮的机器设计会带来一些新的挑战,同时也带来一些新的设计机会。在纵向模式下设备的宽度与iPhone6,7和8相同,但更高,比4.7寸的屏幕高出145pt,这样就增加了20%的垂直显示空间。在设计 @ 1x 时, 需要一个375×812px 的画板。你不必像iPhone8一样输出@2x的图片,但由于新的视网膜屏,要跟iPhone7-8Plus一样输出@3x的资源图片。


开始创建设计时,你必须确保你的界面不会因设备的独特性(圆角,顶部的裁切或者Home键)而被遮挡住。顺便说一下,新的Home键是位于底部的小横条,它取代了物理home键,你可以从任何应用程序向上滑动回到主屏幕或做多任务处理。

Image title


看那条白色的线,它就是新的home键


如果你目前的应用程序是用iOS原生组件开发的,那么你的应用程序将会适应这款新的iPhone。导航栏、表格、集合视图和标签栏。它们将在新的iPhone自动适配。

Image title

左边是iPhone8的设计,右边是自动适配到iPhoneX上的效果


如果你使用自定义布局,你的应用程序可能需要更新以适应新的屏幕布局。如果你使用自动布局,那可能相当容易。


让我们开始吧

首先,接受设备的变化,苹果员工并没有可以像你隐藏这款昂贵硬件的精彩功能。


确保你创建了全屏体验。让滚动视图滚动到屏幕最底部甚至超出显示器弯曲底部的边缘。苹果还要求你在设计时避开顶部切口和底部圆角,所以不要放置黑色的状态栏,这样会让它看起来像是教科书试的iPhone8。


在安全区域嵌入重要信息。确保重要内容在安全区并使用对称插入, 这样你的 UI 就不会被设备的传感器(切口)或圆角所截断。如果你是用自动布局,你的内容将自动适配到安全区域,所以你的设计不会被遮挡在传感器(切口)或者Home键之后。

Image title

新的状态栏。由于显示器顶部的传感器(切口),新的状态栏被分成两部分。在iPhoneX上状态栏加高了,你需要升级你的界面,在UI上做一些特殊的空间处理(状态栏从以前的20pt,变成现在的44pt)。确保它可以在高度上动态变化。最重要的是, 如果用户拨打电话或使用导航时,这个高度不会改变, 这一点在其他的iphone 上也是一样。

Image title

分成两部分并且高了的状态栏


显示新的状态栏。如果你目前在设计中隐藏了状态栏,苹果会要求你重新考虑这个决定。由于屏幕较高,你有更多的空间显示你的内容,充分利用状态栏。用户可以在那里找到有用的信息,大部分时间这个位置都不会被其他UI元素占用。


全屏图像。如果你目前在设计中使用了全屏图像, 你需要在新的 iPhone上更新它们。它们可能被裁切, 视觉的一个重要部分可能被隐藏。

Image title


不要在屏幕底部放置交互式控件。Home键周围的间距纯粹是为手势触碰创建的,向上滑动回到主屏幕。将按钮放在Home键或视屏底部圆角附近,都不是好选择。用户很可能意外的触碰到Home键,很难到达想去的用户界面。你仍然可以使用标签栏和功能栏,但请记住,它们的操作不干扰Home键。

Image title


不要隐藏Home键。当用户几秒钟不触碰屏幕时,IOS可以在你的应用程序中将它会自动隐藏。当用户再次触摸屏幕时, 它将重新出现, 这主要应用于如观看视频或照片这种身临其境的体验,Home键还会根据应用程序的背景自动更改颜色。

Image title

色彩更丰富。新的超级视网膜显示屏,可以显示更多的颜色,P3色彩模式而非sRGB。这意味着它会显示更丰富和更饱和的颜色。特别是视频和照片将受益于这种更广泛的色彩范围。


向上滑动,注意手势。由于物理Home键消失,你通过手势与你的iPhone互动(比以往任何时候都更频繁)。当你向上滑动时,你就可以回到主屏或者去到多任务视图。当你在 Home键上向左和向右滑动时, 您可以在打开的多任务程序之间切换。通过从屏幕顶部向下滑动, 您可以转到通知或控制中心。在游戏中更是如此,你可以使用自定义手势,这些手势可能覆盖IOS的原生手势。你可以使用自定义手势实施“边界保护”,但在OS操作系统之前,仅有过一次。请谨慎使用,因为这将使系统功能更难操作。


Face ID。iPhone以前有一个很好的功能Touch ID,允许用户通过使用指纹来解锁他们的设备或执行密码锁定的操作。Face ID的实现靠的是iPhone X顶部一小块没被屏幕覆盖的区域,苹果换成这种更先进安全的方式来解锁你的设备。进入人脸识别模式,它使用了一些非常棒的算法来检测你的面部并解锁你的设备。应用中会有一些新的用户界面,确保你的iPhoneX有丰富的用户体验,同时确保你在用户激活时不在引用Touch ID,将其替换为Face ID。

Image title


自定义键盘。在设计自定义键盘时, 不需要在键盘上添加表情或听写按钮。因为它会自动添加到键盘下方的 Home键区域。


更大的导航栏。iOS 11 原生导航栏的设计得到了更新, 它们现在更高了。这款设计在iPhone X上将会非常出色,并将与新的状态栏完美结合。考虑在你的设计中使用它。在滚动时,会有一些不错的原生动画效果呈现。


长话短说

• iPhone X的高出145pt,所以设计为375×812pt而不是375x667pt

• iPhone X 使用 @ 3x 图片的资产管理

• 创建全屏体验, 不要隐藏设备的独有功能。

• 将重要内容放置在屏幕安全区, 以确保它始终可见且不被设备的传感器或圆角所遮   挡。

• 分成两部分的新的状态栏,以前高22pt,现在高44pt。

• 全屏图片或许/应该更新, 以保证其充分显示。

• 不要在屏幕底部靠近Home键的地方添加按钮。

• 除非非常必要,否则不要隐藏Home键。

• 更丰富和更饱和的P3颜色配置

• 注意在 Home键和状态栏附近的自定义手势, 不要搞乱用户预期的原生手势。

• Face ID替换Touch ID,更新你的UI,并将替换原本使用Touch ID的页面。

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

• 较大的导航栏将在这块更高的显示屏上得到更好的视觉和动画效果。


  也可以观看苹果的视频Designing for iPhoneX


----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

版权说明

本文翻译自https://blog.prototypr.io/designing-for-the-iphone-x-4239d5ac736c

原文作者:NIELS

翻译:Alicemu

如需转载需注明出处。


更新:2018-05-28

收藏

4人已收藏

MLittleRoll

专注

  • 7

    作品

  • 57

    粉丝

  • 23

    关注

  • 教育类产品ICON设计
  • 考研产品H5推广
  • 单词PK
  • H5推广设计

    猜你喜欢

      2018-05-28 自译外文 设计趋势 原作者: NIELS 举报 3995 4 12 0

      为iPhoneX设计(译文)

      0.0°

      你确定要举报为iPhoneX设计(译文)

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年09月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      12
      4
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录