通过定义框架各层的布局，用户可以快速了解产品内容和功能模块的划分，以及各平台产品体验的一致性。本文主要关注三个部分:什么是框架，如何布局框架，如何应用框架布局。在项目中提前定义框架布局，有助于团队设计师输出页面模块高度统一的页面，希望对正在学习布局知识的你有所帮助！！！

什么是框架

从架构的角度来看，框架是一个框架——意味着它的约束和一个架子——意味着它的支持。它是用于解决或处理复杂问题的基本概念结构。在交互设计中，框架是指根据交互行为将页面划分为不同的层次，每个层次都有独特的特征和意义，使各级功能和内容构建的视图结构能够满足用户的认知。

按照交互形式分为背景层、内容层、全局控制层、临时层和系统层。

1.背景层

背景层有固定的样式，总是放在页面的底部。图层的颜色为中性背景色，便于突出显示和聚焦内容图层。

2.内容层

视图结构中的核心复杂层主要承载当前场景用户需要获取的核心信息，辅助核心任务的操作。所有组件都可以放置，全局页脚在交互级别也属于该层。内容层的基本布局结构为并行结构(N列)或父子结构。

3.全局控制层

用于整个网站的控制和导航功能，显示环境和上下文位置。包括标题、工具栏和导航栏。您可以放置按钮、搜索、菜单、选择器和选项卡组件。

4.临时层

与当前任务或内容相关的临时外观层优先级高于内容层，一般承载需要临时处理的任务或需要接收的反馈。当前页面上的场景呈现形式为滑出式或弹出式，包括两种模式:

内容层不可操控，被蒙版遮罩禁用，比如需要较为聚焦的分支流程。内容层可以操作，比如轻量级的tips、反馈、新手引导等。反馈提醒的优先级在此层中最高。对话框、提示、分支任务（如导航栏，当导航栏为缩起状态时，属于全局控制层，点击展开时，属于临时层）。

2.如何框定布局

2.1、确定画板尺寸

从统计数据来看，国内PC用户的前三位屏幕分辨率分别为1920*1080、1366*768和1400 * 900；其实1440的大小在中间位置。如果设计为基准，上下响应自适应后相对误差会最小，从而达到用户体验的最大公约数。

2.2、确定全局控制层布局

全局控制层按页面宽度布局有两种设计方法:1)全屏显示；2)固定宽度(在屏幕垂直中间选择合适的区域)。任何设计方法都有一列、两列、三列等布局形式。

没有专栏的书/报纸的版面设计

两列

三列

2.3、确定内容层布局

根据场景，内容层分为1)数据概述，2)列表页面，3)表单页面，4)结果页面，5)异常页面。每个场景都有一个或多个布局。

数据概述

列表页面

表单页面

结果页面

异常页面

2.4、确定临时层布置

根据场景，临时图层分为:1)带蒙版蒙版，2)不带蒙版蒙版。每个场景都有一个或多个布局。

戴口罩

无掩模掩模

3.框架布局的应用

框架布局的应用主要是根据确定的“全局控制层布局”+“内容层布局”形成一个完整的页面。设计时，设计人员根据业务场景在现有内容层布局中填充每个模块的内容。

上图& # 8220；结果页面& # 8221；比如设计者可以根据业务场景填写“结果反馈”、“结果说明”、“建议操作”、“补充信息”，其中“建议操作”、“补充信息”可以不补充。下图显示了“结果反馈”和“补充信息”场景的细化。

结果反馈

附加信息

“摘要”

在一个项目中，许多设计师一起参与完成项目。由于每个设计师使用的画板不一定相同，建议“统一画板”的尺寸为1440，根据& # 8221；全局控制层& # 8221；、”内容层& # 8221；、”临时层& # 8221；每一层的布局进一步决定了项目的整体布局，让参与的设计师有一个统一的页面布局基础。根据不同的业务场景进行设计时，不同设计师制作的设计在布局上会高度统一。

如果你在设计一个0-1的项目，希望布局三部曲《框架布局》《网格系统》《回应风格》对你有帮助！！！