【2019-10-20】设计元素12篇-框架（转）

初识

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

这是新浪体育的直播，这个页面挺长的，可以滚动。中间栏还可以单独滚动。页面里嵌套一个小滚动窗口。

在网页代码里，
实现第一种分屏效果，代码是< frame >...…< /frame >。
实现第二种嵌套效果，代码是< iframe >...…< /iframe >。
这两种被统称为：frame，中文译为：框架。

现在技术发展了很多，实现这样的页面已经不再局限于这些代码了。我们这里只是讨论这样的页面，在设计上的问题。

区分一下这两种框架，第一类被称为：分屏框架，第二种称为：嵌套框架。

手机上，这两类框架也都有。

iOS日历，横屏时，左右的分屏框架。

嵌套框架的则无法直接搬到手机上了。如果直接搬，是这样：

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

所以在手机上，把小窗口的滚动变成了横向：

这简直是太智慧了。

---

利弊

框架是把一个屏幕当多个用。能让用户同时处理多组信息，办事效率更高。
框架缺点也显而易见：框架把屏幕分成了多个区域，这当然比“一整个儿页面”要更难理解一些，使界面这个二维空间有点儿空间错乱。嵌套框架还会出现上面说的“滚屏陷阱”。

PC网页中，框架越来越少了。左右分屏曾是猫扑最显著的特征，但上面看到的“猫扑”左右分屏，是2018年的版本，2019年初，已经不再这样了，变成了更普通的“一整个儿页面”。

软件中还常见，比如：邮件、日历、iOS pad版的设置…
相比于PC网页，软件能帮用户的往往更多，用户价值更大，用户的熟练度也高，用框架还更能被接受。

框架像是一剂猛药，治病但也有毒，病的不严重，轻易别用。

什么情况，才是“应该”用的呢？我们得用一个新概念“对象模型”才能说清楚。

---

进一步认识

我们先来建立这样一个认识：

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

在屏幕区域内，同时给出两堆对象。
上一部分里的问题：“什么情况，才是’应该’用的呢？”
“我们不得不同时给您提供这两组对象，不然，您要完成的事儿，就会非常吃力。”

手机中的嵌套框架，小窗口横向滚动的，就是：

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

PC上的嵌套框架：

嵌套在其中的小窗口，还只能是个窗口，没法直白的解释。

既然不好解释，又会出现“滚屏陷阱”，那把手机上的嵌套框架，横向滚动的小窗口，搬到PC上？不成，因为绝大多数鼠标都只有纵向的滚轮，横向小窗口用起来不方便。