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

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


底部元素


1、底部无操作

设定Home indicaror背景色为透明,信息内容撑满屏幕展示


2、底部有操作

2.1 底部Tab bar、筛选项、输入框、底部浮出的半屏弹窗等

吸附于距下34pt的Home indicaror之上,Home indicaror背景色与底部Bar底色保持一致。


2.2 底部邻近操作按钮(如:返回顶部、旅图频道中的上传照片等)

向下吸附于距下34pt的Home indicaror上方,距离Home indicaror的间距与原页面间距保持一致。


2.3 底部为操作按钮

以途牛为例,底部有操作按钮的场景主要涉及详情、订单此类与下单流程强相关的页面之中,为了保证用户整个下单链路的流畅及与iPhoneX机型的完美适配,针对此模块,我们也进行了一系列的探索与实践。

本着页面按钮与iPhone X物理圆角兼容更和谐、更整体的初衷,我们最终选定底部为操作按钮的适配规则为:保持4.7”屏样式不变,修改iPhoneX中底部按钮样式为圆角,圆角弧度为4的方案。



12345共5页
联盟广告
×

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

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

标签:规范适配

相关推荐

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

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

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

×

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

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

×

充值学币 立即开通