由于iPhone X长出来一截,因此之前全屏比例的图片在iPhone X上就会变形,如下图所示,因此开发工程师可能为了适配,将原有的图片拉大,充满整个屏幕,如果不拉大,那么就会出现下图第一排最右边图的效果,上下白边非常难看。另一种情况,你的图片可能会挤压变形,那就是第二排图片的样子了。 因此,设计师要根据iPhone X的分辨率为启动界面,闪屏图片,以及一些全屏浮动的提示框设计一套图片,好吧,我们的工作量又增大了。 设计师要做的-注意色彩空间 iPhone X的显示屏幕使用 P3色彩空间,相比较传统的sRGB色彩空间,它显示的色彩会更加丰富,更加真实,因此设计师的老问题就来了“为什么我在Sketch中导出的图片”放到手机上颜色不一样呢?答案就在这里了。不过,静电觉得这个问题我们是无解的,毕竟色彩空间是跟随显示介质走的,比如你的显示器是一种色彩空间,手机又是另一种,因此这种隐形的色彩差异,咱们就忽略了吧。 设计师要做的-注意视频的展示方式说到这里你一定会吐槽这个大刘海,毕竟遮住了一部分的影片内容,但你也可以选择将他们缩小显示一下,也是个好主意,刘海部分就不要放什么东西了。以下是苹果的建议,咱们看看就好。 什么?你说王者农药啥样?来!看下图,其实不适配挺好的。 设计师要做的-交互的改变交互的改变在iPhone X上非常明显,比如通过底部控制条上滑返回桌面等等。大家可以看看本文开头的视频展示,静电详细的为大家做了介绍。总之,不管你是否拥有新手机,一定要尽快适配它哈,至于人脸识别之类的黑科技,静电体验过觉得它太赞了!识别速度和指纹识别是不相上下的,甚至更流畅,像静电这样的大汗手,真是福利呀。 不想看长文?那直接看总结! 1.务必注意iPhone X的安全区域,并不是把设计稿直接拉长就可以 2.注意全屏图片和视频的适配 3.一倍图下你可以用375-812px来设计,这个兼容iPhone plus,也就是说,三倍图要成为主流了? 4.上Status bar区域44pt高,下控制条区域至少34pt高(一倍图情况下) 5.注意交互方式的改变所带来的影响。 思考问题的小提示:请注意静电分析问题的方式,遇到一件新事物,比如新手机,你可以从它的分辨率,尺寸入手,进而推算出其屏幕密度,这样你可以立马知道它的一些设计规则是否跟老的机型有区别。思考问题的方式至关重要,大家要尝试从这方面去分析,比如分析静电的文章,而不是只想要一个最后的结果。因为过程其实很重要,对于设计师来说更是这样一个道理。 (责任编辑:admin) |