信息化系统UI设计规范

信息化系统建设UI设计规范目录1 范围 52 基本设计原则 52.1 简约明确 52.2 一致性 52.3 操作性 53 布局 63.1.1 设计原则 63.1.2 设计规范 93.2 字体 133.2.1 中文字体使用理念 133.2.2 中文字体设计规范以及使用模式 143.3 颜色 163.3.1 设计理念 163.3.2 系统界面色彩使用规范 203.4 图标 233.4.1 设计理念 233.4.2 设计规范 253.5 换肤 293.5.1 设计理念 293.5.2 设计规范 294 控件标准 354.1 容器控件 354.1.1 分组框 354.1.2 选项卡 374.1.3 手风琴容器 394.1.4 弹出窗口 424.1.5 停靠容器 444.2 选择器控件 464.2.1 折叠式菜单 464.2.2 复选框 484.2.3 单选框 504.2.4 下拉列表 534.2.5 列表框 554.2.6 按钮 584.2.7 时间选择器 634.2.8 列表视图 644.2.9 树形视图 664.2.10 拖拽上传控件 694.2.11 表格控件 714.3 单值控件 734.3.1 滑块 734.3.2 量表 764.3.3 进度条 774.3.4 微调框 814.4 地图控件 834.4.1 地图控件 834.5 文本控件 844.5.1 输入文本区域 844.5.2 标签 854.5.3 输入文本 864.5.4 气球状提示 894.5.5 工具提示与信息提示 944.6 统计图形控件 974.6.1 曲线图 974.6.2 饼图 974.6.3 柱形图 974.6.4 条形图 984.6.5 组合图 984.6.6 气泡图 984.6.7 散点图 984.6.8 面积图 984.6.9 雷达图 984.6.10 刻度盘 984.6.11 甘特图 984.7 新颖控件 994.7.1 放大镜控件 994.7.2 图片展示控件 1004.7.3 首次体验向导控件 1014.7.4 拖拽布局控件 1024.7.5 关键字联想控件 1044.7.6 标签云 1054.7.7 文本式选择控件 1064.7.8 停靠菜单控件 1074.7.9 虚拟键盘 1085 交互规范 1095.1 界面架构 1095.1.1 静态架构 1095.1.2 动态架构 1145.2 键盘交互标准 1185.2.1 交互原则 1185.2.2 使用场景 1185.2.3 使用模式 1195.3 消息 1195.3.1 错误信息 1195.3.2 警告消息 1215.3.3 确认消息 1225.4 通知 1245.4.1 交互原则 1245.4.2 使用场景 1255.4.3 使用模式 1255.5 首次体验 1255.5.1 使用原则 1265.5.2 使用场景 1265.6 提示音 1265.6.1 使用原则 1265.6.2 使用模式 1266 控件标准（补充） 1286.1 输入控件 1286.1.1 文本框的使用 1286.1.2 多行文本输入框(textarea) 1286.1.3 列表框（ListBox） 1286.1.4 单选框（RadioButton） 1286.1.5 复选框（CheckBox） 1286.1.6 选择控件的选用标准 1286.2 显示控件 1296.2.1 标签 1296.2.2 输入帮助 1296.2.3 消息 1296.2.4 错误画面的使用原则 129

范围本标准规定了UI设计过程中需要遵循的设计原则、视觉、控件、交互等标准规范。基本设计原则简约明确依据用户的角色和使用场景，隐藏或删除不常用或不重要的功能或信息，使用户能专注于主要信息；使用用户熟悉的词汇、惯用语和概念，减少新概念，即减少用户的学习成本和记忆负担，方便用户使用。一致性系统中的各主界面及子界面的布局应保持统一，各类控件的位置，颜色，风格保持一定原则，字体大小，颜色，风格也应按照统一原则设计，使系统整体风格保持一致。操作性高效灵活，针对用户的具体使用场景，通过页面元素的合理布局和快捷键等方式来提高用户的操作效率；在某些时候系统可以合理地限制用户的操作，或通过增加确认操作等来防止用户的错误操作；类似的功能应能通过相似的步骤完成操作。布局设计原则通过适当使用下列原则来体现视觉层次：焦点原则：指用户首先关注的区域。形式上被赋予焦点属性的UI元素一定要表达重要的内容。以下是反例：毫无规律，拥挤的排版，导致页面很难聚焦于某一处。以下为正例：简单的排版，通过文字大小的区别，自然的将焦点聚集在标题。视觉流原则：指用户注视区域的顺序。可以根据任务逻辑和用户的浏览习惯来设计恰当的视觉流。好的视觉流应该清晰、合理、顺畅、自然。因此，在逻辑上相关的UI元素应具有清晰的视觉关系；反之，逻辑上相关的UI元素在空间上被分隔，视觉关联效果将会减弱。如下图所示：对齐原则：界面中的各类元素应按照计划进行组织，而不是随意排列。保证页面工整，信息呈现有序，便于用户扫视。违背对齐原则将会影响页面效果且不便于用户扫视。不要因为功能需要和特殊情况的顾虑而轻易牺牲掉页面的视觉展现。如下图所示反例：强调原则：可以根据UI元素间的相对重要程度进行强调。下图为正例：在这个待办模块中，第一条待办，通过对文字色彩的强调，区分于其他6条信息，使读者很容易的辨别出，7条信息中最重要的待办，提高了工作效率。扫视布局原则：大部分人的阅读习惯是从左向右，自上而下。阅读分为：沉浸式阅读和扫视，前者的目的在于理解，后者在于定位。如下图所示：浏览系统时，用户始终会沉浸在他们的目标任务中，因此扫视是最常使用的阅读模式。用户只在确信必要时才仔细阅读大量文本。针对扫视的布局设计可以适当强调主要的UI元素，弱化次要的。包括：将主UI元素放在扫视路径上。避免将重要信息放在左下角或者页面底端或者需要滚动很多的控件上。考虑使用渐进展开方式来隐藏次要的UI元素。将任务相关的重要信息直接表现在控件上。用户更倾向于关注交互控件上的标签，而不是辅助型的静态文本。如下图反例：用户必须阅读辅助型文本后才能明确“确定”按钮的作用。如下图正例：直接将按钮的作用描述作为控件标签，便于用户理解。简洁原则：减少内容和展现上的嵌套层级。减少同一控件不同尺寸的数量，不要让布局本身成为突出的UI元素。例如，在界面上只使用一两种按钮宽度。采用轻量级的分组和分割方式，可以用布局本身和分隔符代替分组框，使用尽量少的对齐线。版式匹配原则：在设计之初，应充分考虑页面承载的内容，进行版式布局。不合适的版式会降低用户的工作效率。30%原则通常，一个页面中，主显示区域约占70%的面积，剩余30%面积规范划分为“吊顶”、“头部”、“导航”、“底部”四个部分。对于这个四个部分的划分称之为：30%原则。“吊顶”区域占5%，主要显示“用户信息”、“登录”、“退出”等常规操作按钮；“头部”区域占10%，主要显示系统的名称标志及动画等内容信息；“导航”区域占10%，主要显示系统的一级菜单等功能按钮；“底部”区域占5%，,主要显示系统的版权信息等公共信息。设计规范视觉流规范：禁止逻辑上相关的UI元素在空间上被分隔，导致视觉关联效果混乱。如下图所示：对齐规范：不要因为功能需求和对特俗情况的顾虑而轻易牺牲掉页面的视觉展现。如下图所示反例：逻辑上相关的UI元素在空间上被分隔，且没有明显的视觉关联。而正例中则很好的解决了这一问题，如下图所示：栅格布局。“栅格系统”英文为“gridsystems”，亦称为“网格系统”，是一种平面设计的方法与风格。如今，栅格系统也已经被运用到网页中，它以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。如下图所示：通用栅格尺寸：通用栅格被分为61pxx16px的垂直单元格。用于对齐窗口尺寸、图像比例以及动画。如下图所示。基于“通用栅格”的扩展:基于“通用栅格”规范，设计人员可以据此将栏目进一步划分。应用栅格后，页面可有多种布局和模板。如下图示意：基线规范:采用8px基线栅格，确保页面组件在垂直方向上对齐。排版不必一味地遵循基线，但基线可营造页面水平方向上的韵律感。如下图所示：以8px为横向栅格单位，页面所有元素宽度都可以是2的倍数，包括图片和版面宽度，这样可以在一定程度上加快页面（特别是对于J-PEG图片）的渲染速度（基于计算机内部二进制的运算机制）。其在扩展和兼容性上也有一定优势。在常见的大型系统中，布局间距的最小单位为8px，布局区块采用32px（8px*4）和24（8px*3）两种粒度单位，分别组成以下两种可实现的栅格系统：32px：适用门户、社区、论坛等相关页面，如下图所示：24px：适用于专题页面（如下图）不要展示大段文本，去除不必要的信息。多文本时格式化展示。合理利用页面空间：避免拥挤和对空间的浪费。确保关键数据没有被截断，除非数据特别长。如下图所示反例:字体中文字体使用理念字体选取原则：勿使用生僻字体，一般选择宋体等比较常用的字体，防止用户因没安装对应字体造成显示错误。字体数量原则：不宜同时选用过多字体，以2至3种为宜。字号数量原则：字体大小不要乱设置，最好以系统默认为宜，采用12px、14px、16px大小。特殊字体使用原则：特殊字体或艺术字体最好以图片的方式置入网页。文字的大小需要根据需求合理运用，在一些特殊情况下，最好提供用户可以选择页面字体的功能，比如将字号放大为14px、16px。字型选取原则：西方国家字母体系字体按类型分为“衬线”与“非衬线”两种。“衬线”是指字体中在字母笔划的末端的小转角。“非衬线”字型则没有衬线。用户通常喜欢在文档中将“衬线字体”用作正文。“衬线字体”可以使文档看起来更加正式和典雅。对于UI文本来说，对清晰外观的需求以及计算机显示器的低分辨率则使“非衬线”字体是更好的选择。中文字体中的宋体就是一种最标准的serif字体，衬线的特征非常明显。对比原则：当文本与背景的亮度差非常大时，文本最易于阅读。白色背景上的黑色文本对比度最高，反之很浅的背景上的深色文本同样也具有高对比度。这种组合最适合于主要的系统界面。深色背景上的浅色文本具有很好的对比度。这种组合适用于次要的系统界面。如果你希望确保用户能够阅读你的文本，则应在浅色背景上使用深色文本。视觉可见原则：可编辑：显示在框内，带有文本选择鼠标指针、插入符（具有输入焦点时）以及通常位于白色背景上的文本。只读、可选择：带有选择鼠标指针和插入符（具有输入焦点时）的文本。只读、不可选择：带有箭头鼠标指针的文本。被禁用：带有箭头鼠标指针、有时位于灰色背景上的浅灰色文本。中文字体设计规范以及使用模式网页字体通常由浏览器设定的，而没有经过设置的浏览器通常使用系统默认字体，所以网页字体和浏览器息息相关。Windows下IE浏览器默认设置为“宋体”，Firefox下默认为“微软雅黑”，根据这些情况，可以制定一个标准来实现Web的统一性。由于“宋体”基本上是目前显示中文唯一的通用Web字体，所以中文采用“宋体”，默认字体大小为12px，颜色为黑色；辅助正文说明信息必须使用12px字体字号（比如：大标题下面的发表时间）；版权信息必须使用12px字体大小；标题和正文必须区别开来，使用不同大小的字号；名称字号标题栏文本在标题栏上用于标识窗口的文本。字号：14px，加粗主标题说明在页面、窗口或对话框上解释要做什么的文本。字号：9px辅助说明在页面、窗口或对话框上解释要做什么的附加文本。字号：9px元数据大标签当对象被选中时显示在元数据面板内的文本。字号：13px未选中标题当没有任何选中对象时显示在元数据面板内的文本。字号：14px，加粗普通文本显示在用户界面上的普通（只读）文本。字号：12px强调文本粗体文本用于用户必须阅读的文本，使其更易于分析及受到关注。斜体文本则用于文本的字面引用（代替引号）及强调特定的字词。字号：12px，加粗可编辑文本用户可以编辑的文本会显示在文本框内。要减少呈现的复杂度，该边框可以仅在可编辑文本选中时显示。字号：12px被禁用的文本不适用当前上下文的文本，如用于被禁用控件的标签等。被禁用文本表示用户（通常）无须阅读该文本。字号：12px注：上述表格内容，请根据实际情况酌情使用。颜色设计理念基本原则功能性原则：根据界面中所体现的功能不同，在进行界面设计中，需要考虑到不同的功能相配的颜色。以人为本原则：在界面设计之前，应先做好适度的用户调研，系统投入使用后，也应该根据用户的反馈来及时调整界面的配色。在条件允许的情况下，应根据界面浏览者的大致年龄、性别、地域等来选用与之相匹配的颜色。在设计界面前，考察目标用户的审美喜好，进行目标用户色彩偏爱研究，才可能运用恰当的色彩，满足不同用户的需求。颜色的情感特征是一个必须特别重视的问题，必须充分的考虑行业特点进行选择。如下图所示。色彩适度使用原则：界面色彩的鲜亮对视觉刺激的强度较大，因此一般界面色调的配色往往以较灰暗的混合色作为背景色。为适当降低鲜亮色彩对人视觉的过渡刺激，在整体布局中，往往加入无彩色系颜色进行过渡，以此来减少视觉疲劳。同时，不同的操作系统和不同浏览器，或是不同的监视器以及监视器的设置，同样定义的颜色可能会有不同显示效果。虽然现在绝大多数显卡和显示器都已经使用２４位真彩色，但如果设计师希望能在ＰＣ以外的设备和手机上保持足够出色的显示品质，还是应该从这２１６种颜色组成的调色板中寻找配色方案。如下图所示。再如下图所示正例：通过降低色彩的饱和度，使界面整体色调呈深红色，在保留界面的色彩风格及主题的同时，保证用户阅读的舒适性。如下图所示。色彩暗示原则：不同色彩会产生不同的暗示，如蓝色想到天空，白色想到纯洁等。如下图所示。色彩构成原则界面颜色搭配的是否合理直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力，不恰当的色彩搭配则会让访问者浮躁不安。同种色彩搭配原则：首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的界面看起来色彩统一，具有层次感。邻近色彩搭配原则：在色环上相邻的颜色，如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以使网页避免色彩杂乱，易于达到页面和谐统一的效果。如下图所示。对比色彩搭配原则：色彩的三原色（红、黄、蓝）最能体现色彩间的差异。色彩的强烈对比具有视觉诱惑力，能够起到几种实现的作用。对比色可以突出重点，产生强烈的视觉效果。通过合理使用对比色，能够使门户系统特色鲜明、重点突出。如下图所示案例，做为一个工作室的网站，设计的目的在于有效的吸引用户来阅读，通过适度的对比色彩搭配，使用户能够加深对内容的了解，及时找到自己想看到的案例。暖色色彩搭配原则：这种色调的运用可为界面营造出稳性、和谐和热情的氛围。如下图所示界面，暖色的界面给人热情，温暖的感觉，增加用户的友好感、突出界面展示的主题。冷色色彩搭配原则：使用绿色、蓝色及紫色等色彩的搭配，这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色与白色搭配一般会获得较好的视觉效果。如下图所举案例，通过使用一些冷色调的色彩进行搭配，突出化妆品的清爽，舒适的感觉，从而很好的体现了产品的特点特性。文字与背景色对比原则：文字内容的颜色与界面背景色对比要突出，底色深，文字浅，以深色的背景衬托浅色的内容；反之，底色淡，文字深，以浅色的背景衬托深色的内容。如下图所示，背景色和文字通过对比显示能在保证用户的阅读的同时，又能突出展现的主题和风格。即满足了用户体验的需求，也很好的展示了视觉效果。系统界面色彩使用规范系统背景色调需统一：版面中设置了多种颜色的底色，显得十分凌乱，将其统一成浅色，页面显得整齐、干净，体现出简约、自然的效果。如下在同一个系统中，出现了两种表单的背景风格，从用户使用习惯来说，需要用户进行重新适应，增加了用户的操作时间。如下图所示。多种颜色配色时色调需统一：色调是指色彩的浓淡、强弱程度，是通过色彩的明度和纯度综合表现色彩状态。同一色调或者相近色调的色彩配色，集中了纯度相近的色彩，呈现自然、和谐的效果。如下图所示：过多使用鲜艳色调的原色，形成嘈杂的印象，出现较多原色的情况，应注意其面积的比例。色彩的色调没有统一，画面整体陷入凌乱的印象中。出现多种色彩时，尽可能避免运用原色，避免造成过于强烈的视觉冲击效果。同时将色彩统一于一种或者彼此类似的色调中。如此一来，画面整体效果增加，让人看起来觉得十分整齐、舒服，整体统一于典雅的色调中。如下图所示。背景色纯度不宜太高：浓重的背景色使得版面显得难以识别，原来要表现的是前景，但淹没在背景的浓重色彩之中。尤其是文字，在纯度很高的背景色的衬托下，几乎无法分辨。如下图所示案例，高纯度色调下两个色相相近的色彩使用户很难分辨上面的文字。如下图所示。背景色明度不宜太亮：明亮的底色容易引发人的视觉疲劳，长时间面对这样的版面，会引发人的焦燥、不安的情绪。具体案例请看“色彩适度原则”中的举例。色彩种类不宜太多：画面中出现的色彩种类过多，在视觉上无法有效进行层次划分。由于页面中的图片本身就有不同颜色，因此色彩过多，画面就显得更加杂乱无章。如下图所示反例，一个界面中出现了10种颜色，视觉效果很鲜明，但交互感受上不易被用户所接受。图标设计理念相对于单纯的文本，图像以及符号化的图标更加符合用户的认知习惯。往往表述一种信息，一张图片或者一个标识能让用户更容易理解与接受。适当的使用图标，会让用户很自然的建立起认知习惯。清晰、明确，有高度的概括性与指向性，让用户能够快速的联想到对应的功能和操作。具体设计理念如下：图标图形的设计应该尽可能的直接简单；正例：下列图标结构简单明了。如下图所示。反例：图标结构过于复杂,用户难以快速识别判断，如下图所示。图标展现的内容应该能让用户容易读懂；正例：下列图标内容比较简单直观，一眼就能看出所表达的意思。如下图所示。反例：下列图标的内容丰富，但让人难以理解，需要仔细思考或许能大概了解它的意思。如下图所示。当加上文字之后，效果明显好很多。图标的样式尺寸设计风格应该统一；正例：同一个界面内的图标，样式风格保持统一和一致性。如下图所示。反例：同一个界面内的图标，有个别图标没有和其他保持一致，使用户感到生疏。如下图所示。复杂的图标要适当的加入文字进行辅助说明正例：界面中图标内容比较复杂，所以加入了描述文字来说明。如下图所示。反例:下列图标内容比较复杂，但并未加入说明文字，使用户难以理解。（其实跟上列图标意思相同）如下图所示。文字不易过长，一般为1-12个字符宽度。正例：界面中图标内容比较复杂，适当加入简明扼要的描述辅助用户理解和记忆。如下图所示。反例：下列图标加了文字描述，但所加文字过多，导致所占空间大，也显的过于繁琐。设计规范图标格式：系统中图标制作的输出格式标准为JPEG、PNG、GIF、ICON等格式，可根据图标所在所属系统需要输出不同格式的图标。GIF：唯一支持动画的常用图片格式，支持256种颜色和单一透明色,但对透明色的支持不很好，它适合对颜色要求不高的图形（比如说图标，图表等），图像质量相对较低，文件容量小(遇见有简单动画需求的图标推荐使用GIF)。JPEG：有背景色的图标一般都用这个格式，有损压缩，不支持透明色。图像质量和文件大小根据压缩级数而成正比，压缩越大文件越小图像质量就很低，相反则文件大质量高。PNG-8和PNG-24：两种格式均支持透明色，不支持动画。PNG-24采用无损压缩，图像质量高文件容量大，适用于对画面细节要求非常高的情况下。（如果没有动画和网速限制的情况下，推荐使用PNG-24格式作为图标的保存格式）。PNG-8是一种有损压缩格式，压缩方式类似gif。在使用较少颜色变化的画面中，可使用此种格式。Icon：一般用于系统图标、软件图标等，这种图标扩展名为*.icon、*.ico。常见用于CS架构程序图标。无论何种图标都须是支持32位的，且边缘平滑。正例：下列图标均为32位边缘平滑的效果。如下图所示。反例：下列图标效果没有达到32位边缘平滑的效果，导致视觉效果不清晰颜色不饱满，使图标失去原有质感。如下图所示。尺寸大小：系统中图标的尺寸大小方面，可根据当时所在不同的界面栏目来调整不同的大小尺寸，完整一套包括16x16、32x32、64x64和128x128px等尺寸，需要严格遵守宽高等比的方式来进行缩放。如下图所示。结构形状：明确图标的结构、形状和细节，统一视角、倒角、材质,使一套图标能在外形结构上保持一致。正例：下列图标在视角、倒角和材质上都保持了一致性。如下图所示。反例：下列红框中的图标，虽然颜色和风格是一个系列的，但没有满足上述的条件，没有保持一致性。如下图所示。视觉效果：系统中的图标可以使用灯光、特效、阴影和立体等效果，但需要明确效果的展现方式，使一套图标在视觉效果上能够统一；正例：这组图标充分展现了立体感和光感阴影上的特效，5个图标完全一致。如下图所示。反例：这组图在设计风格上和颜色上都是一致的，同样具有光感和立体效果，但红框内的图标阴影方向不一致。如下图所示。图标色彩：系统中图标的色值在规范中明确规定，可根据页面展现需要调配其他颜色，颜色数量避免超过三种。正例：下列图标主色调为绿色，黄色为辅助色，整体不超过三种颜色。如下图所示。颜色参数(更多请看.1色值规范)反例：这组图标本身来说并没有太多的问题，但颜色过多，过于花哨，不适合在同一系统中使用。如下图所示。换肤设计理念不同的用户可以通过“换肤”的方式来满足个人喜好，提高用户体验。在进行“界面皮肤”的设计时，应遵循以下理念：换肤功能应简单易用：系统提供多个外部样式表文件，用户选择不同的网页样式时通过程序修改网页依赖的样式文件，从而达到为网页换肤的目的。换肤只针对于页面显示风格的调整：页面结构不变，内容不变，变的是页面背景颜色，字体颜色，Icon等，为了保持页面风格一致，设计皮肤时必须遵循这个规则，可以设计多种风格的皮肤，但是不能在同一皮肤里出现多种风格。设计规范换肤只是对背景颜色的调整，其页面内容和页面结构不变：页面换肤主要涉及到的页面元素包括Logo，TitleBg，banner，button，WebBg，Icon等。不管皮肤怎么设计，页面的内容和框架始终是不会改变的，可以改变Logo，TitleBg，banner，button，WebBg，Icon的颜色，但是不能改变页面的内容和布局。皮肤风格要统一：换肤是对信息系统色彩的改变，在同一种皮肤内避免出现多种色调，在设计皮肤时要统一风格，一个色系颜色不能相差太大，同一种风格里不能出现多个色系。如下图所示：颜色风格要统一，单色都是单色，渐变都是渐变。下图所示正例。（标题栏背景颜色统一）下图所示反例。（标题栏背景颜色不统一）ICON更换必须谨慎：涉及到图标更换的时候，风格必须要保持一致。图标的更换要符合实际内容，否则可能会影响用户的实际操作，图标的设计风格必须一致，要遵循页面色调风格。比如：图标设计风格不统一，如下图所示。比如：图标表达不合理，如下图所示。所设计的换肤元素必须满足现有系统的布局尺寸：换肤需要根据页面元素尺寸自适应，换肤必须保证页面元素的完整性。所设计的换肤元素必须使用户能够顺利阅读：尽量不要使用色彩反差太大的颜色。不合理的色彩搭配，会让用户反感并产生抵触心理。换肤元素要承托出页面内容，同时也要使整个页面表现的整洁干净。下图所示正例。下图所示反例。建议如下的控件类型可以进行换肤：页面头部（Head）：对头部的背景色调进行修改调整，系统名称内容和LOGO色彩、比例不发生改变。如下图所示：窗口背景：界面外框主体背景。比如：背景换肤。通用按钮：最小化按钮（三种状态）、最大化按钮（三种状态）、恢复按钮（三种状态）、通用按钮背景（三种状态）、主界面菜单按钮（三种状态）。弹出框：弹出框通常会出现在屏幕的正中央位置，框体颜色边框、标题栏均需要进行颜色更换。表格：用来显示数据，通常用颜色来划分数据的类型和功能，表格的颜色可以改变，可以设置表格的单行、多行、标题栏的背景颜色。导航菜单：对导航菜单颜色换肤不要用黑白灰，尽量使用能突出导航文字的颜色。标签栏：标签栏颜色对比层次要鲜明，可以清晰区分激活栏和非激活栏。控件标准容器控件指能容纳其它控件的控件。当文字、图片和视频等控件想要在窗体中展现时，就需要先设置一个容器控件来设定“场地”区域,来容纳这些控件。分组框分组框（GroupBox）是围绕在一组相关控件周围的带标签的矩形边框。它提供了一种通过视觉展示控件关系的方法。除了可能为一组控件提供访问键（accesskey）外，没有其他的功能。如下图所示为典型的分组框：使用场景分组中有多个控件的情况：如果不是，则应改用普通的文本标签。控件之间的联系逻辑应清晰。通过分隔符来有效地表达这种关系应该使用分隔符。分隔符是一条水平直线，用于归拢其下方的控件。分隔符可使外观更加简单、干净。与分组框不同的是，分隔符最适用于铺满整个宽度的情况。如下图所示：使用规范不要嵌套分组框：在分组框内，应通过布局来展现控件之间的关系。如下图所示反例：在这个示例中，嵌套的分组框造成了视觉上的混乱。正确示例如下图所示：在这个示例中，同样的控件关系换用布局方式来展现。不要将控件用作分组框的标签：如果分组框内所有控件的可用和禁用都由一个复选框控制的话，那么可以使用这个复选框作为分组框的标签。如下图所示标红处错误反例：在这个示例中，下拉列表被错误的用于分组框。这种情况下应当换用选项卡。如下图所示正确的示例：在这个示例中，所有的控件就是一个复选框所以不需要再添加一个分组框。不要禁用分组框：若要表明一组控件当前均不适用，应禁用分组框内的所有控件，而不要禁用分组框本身。应当为所有的分组框添加标签。分组框标签措辞应当准确，不要在标签中使用说明性文本。如果需要的话，可以将说明性文本放在分组框内。不要在用户界面文本中标明下面使用的是分组框，用户不需要关心使用的是哪种控件。选项卡选项卡是用多个标签页区分不同选项功能的窗口。使用场景能将控件放置于单一一个整体的页面中，则应使用单页。只有一个选项卡的情况下，使用单页。各选项卡之间没有直接明显的联系，将相关信息放置在单页中。选项卡相互之间地位平等，使用渐进展开或子对话框来显示相关信息。使用模式动态窗口界面：与滚动条类似，选项卡可以用于增大窗口界面尺寸以显示相关的信息。多视图：与分割按钮或下拉列表类似，选项卡可以用于为相同或相关信息显示不同的视图。交互规范在用户不缩小浏览器的前提下，不要在横向选项卡上出现水平滚动条。水平滚动不容易被发现。如下图正确示例：该选项卡没有出现滚动条。如下图错误反例：下图中的选项卡出现了滚动条。所有选项卡可以排列在一行中。确保选项卡易于区分与其他控件。不要为切换选项卡添加效果。选项卡可以以任何顺序进行访问。更改当前选项卡不应该带有任何副作用（等待，消息提示，警告）。不要为最后选中的选项卡赋予特殊含义。选项卡的选择功能只用于导航，用户最后的选项卡选择并非一项设置。不要使一个页面上的联动效果依赖于其他页面。相互依赖的效果应当放置在相同的页面上。应当维持并默认用户的操作习惯。如果没有特殊需求，系统默认选择第一页。动态窗口界面模式：不要在选项卡页上使用横向滚动条。选项卡的功能与滚动条类似——都是增加窗口的有效面积。使用一种机制足矣。如果一个选项卡在当前上下文中不适用且用户也并不期望它可用的话，应当将其移除。这么做能够简化用户界面。多视图模式：在选项卡标签上出现所要描述的视图或文档。避免过长的选项卡名称。如果必要，可以通过限制最大名称长度，或使用省略号截断显示选项卡标签这两种方法。如果一个选项卡在当前不可用，则将其移除。标签基于选项卡的模式来书写标签。使用名词而非动词，不带句末标点。（中英文的的使用根据实际的业务需求来决定）。使用简明的选项卡标签。使用一两个能够清晰描述页面内容的词（根据实际业务情况，中英文均可以）。使用明确、有意义的选项卡标签。避免一般性的选项卡标签，比如“常规”、“高级”或“设置”。应尽可能为标签文本应用粗体样式。手风琴容器手风琴容器是一个用来展示多个面板的控件，这些面板同时只能展开一项（也可以一项都不展开），如下图所示：使用场景用户不必在所有的情况下，同时看到这些信息。则应使用“手风琴容器控件”渐进展开来显示信息，并使用户可以方便地访问详细信息。如果页面信息默认是可见的，用户需要将其隐藏时，使用手风琴控件。增加窗口界面的有效使用率，以显示更多相关的信息使用模式原位展开用户界面；如下图所示：点击标题内容切换效果，只展示一个内容区域。带有功能菜单的手风琴容器。视觉规范不要水平滚动菜单选项，水平滚动不容易被注意。可以添加垂直滚动条。如下图所示：横向手风琴控件的标签名称以居中显示为佳，也可根据文字长度情况，以居中对齐为原则，做出调整。如下图所示：纵向手风琴控件的标签名称以顶部对齐显示为佳，也可根据文字长度情况，以顶部对齐为原则，做出调整，若有其他如数字、备注等信息需要在菜单项上显示以底部居中对齐。如下图所示：交互规范根据其用途选择手风琴渐进展开模式。不要出现过多的选项，过多的容器影响整体的布局，也不方便用户操作。菜单项相互之间处于平等地位，可以以任何顺序进行访问。鼠标移动到菜单项上或者点击时，菜单才会滑动展开，否则菜单内容将折叠。标签使用简明的选项标签。使用能够清晰描述页面内容的名词，不带句末标点（中英文根据实际业务需求来判断）。弹出窗口窗口是把显示屏幕划分成许多的框，每个窗口负责显示和处理某一类信息。用户可随意在任何窗口上工作，并在各窗口间浏览信息。使用场景当用户操作错误或者提示步骤等信息，系统需要弹出窗口时。页面根据需要可展示多个信息窗口。该页面需要更多的显示信息，并通过弹出框的形式显示信息。使用模式提示用户进一步完成操作提示窗口。删除操作中需要给出操作警告或者提醒。如下图所示：确认删除操作需要给出操作结果提示。如下图所示：需要更多的操作。屏幕显示的范围是有限的，许多功能通过折叠，或者弹出方式展现窗口内容。如下图所示：隐藏式窗口。通过鼠标事件进行显示窗口。如下图所示：视觉规范图标：错误操作或者警告提示应使用图标，便于识别。布局：没有特殊要求推荐显示在页面的中间。交互规范同时出现关联的二次操作或者多次操作，当前激活窗口应该锁定在最前端。如下图所示：如果内容是限制的，请避免使用最大化操作，避免窗口浪费。存在与当前页面关联的窗口，使用除窗口以外的屏蔽功能并给出置灰效果，避免用户误操作。停靠容器指可以在容器内部、紧靠组件的上边缘、下边缘、左边缘或右边缘放置一个组件的容器。使用场景当需要某个容器显示在画面中时，可以采用停靠容器，比如工具栏，状态栏等，可以设置自动隐藏，固定显示等。使用模式底部停靠：悬浮于底部位置，可以设置自动隐藏或是固定显示。如下图所示：侧边停靠：悬浮于两侧，可以设置自动隐藏或固定显示。如下图所示：视觉规范画面不可有过多的停靠容器，过多容易造成视觉混乱。一般来说，停靠容器中不要再嵌套过于复杂的容器，避免在停靠容器中在嵌套停靠容器。停靠容器一般停靠在界面边缘，大小要适中，风格与画面固有风格尽量保持一致。交互规范当点击某一组件弹出停靠容器时，停靠的容器尽量靠近所点击的组件。停靠容器可以随着画面尺寸的变化同步变化。停靠容器上的控件要遵守相应的控件规范，操作要方便。停靠容器的功能键要有说明，比如关闭，固定，自动隐藏等。用“click（单击）”描述用户的交互行为。选择器控件指提供选择操作的控件。例如：单选，复选；“确定”和“取消”按钮。折叠式菜单默认情况为折叠状态，当浏览者将鼠标移动或者点击时，菜单才会滚动展开子菜单。使用场景在网页展示平面有限的情况下，可以使用折叠菜单。在页面最上方，可用于导航菜单使用。可以隐藏导航菜单的子菜单，方便用户布局。使用模式用于导航菜单使用。以功能化或者模块化，用户一目了然，方便用户直接找到需要的功能或者其他页面。如下图所示：工具栏折叠菜单。将同一类别的功能统一在同一个父节点下。如下图所示：功能化折叠菜单（百叶窗式菜单）。将展示拥挤的功能或者模块统一到大的功能菜单下。如下图所示：视觉规范折叠式菜单完全展开时，进行宽度的适当调整，避免出现水平滚动条。右向应当预留适当长度以便于子菜单显示。需要设计选中或者划过的效果。若选中树形菜单中的一项，须提供一个选中的状态（背景色变换、下划线或打钩图标识别），突出用户所在的位置。折叠式菜单中使用的图标尺寸为：16*16px。调整折叠式菜单的高度避免出现垂直滚动。为了消除纵向滚动条，可以考虑调整列表框的高度。交互规范考虑提供鼠标悬停的功能。鼠标悬停后可以预览该菜单下的内容。禁止双击操作。应当始终有一个命令按钮或快捷菜单命令具有相同的效果。如果列表项需要进一步解释说明其含义，应当通过信息提示来提供解释说明。标签应当为所有视图添加标签。标签文本应当为单词或短语，而不是句子。应当使用静态文本。根据实际业务需求来设置分配唯一的访问键。将标签放置于控件的左侧或上方，并将其与控件的左边对齐。对于多选树形视图，应明确指明该控件可以多选。复选框复选框，也叫做CheckBox，它可以通过其属性和方法完成复选的操作。使用场景复选框是用于切换选项的选择状态，或者是选择/取消选择一个项目。选项展示的是静态的文本选项，而非数据。对于数据，应当使用列表框，或是多选列表框。使用模式单个选项；用于选择单个选项的单个复选框。如下图所示:独立选项（不选或多选）；用于选择零个或多个选项的一组复选框。如下图所示:关联选项（一项或多项）；也可用于选择一个或多个选项的一组复选框，可以呈现一组相关联的选项。如下图所示:混合选项；除了选中和未选中状态外，复选框还有用于多选的混合状态。如下图所示：交互规范组合使用时，用户必须至少选择其中一个。应使用一组复选框，并当一个选项也没有选中时弹出提示信息框，提示用户进行选择。为所有复选框添加标签，标签的文本内容要与实际意义相符合。正确的示例：复选框具有实际意义的标签。错误的示例：复选框不具备实际意义。将相关的复选框合并成组。将相关的选项合并，不相关的选项分开，必要时使用多个组合。一组复选框中出现多个选项容易干扰用户进行选择，同时不利于布局，建议10个以上进行重新的组合。如图正确的示例：一组相关但互相独立的选项示例：若复选框选项过多，且能进行分类的话，必须对复选框进行分组，避免出现信息阅读混乱。以逻辑顺序排列复选框，比如将高度相关的选项放在一起，或将最常用的选项放在前面，或者遵循其他自然过程。将多个复选框垂直排列，不要水平排列。水平排列难以操作。正确示例：在这个示例中，复选框正确地进行了对齐。如下图所示：错误示例：在这个示例中，水平对齐难以操作。如下图所示：不要使用第三种状态。对于每个单独的对象来说，要么是选中状态，要么是未选中状态。显示禁用的复选框时应使用正确的显示状态。即使用户无法更改，禁用的复选框仍然传达了一定的信息。不要将选中复选框用于执行命令。视觉规范推荐尺寸与间距标签对于一组复选框来说，应当使用语气相同的措辞并尽量保持所有标签的长度大致相同。标签文本应当专注于各选项的差异上。如果所有的选项都有相同的说明文本，则应将此文本移至分组标签中。使用肯定的表述方式。不要将标签表述为选中某个复选框就意味着不要执行某操作。单选框单选框（RadioButton）用于在一组相关但互斥的选项中进行选择。选项应设置一个默认值，用户能且只能选择一个选项。一组选项按钮的行为如同一个单独的控件。效果图如下：使用场景该控件是用一组相关且互斥的选项进行选择的。如果不是，则改用其他控件。只有两个选项的情况下，如果两个选项是对立存在的，则可以使用单选框。正确示例：在这个正确的示例中，选项是对立的，因此单选框更加合适。选项内容不是数据或者跟上下文相关的内容，使用单选框。对于数据应该使用表单或者下拉列表。视觉规范交互规范为所有单选按钮添加标签。以逻辑顺序排列选项，比如从被选到的可能性从高到低、操作从简单到复杂、或者风险从低到高等等。如果没有一个选项是有效的选择，应当添加一个选项以反映该选择，例如“无”或“不适用”。如下图所示：最好将多个选项按钮垂直排列，而非水平排列。水平排列会使得难以操作。如下图所示：在这个示例中，单选按钮是垂直对齐的。不要将选项按钮用于分组框标签。尽量通过分组框对单选选项进行分组，这样可以避免屏幕出现混乱。不要将选中单选按钮用于：执行命令。显示其他窗口，比如用于收集更多输入的对话框。选项的数量在2到7个之间为最好。过多的选项不便于用户使用，同时不方便布局。标签为所有单选按钮添加标签。使用准确的标签内容来表述（使用中英文根据实际的业务需求来决定）。标签文本应当为短语，而非句子，句尾不添加标点。应当使用语气相同的措辞并尽量保持所有标签的长度大致相同。如果所有的选项都有相同的说明文本，则应将此文本移至分组标签中。使用肯定的表述方式。在标签中仅描述选项。保持标签描述的简洁保证在提示信息和文档中易于引用。如果需要对选项给出进一步的解释，应当在静态文本控件中使用完整的句子进行解释。在这个示例中，各选项通过独立的静态文本控件进行了解释。如下图所示：如果一个选项是强烈推荐的，应当在标签中添加“(recommended)”/“（推荐）”字样。确保添加至控件标签，而不是附加说明。下拉列表下拉列表（Drop-downList）和组合框（ComboBox）用于从一组互斥值列表中进行选择。在标准下拉列表中，用户只能选择列表中列出的选项。使用场景该控件适用于从一组互斥值列表中进行选择的情况。要进行多项选择，应改用多选列表。提供模糊查询功能的下拉列表，可以使用可编辑模式的下拉列表。屏幕空间很紧张的情况下，则使用下拉列表，因为其对屏幕空间的占用是固定的，而且与其包含的选项数量无关。对于下拉列表来说，列表项的数量不会影响下拉列表的布局和使用。使用模式可编辑列表框，提供带有模糊查询效果的下拉列表。不可编辑的列表框。带有“全选”或“无”的选项列表框。应将表示“全选”或“无”的选项放在列表的开头，而无需考虑它与其他项目的顺序关系。如下图所示：带有空白选项的列表框。如下图所示：视觉规范推荐尺寸与间距用于下拉列表推荐尺寸与间距应当为最长的有效数据选择合适的宽度。下拉列表无法横向滚动，因此用户只能看到控件中可见的部分。调整列表的高度以消除不必要的垂直滚动。交互规范不要将下拉列表的更改用于：执行命令。显示其他窗口，比如用于收集更多输入的对话框。动态显示与选中控件相关的其他控件。以逻辑顺序排列列表项，比如将相同宽度的选项放在一起，或将最常用的选项放在前面，或者以字母顺序排列（名称以字母顺序排列，数值则以数字大小排序，日期则以时间顺序排列）。正确示例，如下图所示：在这个示例中，列表项是以其空间关系排序的。错误示例，如下图所示：在这个示例中，列表项数量太多，因此应当以字母顺序排列。将无选项置于括号内。在这个示例中，“(无)”是一个无选项，它只是表示该选项本身未被使用。正确示例，如下图所示：错误示例，如下图所示：应当限制输入文本的长度。不要超过下拉列表最大选项的长度。标签标签文本应当为单词或短语，而不是句子，并以冒号结尾（使用中英文根据实际的业务需求来决定）。当空间紧张时使用带提示文本的可编辑下拉列表。如果下拉列表或组合框是附属于选项按钮或复选框的，且冒号结尾的标签引导的话，不要为该控件再使用额外的标签。可以在标签之后的括号中指定单位（如“秒”或“连接”）。不要将下拉列表的内容（或其单位标签）作为一个句子的一部分。列表框列表框（ListBox）控件表示一个选项清单，用户可以用鼠标选择其中一个或者几个选项。使用场景应用于一个包含多个项目列表并且可同时显示多个选项的情况。提供多项选择的列表模式。使用模式单选列表用户一次可选择一项。如下图所示:标准多选列表；用户可选择任意项，包括不选。如下图所示：带复选框的列表；与标准多选列表框相同的是，带复选框的列表使得用户能够选择任何数量的项，包括不选。如下图所示：预览列表；可以单选，但除了文本之外，还显示选项效果的预览。如下图所示：添加/删除列表；用户可以一次添加一个或多个项来创建选项列表，也可以设置列表的顺序（如同列表构造器）。交互规范列表中所表示的是数据，而非程序选项。禁止用户使用剪粘板复制或粘贴列表项。以逻辑顺序排列列表项，比如将高度相同的选项放在一起，或将最常用的选项放在前面，或者以字母顺序排列（名称以字母顺序排列，数值则以数字大小排序，日期则以时间顺序排列）。将表示“全部”或“无”的选项放在列表的开头，而无需考虑它与其他项目的顺序关系。不要使用空白列表项，应当用“无”选项来代替。用户不知道如何解释空白项，而无选项的含义则非常明确。正确示例：在这个示例中，改用了元选项“(无)”。如下图所示：错误示例：在这个示例中，空白项的含义不明确。如下图所示：双击操作应当是冗余的。如果用户无法对选中项进行任何后续相关操作，则不要允许选择。当禁用列表框时，应当同时禁用所有相关联的标签和命令按钮。不允许更改视图、分组、按列排序或是改变列的宽度与顺序。按钮按钮是用于启动一个即时操作的控件。典型的命令按钮,当按下Enter键时会执行“默认命令按钮”。默认按钮是由开发人员指定的，但对于任何一个按钮，只需用户将焦点切换到其上即可。使用场景该命令按钮是用来启动一个即时操作。使用选项按钮与常规命令按钮的组合的情况。当下列条件符合时，往往会用选项按钮与常规命令按钮（确定、取消）的组合来代替一组独立的命令按钮：存在五个或更多可能的操作。需要在决定前与选项进行交互（查看附加信息）。如下图所示:将其视为选项，而非不同的命令。使用模式标准命令按钮：可以使用标准命令按钮来启动一个立即操作。如下图所示：默认命令按钮：窗口中的默认命令按钮表示当按下Enter键时会被激活。每个窗口中只能有一个按钮成为默认按钮。轻量级命令按钮：轻量级命令按钮和标准命令按钮类似，唯一的不同在于其边框仅当鼠标悬停的时候才会显示。如下图所示：在这个示例中，只有将鼠标悬停在命令上方时，呈现出划过状态，显示出按钮的边框。菜单按钮：当需要为一组少量相关的命令使用菜单时，可使用菜单按钮：包含一组少量相关的命令的菜单按钮。当菜单栏不适合出现在某些场合时应使用菜单按钮，如对话框、工具栏或其他不包含菜单栏的窗口等。一个倒三角形表明，单击该按钮将会展开下拉菜单。如下图所示：分割按钮：可使用分割按钮（SplitButton）来组合一个命令的一组变化，尤其当其中一个命令特别常用时。已收起的分割按钮，如下图所示：浏览按钮：可使用浏览按钮来显示对话框以便选择有效值。如下图所示：带有浏览按钮的文本框。对于包含多个浏览按钮的窗口，可以使用它的简化版本，简化的浏览按钮。如下图所示：渐进展开按钮：可使用渐进展开按钮显示或隐藏不常使用的选项。将不常使用的选项隐藏，直到需要时才显示的做法称为“渐进展开（ProgressiveDisclosure）”。双V形（双箭头形）表明了渐进展开方式的使用，其箭头即指向信息显示或隐藏的位置：单击该按钮后，其标签会发生改变，以表明下次单击会产生相反的效果：视觉规范对于有文本标签的命令按钮来说，应依据场景来确定宽度和高度。更多信息请见视觉规范。在每个窗口中保持按钮宽度高度相等。如有特殊需要，应当按照实际情况设定。交互规范单击命令按钮不会立即产生结果时，应当显示忙碌鼠标指针。避免出现没有反馈的情况，否则可能会认为没有操作成功而再次单击。如果同样的命令按钮出现在多个窗口中，必须使用相同的标签文本、访问键及窗口位置。当其他控件和一个命令按钮存在互操作时，如带有“浏览”按钮的文本框，应当将该命令按钮以下列四种方式中的一种进行摆放以表示它们之间的关系：位于其他控件右侧，顶端对齐。位于其他控件下侧，右对齐。在互操作的控件之间垂直居中（如两个相关的列表框中间的“添加”和“删除”按钮）。如果多个命令按钮与同一个控件存在互操作时，在其他控件右侧纵向排列并顶端对齐，或在控件下方横向排列并左对齐。当命令按钮附属于其他控件时，应当使用上述位置，并在上级控件被选中之前禁用附属的命令按钮。正确示例：错误示例：不要使用过窄、过短或过高的带有文本标签的命令按钮，尽量使用默认的宽度和高度。正确示例：在这个示例中，按钮使用了55×20标准尺寸之一。错误示例：在这个示例中，较标准按钮太小。错误示例：在这个示例中，按钮上标签四周的空间太多。避免在命令按钮上同时使用文本标签和图形。同时使用文本和图标往往会增加不必要的视觉混乱，且无法更好地理解。仅当图形用于增进理解的时候才考虑使用图标，例如当用于命令的是标准符号或有助于形象的了解该命令的结果等等。否则，首先考虑文本，或者单独使用公认或标准的图形。正确示例：在这个示例中，箭头图形有助于形象地了解该命令的结果。错误示例：在这个示例中，“取消”图形在文本的基础上毫无用处。不要将命令按钮用于设置状态。应当改用选项按钮或复选框。命令按钮仅用于启动操作。分割按钮（splitbutton）将最常用的命令作为默认行为。如果存在多个可能的命令，不需要显示额外信息。如果最常用的命令是上次选择的命令，则应将按钮标签改为上次的选择。在菜单中将默认命令以粗体方式显示。尤其当默认命令是动态的，或分割按钮是使用图形来代替文本标签时，能够更容易的找到默认命令。默认值在每个对话框上都包含一个默认命令按钮。将最可靠（防止数据丢失或系统访问）且最安全的命令作为默认值。如果可靠性或安全性不是需要考虑的因素，则选择最常用或最方便的命令。不要将破坏性操作作为默认命令按钮，除非有撤销按钮存在。标签为所有命令按钮添加标签。标签内容可以用一些形象化的图形来表示。如下图所示：（这些按钮表示上一个，下一个，复制）对于简化的浏览按钮（标签为“...”），其内部标签应当为“浏览”。虽然倾向于使用简短的标签，但仍应当使用足够的文本来对命令进行充分解释。当对象在上下文中不太明显时，应当使用直接宾语来描述该对象。理想情况下，应当不需要阅读其他任何东西就可以理解标签。如下图所示：在这个示例中，如果它的意思在上下文中显而易见的话，简短的标签是可以接受的。在这个示例中，给动词加上一个名词便于理解。正确示例：在这个示例中，该标签是自说明性的。如下图所示：标签应当以动词起头，清晰描述按钮完成的操作。不要使用句末标点。下列标准标签在没有动词的情况下使用是可以接受的：Advanced（高级）、Back（后退）、Details（详细信息）、Forward（前进）、Less（更少）、More（更多）、New（新建）、Next（下一步/个）、No（否）、OK（确定）、Opxions（选项）、Previous（上一步/个）、Properties（属性）、Settings（设置）和Yes（是）。使用明确的标签。正确：在这个示例中，“打印”比确定更加明确。错误：在这个示例中，应当使用“取消”，而非“不要打印”。如果取消后退回之前的状态（没有任何副作用），则将按钮命名为“取消”；否则，应当命名为“关闭”（如果操作已经完成）或“停止”（如果操作还在进行中）来表示会完整保留当前更改过的状态。不要在命令按钮的标签中使用“now（立即）”，因为命令当然是立即进行的。如下图所示：在这个示例中，单击该命令按钮将打开新窗口或页面进行下载。对于浏览按钮来说，当一个窗口中有两个以上的浏览按钮时，应当使用简化的浏览按钮（标签为“...”）。当你想在网格表中显示浏览按钮时，应当始终使用简化版。时间选择器支持年月日的日历组件，如果需要支持年月日时分秒可以在此基础上扩展，但是显示风格样式应完全一致。如图所示:使用场景控件可以用于在浏览器中显示日历。经常需要输入时间，特别是在进行查询、统计的时候，时间限定更为重要。交互规范控件中不要出现横向及纵向滚动条。如下图所示：文本框中默认显示当前系统日期,为可编辑项。日期格式为：YYYY-MM-DD。下拉选项中默认显示系统日期和时间。如下图所示：该属性窗口一行包含7天。本月的日期为亮显，前后月日期置灰。控件中添加微调框来调整年月和时间。如上图中的红框所示。当点击文本框时展开下拉选项，显示相关信息。文本框中显示所选日期时间。标签文本框标签：标签文本应当为单词或短语，而不是句子，以冒号结尾，并使用静态文本。列表视图列表视图用于通过单选或多选的方式，查看并操作一个数据对象集合。使用场景当以表格形式分页展示数据集时，可以使用列表视图。使用模式提供多列的展示效果，方便布局。视觉规范调整列表视图的高度，显示整数个列表项。避免纵向截断列表项。调整列表视图的尺寸，消除不必要的垂直与水平滚动。如果把列表视图稍稍加大可以消除垂直滚动条的话，可以考虑调整列表视图的尺寸。在窗口模式下，如果增大列表视图，应当使列表视图及其父窗口可以缩放。交互规范避免呈现空的列表视图。应当用说明文本或示例项来初始化该列表。以逻辑顺序排列列表项。名称以字母顺序排列，数值则以数字大小排序，日期则以时间顺序排列。正例示图：按字母顺序排序，如下图所示：按时间排序，如下图所示：可以更改排列顺序。如果列表项很多或者使用非默认的排序方法时更容易找到需要的项目，排序则非常重要。正例：按照一定的需求来排序标签保持列标题标签简洁，使用不带句末标点的单个名词或名词短语。分别将列标题和其数据以相同的方式对齐。树形视图树形视图（TreeView）用于显示具有层次关系的数据，数据项不能带有附加信息。使用场景树形视图用于显示具有层次关系的数据；在树形结构中，包含数据的对象称为“叶子结点”，而包含其他对象的则称为“容器结点”。位于最顶端的单个容器结点称为“根结点”。可以通过单击“扩展器按钮”来展开或折叠容器结点。如下图所示：需要显示层次级别多于两级的数据（不包括根结点），可以使用树形视图。条目为熟悉的、单独的、自然的层次结构分类。不必同时看到所有的层次数据，可以使用树形视图使用模式仅包含容器结点的树形视图；一次可以查看并操作一个容器。如下图所示：带有容器及叶子结点的树形视图；能够查看和操作容器及叶子。如下图所示：带复选框的树形视图；可任意选择多项，包括不选。如下图所示：视觉规范树完全展开时，应当调整树形视图的宽度以避免出现水平滚动条。调整树形视图的高度以消除不必要的垂直滚动。如果高级别的容器内容较为相似的话，考虑通过视觉元素加以区别。交互规范使用最简单可行的层次结构。在一个容器中，以逻辑顺序排列各项。名称以习惯或者字母顺序排列，数值则以数字大小排序，日期则以时间顺序排列。如果树是用作目录的话，应当使用单个展开属性以简化树的管理。这样以来，只有树的相关部分才会展开。避免呈现空的树形视图。应当用说明文本或可能需要的示例项，来初始化该树。如果完全不需要折叠某容器结点的话，切勿折叠容器结点。这么做会增加不必要的操作性。如果加载需要的时间过长，则默认只显示树的第一及第二级容器。以根据需要在展开树的分支时加载额外的数据。如果列表项需要进一步解释，应当通过信息提示来提供解释说明。标签应当为所有树形视图添加标签。标签文本应当为短语，而不是句子。应当使用静态文本。将标签放置于控件的左侧或上方，保持对齐。对于多选树形视图，应当使用复选框进行提示。拖拽上传控件支持将文件拖拽到上传的控件中。使用场景选中一个或者多个文件，拖拽到指定工作区域后，该区域出现选中的文件列表。通常出现在文件上传功能中，丰富了上传文件选择的操作方式。如下图所示：文件拖入前：文件拖入后：使用模式用户上传附件。交互规范文件列表出现相关关键属性。如：文件名称、文件大小、上传状态、上传进度等。以逻辑顺序排列文件，比如从被选到的可能性从高到低、操作从简单到复杂、或者风险从低到高等等。兼容传统的上传控件的操作方式。标签控件界面中，如没有上传控件，居中位置给出具有说明性的图片和标签，要求图片和标签描述清晰。通常的标签文本是：“将文件或文件夹拖动到框内”。表格控件表格在网页中主要负责数据展现功能。一个表格有三个基本组成部分：表单标签，表单域，表单按钮。如下图所示：使用场景多表头表格。如下图所示：列固定表格。如下图所示：行分组表格。如下图所示：视觉规范多列的表单标签采用右对齐的方式显示，行与行之间要对齐显示。表单中的的分割线与外边框尺寸：推荐为1至2px。行间距：推荐最小2px。文字尺寸为：推荐12px。文字与边框的间距：推荐为5px。正确的示例：表单标签右对齐。错误的示例：表单标签左对齐和居中对齐显示。表单域中数字和日期部分采用右对齐的显示方式。文本部分采用左对齐的显示方式，如果具有特殊要求可以居中显示。正确的示例：根据实际要求全部采用居中对齐的方式。表单域部分提供分页功能，分页功能在表单域紧邻的左下方显示。正确的示例：表单域分页功能在左下方。如下图所示：表单域部分提供分页功能，每页条数最多不要超过20条；太多的内容不方便用户查看。表单域中删除数据时，要给予提示信息。防止用户误操作。表单标签部分不要出现水平滚动条。不方便用户操作。正确的示例：表单标签部分没有出现滚动条。如下图所示：错误的示例：表单标签部分有滚动条。如下图所示：表单标签可以单列、也可以多列，在“多列”显示的时候，如果最后一行字段不够排列整齐的话，可以补充空白列使区域完整。如下图所示：表单标签控件可以包含多种类型的控件如：文本框，下拉列表，复选框，单选框等。单值控件指控件中的每个位置都对应一个确定的数值。例如进度条和滑块等。滑块使用自然方向，具有滑动效果提供数值或者进度显示的控件。使用场景对已定义的连续值（如音量或亮度）或某范围内的离散值（如屏幕分辨率设置）进行设定应当使用滑块。设置像一个相对量则应使用选项按钮或者是下拉或单选列表。设置是精确可知的数值则应使用数字文本框。当用户在更改设置时，须立即出现反馈，此时应改变滑块的信息或状态，也可以与文本框一起使用。例如，在进行背景换肤设置时，用户使用滑块可以很方便地选择颜色、色相、饱和度、亮度的时候可以立即看到效果。使用模式有标签描述的滑块，如下图所示：使用刻度值。如下图红框所示：视觉规范使用自然的方向：例如，滑块所表现的真实世界中的值通常是垂直显示的（比如温度），建议使用垂直方向。如下图所示。用于滑块的推荐尺寸与间距：如下图所示。交互规范调整滑块的方向以符合用户的使用习惯。例如，一般来说，阅读习惯是从左至右，因此对于水平滑块来说，应当把最低值放在左侧，而最高值放在右侧。调整控件尺寸以便于用户选择想要的值。取值范围很大且用户很可能选择范围某端的值的话，考虑使用非线性比例。例如，时间值可能是1分钟、1小时、1天、1个月。使用标签显示值范围。例外：滑块是垂直方向的，且顶端的标签为“最大”、“高”、“更多”或其他等情况的话，可以省略其他标签，因为其含义已经明确。当用户需知所选的具体信息时，应当使用刻度标记以及值标签。需要知道单位以明确设置的话，应当始终显示值标签。标签用于明确指示所选值。如下图所示：对于水平方向的滑块，应当将刻度标记放在滑块下方。将值标签全部放在滑块控件的下方以明确关系。正例：值标签全部在滑块下方对齐。反例：值标签没有在滑块下对齐。在这个示例中，值标签没有在滑块下对齐。不要随意更改滑块指示器的默认大小，要保证滑块的美观。正例：在这个示例中，使用的是默认尺寸。如下图所示：反例：在这个示例中，其尺寸比默认的要小。如下图所示：无须为每个刻度标记都添加标签。不要将滑块用作进度条。当禁用滑块时，应当同时禁用所有关联的标签。当用户需要知道大致的设置值时，应当使用刻度标记。当鼠标选中滑块移动时，应当出现提示框以显示当前的数据值。标签应当使用以冒号结尾的静态文本，或者是不带句末标点的分组框标签。对于静态文本标签，应将标签放置于滑块的左侧或上方。应当为滑块范围的两端添加标签，除非垂直方向。确保这些标签是描述性且并列的。例如：最大/最小、较多/较少、低/高、弱/强。需要值标签，则显示在滑块上方。将文本与控件居中对齐，并包括其单位（如像素）。如下图所示：量表量表是一个量度的静态反应。使用场景指示与进度无关的百分比值。该模式并不是进度条，但它是通过进度条控件来实现的。量表具有特别的外观极易与进度条进行区别。仅将进度条用于表示进度。与进度无关时，应当使用量表来表示百分比。使用模式通过精确的值显示状态。使用的进度条控件，量值是准确的值。通过百分比值显示状态。使用百分比准确的值。如下图所示：用户对精确的值不关注，可以使用百分比的方式进行描述。视觉规范文字、图标等描述信息都避免与进度条重合，或者有交集。正例：图例中刻度、图标没有与进度条重合。如下图所示：反例：图例中刻度、图标与进度条重合并有交集。如下图所示：标签描述性标签。在量表的上方，靠左显示，字体突出显示（加粗）。数据信息标签。在量表的下方，靠左显示，辅助信息（颜色稍浅）。进度条进度条用于查看长时间操作的进度。进度条不仅可以显示大致的完成百分比，也可以用于表示操作正在进行中。使用场景非确定性进度条不能确定等待时间，不能用于等待用户去完成任务。操作非常耗时的后台任务，用户所关注的是它是否完成，而不是其进度。不用进度条，改用通知；在这种情况下，用户可以用这段时间去做其他事情而不必盯着进度。使用通知可以让用户在完成其他任务时不受打扰。像这样耗时的操作有：打印、备份、批量数据传输或转换等等。当操作完成后，用户能够回放的情况下不使用进度条；应该使用滑块。如下图所示：使用模式确定性进度条；通过从左至右进行动态填充表示操作的进度。操作完成时也填充完成。如下图所示:带有取消或停止按钮及动画模式的确定性进度条；允许用户中止该操作，同时包含一个动画，以帮助用户将操作的效果形象化。如下图所示：模式确定性双进度条；通过在第一个进度条中显示当前步骤的进度，及在第二个进度条中显示整体进度，来显示多步骤操作的进度。如下图所示：非确定性进度条；通过显示持续不断从左至右贯穿进度条的动画来指示操作正在进行中。如下图所示：视觉规范不要使用垂直进度条。水平进度条更加自然。正确的示例：水平的进度条，如下图所示。错误的示例：垂直的进度条，如下图所示。明确指明结束；如果操作没有完成，则不要让进度条前进到100%。进度条上的文字与进度条的对齐方式：居中对齐。进度条上的文字和当前进度及背景的色值色差明显。进度条上文字的大小不要超过进度条的高度。始终使用系统推荐的进度条高度。希望进度条不那么显眼的时候，可以使用最小宽度。不要使用宽度超过最大推荐宽度值的进度条。进度条无须填充所有可用的空间。如果窗口比进度条的最大推荐宽度值大得多的话，则将进度条居中。如下图所示：推荐的最小和最大尺寸。交互规范应当在执行耗时操作时提供进度反馈。用户应当不需要猜测是否操作仍在进行。明确指示真实进度。如果操作有进展，进度条则必须前进。明确指示没有进度的情况。如果操作没有进展的话，进度条不能前进。不要让用户为了一个根本不会完成的操作而无限制地等待。提供有用的进度细节。当用户需要查看时候，才有必要提供额外的进度信息。将动画在进度条上方居中显示。如果进度条有标签的话，应将动画放在标签上方。如果进度条右则有取消或停止按钮的话，在居中时应当将这些按钮考虑在内。确定性进度条交互规范：应当将确定模式的进度条用于那些有确定时间界限的操作。即使其中大部分时间都无法进行精确预测时也同样如此。不确定模式的进度条虽然表示正在进行中，但无法提供任何其他信息。不要仅仅因为不够精确，就选用不确定模式的进度条。如果能够准确计算的话，应当提供估计剩余时间。准确的估计剩余时间是有用的，而那些差得离谱或者剧烈变化的估计值是没用的。在给出准确估计值之前先进行一些操作，不要在初始阶段显示可能不准确的估计值。不要重新启动进度。如果它重新启动，进度条就丧失了它的意义，因为用户无法了解整个操作什么时候会完成。相反，该操作中的各个步骤应当分别只占整个进程的一部分，整个进度条只完成一次。非确定进度条交互规范：如果在操作进行过程中，用户需要的话，则应当提供无模式反馈。标签通过静态文本控件，使用简明的标签，以说明正在进行的操作。在静态文本中提供细节信息，数据前使用以冒号结尾的标签。在细节信息文本后指明单位（秒、KB等等）。操作不是由用户直接引发，要额外使用一个标签来提供上下文信息并为打断用户的操作而致歉。微调框微调框是指用户可以通过单击箭头按钮来增量改变与其相伴的数值文本框（NumericTextBox）里的值。如下图所示：使用场景控件输入数值。例如：年龄微调框允许用户可以手动输入年龄。用户会将该值视为相对量，而非数值。精确的、已知的数值使用微调框。例如，用户考虑将音量调节为低或中等，而不是把值设为2或者5。屏幕空间紧张。当可以使用的空间较小时，可以选择微调控件。提供键盘操作。用户更愿意使用键盘。当用户想通过键盘上下键修改值，可以选择微调控件。使用模式输入较小的数值，通常在100以内，将最小变化值设为已知或默认值。交互规范只要微调控件符合业务逻辑性及场景实用性，就应该使用。将向上的按钮定义为：将值增大一个单位，向下的按钮则将值减少一个单位。通常这个单位是“1”，但应当将其设为常见的最小更改值。理想情况下，微调控件应当涵盖所有有效值，且应当比键入文本更加方便。在这个示例中，单击微调控件会以0.1为单位更改值，这是最小的常见变化。使用更小的单位能够涵盖有效值选项范围，但控件会变得难以使用。当到达有效值范围的尽头时，数值保持不变正例：为避免产生错误值，不能从起始值开始重新设置。如下图所示：最大数值是25如果值包含分隔符，则相应的文本框应当具有多个输入焦点。这么做使数值段能够分别进行处理。如下图所示：在这个示例中，微调控件可以控制小时、分钟、秒的值，它们都可以获得焦点。如果值包含单位，则应当也能够使用微调控件来进行更改。如下图所示：在这个示例中，微调控件可以用于更改单位。标签将文本框标签设计规范用于对应文本框的标签。不要直接为微调控件添加标签。地图控件地图控件指能提供地图信息内容的控件。地图控件主要用于展示热点信息和部署分布情况。如下图所示：使用场景需要展示地理区域信息；需要展示热点分布等内容。交互规范缩放功能。需要能够等比例放大缩小显示，且定位要准确。地图标注要清晰。地图上的标注要清晰，与业务需求相关的标注要统一清晰。如果是通过颜色区分信息。颜色易于区分。地图控件中必须出现“中华人民共和国南海区域”图示。若业务系统需要在地图上提供其他功能，则推荐图标的尺寸是18*18px；图标的排列方式:横向或纵向，位于显示区域的左上方；图标应该提供的状态：可用、不可用、划过、正常四种状态。标签地图的标注要清晰。放大、缩小地图情况下无失真现象。颜色和图标的说明要清晰。文字描述要简明，避免过多。文本控件指提供输入、编辑和显示文字或其他字符的控件。输入文本区域输入文本域具有显示、输入和编辑文本内容的功能。使用场景提供用户输入和编辑多行各种格式的文本的功能。即有滚动条的多行文本输入控件，在网页的提交表单中经常用到。控件具有显示水平和垂直滚动条。以便能够对文本进行滚动，并支持使用鼠标滚轮垂直滚动。可以对文本域中文字进行分段、段落、范围、超链接和图像等文本布局元素操作。通过对文字进行颜色、加粗等突出显示等，添加图片，添加超链接，支持HTML标签输入等。字数限制提示和操作提示。针对数据的可维护性，对用户输入的字数进行字数限制，超出部分需要提示用户无法输入并给出超出范围提示。使用模式HTML标签输入。通过使用HTML标签形式输入。纯文本输入。输入字体后，可以通过工具栏中的工具进行修改字体的样式，添加图片和链接等操作。浏览模式。进行只读操作，只能查看里面的内容，无法进行编辑操作。交互规范使用字数限制。对于多出限制的个数的字体或无法输入时给出弹出提示。滚动条默认显示。保证用户能够直观的看出可供输入和编辑多行各种格式的文本的空间范围。避免预览与输入操作为同一个界面。应当把预览的效果图在弹出框中显示。这样的两个界面分离避免误操作。避免在只读模式下提供任何的功能提示。将此提示等弹出信息屏蔽或者干脆去掉。不需要对鼠标往目标对象身上移动时显示提示。必须输入项在文本框后添加红色星号（*）标志。标签提供文本展示功能，用来表示当前控件的功能描述或者对控件进行说明。使用场景静态文本控件，使用简明的标签，以说明正在进行的操作。该标签以动词起头并以省略号结尾。如果该操作具有多个步骤或需要处理多个对象的话，该标签可以动态改变。静态文本进度标签控件，使用数字及单位，以说明现在的进度。该标签一般以数字开头，该标签