定义

从建筑学的角度看，框架（Shell）是一个框架——指其约束性，也是一个架子——指其支撑性。是一个基本概念上的结构，用于去解决或者处理复杂的问题。在体验设计中，框架是指将页面依据交互行为区分层级，每层都具备特有特性和意义，让所有层上的功能和内容搭建出来的视图结构能符合用户认知。
产品架构就是产品的骨架和模型，产品框架包括交互框架及视觉设计框架。

设计目标

主次分明、结构明确：符合B端产品定位及用户使用使用习惯，给用户展现清晰的层级关系。提供合理的导航，减少用户要去的地方数量。
化繁为简、引导清晰：给用户足够清晰的指引和导航，不让用户迷路。
灵活可拓展：框架可拓展，可配置，模块可根据用户真实需求增加或减少

总框架概览

本框架分为深色、浅色两个版本。需要根据业务诉求、用户诉求分场景选择使用。

深色版本概览（头部和侧边都为深色）

image.png

浅色版本概览（头部深色，侧边浅色）

image.png

布局样式罗列


三种样式：

1.基础样式

一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
顶部导航（大部分系统）：一级导航高度 52px，SPA36px，
SPA可配置，不强制存在
Content (内容区) 的 Margin（外边距）密集型用16px、非密集型用20px。 Padding:20px
Gutter ：12px
内容区不限宽拉伸
image.png

2.无侧边菜单

无侧边菜单的情况适用于首页、error页等特殊页面
dashboard内容区限制最大宽度=左侧导航宽度-Margin（=L,R)
image.png

3.无SPA

适用于无需多个模块频繁切换的场景
image.png

间距Margin&Padding


内容外边距Margin（L,R,T,B)：**
密集型：16px 零售云，财鲸
常规性：20px 政务，星环

内容内边距Padding（L,R,T,B)：
卡片内边距：20px

卡片和卡片之间的间距Gutter=12px
image.png
**
image.png

总框架说明 - 构成元素

表格的组成元素有：
image.png

1. 顶部导航

顶部导航主要是针对产品全局控制的相关操作，也是重要的产品信息的透出位置；主要分为4个可配置部分：背景底色、标识/产品信息、一级导航、功能操作；每个区域可根据实际需要选择配置/展示。

a、标识/产品信息

  1. 标识/产品信息区指当前工作台的LOGO和产品名称的展示区域，是全局框架的品牌透出的核心区域；
  2. 建议LOGO的最大宽度不超过180px，高度不超过32px，如果超出则等比缩小至合适宽高度；
  3. 建议产品名称的最大宽度不超过10个字符，如果超出则末尾截断以“…”号显示；
  • LOGO（必选）
  • 产品信息名称（可选）

image.png

b、一级导航菜单

  1. 建议当导航层级≥2时使用顶部一级导航；
  2. 建议一级导航阵列为2-7个；
  3. 极端宽度下，一级导航最少展示两条，更多以“…”显示，点击呼出下拉面板展示剩余信息
  4. 建议一级导航信息字符最多展示6个字符
  5. 一级导航为可选，不强制出现。

  6. 默认头像：当未登录或者没有头像时显示默认头像image.png

  7. 顶部文字字号：14pximage.png


c、实用工具
实用工具主要包含用户信息/登录工具、用户菜单、消息通知、语言切换、搜索等常规用户相关操作；用户可以根据实际需要选择是否需要展示单个或多个实用工具；实用时不要将页面内的操作放到实用工具中**

  • 登录工具（必选）
  • 通知中心（可选）
  • 消息通知（可选）
  • 语言切换（可选）
  • 全局搜索（可选）
  • 其他

d、背景颜色
背景颜色可变主要针对部分对品牌有强诉求的用户，可以通过改变导航底色增强品牌感知度；

  • 背景色配置（可选）

image.png

2.左侧导航

侧边栏主要针对内容区域的切变控制，其可见性更好易于扫读，各菜单重要性受菜单排列顺序影响较小；

  1. 较多菜单时使用，建议菜单多于 6 项时使用；
  2. 可以承载多个层级，但建议 1-3 个层级；
  3. 建议在一级添加图标，便于左侧导航收起时的透出；
  4. 为了避免出现导航因为品牌颜色过跳影响内容区可识别性，导航栏设计时只提供暗色和浅色两套方案；用户可以根据实际情况进行选用；
  5. 左侧导航宽度定为2档，160px、180px,用户可以根据实际情况进行选用；

**

a、左侧导航支持一级菜单有图标、无图标
image.pngimage.png
b、收起/展开
无icon的展开收起
image.png

有icon的展开收起
image.png
c、3级菜单

image.png**

| |

3.单页面应用导航-SPA导航

定义：什么是SPA: SPA(单页面应用框架/Single Page Application)

特点： **·直观易用：单页导航更加直观；浏览者不会迷失在网站中，一切仅仅需要转动几下滚轮就可以达到。
·**更高效：操作效率更高，避免了多个页面内频繁切换导致的信息杂乱和对应困难的问题。
 ·操作体验流畅**：媲美本地应用的感觉，切换过程中不会频繁有被“打断”的感觉

适用场景：适用于B端中后台管理系统，在多个模块有高频切换需求的场景。

详细交互说明：
a、初始样式说明
有首页时，第一个单页面应用展示首页，且不可关闭
无首页时，第一个单页面应用展示当前模块的第一个页面，且不可关闭
image.png

b、基础逻辑说明
1.每打开新页面，页面内打开新tab，新页面tab直接附着在SPA导航上，
在已打开的某个页面，点击跳转到一个新页面（操作/详情），打开新页内tab。

c、最大最小tab宽度说明
1..默认tab单元格宽度200px，撑满后，用户继续添加，tab宽度进行自适应缩小适应屏幕宽度。
2..单页面应用tab默认最大宽度200px
4.最小宽度是36px,当tab下雨36px的时候不再缩小，再多出去的tab直接挤到网页外，需要关闭一些页面才可以看到新打开的tab
image.png

d、hover与点击
1.当宽度大于等于≥64px，hover时直接出关闭按钮
2.当tab宽度小于＜64px，点击后出现关闭按钮（详见图片）
3.超长文案若展示不下则用省略号展示，hover上去后展示全部文案
关闭逻辑优化
image.png

e、tab右键点击逻辑
点击tab右键，出现四个操作项
image.png

f、tab新开页面逻辑：新开逻辑
不管tab数量多少，当再某一页面新建的时候，新建的tab直接出现在当前点开页面的后一位
image.png

g、tab新开页面逻辑：关闭逻辑
image.png

h、新开tab名称规则
-操作tab名称展示：【操作按钮名称】，eg：新建订单审核策略，新建活动，编辑商品…
-详情tab名称展示：【主体】详情 , eg：策略详情，订单详情…

i、切换对应逻辑
两个已经打开的tab页在顶部点击切换的时候，对应的顶部导航和侧边导航也需要切换，与当前tab页面保持正确的上下级对应关系

无SPA的样式&-面包屑详细规则

待补充