邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

iPhoneX浏览网页效果图公布,强迫症看了想打人

中关村在线 2017-09-26 22:58:30 阅读:2493

原标题:iPhoneX浏览网页效果图公布,强迫症看了想打人


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


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


令人崩溃的UI设计


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


刘海遮住了网页内容


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


安全区域


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


横屏最终效果


竖屏最终效果


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


原文链接:http://m.zol.com.cn/article/6569672.html?tuiguangi...




扫描二维码,关注 “摹客” 微信公众号。

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:748169314 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶