【Axure实战】B端后台系统通用页面结构

B端系统的界面设计与C端系统截然不同无需追求华丽的外观以吸引用户亦无需通过复杂的视觉效果来诱惑用户。相反它应追求简洁明了的视觉传达和直观易用的应用功能以实现用户快速完成任务后即可离开的高效体验。基于此特性我们可以提炼出一套标准化的B端后台系统页面架构并将其转化为可复用的页面组件以优化开发效率和用户体验。B端后台系统通用页面结构页面结构元件布局结构通常来说B 端系统有两类页面结构。第一类 上、左下、右下页面结构的顶部区域以其贯穿整个页面的视觉效果占据了显著的首要位置。因此系统的一级菜单常被置于该区域以区分系统的主要功能板块。我们称这一区域为一级菜单区域。一级菜单区域通常从左至右依次展示系统LOGO、系统一级菜单即系统板块、消息待办提示、语言选择等功能以及个人设置等入口。左下方区域为次级菜单区域该区域用于展示系统各功能板块下的分类功能菜单。右下方区域则是主体功能区域作为整个系统页面的核心交互区域该区域具体展示用户所选功能的交互页面包括功能标题区域和功能交互区域。三块区域中顶部的一级菜单区域和左下的次级菜单区域需要固定在页面上也就是 PIN 住“各板块属性设置”部分会说明如何在Axure 中PIN 住一个板块PIN住后的区域不会跟随页面滚动条一起滚动。第二类 左、右上、右下页面结构的左侧区域自上而下贯穿整个页面占据主导地位因此我们选择在此处放置系统菜单并将其命名为系统菜单区域。系统菜单区域贯穿页面左侧包含系统LOGO和系统多级菜单。右上方是辅助功能区域该区域包含功能标题、自动消失消息提示、消息类和待办任务类气泡消息、语言选择、个人设置等功能。与之对应右下方是主体功能区域作为整个系统页面的核心交互区域。第二类页面结构中左侧的系统菜单区域和右上的辅助提示区域需要固定在页面上。特别是右上的服务提示区域因为此区域只包含全局的消息提示功能容易被忽略。各板块属性设置我们以常见的显示器分辨率1920X1080和第一类页面结构为例具体讲述各个区域的设置。第二类页面结构与第一类相似大家可以根据我给出的示例自行实践融会贯通。区域大小设置在常规分辨率1920X1080下三个区域的大小规格如下图一级菜单区域区域大小数值 or 公式备注长度1920 px该区域占据整个横向版面大小与屏幕分辨率的长度相同高度488n px48 px 是最小高度值此区域最小高度不能低于此值8 px是最小高度变动值高度以此值为最小单位等比增加或减少n 是自然序数也是最小高度变动值的变动比例一般情况下B 端后台系统的高度为 64 px次级菜单区域区域大小数值 or 公式备注长度2008n px200 px 是最小长度值此区域最小长度值不能低于此值最小长度变动值和变动比例同上方的高度说明一般情况下B 端后台系统的次级菜单长度为 208 px高度1080-(488n)-Browser height px该区域的高度需要减去一级菜单区域的高度以及全屏模式下浏览器头部的高度主体功能区域区域大小数值 or 公式备注长度1920-(2008n) px该区域的长度需要减去左侧次级菜单区域的长度高度1080-(488n)-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 端后台系统页面结构元件能够快速帮助大家制作新的产品原型或在现有选型上做调整优化。