B端UI交互界面——典范页面结构

曹伶俐

原标题：B端UI交互界面——典范页面结构

编辑导语：之前学习了B端UI组件（文本、按钮、下拉菜单、输入框、翻页控制、表格、表单、会话框）的交互规范；本日这篇文章是B端交互规范末了一篇：B端交互的典范页面，我们一起来学习一下。

编辑导语：之前学习了B端UI组件（文本、按钮、下拉菜单、输入框、翻页控制、表格、表单、会话框）的交互规范；本日这篇文章是B端交互规范末了一篇：B端交互的典范页面，我们一起来学习一下。

一、业务主框架界面

需求场景：

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

业务但是界面底子结构模式分为上下结构，上部为导航条、下部为内容区：

顶部导航栏分区：

睁开全文

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

一级导航：

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

子级内容根据必要睁开：

子级分类项较多：

子级分类项较少：

底子操纵项：

全局分类数据切换对内容区数据举行团体更新，如内容区为全局数据时，分类数据切换按钮不可用，表现全部：

其他按钮点击睁开对应下拉界面，或实行对应操纵。

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

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

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

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

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

导航树结构：

内容展示：根据业务必要举行像一个内容展示。

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

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

不表现左侧边导航：

不表现分类导航，进实际左侧边导航：

无任何侧边导航：

欣赏器宽度不敷以包管内容的正常表现时，页面区应当出现横线滚动条：

2. 交互举动

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

2）一级导航菜单有子菜单时，点击后睁开子菜单浮层，点击子菜单对应目次项入口大概点击导航栏其他地区，对应菜单浮层折叠，对应一级菜单项选中：

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

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

5）当左侧导航内容过长时，滚定鼠标滚轮，举行滚屏表现。

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

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

8）当分类导航睁开、折叠时，内容区根据分类导航睁开折叠举行内容横向宽度主动调解。

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

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

二、工具软件框架 1. 需求场景

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

团体结构模式与集成软件框架保持同等：

顶部导航栏不表现导航目次项。

3. 交互举动

与集成业务框架雷同。

三、业务内容页面：底子内容展示页 1. 需求场景

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

1）通用业务模块内容分区，分为顶部TtileBar（首页概览在须要的环境下可以不表现TitleBar）与内容区：

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

页面标题居左表现包罗页面标题、数据切换、模块资助、其他关联备注信息：

页面标题在有必要的环境下，为提拔页面的自由集成本领，页面的面包屑的起始路径点不能包罗左侧边导航的信息：

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

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

页面关联居右表现，包罗“资助链接”、“快捷操纵”、“全页革新”按钮等：

3）内容地区分为备注形貌、概要信息、分项页签、业务内容：

形貌/概要，形貌文本在前，一样平常环境两者表现互斥：

仅有形貌与提示文本：

仅有概要信息：当有概要信息表现时，根据业务必要在TitleBar右侧提供对应概要信息折叠睁开，关闭按钮：

概要信息睁开时：

概要信息折叠时：

四、底子设置展示页 1. 需求场景

• 通用业务设置展示；
• 能直接欣赏设置并举行对应设置修改；

设置页面结构为上下分布，上部为Titlebar，下部为设置内容地区：

Titlebar团体结构格式与底子内容展示页雷同

提示&形貌地区、分类页签与底子内容展示页雷同。

设置内容中相应内容，利用全页表单举行设置展示与操纵

五、详情展示页面：单条数据详情页 1. 需求场景

• 数据对象详情
• 检察单个对象数据与对象关联数据

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

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

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

标题区：面包屑、详情标题信息、资助、增补标注：

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

无面包屑：

有面包屑：

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

详情标题有备注：

详情标题无备注：

详情查询假如答应数据切换，则在详情表土提供数据切换本领，对象切换作为表土的一部门，资助：

详情标题有面包屑：

详情标题无面包屑

关联操纵，全页革新居右表现，只读对象，不具备操纵权限，误操纵按钮:

公共信息/形貌/概要地区重要用于展示详情对象团体的信息，诸如提示信息、概要形貌信息等，概要信息常备展示模式常用于默认页签展示内容较少，影响团体视觉结果时：

页签内容根据现实必要举行展示，假如有分组数据，则根据业务特性对内容举行归类展示：

根据现实必要展示详人情包屑

3. 交互举动

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

点击革新按钮，革新整个详情页全部内容数据：

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

当举行页面数据检察时，该对象已不存在或处于无法欣赏的状态，应弹出对应错误提示，让用户点击确定返回至泉源网页（参数通报模式与点击详情返回按钮雷同）：

六、多条数据详情页 1. 需求场景

• 数据对象详情；
• 支持在详情页面临多个对象详情举行切换检察；

页面分为左右结构：

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

详情信息结构与单挑数据详情页保持同等，详情标题不支持面包屑。

3. 交互举动

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

当前页面欣赏详情页内对应页签内容时，点击列表举行切换时，右侧详情页保持表现对应页签，内容变动为切换后的对象数据。

当举行对象切换检察时，对象数据非常，导致数据无法正常加载，弹出对应提示信息，点击确定后返回至泉源网页（相应参数继续参考单条数据详情页）：

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

七、表单展示页面：设置表单页 1. 需求场景

• 全页表单举行数据设置；
• 一样平常用于新建对象场景；
• 常用于内容设置非常多，大概设置项占用空间极大的环境；
• 支持表单返回；

页面分为顶部TitleBar与设置地区：

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

内容区为结构拜见全页表单。

3. 交互举动

• 返回至泉源页面；
• 全页表单填写交互举动拜见全页表单章节；
• 提交乐成后，跳转目的页面根据现实业务需求举行计划。

• 一样平常用于新建对象场景；
• 常用于内容设置非常多，必要分为多个步调举行操纵；
• 支持表单返回。

页面分为顶部TitleBar与设置地区：

通例步调设置，顶部设置左边返回表单标题，右侧为关联信息：

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

内容区结构拜见通例步调章节

3. 交互举动

• 返回值泉源页面；
• 步调设置填写交互举动拜见通例步调章节；
• 提交乐成后，跳转目的页面根据现实业务需求举行计划。

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

2. 内容结构

界面底子结构模式为上中下结构，上部为导航条、中部为内容区、底部为增补信息地区（版权声明，分辨率阐明等）：

十、通用资助中央导航界面 1. 需求场景

• 集成类软件集成多个业务模块，必要对差别业务举行分类提供资助内容；
• 用户需通过资助中央举行资助文档查询。

界面底子结构模式为上部为导航条 + 搜刮区、中部为目次导航地区、底部为增补信息地区（版权声明等）：

十一、通用资助文档界面 1. 需求场景

• 单个集成的资助文档检察；
• 用户可以通过对应界面提供的布局索引、搜刮完成资助内容的快速查找、阅读。

界面底子结构模式为上部为导航条 + 搜刮区、中部为资助内容、底部为增补信息地区（版权声明等）：

本文由 @云盘算产物汪 原创发布于大家都是产物司理，未经允许，克制转载

题图来自 unsplash，基于 CC0 协议返回搜狐，检察更多

责任编辑：