初识

这是猫扑,这个页面里,左右两栏,各自单独滚动。

这是新浪体育的直播,这个页面挺长的,可以滚动。中间栏还可以单独滚动。页面里嵌套一个小滚动窗口。
在网页代码里,
实现第一种分屏效果,代码是< frame >...…< /frame >。
实现第二种嵌套效果,代码是< iframe >...…< /iframe >。
这两种被统称为:frame,中文译为:框架。
现在技术发展了很多,实现这样的页面已经不再局限于这些代码了。我们这里只是讨论这样的页面,在设计上的问题。
区分一下这两种框架,第一类被称为:分屏框架,第二种称为:嵌套框架。
手机上,这两类框架也都有。

iOS日历,横屏时,左右的分屏框架。
嵌套框架的则无法直接搬到手机上了。如果直接搬,是这样:

如果是这样,当滚动到小窗口出现后,手指再滑屏幕,就很有可能滑到小窗口里了,如果小窗口面积很大,那就有可能落入陷阱,逃脱不了了。
其实这个问题在PC上也有,不过PC屏幕大,而且是光标操作,问题不那么严重,而在手机上,手指头大,而屏幕小。
所以在手机上,把小窗口的滚动变成了横向:

这简直是太智慧了。
利弊
框架是把一个屏幕当多个用。能让用户同时处理多组信息,办事效率更高。
框架缺点也显而易见:框架把屏幕分成了多个区域,这当然比“一整个儿页面”要更难理解一些,使界面这个二维空间有点儿空间错乱。嵌套框架还会出现上面说的“滚屏陷阱”。
PC网页中,框架越来越少了。左右分屏曾是猫扑最显著的特征,但上面看到的“猫扑”左右分屏,是2018年的版本,2019年初,已经不再这样了,变成了更普通的“一整个儿页面”。
软件中还常见,比如:邮件、日历、iOS pad版的设置…
相比于PC网页,软件能帮用户的往往更多,用户价值更大,用户的熟练度也高,用框架还更能被接受。
框架像是一剂猛药,治病但也有毒,病的不严重,轻易别用。
什么情况,才是“应该”用的呢?我们得用一个新概念“对象模型”才能说清楚。
进一步认识
我们先来建立这样一个认识:

一个页面是一堆内容对象凑在一起,屏幕是个框框,滚动屏幕,就是在移动框框,让用户得以看到对应的内容对象。
就像是一个人拿着放大镜,逐区域的查看一份文稿。
那么,分屏框架就可以理解为是:

在屏幕区域内,同时给出两堆对象。
上一部分里的问题:“什么情况,才是’应该’用的呢?”
“我们不得不同时给您提供这两组对象,不然,您要完成的事儿,就会非常吃力。”
手机中的嵌套框架,小窗口横向滚动的,就是:

再回应上面的问题,“我们不确定您是否想多看这类内容,所以就横着排了更多的这类内容,有兴趣您就多看,没兴趣就滚屏过去。”
PC上的嵌套框架:

嵌套在其中的小窗口,还只能是个窗口,没法直白的解释。
既然不好解释,又会出现“滚屏陷阱”,那把手机上的嵌套框架,横向滚动的小窗口,搬到PC上?不成,因为绝大多数鼠标都只有纵向的滚轮,横向小窗口用起来不方便。
网友评论