B端UI交互界面——典型页面布局

一、业务主框架界面

需求场景：

• 符合常规行业内容分布逻辑；
• 具备通用性；

1. 内容布局

业务可是界面基础布局模式分为上下布局，上部为导航条、下部为内容区：

顶部导航栏分区：

LOGO区域，防止LOGO图标与标题：

一级导航：

无子级内容，导航仅显示标题，如有子级内容展示，则显示对应图标：

子级内容根据需要展开：

子级分类项较多：

子级分类项较少：

基础操作项：

全局分类数据切换对内容区数据进行整体更新，如内容区为全局数据时，分类数据切换按钮不可用，显示所有：

其他按钮点击展开对应下拉界面，或执行对应操作。

用户私有信息、偏好设置展开：

内容区分为三个区域：左侧边导航、分类导航、内容展示，内容展示界面正常显示宽度不得小于1366px-左侧导航展开宽度（左侧边导航宽度参见UI诗句涉及规范）：

左侧边导航，用于展示从一级导航入口进入后的相关模块目录信息：

左侧边导航根据业务需要最多分两级，在有子级时，父级目录仅支持展开、折叠：

分类导航，用于基于某类关联数据的导航归集（规定宽度要求参见UI视觉设计规范）：

导航树布局：

内容展示：根据业务需要进行像一个内容展示。

内容区需要展示左侧边、分类导航：

左侧边、分类导航均展示：

不显示左侧边导航：

不显示分类导航，进现实左侧边导航：

无任何侧边导航：

浏览器宽度不足以保证内容的正常显示时，页面区应当出现横线滚动条：

2. 交互行为

1）一级导航菜单点击无子级下拉菜单时，点击后内容区加载对应模块信息，对应导航目录处于选中状态：

2）一级导航菜单有子菜单时，点击后展开子菜单浮层，点击子菜单对应目录项入口或者点击导航栏其他区域，对应菜单浮层折叠，对应一级菜单项选中：

3）鼠标移入左侧边导航栏，侧边栏自动悬浮向右展开，鼠标移除左侧边范围，则自动向左隐藏：

4）鼠标点击父节点，展开对应子级：

5）当左侧导航内容过长时，滚定鼠标滚轮，进行滚屏显示。

6）分类导航支持侧边展开与隐藏控制：

7）点击分类导航相应分类项时，在内容区加载显示对应内容，如点击有外部链接标志的导航项，则跳转到对应分类导航：

8）当分类导航展开、折叠时，内容区根据分类导航展开折叠进行内容横向宽度自动调整。

分类导航展开时，内容展示区域宽度向右缩小：

分类导航折叠时，内容展示区宽度向左增大：

二、工具软件框架

1.  需求场景

• 软件主要作为小型的工具软件的使用。
• 功能模块相对较少。

2. 内容布局

整体布局模式与集成软件框架保持一致：

顶部导航栏不显示导航目录项。

3. 交互行为

与集成业务框架相同。

三、业务内容页面：基础内容展示页

1. 需求场景

• 通用业务模块内容展示；
• 能有效说明该模块的功能、展示对应关键信息。

2.内容布局

1）通用业务模块内容分区，分为顶部TtileBar（首页概览在必要的情况下可以不显示TitleBar）与内容区：

2）TitleBar分为模块标题与模块页面全局操作或附属信息与关联操作：

页面标题居左显示包含页面标题、数据切换、模块帮助、其他关联备注信息：

页面标题在有需要的情况下，为提升页面的自由集成能力，页面的面包屑的起始路径点不能包含左侧边导航的信息：

模块为除左侧边导航外第一级：

模块为除左侧边导航外第二级：

页面关联居右显示，包含“帮助链接”、“快捷操作”、“全页刷新”按钮等：

3）内容区域分为备注描述、概要信息、分项页签、业务内容：

描述/概要，描述文本在前，一般情况两者显示互斥：

仅有描述与提醒文本：

仅有概要信息：当有概要信息显示时，根据业务需要在TitleBar右侧提供对应概要信息折叠展开，关闭按钮：

概要信息展开时：

概要信息折叠时：

四、基础配置展示页

1. 需求场景

• 通用业务配置展示；
• 能直接浏览配置并进行对应配置修改；

2. 内容布局

配置页面布局为上下分布，上部为Titlebar，下部为配置内容区域：

Titlebar整体布局格式与基础内容展示页相同

提醒&描述区域、分类页签与基础内容展示页相同。

配置内容中相应内容，使用全页表单进行配置展示与操作

五、详情展示页面：单条数据详情页

1. 需求场景

• 数据对象详情
• 查看单个对象数据与对象关联数据

2. 内容布局

页面分为顶部Titlebar、概要信息、分类展示页签与内容展示区域：

TitleBar分为返回按钮、标题区域与关联操作区：

返回按钮：返回到上一级页面。

标题区：面包屑、详情标题信息、帮助、补充标注：

面包屑路径根据实际需要确定是否展示——

无面包屑：

有面包屑：

详情标题分为主标题与备注信息。关联帮助、对象补充标注信息均跟随主标题进行展示：

详情标题有备注：

详情标题无备注：

详情查询如果允许数据切换，则在详情表土提供数据切换能力，对象切换作为表土的一部分，帮助：

详情标题有面包屑：

详情标题无面包屑

关联操作，全页刷新居右显示，只读对象，不具备操作权限，误操作按钮:

公共信息/描述/概要区域主要用于展示详情对象整体的信息，诸如提示信息、概要描述信息等，概要信息常备展示模式常用于默认页签展示内容较少，影响整体视觉效果时：

页签内容根据实际需要进行展示，如果有分组数据，则根据业务特性对内容进行归类展示：

根据实际需要展示详情面包屑

3. 交互行为

点击表格或相关内容项，跳转到详情页，当前页面列表查询条件页码等需要附带跳转地址中。

点击刷新按钮，刷新整个详情页所有内容数据：

点击TitleBar“返回”到原来源页面，如果源页面为内容展示页面，返回时将附带来源页面查询数据作为来源网页参数，跳转到对应来源页面：

当进行页面数据查看时，该对象已不存在或处于无法浏览的状态，应弹出对应错误提示，让用户点击确定返回至来源网页（参数传递模式与点击详情返回按钮相同）：

六、多条数据详情页

1. 需求场景

• 数据对象详情；
• 支持在详情页面对多个对象详情进行切换查看；

2. 内容布局

页面分为左右布局：

对象列表以来源表格当前页列表对象，取关键数据展示对应列表数据。

详情信息布局与单挑数据详情页保持一致，详情标题不支持面包屑。

3. 交互行为

点击左侧列表对象，右侧详情内容对应进行刷新。

当前页面浏览详情页内对应页签内容时，点击列表进行切换时，右侧详情页保持显示对应页签，内容变更为切换后的对象数据。

当进行对象切换查看时，对象数据异常，导致数据无法正常加载，弹出对应提示信息，点击确定后返回至来源网页（相应参数继承参考单条数据详情页）：

当数据正常获取时，完成列表选中对象切换。

七、表单展示页面：配置表单页

1. 需求场景

• 全页表单进行数据配置；
• 一般用于新建对象场景；
• 常用于内容配置非常多，或者配置项占用空间极大的情况；
• 支持表单返回；

2. 内容布局

页面分为顶部TitleBar与配置区域：

顶部配置左边返回表单标题，右侧为关联信息：

内容区为布局参见全页表单。

3. 交互行为

• 返回至来源页面；
• 全页表单填写交互行为参见全页表单章节；
• 提交成功后，跳转目标页面根据实际业务需求进行设计。

八、步骤配置页

1. 需求场景

• 一般用于新建对象场景；
• 常用于内容配置非常多，需要分为多个步骤进行操作；
• 支持表单返回。

2. 内容布局

页面分为顶部TitleBar与配置区域：

常规步骤设置，顶部配置左边返回表单标题，右侧为关联信息：

复杂步骤设置，顶部配置左边返回表单标题，右侧为父级步骤信息：

内容区布局参见常规步骤章节

3. 交互行为

• 返回值来源页面；
• 步骤配置填写交互行为参见常规步骤章节；
• 提交成功后，跳转目标页面根据实际业务需求进行设计。

九、公共页面：通用登录页面

1. 需求场景

用户需通过登录页面完成登录后，进入软件控制界面。

2. 内容布局

界面基础布局模式为上中下布局，上部为导航条、中部为内容区、底部为补充信息区域（版权声明，分辨率说明等）：

十、通用帮助中心导航界面

1. 需求场景

• 集成类软件集成多个业务模块，需要对不同业务进行分类提供帮助内容；
• 用户需通过帮助中心进行帮助文档查询。

2. 内容布局

界面基础布局模式为上部为导航条 + 搜索区、中部为目录导航区域、底部为补充信息区域（版权声明等）：

十一、通用帮助文档界面

1. 需求场景

• 单个集成的帮助文档查看；
• 用户可以通过对应界面提供的结构索引、搜索完成帮助内容的快速查找、阅读。

2. 内容布局

界面基础布局模式为上部为导航条 + 搜索区、中部为帮助内容、底部为补充信息区域（版权声明等）：

本文作者 @云计算产品汪

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！