星辰-通用全局规范原创
金蝶云社区-孙飞熊
孙飞熊
4人赞赏了该文章 347次浏览 未经作者许可,禁止转载编辑于2023年04月10日 11:29:02

全局布局结构

金蝶云·星辰的页面框架由以下部分构成:


通用顶栏:

通用顶栏为固定内容,在产品中任何页面都存在的,针对全局进行操作


左侧导航菜单:

展示应用内一级菜单,悬停展示二级及三级菜单


功能页签:

展示应用内已打开的页面,以及右侧的页面内帮助入口,页面全屏显示按钮


工具栏操作区域:

用于放置针对当前页面的操作


页面内容区域:

根据页面类型和业务需要展示相应的内容


image.png




通用顶栏

通用顶栏是在产品中任何页面都存在的,针对全局进行操作


image.png

LOGO:金蝶云·星辰品牌LOGO

应用页签:固定应用和已经打开的临时应用,固定应用为金蝶云·星辰主应用及可查看全部应用的应用中心

全局搜索:对功能入口及帮助信息的全局搜索

帮助支持入口:各类服务支持的入口

帐套信息:展示当前帐套信息,点击出现下拉面板,可切换帐套,以及新增及管理帐套的入口

个人信息入口:用户个人信息的入口



左侧导航菜单

对产品功能内容进行一定的分类分组,并为使用者提供一定的途径,使他可以方便地使用到所需的功能内容


image.png

1、菜单内容一般分为三个层级,一级二级为分类分组,三级为功能入口。

2、默认展示一级菜单对应的图标,鼠标悬停一级展开显示名称并同时展开三级,鼠标离开菜单面板区域后,面板隐藏收起

3、一级菜单名称最多6个中文字符, 二级菜单名称最多8个中文字符,三级菜单名称最多10个中文字符

4、面板高度由最大三级菜单个数决定,面板宽度由二级菜单个数决定,二级的个数建议不超过5个,三级的个数建议不超过10个



image.png

5、点击底部自定义导航按钮激活菜单至自定义状态

6、一级菜单、二级菜单、三级菜单可以通过复选框自定义控制显示或隐藏

7、可以点击收藏图标收藏三级菜单,再次点击则取消收藏



功能页签

展示当前应用内的已打开页面


image.png

应用首页页签:当前应用的首页,固定显示

其他功能页签:已经打开的功能页签,跟随页签右侧的下拉箭头,点击支持关闭全部页签或关闭其他页签

页内帮助:提供当前页面相关的问答、文章、课程

页面全屏:点击切换显示器全屏和非全屏状态



工具栏操作区

工具栏在产品(非首页)中通用,针对当前页面进行操作

采用紧凑布局,在内容不过载且层级不错乱的情况下,在一行显示

image.png


image.png


image.png


快速搜索(仅列表页):当前列表页面内,指定维度的快速搜索

筛选条件(仅列表页):默认收起,点击展开列表页支持的筛选条件,可进行多维度交叉的筛选

操作按钮:业务按钮+公共按钮,根据重要程度从左到右排序,原则上一个页面只能有一个主按钮,其余为次要按钮,新增按钮为特殊样式,建议最多显示9个按钮,不常用的按钮使用”更多”组合按钮的形式进行收起

页签切换(可选):点击切换显示器全屏和非全屏状态



弹窗布局

主要分为内容弹窗和基础资料选择弹窗,通常为模态弹窗。内容弹窗一般针对局部内容、少量内容的录入和查看,基础资料选择弹窗支持客户录入时对人、组织、物等进行单选或多选。


布局结构:

1、上方为标题栏,下方为工具栏

2、工具栏按钮建议不超过3个

3、中间内容区域可以放录入框、列表、页签、目录树、多选单选项等

4、标题栏需要时可添加tips解释标题


尺寸:

弹窗分为小、中、中大、大四种尺寸

1、小尺寸:固定宽度480,最小高度240,高度跟随内容增加,最大高度为:浏览器高度减96px

2、中尺寸:固定宽度640,最小高度320,高度跟随内容增加,最大高度为:浏览器高度减96px

3、中大尺寸:固定宽度800,最小高度400,高度跟随内容增加,最大高度为:浏览器高度减96px

4、大尺寸:固定宽度960,最小高度480,高度跟随内容增加,最大高度为:浏览器高度减96px,主要使用作基础资料选择器弹窗

image.png


image.png


赞 4