最专业的八方代购网站源码!

资讯热点
iPhoneX UI设计技巧

发布时间:2021-6-29 分类: 行业资讯

等待果粉的iPhone X终于预售了!同时期待设计师和开发者,他们将在iPhone X上看到他们的应用程序。苹果公司正式表示:iPhone X是智能手机的未来,未来的风向标可能给UI设计师和开发者带来一些小问题。

作为一名UI设计师,我总结了一些在设计iPhone X App时有效的技术:

1.使用正确的iPhone X画板尺寸

与之前的iPhone不同,iPhone X屏幕比上一代产品高出145个点(约占上一代产品的20%)并且有圆角。如下图所示:

2.避免在屏幕底部设置手势交互

由于Home按钮现在已被放置在底部的细条交互式控件所取代,因此除非必要,否则无需轻松设置手势交互,这可能会使Home提示模糊不清。建议您考虑其他滑动手势以及适合差距的任何界面。

3.显示完美状态栏

与上一代iPhone相比,iPhone X状态栏的垂直高度从22pt增加到44pt。因此,最好将背景扩展到显示边缘(包括状态栏)和垂直可滚动区域。建议将导航栏的颜色扩展到状态栏的背景,否则可能看起来很奇怪,当尝试手动将其与传感器外壳混合时,应用可能会遇到一些奇怪的情况。

用户界面的“全屏”体验非常重要,因此用户不再受到屏幕边缘的干扰。以下是Apple如何为设计师定义安全区域。 (如下图所示)

如果您的应用具有标准组件和自动布局,则您的用户界面也应适当缩放以适合iPhone X屏幕。

PS:只能隐藏状态栏以换取其他值。

4.提供全屏体验

与大多数宽高比不匹配一样,旧款iPhone屏幕的设计要么是裁剪的,要么是白色的。

在iPhone X的内容显示在小于4.5英寸的设备上的情况下,该设计甚至可以将额外的屏幕留空(图中两侧的垂直白边)。为了提供如此好的图像,还可以为不同的宽高比创建单独的屏幕调整。

5.参考正确的解锁方法

关于解锁,iPhone X不像往常一样使用Touch ID,而是使用Face ID;通过投影和分析超过30,000个不可见点来创建精确的面部深度图。如果您的设计涉及解锁Apple Pay或其他系统等功能,请务必参考Face ID而不是传统的Touch ID。

6.使用正确的分辨率

导出正确的颜色

iPhone X具有非常高的分辨率,因为它的新屏幕比前几代更长。其新的超级视网膜显示器的分辨率为2346 x 1125,像素密度为458 PPI。如此高的像素密度意味着切割图需要作为@ 3x而不是@ 2x的资源输出。

最好使用Display P3色彩空间而不是sRGB为iPhone X创建UI界面。这种颜色意味着更丰富,更饱和的界面,可以在显示P3颜色配置文件中导出为16位/通道PNG,最好通过Photoshop而不是Sketch。

Apple是否提供这些资源?

好消息是,Apple在Apple Design Resources和Apple UI指南中提供了这些资源。

原作者:Stefano Malachi

« 移动端返回顶部悬停按钮是否仍然需要存在? | 我必须知道UI界面中的“行为调用按钮”设计秘密 »