赞助商
立即赞助

想为iPhone X设计UI?给你这11个设计小贴士

UI设计3年前 (2021)更新 流光
2.1K 0 0

iPhone X进行UI设计的时候,和往截然同的屏幕和交互方式,会使得UI设计师面一些全的挑战。当然,全的设计,在很多时候还会给设计师一些的机遇。

今天的文章当中,我将会分享一些iPhone X做设计的技巧和建议,这些建议够 iPhone X 上的UI设计更棒。别忘了,接来的9月将会来的iPhone,设计师将会和拥有Home 键的iPhone 越来越远,带有刘海的全面屏,将是今后设计师设计时候的战场。

想为iPhone X设计UI?给你这11个设计小贴士

A、屏幕显示

iPhone X 拥有一块超高分辨率、边角圆润的 Super Retina 显示屏,分辨率为 1125x2436px,虽它为设计人留下更的显示空间,并且能够为用户提供更加身临其境的用户验,但是在设计UI的时,设计师依需要考虑下面的问题:

想为iPhone X设计UI?给你这11个设计小贴士

1、3x 图片尺寸

iPhone X 上所采用的图片是 3x 的比例,当你在使用图片和其的视觉化素材的候,请确保包含了2x 和 3x 辨率的素材。此外,对于高辨率的字符和面素材,有矢量的 SVG 素材是最好的,这就规避了辨率上可能出现的问题。

2、新的显示尺寸意味着更多的空间和内容

iPhone X 的屏幕显示尺寸,宽度为 375pt,高度为 812pt,由于是3x 的显示,换算为px 为 1125 x 2436 px,在纵向上,iPhone X 的显示屏的宽度和以往的iPhone 6 、iPhone 7 和 iPhone 8 的4.7 英寸屏幕显示的宽度是一致的,因此,在横向上显示的息量应该和以往其的机型是没有差异的。差异主要出现在高度上,812pt 的高度比以往非全面屏要高出 145pt,这使得 iPhone X 多出了差不多 20% 的额外空间。

想为iPhone X设计UI?给你这11个设计小贴士

3、注意控制背景图片的高宽比

和以往 iPhone 屏幕尺寸比例不,iPhone X 高宽比已经不再是 16:9 比例,而是接近于 19.5:9,在选取背景图片素材时候,要注意不要让图片视觉主体和关键信息被屏幕切掉了,注意关键信息在这个屏幕比例下能够体地显示(比如不要让上下有过多留白)。

4、不要在屏幕边缘放置控件和元素

伴随着全屏另个问题,是用户在交互过程,会误触到屏幕边缘元素,如用户有带手壳习惯,元素也可能为太过于靠近边缘保护壳,而法被用户有效、快速地触发。,尽量让元素控件出现在屏幕易于交互主要区域。

想为iPhone X设计UI?给你这11个设计小贴士

5、使用安全区域来显示内容

安全区域内构建布局,可以确保内的可交互性,也避免了系统组件UI元素的重叠的状况。iPhone 8这样Home键的手机的界面中,较宽的框Home键的存,让标准的矩形屏幕整都安全的交互区域。但iPhone X不一样,底部虚拟的Home Bar,顶部屏幕的“刘海”承载了摄,整体异型,如果设的时候这区域底部置控件的话,会被盖住。两者之间的区域安全的。

而内容呈现时候,有两情况是例,是较长垂滚动内容,过滑动浏览可以完全展示,另是背景图片,为不涉及到交互,此不会被影响。

6、不要操心原生UI组件

如你所设计APP 全部都是官设计素材原生UI组件(比如导航栏、表格、标签栏什么),那么你不用担心它们和你界不匹配,它们定会恰到好处地运用到界。

B、Home Bar 指示器

从 iPhone X 开始,iOS 系统基础交互随着硬件改变,而发生了巨大改变,Home 键成为了历史,而交互也开始更加依靠手势交互驱动。比如前单击Home键回到主页交互被手势操作替代了,用户需要从屏幕底部上滑动能回到主页。

滑动是新的点击。

虽触的方式主要是屏幕底部边缘触,但是视上加上Home Bar 指示器,让人时刻意识到个互的存在,而在进行UI和APP设计的时,需要考虑到个控件。

想为iPhone X设计UI?给你这11个设计小贴士

7、避免在Home Bar 指示器周围放置交互元素

之前也提过类似的问题,避免在指示器周围放置交互组件,避免出现交互组件和Home Bar 之间的重叠,导致交互上的冲突。即使是靠近,也最好保持适当的距离,避免误触。

8、不要过于在意 Home Bar 指示器

Home Bar 是一个使用频率比较高的常用组件,不要过度装饰,也不要在计上过于调,不要隐藏它,尽量不要让用户别在它。

想为iPhone X设计UI?给你这11个设计小贴士

9、借助自动隐藏的功能,创造全屏体验

在展现视频或者其他强调视觉性内容时,可以借助自动隐藏Home Bar 指示功能,来创造更加沉浸体验。

C、刘海区域

苹官是将屏幕顶部放摄像头位称为 Notch Area,不过大家常会称为屏幕“刘海”,这个表述常形象。有些认为它很有吸引力,有则觉它很难看。是作为设计师,我们可以合理地借助这个区域来进设计。

想为iPhone X设计UI?给你这11个设计小贴士

10 、不要掩盖刘海区域

些设师会力图借设,让这区域看起那么显眼,让iPhone X 看起刘海,比如背景的顶部增加一条状的黑色背景,让顶部一条看起全黑的。这种强迫症式的审并不一贴合每人的喜好,尽避免这种况,因另外一方面它会让的iPhone X的体验被降级到 iPhone 8面,并且其他的APP 体验不一致。所设的APP 游戏应当完整填满整屏幕。

想为iPhone X设计UI?给你这11个设计小贴士

11、不要隐藏状态栏

APP 中的状态栏为户供了许多基础的信息,这些对于户而言是至重要的。虽然状态栏和往版本的iOS系统相更了(之前是20pt,现在是44pt),隐藏了之后确实够显示更多的容,但是和整个界面的尺寸相,升并明显。除非是在特定的需求之(营非深入的沉浸式体验),尽量要隐藏状态栏。

One more thing

想为iPhone X设计UI?给你这11个设计小贴士

援引自iFanr 的消息:今年新 iPhone 将不被命名为“iPhone 9”,而是出现一款名字直接为“iPhone”的产品。

具体来说,的款 iPhone 中最大的一款将被命名为 iPhone XS Plus,5.8 英寸的机就是 iPhone XS,它们都是原版 iPhone X 的 S 系列。而 6.1 英寸的 iPhone 将是一款更宜的机,将命名为 iPhone,作为本系列的入门级产。

每9月初的发布会到也就30天,新的iPhone 距离我们已很近了。以iPhone X 表的新iPhone 将会将手势主的新交互彻底贯彻下去,启下一交互的时。这无论对于设师还用户,都非常重的转变,好准备吧。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

设计师的厉害之处不是设计方案有多么天马行空,而是是否有能将其落地的能力。 你们是否遇到过这种情况:自己做的设计方案在...
ui设计
动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯,交互的上下文逻辑也因为动效的加持而更...
动效设计
从少年到大叔,只用了5年,还记得我刚入职的第一份工作的导师和我说:「设计没有什么捷径,有的只是多看、多想、多做,逻辑思...
ui设计
在设计行业中,提到精彩二字,很难不联想到大海彼岸的日本索尼、松下、三菱,不少日企都曾凭借设计风靡过全世界,可问题是,...
包装设计
网易UEDC – 李宁 :设计作品源于设计师的自我发现、情感和创造,在日常工作中我们加入字体、颜色、空间准则来让我们感性的表...
情感化设计
王M争:用户在使用产品过程中,难免会犯错。一个好的产品可以降低用户犯错的概率,并且提升错误被解决的效率。通俗点说就是帮...
容错性
@Daidai丶呆 :今天这篇文章的内容虽然较短,但是意义却非常深刻,值得各位 UI 设计师细品。 该项目旨在遵循以用户为中心的...
App图标
传统意义上以人为中心的设计,过分简化了人和技术之间的关系。是时候采用更加细致的分类和方法来进行描述了。 在 FastCompan...
以人为中心