B端系统的界面设计与C端系统截然不同，无需追求华丽的外观以吸引用户，亦无需通过复杂的视觉效果来诱惑用户。相反，它应追求简洁明了的视觉传达和直观易用的应用功能，以实现用户快速完成任务后即可离开的高效体验。基于此特性，我们可以提炼出一套标准化的B端后台系统页面架构，并将其转化为可复用的页面组件，以优化开发效率和用户体验。
| B端后台系统 | 通用页面结构 | 页面结构元件 |
|---|
布局结构
通常来说，B 端系统有两类页面结构。
第一类 上、左下、右下
页面结构的顶部区域，以其贯穿整个页面的视觉效果，占据了显著的首要位置。因此，系统的一级菜单常被置于该区域，以区分系统的主要功能板块。我们称这一区域为一级菜单区域。
一级菜单区域通常从左至右依次展示系统LOGO、系统一级菜单（即系统板块）、消息&待办提示、语言选择等功能，以及个人设置等入口。
左下方区域为次级菜单区域，该区域用于展示系统各功能板块下的分类功能菜单。
右下方区域则是主体功能区域，作为整个系统页面的核心交互区域，该区域具体展示用户所选功能的交互页面，包括功能标题区域和功能交互区域。
三块区域中，顶部的一级菜单区域和左下的次级菜单区域需要固定在页面上，也就是 PIN 住（“各板块属性设置”部分会说明如何在Axure 中PIN 住一个板块），PIN住后的区域不会跟随页面滚动条一起滚动。
第二类 左、右上、右下
页面结构的左侧区域自上而下贯穿整个页面，占据主导地位，因此，我们选择在此处放置系统菜单，并将其命名为系统菜单区域。
系统菜单区域贯穿页面左侧，包含系统LOGO和系统多级菜单。
右上方是辅助功能区域，该区域包含功能标题、自动消失消息提示、消息类和待办任务类气泡消息、语言选择、个人设置等功能。
与之对应，右下方是主体功能区域，作为整个系统页面的核心交互区域。
第二类页面结构中左侧的系统菜单区域和右上的辅助提示区域需要固定在页面上。特别是右上的服务提示区域，因为此区域只包含全局的消息提示功能，容易被忽略。
各板块属性设置
我们以常见的显示器分辨率（1920X1080）和第一类页面结构为例，具体讲述各个区域的设置。第二类页面结构与第一类相似，大家可以根据我给出的示例自行实践，融会贯通。
区域大小设置
在常规分辨率（1920X1080）下，三个区域的大小规格如下图：
一级菜单区域
区域大小 数值 or 公式 备注 长度 1920 px 该区域占据整个横向版面，大小与屏幕分辨率的长度相同 高度 48+8n px 48 px 是最小高度值，此区域最小高度不能低于此值；8 px是最小高度变动值，高度以此值为最小单位等比增加或减少；n 是自然序数，也是最小高度变动值的变动比例
一般情况下，B 端后台系统的高度为 64 px次级菜单区域
区域大小 数值 or 公式 备注 长度 200+8n px 200 px 是最小长度值，此区域最小长度值不能低于此值；最小长度变动值和变动比例同上方的高度说明
一般情况下，B 端后台系统的次级菜单长度为 208 px高度 1080-(48+8n)-Browser height px 该区域的高度需要减去一级菜单区域的高度，以及全屏模式下浏览器头部的高度 主体功能区域
区域大小 数值 or 公式 备注 长度 1920-(200+8n) px 该区域的长度需要减去左侧次级菜单区域的长度 高度 1080-(48+8n)-Browser height px 该区域的高度与次级菜单区域的高度相同
区域固定设置
在 Axure 中如果要将某个区域固定在页面的某个位置不动，需要使用到 Axure 的动态面板元件，因为只有这个元件才具备 PIN 功能。如下图所示。
如果一个区域使用了 PIN 功能，那么其他所有区域都要配合此区域一同使用 PIN 功能，否则其他区域的元件将向坐标系原点(0,0)偏移，如下方所示。
左侧区域使用了 PIN 功能被固定住，右侧的区域与左侧区域相连，但未使用 PIN 功能。当我们预览效果时，发现右侧区域已经向原点(0,0)偏移了，右侧的文字“右侧标题”的部分字体已经被左侧区域遮挡。
那么，如何设置每个区域的 PIN 功能呢？
其实方法很简单。我们只需将每个区域摆放好，记住每个区域的最外层要用动态面板包括，然后使用 PIN功能默认的Left & Top固定设置即可，无需调整固定的坐标值（Margin 值），当然也无法调整。所有区域被 PIN 住后，就完成了整个页面的区域固定。
PIN 功能中的 Center 和 Right、Bottom 选项有什么用呢？要回答这个问题，需要先说清 PIN 功能的原理。
PIN 功能以用户选定的点为坐标系原点，按照用户输入的偏移值沿原点偏移一定距离后固定动态面板在页面中的位置。
Left、Top 组合
Left、Top 组合以浏览器左上角为原点，根据动态面板在页面中的位置做偏移。因此这种组合下偏移值（Margin）为动态面板的坐标位置，不能修改。
Right、Bottom 组合
Right、Bottom 组合以浏览器右下角为原点，按照用户输入的偏移值（Margin）偏移后固定在页面。如果 Right 和 Bottom 的 偏移值为 0，表示动态面板紧贴页面右下角，不做偏移。
Center、Center 组合
同理，Center、Center 组合以浏览器的正中心为原点，按照用户输入的偏移值（Margin）偏移后固定在页面。这种模式通常适合需要绝对居中的交互元素，如居中显示的对话框，视频播放弹窗，图片放大弹窗等。
区域元件组成
我们还是以上、左下、右下的页面结构为例，介绍每个区域的元件组成情况。相对复杂的元件我将单独发文分享，在这里就不过度细化描述了。
一级菜单区域
一级菜单区域从左到右包括系统 LOGO、一级菜单、消息&待办、语言选择、系统帮助、个人设置。
元件名 构成方法 说明 系统 LOGO 图片+文字，或纯图片 元件长度不超出次级菜单区域的长度 一级菜单 中继器列表 系统功能板块，只有一级 消息&待办 气泡图片+动态面板+消息和待办任务中继器列表 气泡图片激活包含消息和待办任务中继器列表的动态面板 语言选择 图片+动态面板+语言选项中继器列表 语言选择图片激活包含语言选项中继器列表的动态面板 系统帮助 图片 系统帮助图片作为功能入口 个人设置 图片+动态面板+个人设置功能中继器列表 个人头像图片激活包含个人设置功能中继器列表的动态面板 整体上，该区域的最外层还需要包裹一层动态面板，以便该区域可以 PIN 在页面顶部。
次级菜单区域
因为顶部已经存在一级菜单，所以这里的次级菜单通常为两级，较少情况下为三级或三级以上。
元件名 构成方法 说明 二级菜单 矩形块+动态面板+中继器列表 矩形块为系统二级菜单，中继器列表为系统的三级菜单。通过点击矩形块伸缩展示系统的三级菜单 三级以上菜单 中继器列表 多级菜单结构输入到中继器数据中，配合较复杂的交互实现多级菜单的展示和功能选用 如果要隐藏此区域的滚动栏（Axure 默认的滚动栏会遮挡部分页面内容，不够美观），则需要将此区域最外层裹上两层动态面板。最外层动态面板用来 PIN 住区域，第二层动态面板的长度比最外层动态面板的长度多出一个滚动栏的长度，以达到次级菜单既可以滚动，又能隐藏滚动栏的效果。
因为多级菜单的元件实现较为复杂，后续我将单独发文分享实现方法，请大家继续关注“日月土申”的【Axure实战】系列。
主体功能区域
主体功能区域的组成相对来说最简单，由动态面板和内嵌页面（inline frame）构成。动态面板用来 PIN 住该区域，内嵌页面用来展示对应的功能子页面。
结语
在做 B 端后台系统的原型设计时，不需要华丽的外表和多变的交互。通过熟悉的页面结构和惯用的交互操作组织业务需求，让用户达成用完即走的目标就是产品设计上的胜利。
通用的 B 端后台系统页面结构大致为两种：上、左下、右下和左、右上、右下。
使用动态面板的 PIN 功能能够更好地固化页面结构，固定用户使用习惯。
一套常规的 B 端后台系统页面结构元件能够快速帮助大家制作新的产品原型或在现有选型上做调整优化。
