布局整体：采用T子型设计风格布局，布局规范采用统一的设计元素和间距降低学习成本，并能够适配不同的屏幕尺寸。根据业务的不同将页面划分为背景层、全局控制层、二级控制层、内容层、内容弹层。根据T字型布局，整体上下布局，下面采用左右布局。顶部为全局控制层，主体左侧为二级控制层，右侧为内容层。
分辨率：1440x900（最低支持）设计使用的1920*1080
网页栅格系统：24栅格体系，页面栅格的gutter值随着浏览器的扩大或者缩小保持不变，栅格Column宽度会随之扩大和缩小。
模度：UI模度，保持着8倍数的原则，具备动态韵律感，所以的尺寸都保持在8的倍数（这里的尺寸是指块的尺寸）
开发默认全部使用系统默认字体，可提供备用字体供选择，备用字体采用等线体
主字体：14px
字阶和行高：
主要字体：font-size：14px，line-height：22px
系统使用的字阶不超过五种，不低于三种
自重：字体加粗使用regular和medium两种字体重量，英文字体采用semibold，三种字体分别对应代码中的400，500，600。
字体颜色：参考了WCAG的标准，将正文文本、标题和背景色之间保持在了7:1以上的AAA级对比度。主要文字：65%，85%
次要文字：45%，65%
禁用状态：25%，45%
边框颜色：15%，25%
分隔线：9%，15%
背景：4%，9%
表头：2%，4%
暂时没有使用到自制图标，直接使用阿里图标库中现成的图标。（后面需要自制图标在添加具体的自制标准）
根据不同的高度层级，将阴影分为四个等级（离地面越远，阴影越大，等级越高）
第0层：物体紧贴地面，投影与物体完全重叠，如：输入框等
第1层：物体位于低层级，此时物体被操作(悬停、点击等)触发为悬浮状态，当操作完成或取消时，悬停状态反馈也跟随消失，物体回归到原有的层级中，如：卡片hover，不被操作的时候就是出于第0层，被操作之后变成第1层；
第2层：物体位于中层级，此时物体与基准面的关系是展开并跟随，物体由地面上的元素展开产生，会跟随元素所在层级的移动而移动，如：下拉面板等；
第3层：物体位于高层级，该物体的运动和其他层级没有关联，如：对话框等。
阴影向下：常规场景用法，组件内部、组件本身
阴影向上：底部导航、工具栏
阴影向左：右边导航栏、抽屉组件、固定表格栏
阴影向右：右边导航栏、抽屉组件、固定表格栏
纵向间距：使用三种规格：8px（小号间距，基础间距）、16px（中号间距）、24px（大号间距），在以上三种不满足的情况下，可通过加减基础间距的倍数或者增加分割线来拉开层次。
横向间距：横向采用栅格布局来排布组件，增加布局的灵活性
文案对齐：段落较短时，需要确定一个统一个视觉起点（正文和标题对齐）
表单类对齐：冒号对齐（右对齐）
数字类对齐：数值取相同的有效位数，并且右对齐
主次对比：针对需要用户做出决策的场景，保持中立，统一使用次按钮，防止诱导用户做出选择
不要为了修改而打开新的页面，需要在哪里输入就要允许在哪里输入。
单字段行内编辑
当「易读性」远比「易编辑性」重要时，可以使用「单击编辑」
当「易读性」为主，同时又要突出操作行的「易编辑性」时，可使用「文字链/图标编辑」
多字段行内编辑
拖放列表：只能限制在一个维度（上/下或者左/右）进行拖放
拖放图片/文件
二次确认覆盖层：简单地确认操作不要滥用modal进行二次确认，提供以下两种确认方式
详细信息展示覆盖层：当鼠标点击或者悬停时展示详细信息，鼠标移出后关闭覆盖层
输入覆盖层：对于少量的字段输入，直接在覆盖层上修改
弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用「步骤条」来管理复杂流程
实时可见：对于很重要的操作，应当放在界面中，并且实时可见
悬停即现：对于不是很重要的又必须要有的操作，使用「实时可见」影响阅读，可以在鼠标悬停时显示操作项
开关显示：如果某些操作只需要在特定模式时显示，可以通过开关来实现
可视区域和可操作区域：可视区域不能和可操作区域一样给人一种可点击的感觉，在某些情况下，可增加可点区域来增加响应范围
在视图变化时保持上下文
滑入滑出：可以有效构建虚拟空间
传送带：可极大的扩展虚拟空间
折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间
解释刚刚发生了什么
对象增加：在表格或列表中，新增一个对象时，需要高亮新增项，并且高亮在几秒之后消失
对象删除：在表格或列表中，删除一个对象的时候，需要将删除的过程呈现出来（向左滑出，向右滑出）
对象更改：在表格或列表中，更改一个对象，能直接在表中修改最好不要以弹窗的形式来修改，修改完之后需要高亮显示修改项以提示用户修改内容
对象呼出：点击页面中的元素，呼出一个新的对象，以弹框的形式来呈现
自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。根据查询结果分类的多少，可以分为「确定类目」、「不确定类目」两种类型
实时搜索：随着用户输入，实时显示搜索结果。「自动完成」、「实时建议」
实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入
渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。有些不是很必须的内容可隐藏在界面之下，当用户点击或停留在某个按钮上时在显示
点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容，新内容需要高亮显示几秒钟
定时刷新：无需用户介入，定时刷新内容，刷新内容需要高亮显示几秒钟
实时刷新：在添加信息的时候需要实时刷新，添加的内容，之后需要高亮显示几秒钟
文本框（Input）：输入的字符数较少的时候使用单行输入形式
文本域（Textarea）：长篇幅的单一文本的录入使用多行的文本区域
输入提示和帮助：为提升数据录入效率，通常可以在输入框内增加暗提示以帮助提醒用户（注：输入框通常与标签（label）搭配使用，标签（label）默认放于输入区域的左侧，当文案过长或英文环境下也可放于在上方，但同个系统中需保持统一）
搜索可以让用户在巨大的信息池中缩小目标范围，并快速获取需要的信息。
单选框（radiobutton）：所有选项默认可见，单选框应多余2个，少于5个
复选框（checkbox）：在表单提交，和状态转换情况下使用
开关（switch）：当用户切换「开关」按钮将直接触发状态改变
选择列表（Dropdown）：允许用户选择一个或者多个选项，选项应该多余五个，选项按逻辑排序，内容显示完整。
滑块选择（Slider）：设置诸如音量，亮度，色彩饱和度等需要反映强度等级的选项，当用户需要精确数值的时候可以和数字输入框配合使用
穿梭框（Transfer）：穿梭框用直观的方式在两栏中移动元素，完成选择行为。穿梭框正常使用左右布局，如有需要可上下布局
日期选择器（DatePicker）：日期选择器为用户提供了一种可视化的方式去浏览和选择一个日期或者日期范围。尽量比较主观性的存在
文件上传（Upload）：上传是将本地的相应信息(包含本地和云储存)通过网页或者上传工具发布到远程服务器上的过程
数据展示需要注意：
折叠面板（Collapse）：导航中使用，适合冗长的，无规则的内容管理。对于折叠内容批次之间关联度较低时，使用手风琴模式，手风琴模式只允许单向内容区域展开。
卡片（Card）：根据栅栏进行排列，一行最多不超过四个。在有限的卡片空间内需注意信息之间的间距，若信息过长可做截断处理。例如『AntDesign适用于中台…』
走马灯（Carousel）：适用于官网首页和产品介绍页等展示型区块。轮播的数量控制在3-5个之间，设计上提供暗示，让用户对轮播的数量和方向保持清晰的认知。
树形控件（Tree）：用户可同时浏览与处理多个树状层级的内容。适用于任何需要通过层级组织的信息场景，如文件夹、组织架构、生物分类、国家地区等等。
规范数据表达，保证直观准确一致的理解数据
数值用来表示计量大小，可单独出现或搭配数字符号进行使用。
货币单位的使用和表示
日期格式：标准化如下：
部分脱敏：一般用于需要部分信息进行识别的状况，只需要对部分信息进行脱敏处理，但数字真实位数保留。数据脱敏部分用「*」代替。
无数据
无数据使用「--」表述
数据加载
数据加载用「骨架屏」显示，骨架屏是和loading一样的功能，不过骨架屏可以提前让用户知道页面的布局
在界面中，我们需要通过对话的方式与用户产生共鸣。精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。因此在界面设计时，文案也应当被重视。在使用和书写文案时有以下几点需要注意：
次按钮：用于非主要动作，如果不确定选择哪种按钮，次按钮永远是最安全的选择
主按钮：突出“完成”、“推荐”类操作；一个按钮区最多使用一个主按钮
文字按钮：弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如表格组件中的操作列
图标按钮：图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面
按钮中添加图标：用于对按钮含义补充解释，提高按钮识别效率，不要强行为了美观给按钮添加图标
常规按钮类型呈现出不同的强调程度，使用者可以据此变化出合适的按钮类型
危险按钮：警示用户该操作存在风险
幽灵按钮：置于复杂或较深的背景中，避免按钮突兀地破坏背景的整体性。该场景下可灵活定制样式
行动号召按钮：经常独立出现，行动号召按钮就像是电脑在对用户大声说“跟我来吧”，有点命令用户点击的意味，通常出现于landingpage或者一些引导性场景。最大可以将按钮放宽到与父区域等宽。一个屏幕空间中，建议只有一个行动号召按钮，例如：模板显示界面的新建模板按钮
将按钮区放置于用户浏览路径中，便于被用户发现，如“F浏览模式”和“Z浏览模式”
文案需清楚传达用户按下按钮时系统将执行的操作。
注意：
指标重要性平均时采用左图布局，需要强调主题时采用右图布局
模板-指标大盘：用来监控全局数据，并附带图表来辅助解读。涉及核心数据；指标卡模块；筛选器；图表区；
模板-监控：用来监控全局数据，通常是围绕着一个主题，展现多个维度的关键指标，并帮助用户快速发现异常。涉及核心数据；指标卡模块；图表区；地图；仪表盘；
根据”总-分“结构将数据分析页面拆解成多个部分，多维度展示数据全貌
模板-多维分析：针对同一主题的多维度分析，涉及核心数据；指标卡模块；筛选器；图表区
数据明细用来展示单个指标总览和明细。常用于数据报表细节信息的展示，根据业务诉求可配置文本、列表、可视化图表等。
模板-数据明细：常用语数据报表细节信息展示，涉及筛选器；图表区；数据明细表；
根据使用者身份的不同选择合适的页面类型
当设计者对页面的结构有初步的思路之后，可根据信息粒度的大小来选择不同的可视化组件。信息粒度从大到小对应：指标卡和排行榜、图表、文本明细。
基础详情单页直接平铺所有需要展示的的信息，推荐使用这种详情展示方式。
模板-单据详情：展示某个审批单据的详细信息，将内容复杂度较高的各模块使用卡片区割开来。适用于审批流程和审批明细展示，以及部分审批操作。涉及到通过、驳回、转交、加签、挂起、撤回等操作
模板-高级详情：当详情页内容量大复杂度高时，不得不拆分为多个页签，作为辅助导航引导用户浏览信息。
模板-发布流程：将内容分阶段组织，了解不同阶段的事项。适用于需要协同的流程。
内容组件：根据不同的信息类型和复杂度选用对应的信息呈现方式。按复杂度由低至高，提供以下组件供选择：
导航栏：200px，背景颜色：#2A333D
顶部控制层：65px，背景颜色：#2A333D
正文部分：左边距：20px，上边距为0px，背景颜色未定
所有图标大小：width：30px；height：30px，图标颜色未定
标签栏：60px；，标签颜色未定
标签大小：width：78px；height：32px，上下边距：14px
面包屑：50px，面包屑颜色未定
剩余部分：正文
色调（H）：通过颜色的不同色调来描述不同的分类数据，数据本身之间没有高低之分，如：水果中的苹果、桃子、猕猴桃，可以使用红黄绿来分别表示，红黄绿就是三种不同的色调。
饱和度（S）：对于有序的数据类型建议使用饱和度来区分
明度（B）：对于无序数值型建议使用明度来表示
饱和度和明度一般会混合使用，为了更好地区分。
常用于饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等
基础10色：
扩展20色：
用来表示同一事物中的数值大小或梯度变化，如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等
单色顺序色板：
邻近色顺序色板：通过两个或两个以上的色相，可产生更多色彩分级，表达更多的连续数值，常用于热力图中的热度变化
一般是两种互补色（也可以是对比色）去展现数据从一个负向值到0点再到正向值的连续变化，常用于气温的冷热、海拔高低、股票涨跌等
例如：下图，越往右上角的颜色表示身高越高体重越重，越往左下角表示身高越低体重越轻，也间接的显示了体重和身高的大致关系
推荐9色：
推荐19色：
避免使用过多颜色：高亮数据不超过8个，多余的默认使用灰色，通过交互查看
数据映射规则从简：同种数据映射规则只能使用一种
选择准确的色板：选择准确的色板类型，如下图使用分类色板不适用连续色板
解释使用到的颜色：当图表中出现不同颜色时，需要向读者解释颜色代表的含义
保持颜色的一致性：对于统一度量，使用同样的颜色方案，而且在整个页面（通常是仪表盘）使用时，注意保持整体颜色方案的一致性
顺序色板需均衡：均衡选色可在PhotoShop的拾色器中使用Lab模式下固定色相不变，调节L值进行等距取色
侧边导航
顶部导航
弹出式导航
多级站点导航
页头：页头位于页内容上方，主要作用是申明页面主题、页内信息导航、页面级内容操作。
树形控件：页面内多层次结构展示
锚点：在各个页面分区之间跳转，当平铺呈现的内容过长时使用。
回到顶部：快速回到页面顶部
走马灯：循环播放一系列内容
点击进入信息架构下层内容，默认站内跳转，站外新开标签页，典型场景为列表下钻至详情。
面包屑：反映当前页面在网站结构中的位置，在少于三个层级是无需展示，此时的全局导航能直接呈现位置。用户可通过面包屑返回上级页面。
返回按钮：一般标题会和面包屑一起出现，有面包屑时标题默认不推荐使用返回按钮。页头中的返回按钮相当于一个短面包屑，用于返回上一层级页面。适用于子站点场景，该场景隐藏了全站导航，用户需要通过返回按钮回到上级页面。
步骤条：按照预先定义的顺序引导用户一步一步前后移动。在一系列页面的每一页上都展示步骤条，并标记当前页面在这条线性路径上的位置。适用于：
用户访问路径是线性的；
步骤条将复杂的任务分解为易于处理的小任务，减少用户出错，更快完成任务。
上下篇：协助我们移动到其他关系紧密的网页。
用于在必要时向用户反馈操作结果或传达消息。
在不同事件下用户都能感知与操作场景和紧急程度匹配的结果反馈或消息提示，做到合理有效的信息传达。
在设计时需要考虑用户试图完成的任务以及需要引起注意的方式，采用何种反馈方式。反馈方式列举如下图：
对话框：在不跳转页面打断用户工作流程的前提下，告知用户重要的成功结果。
全局提示Message：在不希望在用户执行操作时中断用户前提下显示一条简短的提示消息。
跳转：独占式InlineText&Illustration
对话框：提醒用户完成当前工作流之外的重要操作（例如警告信息不安全）。
警告提示alert：提醒用户系统中需要立即引起注意的错误信息。
表达校验提示
通知提醒框Notification
跳转
独占式InlineText&Illustration
任何内容区域（页面、区块、组件、单数据）没有内容/数据显示给用户时，就会出现空状态。
新手引导：首次使用应用或功能场景的空状态非常有用，因为它向用户展示了该功能和流程，并且可以帮助用户快速上手。为了帮助首次使用新用户，空状态可以使用功能引导、帮助文档等方式填充原本为空的页面。
完成或者清空：这种空状态是用户自愿从功能上删除数据的情况。例如，客户完成了任务清单上的所有项目，阅读了所有通知。一般此类场景不需要进行操作引导，只需要用图形元素或提示信息进行空状态说明。
无数据：内容区域无数据的场景使用，由图形元素、提示信息、建议操作三类元素组合展示，根据使用场景决定是否提供建议操作。
表单页是一种用于信息添加、录入的页面类型。用来确保用户按照要求录入信息提交给系统使用或引导用户进行应用设置。
设计目标：帮助用户明确当前页面任务，快速查找和定位修改目标，轻松准确地理解表单项含义及生效后果，同时简化填写流程，确保用户准确、轻松、快速地完成任务。
设计原则
注意事项
表单类页面模板聚焦于提交一次表单的过程体验。按照任务的复杂度，提供四种解决问题的布局方式：
模板-基础分步表单：将用户需要填写和确认的信息按照线性流程组织，利用步骤条告知用户完整流程和进度，常常在最后提交前让用户再次确认信息，并在流程结束给与明确的结果反馈。适用于具有明确的线性逻辑的任务。
模板-分组表单：单次任务的表单页中需要填写内容众多，且不同内容之中存在一定可分类归纳性。
模板-可编辑列表
模板-设置
在单个表单页中需要根据内容量进行合理地布局，以兼顾页面展示和用户效率。表单页布局可由简到繁划分为4个梯度，每一级梯度都兼容前一种布局方式。
基础布局：在一个区域内从上到下单列布局，引导用户纵向阅读。
区域内分组：当一个区域中内容较多且可被分类归纳时，可通过区分标题来进行区域内分组。
卡片分组：当一个页面中内容众多（通常大于两屏）且可被分类归纳时，可通过卡片分组来承载，每个卡片需要包含一个大标题。
布局方式判断：从信息的复杂度和关联性两个维度去梳理。随后可选择相匹配的模板，进行页面快速搭建。
降低
什么时候使用
涉及哪些功能
设计建议
这类页面一般会提供两类导航形式。
①用户知道他想要使用的功能，需要利用导航获取。例如：
②发现类导航，用户须完成某任务，但不知道使用哪个功能来完成。例如：
用户在日常工作中最常使用的内容，按照使用频次将内容布置以下各区域。
列表页可以查看和处理大量的条目，常有导航至详情的作用。用户可在列表页对条目进行筛选、对比、新增、分析、下钻至条目完整详情页等操作。帮助用户更高效的查看、处理、查找条目。
单列布局：从上往下堆叠，数据过滤模块在最上方，过滤数据后，用户再由总体到具体的的浏览逻辑理解和分析。
双栏布局：将数据过滤模块放置在侧栏，当过滤条件过多，横向空间充裕时使用。
模板-查询表格：每条条目需要都需要露出很多字段；用户在搜寻条目时有准确的查询范围时使用。
模板-标准列表：提供每条条目的概览信息，点击列表可导航至条目详情。页面内常提供统计功能，供用户了解总体进展。可作为简易版的工作台使用。
模板-卡片列表：用户无需以特定顺序浏览条目，将每个条目以富有吸引力的方式呈现。
模板-搜索列表：以搜索为主寻找特定条目信息，通过关键词一次性在众多主题下的条目中搜寻结果。可对大量不同种类的内容进行搜索和筛选，满足对模糊目标的查找需求。
模板-成员管理：成员管理是用于展示和管理某对象中所包含的成员的基本信息和权限信息的页面，管理操作通常包括添加成员、删除成员、成员角色与权限赋予等。
批量操作：页级的批量操作影响整个页面，建议置于页底
结果页是用一个页面反馈操作结果，是反馈模式中最强的一种。当完成一个流程操作后，需给与用户明确的结果反馈时使用，例如分步表单的最后一步。当有大量的信息需要在结果页展示时使用。向用户传达任务完成结果，引导用户进行下一步操作，通过有效的反馈建立起用户对系统的信任。
结果页可提供以下内容：
显示结果状态并引导用户进行下一步操作
标题内容：言简意赅，不可被截断；标题位置：正、副标题一般放置于卡片左上角，标题宽度不超过卡片宽度。
注意：如果标题长度真的需要超过卡片宽度，则将标题中间的文字省略，如：我是...标题
分类轴：自动旋转+自动省略
折线图面积图
柱状图
条形图
散点图
数据标签存在则省略轴标签
图例位置
图例太多：使用翻页功能实现
图形比例：以柱形图为例，柱子比例和两边间距的比例为1：2：1，柱子宽度为总宽度的60%
填充样式：根据图形元素在实际图表中的面积占比，我们定义了相应的填充样式。图形占比越大的图表，对应填充的透明度越高。如，在柱/条形图中，图形的填充比例为95%；在面积图中，图形的填充比例为25%。
用于展示页面异常状态，解释发生了什么异常，为用户提供相应建议或操作，避免用户感到迷失和困惑。
当页面出现异常时展示，其包含以下要素：
1.配图：为沉重的异常增添一点乐趣，缓解用户烦躁心理；
2.异常代码/问题：当异常有具体的HTTP错误代码时，可予以展示；
3.异常描述：简明扼要地描述异常原因，方便用户作对问题作反馈；
4.建议操作：协助用户处理异常，或把用户引导回正确的路径上。
模板-404：用户请求访问的页面、项目、资源等未找到。
模板-403：无权限，可能包括无应用权限或无数据权限，根据实际情况向用户反馈。
模板-500：服务器出错，无法向用户提供服务。
模板-浏览器不兼容：当浏览器不兼容导致用户无法打开网页的时候使用。当浏览器不兼容，对操作影响程度不同，当并不严重影响使用时，可使用全局提示，允许用户继续使用。
空状态：当没有内容/数据显示给用户时，展示空状态。空状态也属于一种特定的异常页。
当页面因为网络等各种原因加载内容失败时展示，一般结合重试操作。
理想状态：所有页面模块正常展示的状态；
部分状态：部分模块不存在或部分内容为空状态，设计参考空状态
加载状态：用Spin或Skeleton反馈加载中状态；
错误状态：系统错误、无权限等；
空状态：内容完全为空的状态，建议使用引导类的空状态提示，如果是新用户参考使用新人引导页。