手淘Web页面Bar和纵向适配的设计

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

记得在去年双11的互动页面中,我们折腾了一波iPhone8、iPhone8 plus和iPhone X的适配,特别是iPhone X刘海区域的适配。针对这方面的页面适配,沉淀出相应的适配方案。而今年的双11期间,苹果又推出了iPhone XS、iPhone XR和iPhone XR Max以及众多的安卓刘海设备。言外之意,前端在这方面的适配变得越来越复杂。面对众多场景,我们应该怎么去面对呢?接下来聊聊我在今年双11的主互动玩法中是怎么处理的。

面对的场景

在双11主互动玩法(最近手淘热门活动)双11合伙人 组队PK人气 集能量瓜分10亿红包。这是一个纯Web页面,在整个活动页面中有两个场景的适配是较为蛋疼的。首先就是页头和页脚的位置适配。

由于刘海机的增加,顶部和底部的安全区域成为不定因素,所以这一部分面对的难度和不定因素也变多。稍后我们会深度的剖析这部分从设计到开发应该怎么来处理。

另外一个场景是纵向(垂直)方向的适配。

其实纵向的适配一直是全屏模式的一种痛点。在不同高度的终端上如果要达到一样的效果,实现成本是非常高的。至少目前的各种方案都存在这样的问题。

线上最终效果

先来看看养眼的高端机iPhone X 和 iPhone XS Max:

再来看看普通的iPhone设备(iPhone6, iPhone6+, iPhone7+,iPhone8),我身边的设备都跑了一圈:

最后来看看众生相的安卓设备(我只是截取了部分):

是不是顿时感觉前端苦逼。

理解设计

前面的都是一些前奏,似乎有点长,但不要紧,接下来我们进入正题。

在开始编码之前,理解设计是非常的重要,特别是在这样的复杂场景(主要说的是复杂的适配场景)。整个项目的设计无法一一来进行剖析,这里就拿两个特别之处。因为我们要解的是Web页面的Bar,顶部Bar和底部的Bar。先上一张图:

优秀的设计师会给我提供多种状态,或者告诉我不同状态的尺寸。比如分享的页面,其底部就具备两种尺寸:

短屏下是尺寸是750px * 315px,理解成iPhoneX设备之下,都采用的是这个尺寸,当然背景图片也是如此;另外一个尺寸是750px * 448px,对应iPhone X及新出的iPhone XS/XR/XS Max。事实上这样的理解并不完全正确,因为有一些安卓的设备也具备类似于iPhone X的尺寸或更大的尺寸。暂时先忽略这个现象吧。

另外就是页面的顶部Bar和底部Bar的尺寸了。在iPhone X的设计中,顶部Bar的高是128px(设计师告诉我顶部Bar有两种尺寸,iPhone X以下的是128px,iPhone X 及其他带刘海的设备尺寸是176px),底部Bar尺寸是200px

做过iPhone X 适配,都知道有安全区域一说,或者说顶部刘海和底部Home键的位置(大小),但对于新出来的设备(不管是iOS系列还是Android系列)有好多的不确定。就算是抛开这些新设备,也面临着不少的问题。比如说Bar的尺寸,应该怎么确定,是不是跟着设计稿走就行;纵向布局应该怎么处理短屏和高屏。这一切的一切对于前端来说,在不同的项目中都会有未知的问题出现。那么问题来了,我们可以通过设计的标准或者说技术的手段来规避吗?

在我的理解中应该是可以的。为什么这么说呢?我们先来理解设计的标准(不同的设备出现,他都有一套完成的设计标准)。在接下来的内容我们以iOS系列为依据来做判断,因为安卓我真心的惧怕,也没有抽出那么多的时间一款款的测试(这对于做技术的而言是不好的一点)。

理解标准

理解标准需要具备一些基础,比如说一些术语的描述,如果你感兴趣的话,建议你移步阅读一下《移动端上的设计和适配》一文。如果没有这些基础也不会太防碍你继续往下阅读。

在苹果发布新款设备的时候,不管是设计师还是前端开发,都急切的想知道这些设备的各种参数,比如说分辨率、PPI之类的。

这里给大家特别推荐一个网站Vizdevices,可以让大家轻易的获取有关于主流移动设备的各项参数。比如下面的截图:

估计大家更为关心的是如何在项目中适配:切几倍的图用几倍的尺寸刘海怎么适配(新机是不是和iPhoneX一样)等等。到目前为止,最起码在这个项目中,前端和视觉设计师约定的尺寸还是以750px宽度:

而且我们构建工具中有关于单位之间的转换依旧约定的还是以750px为基础。也就是说目前主流还是以@2x为基准做设计稿,然后提供@2x图给前端,当然也有的设计师会额外提供@3x的切图给到开发人员。

手机适配采用几倍图与PPI有关系,也就是像素密度,所以我们可以理解为什么iPhone4、5、6之间分辨率和屏幕尺寸不一样,但是同样采用@2x图的原因,是因为它们有同样的PPI(326ppi。但新款的设备就不一样了:

从上图中我们可以获知,iPhone XS与iPhone X的数据是一致的。因此我们可以得出iPhone XS可以像iPhone X一样,提供@3x的尺寸:

而iPhone XS Max的PPI和iPhone X/XS是一样的,都是458PPI,只是其分辨率和Viewport要更大。由此可以推论出iPhoneXs Max使用的同样是三倍图@3x

从屏幕(Viewport)宽高比例来看:

  • iPhoneXS Max宽度1242/3=414pt,iPhone8 Plus宽度1242/3=414pt,两者的宽度一致
  • iPhoneXS Max高度2688/3=896pt,iPhone8 Plus高度2208/3=736pt

iPhoneXS Max比iPhone8 Plus长一截,多了160pt

因此,我们这次的设计,iPhoneXS Max也跟着iPhone X走的:

接着我们最后来看iPhone XR这款设备。其PPI是326,分辨率为828px * 1792px,屏幕宽度比为:414px * 896px。而iPhone其他款设备,比如iPhone 7 Plus、iPhone 7,甚至iPhone 5,它们的PPI都是326。也就是说iPhoneXR与苹果二倍图的PPI是一致。如此就可以推论出iPhoneXR使用的是二倍图@2x

同样从页面宽高比例来看:

  • iPhoneXR宽度828/2=414pt,iPhoneXS Max宽度1242/3=414pt
  • iPhoneXR高度1792/2=896pt,iPhoneXS Max高度2688/3=896pt

如果你够仔细的话,不难发现,从设备的宽度(Viewport)比来看,iPhoneXR 和 iPhoneXS Max是一样的,如下图所示:

对于设计和开发而言,他们不同之处就是iPhoneXR使用的是@2x图或尺寸,而iPhoneXS Max是@3x图或尺寸:

上面就是有关于苹果新机和老设备之间的差异。但这仅仅是iOS系列,我们还需要面对的是复杂的Android系列,但这一块在这篇文章不做过多阐述,因为我目前还不具备方面能力,能把这里面的故事说清楚。

有了这些基础和概念,我们就可以继续下一步的探讨了。

这些新尺寸对我们Web页面的设计和布局有何影响?如何

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/mobile/taobao-bar-design.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部