途牛iPhoneX适配揭秘:组件化系统下的动态设计(2)

来源:网络   作者:热心网友   发布时间:2018-01-11    浏览次数:187


顶部元素


1、顶部Bar

调整原有顶部组件统一吸附于距上44pt的状态栏下方,状态栏处背景色吸取顶部Bar背景色保持一致。



2、顶部带渐变/带画面元素Bar

当状态栏无法吸取顶部Bar的背景色或图片适配变形时,设计师主要有以下两种方法进行适配:


① 使用两张切图适配,根据页面效果提供向上加高24pt的背景图片进行替换

这种适配方法呈现效果最佳,但是会使得我们的APP包文件量过大,客观上不适合作为途牛适配的标准


② 使用一张切图适配,通过缩放来完成页面的适配

这种适配方法无论是向上适配还是向下适配都会产生页面的裁切与留白,对于会员中心这种支持自定义个性化皮肤替换的业务场景,容易丢失画面关键内容的露出或遮挡,可控性较弱。

而向下适配中仅裁切顶部的方案需要设计师将画面元素至于偏下的位置来保证适配小屏时的画面效果,这种方式是使用一张切图适配时较好的方案,但是鉴于技术问题,我们暂时也无法实现此种裁切方式。

③ 使用一张切图适配,统一4.7寸屏与iPhoneX屏幕中头部的高度

作为最终应用于会员中心的适配方案,这种适配方式虽然使得iPhoneX上的背景高度没有做到等比例的缩放,但是保证了大小屏双端的基本视觉呈现,是在视觉效果和开发成本中最为折中的适配方式。


3、透底背景图

调整原有顶部组件库中透底Bar的位置吸附于距上44pt的状态栏下方,图片根据页面模块高度进行等比例拉伸


4、透底运营位

通栏的运营广告图片常见于机票、酒店等品类频道首页,其适配方式前面第二点的方式类似,只能采用一张切图的适配方法,因此用保持广告图高度来进行适配。

不同的是此类页面在iPhoneX中呈现使用单独配置白色顶部Bar的方案进行适配,以保证运营banner中文本信息的正常露出,当然后续我们也会持续探索针对此类情况的更佳表现方式。



12345共5页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:规范适配

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/7025.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通