【企业微信去名字背景颜色】详细信息|页面框架级别概述。-拍拖百科

编辑指南：有些学生可能混淆页面框架级别和页面信息级别，但实际上是不同的。那么，页面水平究竟是什么？有什么用？我该怎么写？这篇文章的作者对此进行了分析，我们一起看一下吧。

最近收到了一位读者朋友的提问。

“我老板看完我的设计稿后，问我能告诉我页面框架水平是怎么划分的吗？我就呆在那里了！页面框架级别是什么？有什么用？我该怎么写？”。)

相信很多朋友也有类似的疑问。另外，同学会直接混淆页面框架水平和页面信息水平。本文介绍了与页面框架级别相关的知识和应用。

什么是01页帧级别？

每一页其实都不是我们看到的平坦状态。可以根据交互行为和功能特性等分层划分页面。确保用户工作的顺畅和确定性。

页面框架级别划分目前没有严格的规范。以阿里巴巴的Fusion Design规范为例，可以将页面分为以下四个步骤：

1. 背景层

背景图层总是放置在页面底部，图层颜色是中性背景颜色，因此可以轻松地强调其他内容图层。

内容层是大多数用户工作集中的最核心、最复杂的层。内容层通常使用一些卡对信息内容进行分组和分类，承载当前场景中用户需要获得的关键信息和任务。

全局控制层对整个产品执行控制和导航功能。通常，配置包括头部导航栏、侧面导航栏、工具栏等。

顾名思义，当前任务运行时生成的临时信息、临时功能层、优先级高于当前操作任务本身。一般来说，目前有临时需要处理的工作或需要接受的反馈等，一般托管弹匣、抽屉、信息提示栏等。

这四个级别从上到下是临时层-全局控制层-内容层-背景层。顺序通常不能更改。最常见的例子：临时层上的弹匣出现后，用户必须先完成弹匣的工作，才能去内容层执行其他工作。

因此，页面帧级别实际上决定了产品的交互逻辑和操作顺序。虽然这些级别似乎是可见的功能领域，但要更加注意其中蕴含的逻辑。这些组件和设计实体只是产品交互逻辑的外在表现。框架水平不仅是对设计师的要求，在产品实施和开发过程中也必须遵守和实践。

第02页的帧级别与信息级别

很多学生不能区分“页面的框架级别”和“页面的信息级别”，我们可以将两者区分为：

更多地用于在产品交互框架级别对页面的各种功能和工作区进行分层。重点考虑用户的工作顺序，以确保用户工作的顺畅和确定性。在用户不容易注意到的下图中，可以看到页面框架级别的部分内容。

将应用于更多产品视觉内容级别页面上所有可见的信息和内容分层，重点关注用户阅读和接收信息的顺序，确保用户获取信息的效率。用户可以直接查看的下图显示了页面信息级别的基本模式。

再举一个不是很恰当但能帮你区分两者的例子：

如果说把产品比作一个人，页面的框架层级相当于是他的认知逻辑和行为顺序。你跟他聊天时，他会用他的沟通方式和思维逻辑引导你先聊完一个话题，再聊另一个话题，然后再开始下一个行动。

而页面的信息层级则相当于是这个人的外表。你看到他时通常会先看他的五官，再看上半身，最后看到脚。如果他想让你最先看到他的上半身，他就会穿上鲜艳和夸张的上衣；如果他想让你最先看到他的脚，他可能会穿一双超级酷的球星同款运动鞋，甚至还会在鞋上增加发光和发声的装置。

03 页面框架层级的功能

页面框架层级作用及意义如下：

用户的操作行为顺序可以被有序地规范和引导，通过分层让操作有先后。

层级与层级之间有逻辑的视觉表现，可以让产品的重点功能区域得以进一步凸显，辅助于页面的信息层级，让感性化的视觉效果有据可循。

比如你可以针对不同层级，定义用户视觉专注度和色彩特点，这样可以尽可能的避免产品用色混乱，在专注效率的 B 端产品中尤为适用：

我们曾经在文章《详解｜页面级组件的功能及应用》中详细讲解过页面级组件的意义。页面框架层级决定着页面组件的内容，可以让一个页面在最开始的设计和搭建过程变得更加简单高效。

比如Ant Design的 ProComponents 组件库就是基于页面框架而开发的模板组件，对 0-1 搭建的页面提供更高级别的、更规范化的框架支持。其中的 ProLayout 就可以用于页面基础布局的搭建，提供开箱即用的菜单和面包屑功能：

页面框架层级可以帮助设计师从更加整体的视角看待和理解产品的交互逻辑和视觉呈现。设计师在应用和理解的过程中也要注意：

在思考产品交互逻辑时按照从高到低的顺序（临时层 – 全局控制层 – 内容层 – 背景层）来处理和检验页面，更符合用户的认知及操作习惯。

虽然我们将页面做了层级的划分，并不意味着每个层级可以单独处理交互风格和样式。在所有的层级中的交互形式（比如反馈形式、组件结构、元素样式等）需要保持相对的一致性，对用户来说更加可预测和易理解。

每个层级都应具备可扩展性，随着产品的功能叠加和更新，可以进行布局上的延展和扩充。由于层级之间的内容和功能需求差异大，这种扩展性在每个层级中可以相对独立。

以上，希望框架层级可以更好地帮你梳理页面的交互设计思路。

元尧，微信公众号：长弓小子，人人都是产品经理专栏作家。一线互联网大厂B端体验设计师，清华大学美术学院本硕连读。曾负责国内最大开源组件库Ant Design组件的设计和运营工作，目前负责国际业务线B端产品体验设计和组件库的搭建工作。

本文原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议。