跳转到内容

布局

用于组织网页的框架结构,可以影响用户的浏览顺序。清晰的的布局和数据展示可以帮助用户高效的获取信息。

画板

尺寸

基于主流屏幕尺寸,我们将设计团队的标准画板宽度定为 1366px 或 1920px。

布局

布局中可以包含以下 4 种区域。

  1. 内容区域:用于放置主体内容。
  2. 顶部区域:位于页面顶部,用于放置工厂名称,设置等常用功能。
  3. 侧边区域:位于主体内容两侧,用于放置功能导航。
  4. 底部区域:悬浮固定在页面底部,用于展示内容区的辅助信息或汇总信息,在某些场景下也可与内容区合并展示。

布局

导航

采用左右结构的导航方式。左侧放置功能导航,优先级最高。右侧为内容区,内容区内可根据实际情况放置局部导航。

布局

相关组件

间距

我们推荐了一组具有韵律的间距值,遵循最小单位为6的间距排列方式,以灵活满足不同的应用场景。

布局

流式布局

流式布局会在内容区域做弹性的宽度适配,其宽度将随着浏览器宽度的变化而相应地增大或缩小。当浏览器宽度大于最小值时,内容区域随着浏览器宽度的变化而相应地增大或缩小。

布局