提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
网络上很多类似文章不够全面,还有部分通篇介绍与设计无关的东西,索性自己整理一篇。
注:所有内容依据Apple官方发布设计指南。
一、屏幕尺寸与分辨率
iPhone X @3x 1125*2436
有什么变化?
1、在iPhone X之前,尽管iPhone已经有不同的屏幕尺寸,例如iPhone6s、iPhone 7 Plus等,但都是16:9的屏幕,而新的iPhone X是13:6屏幕(812 x 375 pt),屏幕相对来说增加了大约20%的垂直空间。
2、iPhone X 的屏幕分辨率达到 1125px × 2436px(458 PPI),可以显示高分辨率的@3x图片。对于其他平面和矢量的图形,最好提供独立分辨率的PDF格式的图片;对于其他栅格化的图片,需要提供@3x和@2x的图片。
需要注意什么?
全屏图、单屏显示界面、H5页等需要特别注意。
如果App中使用到了全屏背景图,且没有资源给两种比例的屏幕单独做适配,就需要考虑在不同比例切换的时候是否会影响到图片。(如图)4.7寸iPhone的全屏图像在iPhone X上显示时会出现剪裁或letterboxed(横向有留白)。同样,iPhone X上的全屏图像在4.7寸的iPhone上显示也会被剪裁或pillarboxed(纵向有留白)。
这种屏幕上的变化对于大部分瀑布流的页面来说,几乎没有什么影响。但对于新手引导、音乐播放等单屏显示界面需要重新布局(单屏高度提供了更多的内容高度),还有靠“等比缩放”完成适配的H5活动页结构也需要适当微调以适应iPhone X。
另外对于需要隐藏状态栏的应用程序,也需要重新考虑布局。所以如果不是特别需要沉浸式体验的界面,如视频、看图片,建议不要隐藏状态栏。
二、布局
在为iPhone X做设计时,由于之前的直角屏幕变为了圆角,所以我们必须确保布局覆盖到整个屏幕,不会被设备屏幕上的圆角、传感器和指示灯所遮蔽。
对于应用程序中大多数使用标准化的、系统提供的UI元素(如导航栏、表格等)会自动适配iPhone X。背景延伸到显示器边缘。
三、Home 指示条
iPhone X 迈向了全面屏,移除了原本在手机底部的实体 Home 键,取而代之的是一条 134 x 5 pt 的虚拟 Home 指示条,交互形式也由之前的「单击或双击Home键」统一操作为「底端上划」,需要我们设计注意什么呢?
1、避免将交互控件放在屏幕底部和角落。人们在屏幕底部使用滑动手势显示主屏幕和应用程序切换,这些手势可能会取消之前在此区域中的自定义手势。屏幕的两个角落可能是人们难以舒适到达的区域。
2、设计时为它保留位置。除了在某种特殊条件下,这个指示条将永远伴随着你的 App,成为强制的设计元素出现在屏幕中。这就意味着,我们设计时不得不留出空间放这条线,并考虑好周围元素与它的兼容关系。
3、如果 App 的底部是可滚动的内容则不用考虑。iOS 自带的通讯录是一个典型的带有底部导航栏的 App,对比 iPhone 8 和 iPhone X,你会发现在 iPhone X 上,底部导航栏是悬浮在虚拟 Home 条上方的。但Apple 的设计则例中也指出,如果 App 的底部是可滚动的内容(比如一个长列表视图)则不需要考虑,尽管让它们重叠吧!
四、安全区
手机竖屏状态下,安全区为屏幕顶端向下 44 pt(顶部刘海还要靠下一点),底部向上 34 pt 。
以上是官方提供的布局指南,这个布局有助于内容的定位,对齐和间距安全区域可以防止内容覆盖状态栏,导航栏,工具栏和标签栏。
竖直时的安全区可延伸至萤幕左右两侧,上部留44pt给状态栏;布局边距通常左右再内缩15pt。
横向时的安全区左右两侧皆内缩44pt;布局边距通常左右再内缩15pt。
需要特别注意的是,将手机横向展示时,需要注意“刘海”区域,做设计时尽可能左右对称内缩,可达成体验的一致性。
(不对称设计尽管空间利用率更高,但与用户的肌肉记忆相背)
五、需要思考的问题
以上是男性和女性的单手持握的热区图
以上是iPhone各个型号和尺寸手机右手持握的热区图
乔布斯曾说,手持设备最理想的屏幕尺寸应该是 3.5 吋。iPhone 如今已经增大到了惊人的 5.8 吋。一般人大拇指大概 2.5 - 2.7 吋长,iPhone 7/8 Plus 是 5.5 吋,所以苹果在 iPhone 6 Plus 中第一次引入了两次轻触 Home 键将屏幕整体下移的交互设计。
然而,随着 iPhone X 移除了实体 Home 键的,这个精彩的交互设计也随之消失了。然而,在 5.8 吋的 iPhone X 上,左上角的「拇指盲区」变得更大了。
虽然很多人已经习惯了直接在 iPhone 上的左滑返回,但以下两个因素阻碍了它成为事实标准的返回操作
1、该交互方式的可见性为零,可发现性较低。
2、App 自带的横滑操作可能造成交互冲突。
关于单手持握手机,显然iPhone X 给设计师出了一道难题。不知道大家有没有什么好的解决办法~
下面放几个苹果对全面屏手机设计的滑动控制全局的交互:
以上是我整理iPhone X设计指南及可能会遇到的问题,欢迎指正~
THANKS~
原文最早发自我的zcool账户
链接:http://www.zcool.com.cn/article/ZNTY3MTgw.html
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册