东方国信数字平台用户界面规范—— BONCube水墨风中后台设计指南
东方国信专注大数据领域25年，拥有多个自助研发的数字平台，为提供更优质便捷的服务，故统一平台用户界面，规范中后台设计指南。
企业介绍 Introduction
- 东方国信成立于1997年，专注大数据领域25年，2011年作为中国首家以大数据为题材的公司完成上市
- 全球领先的第三方云计算及大数据技术服务公司 ，在全国31个省设有机构，近1万人的研发和服务团队
- 拥有全球三大研发中心，多达800余项的专利和软著，大数据技术及产品通过“一带一路”走出国门
大数据发展背景 Background
根据IBM前首席执行官 Louis Gerstner 的观点， IT领域每隔十五年就会迎来一次重大变革。
随着大数据的发展，数字平台应用产品及服务层出不穷，东方国信作为国内第一家在大数据技术领域完全取代国外软件的企业，对产品界面视觉要求也随市场环境变化越来越高，所以整理了BONCube水墨风中后台设计指南来规范统一东方国信数字平台用户界面的视觉呈现。
ps：此文章仅分享设计指南中所应用原则及基础样式规范部分。
* BONC：东方国信英文简称；Cube:立方体；BONCube：寓意积木一样可按需组合公司产品的统一设计组件。
东方国信BONC数字平台用户界面规范
—— BONCube水墨风中后台设计指南
1.快速介绍
东方国信成立于1997年，始终以“让数据改变工作与生活”为愿景，专注于大数据领域，构建跨行业多领域全栈式服务，致力为数字新基建、社会数字化转型贡献力量。基于智慧包容、人性化交互的品牌视觉设计将赋能东方国信，成就“最优产品、最佳服务，打造大数据领域民族品牌”的企业使命。
在东方国信上市的10余年中，随着国家政策利好，算力的突破，人工智能的爆发，人类社会正进入以数字化为主要标志的新阶段。数字经济，已经成为世界的主要经济形态，也是推动我国经济社会发展的核心引擎。大数据已为时代最火的风口，在技术的不断推动下，数字产品愈加多样化，企业在持续追求行业效率时，用户对产品体验的要求也越来越高，因此，更高效的视觉传达设计需求应运而生。
在纷繁复杂的信息时代，我们立志使用户在任何场景中接触东方国信数字产品或服务时，都可产生认知轻松，体验一致、操作高效的使用感受作为设计初衷，我们为此一直持续努力着。
1.1 系统品牌建设
- 水皆缥碧，千丈见底。
设计似水无痕，善利万物而不争，不与内容夺睛。游鱼细石，直视无碍。可将信息清晰准确地传达给用户。这是我们视觉设计的基础原则。
- 墨守规则，亦为大道。
文有定法，律有成规。在品牌视觉设计的规范内，亦可自由随心的展示产品优势。这是我们品牌风格的基本准则。
水·墨 风格设计规范，让东方国信的产品并行不悖、井然有序，传递出大数据领域民族品牌之风范。
1.2 中后台设计价值观
-【保持中庸 和而不同 因势利导】
- 水·墨风格遵循中庸之道，在长期产品版本更迭中，视觉设计呈现“中性”状态。
* 中性的视觉呈现更易于被用户接受。过于个性的视觉风格，不能满足于大众审美，无过无不及的中性设计降低用户的反感情绪。
* 中性的设计更聚焦于功能服务。过于风格化的视觉分散用户注意力，影响其对信息或功能的获取使用。
* 永不过时的中性风，经得起时间与实践的考验，长时间面对较强观感刺激的视觉设计更易产生疲劳。
为满足企业级产品跨领域多样化的设计需求，我们求大同，存小异。一致寻求共同之处,保留不同意见，为产品或用户的个性化定制提供更大的设计空间。
面对日益复杂的数字化产品，人类的意识和注意力资源有限，因势利导的简约设计，可降低用户认知成本，用全局发展的设计视角提供主动式服务，帮助用户决策，简化人机交互，从而始终保持产品的生命力，人机和谐共生，紧密互动，提升产品价值。
1.3 视觉语言特征
-【中正平直 虚实分明】
- 适得其所，恰如其分。视觉上合理布局，功能模块恰当分布；
- 整体信息展示统一左对齐，优先保证F型*阅读顺序；
- 操作按钮统一右对齐，遵循菲茨定律*引导操作
*F型：尼尔森F型视觉模型由 Jakob Nielsen于2006年提出，也是线上浏览视觉原理。其指出人们在首次观看页面时，视线会呈F形视觉动线关注页面，先从顶部从左到右水平移动，再下移开始从左到右的短线观察，最后对左侧区域垂直扫视，形成一个“F”（如下图）。依据此模型进行页面布局及信息层级划分，有效引导用户获取信息。
*菲茨定律：由Paul Fitts在1954年首先提出，其内容为从一个起始位置移动到一个从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（上图中的 D与 W），用数学公式表达为时间 T = a + b log2(D/W+1)。此定律广泛应用于用户体验(UX)及用户界面(UI)的设计中，比如估算用户移动光标点击链接或控件按钮所需的时间，确定按钮的位置及大小。
-【若网在纲，有条不紊】
- 营造交互视觉逻辑的秩序感；
- 统一参考栅格系统设立元素间隔，减少不必要的细节决策；
- 保证体验一致，使页面具有秩序感与节奏感，与前端开发也更加灵活规范。
1.4 交互设计原则
-【体验一致】
同一应用和同类界面用语、功能、操作要保持一致，降低用户认知成本；
-【便捷直白】
可感知性互动，对交互发生设定准确的期望并即时反馈；
使用约定俗成的表达，减少用户理解及操作负担。
-【时隐适现】
灵活高效，用户拥有自由控制权，提升页面的可读性及操作。
页面设计中部分产品功能不需要的时候隐藏，合适的时候再出现的设计原则，可以更大程度上保持页面清晰干净且适当地隐藏部分低频操作，既可以降低列表的复杂度让用户专注当前的重要内容，也能避免一些误操作出现。
1.5 动效设计指导
-【反馈即时，习若自然；持续贯穿，聚焦指向】
- 清晰自然且及时的操作反馈，可以很好的弥补场景跳转带来的用户感知落差。
- 连续贯穿于用户流程和用户体验场景中的，创建空间与时间的层次，动效行为指向与用户期望一致。
2.术语与定义
（此处省略，可参考antdesign及element）
3.基础样式
3.1 色彩
内容：色彩的运用基于品牌水墨风格的表达下，原则上应首先考虑表达的准确性，保证实现信息传递、操作指引、交互反馈，或是强化凸显某一个信息的目的。数据信息到颜色的映射是非常重要的一个环节，可分为色调、饱和度、亮度三个视觉通道。色调属于分类的视觉通道，饱和度和亮度用于连续的视觉通道。
指南：以水墨风黑白灰为主色调，合理搭配蓝灰辅助色调。需满足以下要求：（如图）
3.1.1 主色调(品牌色)
- 色值：#171717 / 0-0-9，用于顶部导航栏、侧导航选中提示、输入框选中提示；
- 色值：#C0C0C0 / 0-0-75，用于不可选状态；
- 色值：#D9D9D9 / 0-0-85，用于输入框边框；
- 色值：#F0F0F0 / 0-0-94，用于独立按钮背景色；
- 色值：#F3F3F3 / 0-0-95，用于分割线；
- 色值：#F7F7F7 / 0-0-97，用于下拉框选项hover&选中背景；
- 色值：#FAFAFA / 0-0-98，用于表头栏背景。
3.1.2 辅助色 3.1.3 文字色 3.1.4 图标色 3.1.5 功能色
3.1.5.1 链接、正常状态 3.1.5.2 错误、关闭状态
3.1.5.3 警告、进行中状态 3.1.5.4 成功、打开状态
（此处省略如品牌色文字描述……）
3.2 字体
内容：同一类别的板块信息应使用同一字体、字号和行间距。如有特殊需要嵌入字体时，需考虑字体的可识别性，设计风格融合度，以及是否可免费商用。
指南：如下
3.3 图标
内容：图标（icon）作为UI界面构成中重要的元素，一定程度上影响着平台整体风格的视觉呈现。icon为用于表示系统对象(或)应用程序功能的可交互符号，可根据实际场景设计不同类型的图标，例如业务图标、功能图标。
指南：如下
3.3.1 设计规范
3.3.1.1 栅格规范
- 绘制时尽量对齐像素点，最大程度上保证图标的清晰度；
- 在处理一些对称图形时居中处理，不应为了对齐栅格而打破画面平衡。
3.3.1.2 画布与辅助线
- 图标的设计上如16*16px尺寸的图标，实际画布应控制在栅格中心14*14px的区域，周围留有1px的出血。在一些特殊情况下如icon过长或者有突出的边角等，允许内容适当延展，以确保图标视觉比重上的统一；
- 在绘制时应尽量根据辅助线进行绘制，以保持图标间视觉重量的统一；
- 根据绘制对象的形象特征选择辅助线，在必要时，可以将内容扩展到辅助线之外；
- 在绘制一些具有指向性的图标时，建议在其指引的方向多预留0.25px的空间，以便平衡画面；
- 三角形图标视觉张力较小，应左右撑满整，上下留等量距离；
- 方形图标视觉张力较大，应等比例适当缩小；
- 圆形图标视觉张力趋于上述二者之间，应取中间值比例缩放；
- 竖长图标应上下撑满，左右留等量间距；
- 横长图标应左右撑满，上下留等量间距。
如图所示：
3.3.1.3 线条
- 绘制时使用1.33px宽度的画笔；
- 在特殊情况下如复合图形，对于复杂的图标结构，线条的粗细可以适当调整；
- 在处理长线线条的长度时建议使用2的倍数，易于做对称处理，而短线建议使用3格像素；
- 线段末端直角处理，在表现一些文字类图形或带三维空间的透视图形时应与关键线相切。
3.3.1.4 圆角
- 保持0.67px的外圆角，内角无圆角；
- 在处理“箭头”等具有方向性的标记时，在其顶端应采用0.5px的圆角，以便于突出其指向性。
3.3.1.5 角度
- 线条如需倾斜，最好与栅格内45°辅助线相平行，或使用15°的倍数；
- 不仅要注意图形部分的夹角，也要特别关注一些负形的夹角度数。
3.3.1.6 断口
- 需起到平衡视觉重量的作用（最大宽度≤2px且为0.5px的倍数）。
3.3.1.7 繁杂度
- 在确保高识别的度的情况下，寻求内部结构以及外部轮廓上的精简。
3.3.1.8 弧线
- 弧线处理优先遵循正圆或正圆局部的拼接。
3.3.1.9 一致性
- 表示同类型系统对象或应用程序的图标视觉比例应保持一致；
- 表示同类型系统对象或应用程序的图标应统一设计风格，包括造型规则、圆角大小、线框粗细、图形样式和个性化细节。
示例：
3.3.2 位置关系
3.3.2.1 图标按钮
图标与文字间距：4px； 按钮与按钮间距：8px；
3.3.2.2 基础按钮
按钮与按钮间距：8px； 按钮上下间距：16px。
3.3.3 使用场景
如图所示：
①按钮图标：常用于列表页顶部功能操作；
②表头图标：用于表头筛选的操作；
③导航图标：用于导航业务引导展示；
④标题图标：常用于弹窗标题提示；
⑤快速入口图标：用于功能入口引导展示；
⑥数据展示图标：常用于数据标题统计装饰展示。
3.4 间距
内容：组件和元素之间需遵循间距规则，不同倍数的规范形成页面布局的空间感与秩序感。
指南：所有组件距离基于一定基准线X设定尺寸和距离，不允许非整数倍的尺寸出现。一般情况下基准为8px，增加两个小间距为4px和12px（仅限当前页面数据量非常多时可以使用间距4 px），所有的模块与模块之间，模块内边距为8*N，不允许出现1，9，11等非8的倍数存在。
如图所示：
3.5 圆角及投影
内容：圆角本身大致有三个主要特性：亲和感、易辨识、强聚焦。很多时候圆角矩形会作为一个大的容器，来容纳同类型的信息；投影的运用使UI界面中增加了Z轴的概念，为平面预设了立体的空间。
指南：如下
3.5.1 圆角
- 面积较小的组件（如按钮）圆角为2px，相对面积较大的组件（如卡片、版块背景）圆角为4px。
3.5.2 投影
- 色值：24%#262626；参数：x=0px、y=12px、Vague=42px。
如图所示：
3.6 基础按钮
内容：按钮是页面内主要的行动点，单击按钮可进行操作。基础按钮的尺寸计算公式如下：
按钮高度=文字字号*2.4 （运算的值最终取4的倍数) ；例：字号是14px，按钮高度为14×2.4=33.6，取最近4的倍数为32px，则14号字的按钮高度为32px。
除了全局按钮外，通常按钮宽度=文字宽度+按钮高度；例：字号是14px，文字宽度56px， 按钮宽度为56px+32px=88px，则14号字的按钮宽度为88px。
全局按钮常见于核心页面的强指引以及对页面全局进行操作的按钮，比如登录、注册等按钮。 如登录页按钮宽度与输入框等宽为400px。
指南：
- 仅在弹窗中出现黑底主按钮，一个页面有且仅有一个主按钮，位于最右方；
- 次级按钮位于主按钮左侧，无边框样式；
- 独立按钮仅在卡片等小板块位置上时，有且仅有一个按钮时才可以使用灰底独立按钮，便于和文字区分；
- 常见的操作按钮建议选择图标+文字按钮样式；
- 删除按钮正常状态为黑色，hover状态为红色；
- 主要操作（完成/保存/编辑）按钮始终位于页面右上角，弹窗时位于右下角；
- 破坏性操作（取消）应该在左上角，特殊情况慎用于右上角。
按钮样式及状态示例，如下图：
3.7 基础分割线
内容：分割线是一个呈线状的轻量化组件，起到分割、组织、细化的作用，用于有逻辑的组织元素内容和页面结构。基础分割线是没有文字的独立线条，又分为水平分割线和垂直分割线。
指南：大板块图文列表中的水平分割线常显，表头的垂直分割线仅在悬停状态下才显示。
3.7.1 水平分割线
- 通栏布局：横向贯穿整个页面，区分更加独立的内容信息，让信息分割的更加明显，例如对标题与内容进行分割；
- 内嵌布局：一般在两侧预留距离，区分同一模块下的相关内容，让用户浏览时更加高效，例如对同一列表的多行数据进行分割；
- 组合布局：通栏分割线与内嵌分割线的组合布局；
- 设计规范：h=1px。
注意：当有明显的留白或副标题已经对内容起到分割作用时，要避免过度使用分割线导致的视觉干扰。
3.7.2 垂直分割线
- 对表头文字进行分类分割；
- 对行内文字/链接等进行分割；
- 设计规范：w=1px，h=12px，与文字最小间距12px。
如图所示：
4.布局规则Layout
分辨率参考
数字产品用户的主流分辨率宽度为 1920px、1440px 和 1366px，同时我们应注意在 1280px 分辨率下主要内容显示的完整性。为了有效降低沟通与理解成本，建议使用统一尺寸的画板：1440px。
- 当页面为通栏、等分结构时，请选择弹性布局模式（以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果），并按照栅格对页面进行等分设计，避免过多特殊尺寸；
- 当页面为非等分的多栏结构，需要采用混合布局（同上弹性布局类似；只是混合像素和百分比两种单位作为页面单位）的实现方式，页面可以用定宽和百分比混合构成。
导航是一种对信息的分类，帮助用户找到想要的信息，完成预期的任务，导航通过让层次结构可视化，从而告诉用户网站上有什么，有效地体现站点内容。
根据不同端的工作场景，确定导航架构。对用户而言，适用导航菜单目的性较强，主要是具体功能进行操作，导航菜单在功能的引导中发挥了巨大作用。因此在导航架构设计中，考虑到不同布局的使用方式和权限分布进行不同的导航框架选择。
一般导航布局为全局公共模块，请避免出现如下情况：
• 不使用导航。
• 擅自对导航进行内容增删或样式变更。
一般最完整的导航项，其中包括：网站LOGO、（子站点切换）、公共区域的全局搜索、（中英文切换）、（消息）、（辅助文档等）、账号登陆注册、（侧边子导航）。
4.1 顶部导航布局Header
内容：将菜单栏放置在顶部，页面布局上基本为上下结构，将导航菜单放置上方固定。
该布局下，满足用户的阅读习惯，沉浸感强，并且整体页面稳定，对用户显示器分辨率影响较小，适用于全局信息层级相对简单的产品界面。对于该类页面，为了保证信息布局的稳定性，内容区域常设置为固定高度。水·墨 风格设计规范高度固定为40px。
指南：
• 可承载产品logo、菜单和全局型功能，例如消息、状态、账户、文档等；
• 导航面积固定，对标题文字及菜单字数限制严格，建议不超过5个菜单；
• 水平导航不超过二级菜单，降低用户使用成本；
• 顶部导航是用户操作上贯穿始终的导航；不一定包含全局信息，但可去到关键节点。
4.2 侧边导航布局Aside
内容：页面布局上基本为左右结构，将导航菜单放置左侧固定。侧边导航视觉起始线统一，可快速定位，多级导航流畅展示，菜单间切换的操作效率高，但压缩了内容区域的横向空间。适用于层级较深，导航效率要求较高的产品界面。
指南：
• 可承载产品内的功能导航，便于用户在不同功能间切换；
• 通常在一个产品内，左侧导航的位置与内容应该是稳定存在的；
• 侧边导航做可收折，核心空间面积增大，提高展示效率。
4.3 组合导航布局Mix
内容：此布局下导航在页面布局为顶部和侧边。组合导航使页面切换便利，二级侧边导航满足业务灵活性，功能扩展性更强，多用于信息架构复杂、对导航效率有一定要求的平台。
指南：
• 通常将一级导航菜单放置顶部，通过一级菜单的点击后，展示侧边的二、三级菜单。
• 一般建议顶部导航不超过5个菜单，侧边导航展开三级以上，增加滚动条浏览。
4.4 核心内容布局Content
内容：用于承载详情信息、表单、列表等多种形式的内容区域；
指南：内容区变化通常不直接影响顶导航、侧导航内容变化。需要兼顾带鱼屏等超宽屏幕时，对于包含左侧导航的网页，建议采用内容区域左对齐的方式，以避免左侧导航与内容区域间的距离过大，提升切换效率；
基于尼尔森的F型阅读视线模型（注释见1.3视觉语言特征）中⽤⼾浏览⻚⾯时从上到下、从左到右的顺序来设计文本及标题，非特殊情况下使用左对齐。其中操作性质的内容，如按钮，筛选，搜索等内容，遵循"右侧通行"原则，优先满足右对齐，且主操作需位于最右侧，贴近容器右边缘。
• 通常呈现内容外缘距离内容区域左右边距为24px，距离顶部外缘上边距为16px。
• 特殊内容展示时根据实际使用场景定制安全内容边距，通常为8的倍数。
4.5 底部区域布局Footer
内容：界面中底部区域展示内容如下：
• 权威信息（包括公司名称地址等联系信息、版权说明copyright by即©️，还有powered by 、design by、用户协议、隐私声明、工信部ICP备案、公安网警备案、工商部门及行业协会的企业信用评价、政府部门行业监督，如违法和不良信息举报中心等）
• 便捷定位（底部导航、页面状态信息、网站地图、帮助中心、关于我们等）
• 合理拓展信息（广告位、友情链接、服务理念特色等）
指南：
• 相对固定，当页面内容高度不占满浏览器高度，footer显示在浏览器底部，且不会出现滚动条，如果页面内容高度超出浏览器高度，footer则相对与内容的最底部，并且自动出现滚动条。
4.6 标准栅格
内容：栅格可以有效保证页面的一致性、逻辑性，加强团队协作和统一。我们通常用1440px进行设计，将左侧菜单栏及间距尺寸减去，就是自适应的内容区域大小（内容区域可根据具体使用场景进行自适应调整）。我们采用页面24个栅格等分，适用于业务信息量大，场景复杂的页面设计。
指南：
• 页面总宽1440px，收起侧导航固定规范60px，固定页边距16px，内容区为1348px，列表内容距离内容区边距固定为24px；下图中栅格开始尺寸为1300px，公式为1440px-60px-16px*2-24px*2=1300px（具体sketch布局设置见下图）。
• 内容元素不要留在水槽中，内容元素应对齐栅格，而非水槽
以上为BONCube水墨风中后台设计指南原则及基础规范部分，感谢阅览，欢迎大家给出建议和意见！
设计团队：东方国信数据科学事业部设计支持中心
@伟伟monster @Skylar @木匠@雪山之恋@一颗李子
特别参与：@小叶同学 ʕ ᵔᴥᵔ ʔ
THANKS!
