header_v1.7.40

剪剪剪个小刘海——iPhone X界面设计官方准则译文

331天前发布

翻译文章 / 多领域 / 资讯
腾讯视频TVD 翻译,如需商业用途或转载请与腾讯视频TVD联系,谢谢配合。

iPhone X界面设计官方准则译文

导语


前几日苹果发布了最新机型iPhone X,iPhone X承载着全新性能的同时,与iPhone 8最大的差异则体现在了它的外形上,无边框设计配上小刘海导致很多强迫症设计师纷纷想要把这个小刘海修剪掉,不过在进行刘海修剪前让我们先来好好了解这次苹果给出的界面设计准则吧~



iPhone X


iPhone X 使用了一个超大高分辨率且无边框的圆角高清显示器,它能提供一个前所未有的沉浸式且内容丰富的体验。



屏幕尺寸


在纵向方向,iPhone X的屏幕宽度与iPhone 6、iPhone7和iPhone8的4.7’’显示屏宽度相匹配(都是375pt进行@3x)。然而iPhone X的显示屏比4.7’’的显示屏高出145pt,因此有大概20%额外的垂直空间给内容。如下图:

竖屏尺寸:1125px×2436px(375pt×812pt@3x)

横屏尺寸:2436px×1125px(812pt×375pt@3x)


为你app里所有艺术内容提供了高分辨率图像。iPhone X有一个@3x的超高清分辨率显示屏。对于字形、平面和矢量的设计,最好使用非分辨率相关的矢量PDF。对于栅格化图像,提供@3x和@2x两种图像版本。参阅图像尺寸与分辨率自定义图标



布局


为iPhone X设计时,你必须确保布局布满了屏幕,以及不会被设备圆角、顶部的感应器(小刘海)和底部的回到Home的操作条所遮挡。

使用系统提供的标准UI控件(比如导航栏、表单和图集)的app将会自适应于新设备的尺寸。内容会在新显示屏幕上自动布局好,UI控件会适当适配和摆放。


对于使用了自定义布局的app,支持iPhone X应也相对容易,特别是如果你的app使用了自动布局和遵守了安全区域与边距布局指导。


预览在iPhone X上app的效果。你可以使用Xcode里的模拟器预览你的app,检查是否有被裁减和其他布局问题。但有些功能,如预览色彩值很宽的图像,最好在实际设备上预览。


提供全面屏体验。确保app的布局背景延展到屏幕边缘。垂直滚动的布局,如表单和图集可以持续滚动到底部。


插入必要内容来防止间断。一般而言,内容应该居中并对称,它能在任何方面看起来都很棒,也不会被角落的圆角、顶部的感应器(小刘海)和底部的回到Home的操作条打断。为获得最佳效果,最好使用系统提供的标准界面元素和自动布局构建你的界面。所有的app应遵循UIkit定义的安全区域和布局边距,这可以保证基于设备和内容的布局。遵守安全区域可以防止内容和状态栏、导航栏、工具栏和标签栏的互相重叠。


注意状态栏的高度。iPhone X的状态栏是高于其他iPhone的。如果你的app基于了一个固定的状态栏高度来设计下方内容,你必须更新一下你的app,修改为基于用户的设备来动态放置内容。请注意,当iPhone X在运行后台任务如录音和位置定位时,状态栏不会改变高度。


如果你的app隐藏了状态栏,在iPhone X上最好重新考虑。iPhoneX的屏幕高度比以往4.7’’屏幕的iPhone提供更多垂直的空间,而状态栏只是占用了一个你的app可能用不到的一个位置。状态栏显示的信息,用户是觉得非常有用的,除非有更有价值的信息,状态栏才能被隐藏。

请注意当使用现有图片时的长宽比差异。iPhone X具有不同于以往4.7’’的长宽比,因此,原有4.7’’iPhone全屏显示的图像,在iPhone X上会裁剪或上下有黑边的形式来展现。相反的,iPhone X全屏的图像,在4.7’’iPhone上显示时就会裁减或左右有黑边来展现。请确保重要的视觉内容在两种比例下都能展示。


避免将重要的交互操作控件放在屏幕底部和角落。用户将通过使用手势从屏幕底部边缘去访问主屏幕和app程序切换,这些常用手势可能会使你自定义的手势失效。屏幕远处的角落会很难够得着。


不要遮挡或对重要的显示功能引起不必要的注意。不要通过放置黑色条在屏幕顶部和底部去隐藏设备的圆角、顶部的感应器(小刘海)和底部的回到Home的操作条。也不要用视觉装饰(如括号、边框、形状或指导文本),来引起用户对这些区域的特别注意。

要谨慎的使用访问主屏幕操作条的自动隐藏功能。当自动隐藏启用,如果用户一段时间没有碰触屏幕,指示器将淡出消失。当用户再次触碰屏幕它再出现。自动隐藏应该只有在沉浸式观看体验如播放视频和观看照片幻灯片时启用。


参阅适应性和布局



彩色


iPhone X的屏幕支持P3彩色空间,可以产生比sRGB更丰富更饱和的色彩。

使用更广的色域来增强视觉体验。拥有更广色域的照片和视频将会在iPhoneX上更生动逼真,使用广色域的视觉数据和状态指标将会更有影响力。


参阅彩色管理



手势


iPhone X使用了屏幕边缘的手势来访问主屏幕、app之间的切换、通知中心和控制中心。


避免与系统级的屏幕边缘手势冲突。用户将在每一个app的使用中依赖这些手势。在极少的情况下,沉浸式的app如游戏可能需要自定义比系统手势优先级更高的边缘手势——第一次滑动调用app自定义的功能,第二次滑动调用系统手势。这种做法(称为边缘保护)应该非常慎重使用,因为它使得用户使用系统级的操作非常困难。


参阅手势



附加设计注意事项


准确的引用认证方法。iPhone X支持FaceID进行身份验证。如果你的app使用了 Apple Pay或其他系统身份认证功能,不要在iPhone X里引用TouchID,因为实际引用的是FaceID。同样,在非iPhoneX里就不引用FaceID,而是引用TouchID。参阅认证


不要重复提供系统的键盘功能。在iPhone X上,即使是自定义键盘,Emoji/Globe按钮和Dictation按钮也会自动出现在键盘下方。你的app不能影响这些按键,所以避免重复键盘功能所造成的混乱。参阅自定义键盘



资源


资源下载photoshop和sketch的iPhone X UI设计模板


17

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功