特点

产品界面以扁平化风格呈现； 视觉扁平、信息层级扁平。所见即所得，降低使用者学习成本。

样式

• 颜色 软件主色调与NiuChart品牌配色保持一致 ^主色c用于软件全局操作性质的高亮状态； c1、c2分布用于背景色和边线色； c3、c4分布用于次要文字色和主要文字色； ^此图为区间划分配色；区间划分既可表示数值段的划分（比如预期实际的对比图）；也可表示警戒区域的划分（比如仪表盘） ^上图为图表内数据可视化配色，运用在各种图表里，不出现在软件全局配色下； 选中蒙板：即用户交互时，图表的选中状态； 未选：即当图表内有多系列纬度时，未被选中的系列的透明度降为20%，选中的系列颜色不变，保持原色；

• 字体 ^软件字体分为中文和英文，中文为设备预设字体，英文为Google字体Poppins； 这里还标出了Medium和Regular格式，前者主要用在标题上，后者则用于除标题外的所以环境下；

布局（软件基本分页）

• 启动页、加载页 启动页与加载页效果一致，只以短时间出现；对于图表内的加载请查看”组件-加载” ^启动页简单logo加单色背景

• 示例page页 ^左为用户未登录企业号默认示例页（首页），右为用户登录后的示例页（登录按左上方头像）；界面上方放用户企业服务器示例列表，下方放NiuChart示例 ^示例列表页

• 登录页 ^用户登录或退出页面

• 瀑布流页 ^ 1、示例标题； 2、当前页面所有card共有的条件纬度； 3、功能菜单按钮； 4、card（卡片）；

• 放大页 ^ 1、card标题； 2、card条件纬度； 3、交互数据信息呈现区（具体排布方式请查看”组件-数据信息呈现”）；

• 功能菜单页 只存在于phone端，pad端以侧边弹出框的形式出现，具体请查阅”组件-弹出框” ^ 1、操作执行按钮； 2、功能菜单导航； 3、菜单下内容操作区；

组件

• card（卡片） 下图为瀑布流页card的一般样式（左为pad端样式，右为phone端样式）；大致由标题、条件纬度、数据信息、图表组成； 涉及图表 单、双指交互 有些图表支持双指操作，查看对比信息；像有时间轴的图表： 多排布方式 像地图、圆饼支持多种排布方式，以方便交互： 数据信息呈现方式 1、根据图表自身特点,像气泡图属于四维图表，信息量比较大 2、根据瀑布流页和放大页的区分，适当调整数据信息显示位置

• 功能菜单 功能菜单由于尺寸原因会有phone端和pad端两种形式，根据软件布局还有瀑布流页和放大页的形式。 主要功能-条件选择 ^phone瀑布流页里的条件选择功能 ^pad瀑布流里的条件选择功能 ^phone放大页里的条件选择功能 ^pad放大页里的条件选择功能 主要功能-钻取 对可视力度进行层级钻取 ^phone瀑布流页钻取（左边为呼出钻取功能入口） ^pad瀑布流页钻取（以侧边栏的形式由右向左挤出） 钻取功能不分瀑布流和放大页，效果一致 主要功能-筛选 针对当前图表可视力度进行筛选操作 ^phone瀑布流页筛选（左边为呼出钻取功能入口） ^pad瀑布流页筛选（以侧边栏的形式由右向左挤出） 筛选功能不分瀑布流和放大页，效果一致 辅助功能-时间轴导航 导航条能直观控制图表内的数据点数，方便用户查看整体数据或细节数据 ^时间轴导航常态隐藏与x轴里，需要时需促发x轴上的内容，才可唤出 辅助功能-多系列筛选 多系列筛选功能主要针对案例内同时对比多个系列对象所设置的功能，方便用户筛选查看

• UI kit 软件界面本身控键比较少，所以UI kit集合phone端和pad端的所有控件；其中包括按钮（文字按钮、图标按钮）、下拉菜单、弹出框等
• 加载 加载即页面数据出现前画面呈现的内容，排除用户等待的焦虑心情 页面加载，与启动效果一致，一般出现在进入瀑布流页前那瞬间 图表内数据加载，即用户在等待瀑布流或放大页卡片数据图表加载时画面呈现的内容

另注

• 文字说明 中文字体即为具体设备预设字体
• 尺寸标注说明 此说明文档phone端、pad端效果图皆以@1x（mdpi）格式标注
• 横竖屏说明