美文网首页
【2019-10-20】设计元素12篇-框架(转)

【2019-10-20】设计元素12篇-框架(转)

作者: Ludiwgbet | 来源:发表于2019-10-20 22:11 被阅读0次

初识

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

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

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

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

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

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


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

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


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

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


这简直是太智慧了。


利弊

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

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

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

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

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


进一步认识

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


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


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

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


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

PC上的嵌套框架:


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

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

相关文章

  • 【2019-10-20】设计元素12篇-框架(转)

    初识 这是猫扑,这个页面里,左右两栏,各自单独滚动。 这是新浪体育的直播,这个页面挺长的,可以滚动。中间栏还可以单...

  • 网页设计 极简主义设计

    什么是极简主义设计? 极简主义设计可以通过简单的框架来识别。设计中仅包含功能的必要元素。 诸如颜色和​​排版等元素...

  • 精益产品设计

    ·构建产品模型 ·用户需求分析 ·设计产品规则 ·功能设计 ·框架设计/流程设计(线下业务转线上产品时,需要先有流...

  • Material_Design风格的web框架

    Materialize Materialize 是一个响应式的前端框架,设计样式及组件元素丰富。 Material...

  • rpx 和px 计算公式

    开发者可以通过设计稿基准宽度计算页面元素 rpx 值,设计稿 1px 与框架样式 1rpx 转换公式如下: 设计稿...

  • 1-1应用架构_界面基本元素-Human Interface G

    大多数iOS apps使用UIKit(一个定义公共元素的设计框架)来组建。这个框架让apps在整个系统中有统一的表...

  • 截止时间形状-任务时间安排介绍元素设计-ppt模板分享

    截止时间形状-任务时间安排介绍元素设计-秒表元素设计-时钟元素设计-沙漏元素设计-ppt模板分享 所有元素可编辑。...

  • MD的web框架之一Materialize(使用)

    Materialize Materialize 是一个响应式的前端框架,设计样式及组件元素丰富。 下面简单介绍一下...

  • Android 架构学习目录

    【转】剖析Android开发中常用开源库的基础知识,架构设计和核心原理,目前规划剖析的开源框架有:1)日志框架:l...

  • JQuery基础一

    1.说说库和框架的区别? 库类似于工具,在写代码时能更方便,例如封装$DOM元素之类框架类似于房子的户型,已经设计...

网友评论

      本文标题:【2019-10-20】设计元素12篇-框架(转)

      本文链接:https://www.haomeiwen.com/subject/dxtzmctx.html