某电网公司桌面可视化设计规范培训教材

《桌面可视化设计规范》培训

交互部分

Interactiondesign目录1登录4导航3表格2表单5信息搜索6消息7界面内容跳转8键盘9首次体验系统登录的作用可概括为以下三点：告知用户将要登录的系统名称；对登录人信息进行验证；链接系统界面。1登录1.1原则1.3规范1.2模式【简单性原则】登录界面的交互设计应简单，降低用户认知成本，带来高效的用户体验。【帮助性原则】系统应对用户的操作进行帮助提示，引导用户正确操作。【安全性原则】遵照国家电网公司对系统（产品）安全性的要求，避免非用户进入系统或进行口令猜测。1登录1.1原则1.3规范1.2模式输入登录模式：1登录1登录1.1原则1.3规范1.2模式强制规范建议规范1）应包含单位企业标志、系统（产品）名称、输入框（“用户名”、“密码”）、登录按钮。2）应将用户名输入框作为当前界面默认输入焦点。3）帮助性信息或提示应及时有效。4）应在用户输入格式错误时，进行错误提示。用户名为固定格式时的输入错误，失去焦点及时提示。用户名为空时填写密码，提示用户填写“用户名”。5）应在未输入密码直接点击登录时，对密码输入框进行提示。6）用户名、密码错误提示文字颜色为红色，放置于用户名输入框下方与输入框左对齐。1登录1.1原则1.3规范1.2模式强制规范建议规范7）应将“用户名”和“密码”标签的对齐方式设置为“非字形”对齐方式。8）应将登录界面背景图与登录框在视觉上区分层次。9）应在登录过程中，将“登录”按钮变为“取消”按钮。原因：首先，根据国网特性，取消按钮的使用频率较低；把取消和登录做成双按钮，会增加用户一次选择判断；单按键更符合用户点击移动轨迹。1登录1.1原则1.3规范1.2模式强制规范建议规范10）应使用户名输入框的长度容纳系统中最长用户名长度。11）应将版权信息放置于底部。12）应将“Enter”键作为默认“登录”快捷键。1登录13）应将“Tab”键作为输入焦点自动换行快捷键。1.1原则1.3规范1.2模式强制规范建议规范1登录1）建议当用户名输入错误，系统（产品）进行错误提示后，输入焦点自动置入用户名输入框。2）建议“用户名”、“密码”输入框增加自动清空功能。3）建议“用户名”、“密码”输入框增加虚拟键盘功能。1.1原则1.3规范1.2模式强制规范建议规范目录1登录4导航3表格2表单5信息搜索6消息7界面内容跳转8键盘9首次体验2表单系统表单的作用可概括为以下两点：完成信息的填写录入；提交或注册信息；【对齐原则】将表单中信息按照业务和用户需求进行组织，保证界面工整，便于用户扫视和填写。【及时反馈原则】表单的填写过程中，针对用户可能存在填写问题或必要的填写帮助，系统（产品）及时进行提醒反馈。【渐次呈现原则】表单信息布局应根据重要性，有选择隐藏，由重要元素引导出次要元素，便于用户更快找到首要信息。【一致性原则】系统（产品）内表单若无特殊要求，所有的交互体验和布局样式应保持一致。2表单2.1原则2.3规范2.2模式2表单2）分组表单：1）单页表单：3）分步表单：2.1原则2.3规范2.2模式2表单1）保持统一的对齐方式。当焦点移入输入区后，标签消失，看不到问题，可能会忘记要回答什么，不得不清掉输入好的字，把“问题”还原出来。这种组合比较适合只有一两个输入框的简短表单，而且人们对他很熟悉，不用费力去记住标签提出的问题，比如：搜索框单页表单分组表单分步表单强制规范建议规范2.1原则2.3规范2.2模式2表单结合国家电网公司常见表单场景和以上数据，标签右对齐即非字形对齐适用性最佳。1）保持统一的对齐方式。单页表单分组表单分步表单强制规范建议规范2.1原则2.3规范2.2模式2表单在非字形对齐的前提下，提示信息可有三个可选位置：输入框右侧、下方和内部。但是下方位置适用性最强。右侧放置：仅适用于单列表单，针对性过强，因此排除了右侧放置。内部放置：输入文本信息时将不再出现提示信息，且有限显示信息，因此适用于帮助提示，不适用于反馈提示。下方放置：结合上面分析结果和用户习惯，下方更适用于放置反馈提示。3）必填符号放置于标签左侧。2）填写帮助提示，放置于输入框内，文字精炼。4）错误提示，放置于输入框下方。单页表单分组表单分步表单强制规范建议规范2.1原则2.3规范2.2模式2表单5）应自动检测用户输入内容与标签相关性。6）应自动检查组合项是否填写完整。7）应使用简洁友好的反馈提示语言，不应责备用户，避免术语化。8）表单提交时，应检测必填项是否填写完整。9）表单提交后检测到错误，当用户返回修改时，应保留原有输入项内容。单页表单分组表单分步表单强制规范建议规范2.1原则2.3规范2.2模式2表单1）建议使用下拉列表或选择框，减少用户输入。2）建议记忆用户常用输入项和系统（产品）推荐输入项功能。3）建议将特殊类型选项放置于下拉列表底部。单页表单分组表单分步表单强制规范建议规范2.1原则2.3规范2.2模式2表单固定位置：采用固定位置方式，选择全部状态，需要将鼠标移动到下方，选择后，鼠标再返回下拉框。自动位置：采用自动位置方式打开时，当前选择项与输入框对齐，关联性较强，且鼠标选择其他项时，移动距离较短。4）建议展开下拉列表时，将选中项与输入框对齐。5）针对复杂输入项，可提供帮助标识。单页表单分组表单分步表单强制规范建议规范2.1原则2.3规范2.2模式2表单6）表单未填完或未保存离开页面时，可提示用户离开操作确认。7）建议多种输入模式，在传统输入基础上，增加图形体验。8）建议根据用户研究的结果，通过位置、形态和大小来界定同行中按钮的排列顺序。单页表单分组表单分步表单强制规范建议规范2.1原则2.3规范2.2模式2表单2）应将分组标签文本统一放置于各组填写区域左上角。业务相关性分组：优先根据内容相关性进行分组。控件相似性分组：在无明显内容相关性时，可根据控件形态相关性分组。1）应进行相关性分组。单页表单分组表单分步表单强制规范建议规范2.1原则2.3规范2.2模式2表单2）表单内容分组较多时，建议设置收起展开功能。1）默认信息项可由系统（产品）自动填写，减少用户输入。系统信息项，尽量由系统自动匹配填写。历史填写项，用户二次填写时，自动填写或者输入时展开下拉项关联。尽可能使用下拉列表或选择框来代替输入框。单页表单分组表单分步表单强制规范建议规范2.1原则2.3规范2.2模式2表单2）应在第二组页面中出现“上一步”按钮。返回查看上一组内容，同时保留当前填写内容。1）应在用户填写完成当前信息内容时，方可点击“下一步”按钮跳转到下一页面，并保留当前页所填写内容。3）应在分步表单提交完成后，提供提交完成反馈提示。单页表单分组表单分步表单强制规范建议规范2.1原则2.3规范2.2模式2表单1）当填写的内容步骤较多时，为避免用户产生厌烦情绪，建议图形化显示分步填写，在填写区域上方提示当前填写位置和填写流程。单页表单分组表单分步表单强制规范建议规范2.1原则2.3规范2.2模式目录1登录4导航3表格2表单5信息搜索6消息7界面内容跳转8键盘9首次体验3表格表格的作用可以概括为以下三点：对信息结果的展示；对信息进行排序或其他功能操作；链接信息详情。【对齐原则】表格中的各类元素应按照业务及用户需求进行组织，保证界面工整，信息呈现有序，便于用户扫视。【清晰视觉流原则】视觉流指用户注视区域的顺序。清晰的视觉流顺序应根据任务逻辑和用户的浏览习惯来设计。保证其合理、

顺畅、自然。3表格3.1原则3.3规范3.2模式【相近性原则】表格中信息应根据相近性原则进行布局设计，即将相关元素相近放置，引导用户将其归为一组。【相似性原则】表格中信息应根据相似性原则进行布局设计和信息分类，即将相似元素相近放置，引导用户将其归为一组。3表格3.1原则3.3规范3.2模式1）展示类表格：2）表头操作类表格：3表格3.1原则3.3规范3.2模式3）操作类表格：3表格3.1原则3.3规范3.2模式3表格3.1原则3.3规范3.2模式展示类表格表头操作类表格操作类表格强制规范建议规范1）应在表格行数较多时，使用“斑马线”（隔行变色），颜色对比不易过强且弱于表头颜色，特殊展示情景例外，如：告警类表格。2）应设置表格中最多字数显示限制。文本显示未完全时，末尾文字应加“…”，且鼠标悬浮时提示完整文本。若必要性信息无法完全展示，可折行显示。3表格表头居中，列表左右对齐

表头和列表对齐方式不统一时，视觉体验较差，因此建议排除。左右对齐更利于信息对比，居中对齐适用范围更好，因此，默认使用居中对齐，对关键类对比信息采用左右对齐方式。统一左右对齐居中对齐1）保持统一的对齐方式。2）表格采用左右对齐时，建议文字与表格边缘保持恰当间距。3.1原则3.3规范3.2模式展示类表格表头操作类表格操作类表格强制规范建议规范3表格3.1原则3.3规范3.2模式展示类表格表头操作类表格操作类表格强制规范建议规范1）应提供鼠标悬浮和鼠标点击状态，颜色区别于隔行变色。2）表格默认排序应保持统一。3）应提供信息排序功能。上箭头表示为升序，下箭头为降序。4）应保证点击排序箭头和点击表头标签都可改变当前排序。3表格1）关联信息在表格列中建议相近放置，便于用户关联阅读。2）对于进行对比分析的数据，建议显示差值或上下箭头。3）表头数量即表格列数建议为5-9列。3.1原则3.3规范3.2模式展示类表格表头操作类表格操作类表格强制规范建议规范3表格3.1原则3.3规范3.2模式展示类表格表头操作类表格操作类表格强制规范建议规范将表格中操作按键集中放置一处，便于用户集中快速操作，根据菲茨定律中两端更易点击原理，排除中间放置

：左侧放置：将按钮放置于左侧，多用于选择排序等。右侧放置：将操作按钮放置在右侧，更符合用户从左到右的信息浏览习惯，适用性更强。1）应将操作按钮在表格内放置于一处，便于用户集中操作。3表格2）应在批量操作时提供全选功能，全选应包含“全选当前页”“选择全部”和“取消全选”选项。3）应为表格中的互斥功能，提供一个对应按钮，减少用户判定。4）应避免使用双击操作。5）应对表格中不可用功能按钮置灰，并在鼠标悬浮时提供不可用提示。3.1原则3.3规范3.2模式展示类表格表头操作类表格操作类表格强制规范建议规范3表格1）表格中操作功能，优先使用图标按钮，且鼠标悬浮时，给予文字提示。专业性术语或非

常见功能，建议使用图标加文字同时显示。3.1原则3.3规范3.2模式展示类表格表头操作类表格操作类表格强制规范建议规范目录1登录4导航3表格2表单5信息搜索6消息7界面内容跳转8键盘9首次体验4导航系统导航的作用详细可以概括为以下4点：引导用户完成系统各内容页面间的跳转。理清系统各内容与链接间的联系。定位用户在网站中所处的位置。展现品牌形象。面包屑帮助定位展现品牌形象提供页面跳转4.1导航-全局导航【减轻认知负担原则】导航层次分类和命名应清晰明了，符合用户心理感知模型，以减少用户的学习成本，便于用户的使用。【一致性原则】同类系统（产品）间导航设计应遵循一致性原则，保持一致的交互体验和布局样式。4.1.1原则4.1.3规范4.1.2模式

全局导航又称主导航，提供覆盖整个系统（产品）的通路，主要包括系统（产品）标志、用户信息和基础导航栏目三个基本要素。在系统（产品）界面中保持一致的操作体验，协助用户完成访问。图：主导航图：面包屑导航垂直导航栏：水平导航栏：树形导航栏：4.1导航-全局导航4.1.1原则4.1.3规范4.1.2模式工作台模式>普通工作台模式：工作台模式>隐藏式工作台模式：4.1导航-全局导航4.1.1原则4.1.3规范4.1.2模式水平导航栏垂直导航栏树形导航栏工作台模式强制规范建议规范1）应在水平导航栏中体现：系统（产品）标志、用户信息、基础导航栏目三个要素。2）应在点击“系统（产品）标志”后，返回系统（产品）首页。3）应在水平导航上突出从属关系，通过视觉元素加以表达。4）应确保全局导航的水平导航栏层级不超过三级。当导航栏层级为两级时：当导航栏层级为三级时：为什么？4.1导航-全局导航4.1.1原则4.1.3规范4.1.2模式为什么导航不宜超过三级？为什么三级使用全展开的形式？

信息结构过深不易于理解。

全展开一目了然，无需猜测三级标所属的二级。水平导航栏垂直导航栏树形导航栏工作台模式强制规范建议规范4.1导航-全局导航4.1.1原则4.1.3规范4.1.2模式5）导航栏目应包含“默认状态”、“悬浮状态”、“点击状态”。水平导航栏垂直导航栏树形导航栏工作台模式强制规范建议规范4.1导航-全局导航4.1.1原则4.1.3规范4.1.2模式1）导航栏目字号，建议下一级标题不大于上一级标题。2）导航栏目标签避免出现口语化、术语和缩写，标签长度建议16字符以内为宜。3）系统（产品）层级超过三级时，建议提供导航信息搜索。4）建议导航栏目出现在系统（产品）每个界面，给予用户相同的操作体验。水平导航栏垂直导航栏树形导航栏工作台模式强制规范建议规范4.1导航-全局导航4.1.1原则4.1.3规范4.1.2模式水平导航栏垂直导航栏树形导航栏工作台模式强制规范建议规范1）、2）、3）、5）同水平导航栏模式。4）全局导航的垂直导航栏层级应不超过三级。当导航栏层级为两级时：当导航栏层级为三级时：4.1导航-全局导航4.1.1原则4.1.3规范4.1.2模式1）、2）、3）、5）同水平导航栏模式。4）当前屏幕内显示不完全时，建议使用导航栏内滚动条。水平导航栏垂直导航栏树形导航栏工作台模式强制规范建议规范4.1导航-全局导航4.1.1原则4.1.3规范4.1.2模式水平导航栏垂直导航栏树形导航栏工作台模式强制规范建议规范1）、2）同水平导航栏模式。3）应在树形导航上突出其层级关系，使用加/减号或者箭头来表示展开和收起下级节点。4.1导航-全局导航4.1.1原则4.1.3规范4.1.2模式1）建议默认展开第一个标题项。2）当导航内标题数量过多，不能完全显示时，建议使用导航栏内滚动条。3）内容同前。默认展开内部滚动水平导航栏垂直导航栏树形导航栏工作台模式强制规范建议规范4.1导航-全局导航4.1.1原则4.1.3规范4.1.2模式水平导航栏垂直导航栏树形导航栏工作台模式强制规范建议规范1）、2）、3）内容同前。4）隐藏式工作台模式下，可隐藏展开工作台。强制规范：建议规范：1）工作台模式下若使用图标，应将文字放置于图标下方，同图标居中对齐。4.1导航-全局导航4.1.1原则4.1.3规范4.1.2模式【减轻认知负担原则】导航层次分类和命名应清晰明了，符合用户预期心理，减少用户学习成本，便于用户的使用。局部导航是指在全局导航体系下，某个具体栏目内的导航。局部导航用于系统（产品）某个功能域内的导航设计，可以将全局导航过深的层级拆分到一个栏目内，在局部范围内形成快捷的信息导航。4.2导航–局部导航4.2.1原则4.2.3规范4.2.2模式水平导航栏局部导航

>“水平排列”局部导航：水平导航栏局部导航>“倒L型”局部导航：4.2导航–局部导航4.2.1原则4.2.3规范4.2.2模式垂直导航栏局部导航

>“垂直排列”局部导航：垂直导航栏局部导航>“厂字型”局部导航：4.2导航–局部导航4.2.1原则4.2.3规范4.2.2模式树形导航栏局部导航：4.2导航–局部导航4.2.1原则4.2.3规范4.2.2模式水平导航栏下垂直导航栏下树形导航栏下强制规范建议规范1）应在局部导航中表现出与水平导航栏的层级从属关系。2）“倒L型”局部导航栏，提供展开和收起功能3）使用定位面包屑导航。4）确保统一性（同前）。4.2导航–局部导航4.2.1原则4.2.3规范4.2.2模式1）使用“倒L型”局部导航显示五级及以上标题时，建议使用树状结构显示。2）局部导航的层级深度要合理，建议不超过三级。3）当“倒L型”局部导航内标题数量过多，建议使用导航栏内滚动条。4）字号建议下一级标题不大于上一级标题。5）避免出现口语化、术语和缩写，长度控制在16字符以内。水平导航栏下垂直导航栏下树形导航栏下强制规范建议规范4.2导航–局部导航4.2.1原则4.2.3规范4.2.2模式水平导航栏下垂直导航栏下树形导航栏下强制规范建议规范1）、3）、4）内容同前。2）

“垂直排列”局部导航栏中提供展开和收起功能。展开和收起功能。4.2导航–局部导航4.2.1原则4.2.3规范4.2.2模式1）“垂直排列”局部导航显示五级及以上标题时，建议使用树状结构显示。2）—5）内容同前。6）“厂字型”局部导航标题居中。“垂直排列”局部导航同级标题左对齐。水平导航栏下垂直导航栏下树形导航栏下强制规范建议规范4.2导航–局部导航4.2.1原则4.2.3规范4.2.2模式该模式下遵循“树形导航栏模式”下所有规范。水平导航栏下垂直导航栏下树形导航栏下4.2导航–局部导航4.2.1原则4.2.3规范4.2.2模式4.3导航–辅助导航【快捷性原则】辅助导航能够使用户快速准确的进入目标界面。【辅助性原则】辅助导航作为全局导航与局部导航的补充，是对系统（产品）整体层级结构的有效补充。辅助导航是一种用来辅助、补充全局导航和局部导航，为相关内容提供快捷跳转方式的导航形式。4.3.1原则4.3.3规范4.3.2模式站点地图导航模式：面包屑导航模式：分页导航模式：定位面包屑导航路径面包屑导航4.3导航–辅助导航4.3.1原则4.3.3规范4.3.2模式页内导航模式：选项卡Tab模式：页脚导航模式：4.3导航–辅助导航4.3.1原则4.3.3规范4.3.2模式面包屑导航站点地图分页导航选项卡导航页内导航页脚导航定位面包屑路径面包屑强制规范：1）位于正文顶部，告知当前层级。2）区分当前与上级路径。3）显示弱于主导航。4）使用方向性符号分隔。5）依次显示层级路径。定位面包屑路线面包屑1）位于正文顶部，告知访问路径。2）—4）同上。强制规范：建议规范：用颜色突显当前页面用字号和加粗突显当前页面1）路径个数控制在7个以内。4.3导航–辅助导航4.3.1原则4.3.3规范4.3.2模式面包屑导航站点地图分页导航选项卡导航页内导航页脚导航强制规范建议规范强制规范：1）文字链接正确有效。2）使用精炼准确的关键词短语。3）直观罗列栏目，不隐藏。4）明确区分层级关系。5）及时更新。6）站点地图入口显而易见，位于界面头部或页面底部。建议规范：1）建议只展示系统（产品）结构中的二到三级，提供主要链接和页面。4.3导航–辅助导航4.3.1原则4.3.3规范4.3.2模式面包屑导航站点地图分页导航选项卡导航页内导航页脚导航强制规范建议规范1）应包含“上一页”、“下一页”和页码。2）应默认显示第一页，“上一页”不可点击，最后一页时，“下一页”不可点击。3）应合理设置页码、按键尺寸、间距。4）应使可点击页码和当前页码有所区分。5）应在页数过多时，提供直接跳转功能。4.3导航–辅助导航4.3.1原则4.3.3规范4.3.2模式1）采用“上一页”、“下一页”文字+方向性箭头的形式，也可采用简化形式。2）根据业务，展示每页显示的条数、总条数。3）居中位于下方。4）空间有限，采用下拉翻页。面包屑导航站点地图分页导航选项卡导航页内导航页脚导航强制规范建议规范4.3导航–辅助导航4.3.1原则4.3.3规范4.3.2模式面包屑导航站点地图分页导航选项卡导航页内导航页脚导航强制规范建议规范1）应将导航标签排布在同一行中，字数应尽量精简，如过多应使用“….”表示隐藏，悬浮时显示完整。2）应使标签包含：激活状态、悬浮状态和未激活状态。3）应将当前标签和其内容区体现为一个连续的整体。4.3导航–辅助导航4.3.1原则4.3.3规范4.3.2模式1）不要将横向标签页和纵向标签页同时嵌套使用。2）标签个数控制在2—7个之间。3）Tab标签之间的切换实时响应。4）小面积区域可使用鼠标悬浮来选中标签内容。错误示例。横向标签纵向标签不宜嵌套使用。面包屑导航站点地图分页导航选项卡导航页内导航页脚导航强制规范建议规范4.3导航–辅助导航4.3.1原则4.3.3规范4.3.2模式1）应与主导航相区分，位置接近主体内容。2）应将信息内容划分明确，点击锚点标题，可以跳转至相应的内容处。3）应标示当前的位置，当前位置不可点击，其他标题可点击，包含悬浮、点击状态。4）页面内不同内容间的跳转不应再刷新加载。强制规范：4.3.1原则4.3.3规范4.3.2模式面包屑导航站点地图分页导航选项卡导航页内导航页脚导航模块间跳转回到顶部4.3导航–辅助导航强制规范：1）应在超过三个屏幕时，使用“回到顶部”按键。滚动至第二屏时出现，置于屏幕的右下方。2）应有“默认”、“鼠标悬浮”两种状态。建议规范：1）具有向上滚动至顶部的过渡动效。2）配以“回到顶部”、“返回顶部”的文字说明。4.3.1原则4.3.3规范4.3.2模式面包屑导航站点地图分页导航选项卡导航页内导航页脚导航模块间跳转回到顶部4.3导航–辅助导航强制规范：1）应位于页面底部。2）应对不同内容进行有效划分，不可分类的内容使用“丨”划分，可分类的内容使用区域模块化划分。3）应采用文字链接的形式，可以配置图标。4.3.1原则4.3.3规范4.3.2模式面包屑导航站点地图分页导航选项卡导航页内导航页脚导航强制规范建议规范4.3导航–辅助导航4.4导航-上下文导航【相关性原则】上下文导航与信息内容应具有很强的关联性。【便捷性原则】上下文导航可使用户快速浏览相关内容信息。4.4.1原则4.4.3规范4.4.2模式上下文导航是一种非结构化导航方式。一般置于信息内容中，为信息内容提供关联性链接，指向新的内容区域、其他页面或者是一个新的系统产品。图：相关性原则图：便捷性原则相关链接模式：嵌入式链接模式：4.4.1原则4.4.3规范4.4.2模式4.4导航-上下文导航1）应使用文字链接，置于内容信息中。2）应与非链接文字进行区分。强制规范：嵌入式链接相关链接1）应使用文字链接，置于当前内容附近。强制规范：2）应包含标题和列表，可点击的文字与不可点击文字进行区分。3）应采用垂直列表的形式。4.4.1原则4.4.3规范4.4.2模式嵌入式链接相关链接4.4导航-上下文导航目录1登录4导航3表格2表单5信息搜索6消息7界面内容跳转8键盘9首次体验【减轻记忆负担原则】系统（产品）的关键字搜索功能应根据已输入的关键字，提供智能匹配功能，减少输入并提高用户工作效率。【即时反馈原则】用户进行操作后系统（产品）即时进行响应反馈，便于用户清楚操作是否有效。信息搜索是从信息集合中找出所需要的信息的过程。【渐次呈现原则】当系统（产品）中信息搜索项过多时，可按照信息重要性有选择的依次显示。图：减少记忆负担原则图：渐次呈现原则5.1原则5.3规范5.2模式5

信息搜索条件筛选模式：关键字搜索模式：条件查询模式：5.1原则5.3规范5.2模式5

信息搜索关键字搜索模式条件筛选模式1）应在全局关键字搜索中显示“输入框”、“提示文字”、“搜索按键”这三个信息元素。2）全局关键字搜索模式时，应将搜索按钮统一放置于搜索框右侧。5.1原则5.3规范5.2模式5

信息搜索强制规范建议规范条件查询模式3）应在默认搜索框内应有提示文字，提示用户输入的内容或格式。4）应在搜索无结果时，给予用户反馈。关键字搜索模式条件筛选模式5.1原则5.3规范5.2模式5

信息搜索强制规范建议规范条件查询模式5）应确保在局部关键字搜索模式下，样式及功能简易。6）应在搜索过程中出现加载提示。7）应将“Enter”键作为搜索快捷键。8）使用关键字搜索时，首次搜索中输入框为空，应给予用户提示;已搜索后，清空输入框再点击搜索时界面内容刷新展示全部内容。关键字搜索模式条件筛选模式5.1原则5.3规范5.2模式5

信息搜索强制规范建议规范条件查询模式1）建议全局关键字搜索提供智能匹配功能，可采用下拉列表形式显示，匹配项过多时，仅显示搜索频率较高项，无

需显示全部信息。2）建议搜索结果中相关联关键字高亮显示。关键字搜索模式条件筛选模式5.1原则5.3规范5.2模式5

信息搜索强制规范建议规范条件查询模式1）应将条件筛选内容置于筛选结果上方。2）应在用户选择筛选条件后，即时显示筛选结果。3）应在系统（产品）搜索过程中出现加载提示，加载提示包括动态图标和提示文字：“正在为您搜索,请等待…”。关键字搜索模式条件筛选模式5.1原则5.3规范5.2模式5

信息搜索强制规范建议规范条件查询模式1）建议将下拉项文字应精简在16个字符，8个中文字以内。2）下拉列表的选项中包含“全部”或“全选”时，应将“全部”选项放置于下拉列表底部，如“全部类型”或“全

部状态”。若无业务设定需要，则建议将“全部类型”作为系统（产品）默认选择。关键字搜索模式条件筛选模式5.1原则5.3规范5.2模式5

信息搜索强制规范建议规范条件查询模式1）应将查询按钮放置于查询条件下方，居右显示。2）条件查询模式中信息输入项应遵循表单所有规范，例如：“非字形”对齐方式等

。3）应对查询条件填写中的生僻项或易产生歧义选项提供填写帮助。4）应提供“清空搜索条件”功能，位置放置在查询按钮之后。5）应在搜索过程中显示加载提示，加载提示包括动态图标和提示文字：“正在为您搜索,请等待。关键字搜索模式条件筛选模式5.1原则5.3规范5.2模式5

信息搜索强制规范建议规范条件查询模式1）建议当查询条件较多时根据业务要求选择隐藏不常用的选项作为高级查询。2）当表单填写内容具有一定范围或输入内容具有针对性时

，默认信息项可由系统（产品）自动填写，减少用户输入。3）建议将下拉项文字应精简在16个字符，8个中文字以内。4）信息展示建议多使用图形化，增加表单的视觉体验，如：日历输入框，增加日历图标。5）建议加载提示中提供取消加载的功能，取消后回到加载前的信息。关键字搜索模式条件筛选模式5.1原则5.3规范5.2模式5

信息搜索强制规范建议规范条件查询模式目录1登录4导航3表格2表单5信息搜索6消息7界面内容跳转8键盘9首次体验6.1

消息-错误消息【简要原则】错误消息表述应精炼准确。6.1.1原则6.1.3规范【清晰原则】错误消息措辞通俗易懂。【明确原则】6.1.2模式【礼貌原则】错误消息不应责备用户，避免使用歧视和侮辱性语言。【相关性原则】错误消息所描述的问题是用户所关心的。【及时性原则】及时向用户反馈出错提示。错误消息在描述问题时应使用肯定的语言，给出具体名称、位置及数值。对话框：原地提示：气球状提示：6.1

消息-错误消息6.1.1原则6.1.3规范6.1.2模式对话框原地气球状1）应包含标题区、内容区、操作区。标题区：标题简洁易懂，置于标题区左侧。提供“关闭”按钮，置于标题区右侧。内容区：使用错误图标，置于内容文字前。告知用户问题、原因以及解决方法。操作区：包含“确定”按钮，置于操作区右侧。6.1

消息-错误消息6.1.1原则6.1.3规范6.1.2模式强制规范建议规范2）措辞要求：应避免使用编程专业术语。应避免责备或者暗示用户造成了问题。应避免使用双重否定。将自己的问题归因为客观环境而他人的问题归因于他人本身。VS使用日常物品时的错误归因为自己。—《设计心理学》

归因方式为什么？句子—图画匹配实验星形在十字之上星形不在十字之上星形在十字之下星形不在十字之下识别时间：真肯定句<假肯定句<假否定句<真否定句。—《实验心理学》对话框原地气球状6.1

消息-错误消息6.1.1原则6.1.3规范6.1.2模式强制规范建议规范2）措辞要求：应避免使用编程专业术语。应避免责备或者暗示用户造成了问题。应避免使用双重否定。应避免使用缩写格式；应避免使用特殊字符表意。应避免在标签之后使用冒号；错误提示内容后应避免使用感叹号。应注意用语的合理性。对话框原地气球状6.1

消息-错误消息6.1.1原则6.1.3规范6.1.2模式强制规范建议规范1）内容较多时，隐藏部分信息，点击查看信息详情。为什么？认知负荷VS操作负荷脑力资源：认知负荷＞操作负荷增加操作而减少认知负荷。—《设计师要懂心理学》对话框原地气球状6.1

消息-错误消息6.1.1原则6.1.3规范6.1.2模式强制规范建议规范错误消息置于输入框下方。错误消息置于输入框左方。1）应将提示放置于错误对象旁边，凸显错误对象：提示信息放置在操作对象下方提示信息放置在操作对象右方2）使用错误图标，置于提示文字前，使用红色。为什么？对话框原地气球状6.1

消息-错误消息6.1.1原则6.1.3规范6.1.2模式强制规范建议规范1）应将提示放置于错误对象旁边，凸显错误对象：提示信息放置在操作对象下方提示信息放置在操作对象右方2）使用错误图标，置于提示文字前，使用红色。为什么？使用符合文化习惯的颜色。9%的男性和0.5%的女性是色盲。—《设计师要懂心理学》色盲用户的存在。在文化习惯中，红色表征危险、警醒等。3）内容包含问题和问题解决措施。4）操作正确后，错误提示消失。5）措辞要求：（内容同上）对话框原地气球状6.1

消息-错误消息6.1.1原则6.1.3规范6.1.2模式强制规范建议规范1）建议信息填写后及时进行提示。2）建议原地提示只放置一行文字。对话框原地气球状6.1

消息-错误消息6.1.1原则6.1.3规范6.1.2模式强制规范建议规范1）包含指向错误对象的“小箭头”，并凸显错误对象。2）使用错误图标，且置于提示文字前。3）内容包含出现的问题和解决方法。4）应在问题解决后，错误提示消失。5）措辞要求：（内容同上）强制规范：建议规范：1）错误提示内容过多时，可折行显示。对话框原地气球状6.1

消息-错误消息6.1.1原则6.1.3规范6.1.2模式强制规范建议规范6.2消息-警告消息6.2.1原则6.2.3规范6.2.2模式【预防错误性原则】让用户在进行选择时，知道如何采取避免问题发生的相关措施。【简要原则】警告消息的表述精炼准确。【明确原则】警告消息明确告知用户警告来源、潜在问题以及如何避免。6.2

消息-警告消息对话框：原地提示：气球状提示：6.2.1原则6.2.3规范6.2.2模式1）包含标题区、内容区、操作区。标题区：（内容同上）内容区：使用警告图标，置于内容文字前。告知操作后果以及相应的解决方法。操作区：需确认的警告消息，包含继续、放弃按钮。对话框原地气球状强制规范建议规范6.2

消息-警告消息6.2.1原则6.2.3规范6.2.2模式1）包含标题区、内容区、操作区。标题区：（内容同上）内容区：使用警告图标，置于内容文字前。告知操作后果以及相应的解决方法。操作区：需确认的警告消息，包含继续、放弃按钮。仅用于告知用户的警告消息，包含“确定”按钮。2）措辞要求：（内容同上）3）相同警告消息避免多次重复提示。对话框原地气球状强制规范建议规范6.2

消息-警告消息6.2.1原则6.2.3规范6.2.2模式为什么？符合用户习惯和预期。window下：“取消”“否”

置于右侧，“确定”“是”置于左侧。1）提供避免问题发生的操作入口。2）内容较多，建议隐藏部分信息，点击查看详情。3）无特殊业务需求，避免同时使用提示音。对话框原地气球状强制规范建议规范6.2

消息-警告消息6.2.1原则6.2.3规范6.2.2模式1）放置于警告对象旁边，且凸显警告对象。2）使用警告图标，且置于提示文字前。3）措辞要求：（内容同上）强制规范：建议规范：（内容同原地错误消息）对话框原地气球状强制规范建议规范6.2.1原则6.2.3规范6.2.2模式6.2

消息-警告消息内容与“错误消息”中的“气球状”一致。对话框原地气球状6.2.1原则6.2.3规范6.2.2模式6.2

消息-警告消息【唯一原则】对于每种情况只显示一个确认消息。【延时原则】在用户做出决定的过程中设置时间障碍，保证用户操作前充分思考。对话框模式：6.3.1原则6.3.3规范6.3.2模式6.3消息-确认消息1）包含标题区、内容区、操作区。标题区：（内容同上）内容区：使用确认图标，置于内容文字前。告知用户确认的内容。操作区：应包含“取消”按钮，置于右侧。应包含“确定”按钮，置于“取消”左侧。2）措辞要求：（内容同上）3）操作会引起严重后果且不可逆，必须使用确认消息。4）使用模态对话框的形式。6.3.1原则6.3.3规范6.3.2模式6.3消息-确认消息强制规范【可控原则】允许用户控制接收通知的触发条件。【简要原则】信息提示表述精炼准确。【清晰原则】信息提示应使用完整的句子，措辞通俗易懂，便于用户理解信息内容，采取进一步操作。气球状模式：6.4.1原则6.4.3规范6.4.2模式6.4消息-信息提示1）应包含指向信息来源的“小箭头”。2）写明具体的提示事项，可点击与不可点击的文字进行区分。3）使用信息提示图标。多条信息，每条信息前都应放置图标。4）提供关闭的入口，信息被查阅后消失。5）措辞要求：（内容同上）强制规范：建议规范：1）信息提示内容过多时，可折行显示。2）无特殊业务需求，提示在一段时间后消失。6.4.1原则6.4.3规范6.4.2模式6.4消息-信息提示强制规范建议规范【简要原则】提示音应直接的表达反馈的问题。负面听觉引起焦虑等负面情绪；正面听觉反馈更有可能给人带来愉悦体验。正面听觉—关门正面听觉—敲键盘1）单个声音文件时长不超过5秒强制规范：建议规范：1）支持用户自定义声音文件。2）提供声音预览功能。3）操作成功时给予成功声音反馈。为什么？

负面听觉反馈VS正面听觉反馈。——《AboutFace》负面听觉—火警警报4）无特殊业务需求，避免在使用警告消息的同时使用提示音。6.5.1原则6.5.3规范6.5.2模式6.5消息-提示音强制规范建议规范目录1登录4导航3表格2表单5信息搜索6消息7界面内容跳转8键盘9首次体验【即时反馈原则】用户进行操作后系统（产品）应给用户即时反馈，告知用户操作是否有效。【简要原则】用于内容切换的超链接文字或按钮文字应精简，措辞通俗易懂，便于用户理解。【一致性原则】系统（产品）中界面跳转方式应保持一致。7.1原则7.3规范7.2模式7界面内容跳转界面局部刷新弹出层浮层显示界面A界面B新窗口打开界面A当前界面刷新正在加载……界面B7.1原则7.3规范7.2模式7界面内容跳转当前界面刷新新窗口打开界面局部刷新浮层显示弹出层1）使用加载提示，包括动态图标和提示文字。强制规范：为什么？客观时间VS主观时间单调事件：主观时间>客观时间丰富事件：主观时间<客观时间变速运动增加趣味性显示进度百分比符合产品主题7.1原则7.3规范7.2模式7界面内容跳转强制规范当前界面刷新新窗口打开界面局部刷新浮层显示弹出层新窗口打开1）应将新界面设置为焦点界面。强制规范：2）使用加载提示。（内容同上）界面局部刷新1）使用加载提示。（内容同上）浮层显示强制规范：1）触发和关闭的方式应保持一致。强制规范：2）表明浮层所从属的对象。弹出层1）弹出窗口的大小合理，样式保持一致。2）设置关闭按钮。强制规范：建议规范：1）增加显示和消失过渡动画。7.1原则7.3规范7.2模式7界面内容跳转目录1登录4导航3表格2表单5信息搜索6消息7界面内容跳转8键盘9首次体验【操作灵活性原则】【操作便捷性原则】用户进行信息输入时，可通过设置快捷键输入代替鼠标操作，避免鼠标和键盘间的重复切换，提高用户操作效率。设定键盘快捷键时，需考虑用户的认知负荷和手指操作的便捷性，避免转义常用快捷键、避免组合距离太远，造成单手操作困难。8.1原则8.3规范8.2模式8键盘【操作灵活性原则】【操作便捷性原则】用户进行信息输入时，可通过设置快捷键输入代替鼠标操作，避免鼠标和键盘间的重复切换，提高用户操作效率。设定键盘快捷键时，需考虑用户的认知负荷和手指操作的便捷性，避免转义常用快捷键、避免组合距离太远，造成单手操作困难。信息输入快捷键输入8.1原则8.3规范8.2模式8键盘1）应避免与操作系统默认快捷键相冲突，不应对常规的快捷键组合进行转义。2）不应使用复杂的快捷键组合。3）搜索或者登录等操作时，应将“Enter键”设置为默认触发键。4）应为用户频繁使用的操作设置快捷键。强制规范8.1原则8.3规范8.2模式8键盘目录1登录4导航3表格2表单5信息搜索6消息7界面内容跳转8键盘9首次体验【帮助性原则】首次体验应能够帮助用户学习系统（产品）操作。【简单性原则】首次体验应尽可能的简单，让用户快速掌握系统（产品）的使用方法。【明确性原则】首次体验应准确说明各个主要功能的作用和相应的操作流程。9.1原则9.3规范9.2模式9首次体验前置引导页9.1原则9.3规范9.2模式9首次体验全局引导游览9.1原则9.3规范9.2模式9首次体验前置引导页全局游览引导强制规范建议规范1）精炼准确的介绍主要功能。2）页面浏览顺序与用户操作顺序保持一致。强制规范：建议规范：1）设计尽量生动、具有趣味性。2）给予用户随时离开引导页面的入口。3）提供给用户再次打开引导页面的入口。9.1原则9.3规范9.2模式9首次体验前置引导页全局游览引导强制规范建议规范1）引导说明位于说明对象旁边。2）凸显当前说明对象与说明内容。为什么？9.1原则9.3规范9.2模式9首次体验1）引导说明位于说明对象旁边。2）凸显当前说明对象与说明内容。强制规范：建议规范：1）设计尽量生动、具有趣味性。（内容同上）3）确保引导说明指向其从属对象。4）有序对功能进行介绍，符合真实使用顺序。5）可以随时关闭引导说明。前置引导页全局游览引导强制规范建议规范9.1原则9.3规范9.2模式9首次体验Спасибо

شكرالك

谢谢Thanks

Merci.ขอบคุณ

감사합니다.ありがとうございますGracias.2014年国家电网公司《桌面