版本说明

概览 Overview

Fastgear系统的交互规范制定的目标在于首先提高系统的一致性,能够帮助用户更好的理解和使用本系统;其次可以为PM的设计提供参考和依据,提高设计效率,产出更好的方案;再次可以为DEV的开发提供依据,对固定组件的应用和样式作出规定和约束,提高开发效率,保证产品质量。

在本规范中,对于系统的基础内容、组件的组成和应用,以及一些固定的使用方式作出说明和要求,并在实际使用的实践过程中,对规范不断进行完善和补充,更好的指导开发实践,帮助产品提升品质。

基础内容 FOUNDATIONS

布局 Layout

Fastgear系统布局采用侧边三列式布局,包括最左侧父导航,中间子导航,和右侧的工作区。最左侧的一级导航采用icon的方式进入fastgear的各子系统中,中间二级导航是每个子系统的导航,右侧区域是子系统的内容页面。

尺寸

一级导航固定在页面最左侧,宽度 88px ;二级导航固定于一级导航右侧, 宽度 180px ;右侧内容区域根据页面整体宽度进行自适应。

交互

· 一级导航选中和未选中需要在可视化上进行明显的强调

· 二级导航需要清楚呈现出选中的当前项

· 二级导航栏根据子系统的需要可以选择全部展开或手风琴

视觉

导航样式在视觉上采用一级导航为黑色背景,白色文字;二级导航为白色背景,深色文字;内容区域为浅色背景( #F5F7FA )深色文字。

导航的标准字体为 14PX 、 20PX ,14号字体用在导航的常规文字中,20号字体用在二级导航顶部,显示子系统的名称。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c7d8275b-07b5-4a38-a25a-c9a7ae7e8998/image44.png

颜色 Colour