你应该知道的折叠屏收集适配

你应该知道的折叠屏收集适配

作者:龙朝忠

随着三星Galaxy Fold和华为Mate X的发布,前端同学将面临一个新的任务:折叠屏的适。折叠屏虽距离普及可能还有很长一段路,大多数公司还未将折叠屏列入适配的范围,但是提前研究下折叠屏的适配还是极好的。

折叠屏手机概况

华为Mate X

华为mate x

技术参数:(由于手机还未正式上市,这里数据可能有出入

三星Galaxy Fold

s

技术参数

柔派-FlexPai

小厂手机,没啥知名都,资料较少

微软 Surfaceduo

最近新出,实际是双屏手机,暂无详细资料

从目前推出的这几款折叠手机可以看出:折叠手机从折叠到展开,屏幕的变化类似于iphone到ipad。

折叠屏适配的本质

当老板下令说:“我们的产品要适配折叠屏”,不同的人会有不同的反应:

产品和设计
  • 如何更好的利用空间?
  • 如何展示才不会使页面显得空洞?
  • 展开和折叠时分别怎么展示?
  • 展开后如何过渡?
  • ……
开发同学
  • 页面是否显示正常?
  • 是否按产品和设计的预期显示?
  • ……

因此对于我们开发同学来说,对折叠屏的适配首先要确定一个预期,即要先确定好交互和设计,才能评估工作。因此“折叠屏的适配先是一个设计问题,然后才是一个适配问题”。

目前情况下,产品和设计可能还不会考虑适配折叠屏的问题,那是否表示开发同学暂时无事可做呢?不尽然。

从以上折叠屏手机的情况来看,折叠屏手机的适配其实就是一个响应式设计的问题,而响应式设计有一个比较公认9条的基本原则,折叠屏手机的适配至少要满足这9项基本原则。

响应式设计9项基本原则

1.响应式设计 vs 适应式设计

响应式:响应式是流布局,它会自动适应屏幕大小,不管是什么设备。尺寸按比例设置,自动随浏览器尺寸变化而变化;简单只有一套代码;

适应式:自适应则采取多个不同的布局设计,多个屏幕的尺寸,使用哪个布局取决于屏幕类型。自适应作品用屏幕尺寸来决定用哪套布局。复杂,要根据市面上设备区分;

这两种设计方式彼此相辅相成,所以说也没有对错之分。具体情况要依内容而定。

2.内容流

随着屏幕尺寸越来越小,内容所占的垂直空间也越来越多,也就是说,内容会向下方延伸,这就叫做内容流。

这点对前端指导意义是:对于内容不固定情况,高度不要固定写死,写死高度就要考虑溢出情况,文本溢出、图片按比例缩放。

3.相对单位

为了适应不同屏幕尺寸和不同使用场景,使用绝对单位容易出现问题 。常见的相对单位有em、rem、ch、ex、vw、vh、vmax、vmin。

4.断点

断点可以看做是临界点,比如屏幕宽度小于这个宽度时显示一个样式,大于这个宽度时显示另一样式。常见的断点落地方案就是媒体查询,如:

1
@media (min-width:800px) and (max-width:1800px)

5.最大和最小值

有时候内容占满整个屏幕宽度(例如在移动设备上)是好事,但如果相同的内容在电视屏幕上也撑得满满的,就不太合理了。因为强行铺满,根据前面的内容流原则,可能会导致页面显示异常的大。这就是为什么要有最大/最小值。例如,如果宽度为100%,最大宽度1000px,那么内容就会以不超过1000px的宽度填充屏幕。

注意:Max-width和min-widht要设置合理,不能太大也不能太小。

如京东首页和优酷首页就遵循了这个原则:

6.嵌套对象

这是一种化零为整的思想,当多个元素位置是相对的时候,对每个元素采取响应式布局处理或许比较麻烦,这时候可以将这些元素用一个元素包裹起来,这样实现会更加明了和整洁。

7.移动优先还是台式桌面优先

这表示适配的起点,是先按手机做然后适配台式机?还是先按台式机做然后适配手机?

使用哪种根据实际情况决定,无所谓好坏,对于折叠屏适配来说肯定是手机优先。

8.web字体vs系统字体

想让自己的网站拥有炫酷的Futura或Didot效果吗?那就是用web字体吧。尽管web字体看起来很炫酷,但你要记住,这些字体都需要用户下载,字越多,用户加载页面的时间也就越长。另一方面,系统字体加载速度则快得多(前提是用户本机就有),但太过普通。

9.位图vs矢量图

你的图标是否有很多细节,并且应用了很多华丽的效果?如果是,那就用位图。如果不是,考虑使用矢量图。如果是位图,使用jpg、png或gif。矢量图则最好使用SVG或图标字体。其各有利弊。但你要时刻牢记图标尺寸——未经过优化的图片不能传到网上。另一方面,矢量图通常比较小,不过部分比较老的浏览器可能不支持矢量图。还有,如果图标有很多曲线,那有可能会比位图还大,所以要明智取舍。

折叠屏常见适配问题

前面讲到折叠屏的适配,首先是一个设计问题,然后才是一个适配问题。这里我们这里讨论的是违背以上9项基本原则的情况。以下案例基于三星Galaxy Fold测试。

违背“最大值和最小值“原则

  • 未设置合适的max-width

    由于设置的max-width较小,在Galaxy Fold展开态下,页面两侧有空隙。

  • 子元素超出max-width规定范围

违背”相对单位“原则

这里”看相似“按钮使用px设置尺寸,在一般手机上看上去正常,但是在折叠屏手机上就会显的很小。采用rem设置尺寸后就显示正常了。

对折叠屏的一些畅想

  • 折叠的方式会越来越多,屏幕会越来越宽

    如LG最新申请的一项专利显示,其可能正在研发一款三折手机,将来手机的尺寸可能会更加接近笔记本电脑显示器尺寸。或许像热门美剧《西部世界》中展示的手持折叠电脑在不远的将来就会实现。

  • 前端交互的方式会更加丰富

    如:“折”手机这个动作可以算作一个事件(需系统支持提供),如果权限设置合理,可以用来区分人机,不用再看花眼选图片了;半折”分屏,实现双屏联动。

    目前来说”折“这个事件虽然没有,然是要识别用户是有有做折叠和展开动作,可以通过监听resize事件来代替。

  • 屏幕变宽带来的新的体验

    比如说,在折叠屏展开状态的模式下,你将可以一边看直播,一遍看相关产品,二者相互不影响。

    图片类应用一是可以放的更大,看的细节更多,二是能实现在折叠屏展开状态下一侧看预览,一侧显示完整图片,跟方便我们浏览图片。

    随着屏幕的变大,一个窗口下可能放下多个任务,同时运行多个APP。

参考:

https://blog.froont.com/9-basic-principles-of-responsive-web-design/

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×