Safari团队公布iPhoneX浏览网页效果图!

来源:久实传媒       2018-03-30

   苹果iPhoneX将在10月27日开启预约,11月4日正式发售。我们都已经知道了iPhoneX上奇怪的刘海设计,更另开发者苦恼的是,苹果向开发者公布了UI适配的注意事项,强调了不能隐藏设备屏幕的圆角部分,同时也不允许设计顶部黑色状态栏来隐藏刘海。

   所以这项政策给开发者带来了巨大的麻烦。好在日前Safari浏览器的引擎WebKit团队为我们详细介绍了该如何为iPhoneX优化UI设计。

1.jpg

一、令人崩溃的UI设计

   WebKit团队以Safari为例,简单的说就是将网页内容移动到设备中间没有刘海的区域,但在有刘海的区域同样不能空白。就像上面这样,但也不能被刘海遮住,就像下面这样。

2.jpg

二、刘海遮住了网页内容

   利用viewport调整安全区域,就可以利用iPhoneX在安全区域内进行网页设计了,而在这个安全区域内,网页上的内容不会被刘海,圆角遮住。

33.jpg

三、安全区域

   在安全区域内设计完后,要将两侧的空白区域填充上相适配的颜色,最终效果就是这样。

四、横屏最终效果

1.jpg

五、竖屏最终效果

93849735dcb54480a34f05424dff9df8.jpg

   最终的效果看起来就好很多,但这只是网页部分的设计,还有更多的APP等着开发者重新设计,相信在11月份苹果iPhoneX上市以后,就已经有不少APP都做好了适配。


  • 上一篇:怎样做好网站的运营维护工作?
  • 下一篇:2018年如何做网页设计?
  • 

    久实传媒官方微信

  • 0431-81177023