1、桌面可视化设计规范培训 交互部分 Interaction design,目录,5,信息搜索,6,消息,7,界面内容跳转,8,键盘,9,首次体验,系统登录的作用可概括为以下三点：,告知用户将要登录的系统名称；对登录人信息进行验证；链接系统界面。,1 登录,1 登录,1.1原则,1.3规范,1.2模式,输入登录模式：,1 登录,1 登录,1.1原则,1.3规范,1.2模式,1 登录,1 登录,10）应使用户名输入框的长度容纳系统中最长用户名长度 。,11）应将版权信息放置于底部。,12）应将“Enter”键作为默认“登录”快捷键。,1 登录,13）应将“Tab”键作为输入焦点自动换行快捷键 。,1
2、 登录,1）建议当用户名输入错误，系统（产品）进行错误提示后，输入焦点自动置入用户名输入框。,2）建议“用户名”、“密码”输入框增加自动清空功能。,3）建议“用户名”、“密码”输入框增加虚拟键盘功能。,目录,5,信息搜索,6,消息,7,界面内容跳转,8,键盘,9,首次体验,2 表单,系统表单的作用可概括为以下两点：,完成信息的填写录入；提交或注册信息；,2 表单,2 表单,2）分组表单：,2 表单,1）保持统一的对齐方式。,当焦点移入输入区后，标签消失，看不到问题，可能会忘记要回答什么，不得不清掉输入好的字，把“问题”还原出来。这种组合比较适合只有一两个输入框的简短表单，而且人们对他很熟悉，不
3、用费力去记住标签提出的问题，比如：搜索框,2 表单,结合国家电网公司常见表单场景和以上数据，标签右对齐即非字形对齐适用性最佳。,1）保持统一的对齐方式。,2 表单,在非字形对齐的前提下，提示信息可有三个可选位置：输入框右侧、下方和内部。但是下方位置适用性最强。,右侧放置：仅适用于单列表单，针对性过强，因此排除了右侧放置。,内部放置：输入文本信息时将不再出现提示信息，且有限显示信息，因此适用于帮助提示，不适用于反馈提示。,下方放置：结合上面分析结果和用户习惯，下方更适用于放置反馈提示。,3）必填符号放置于标签左侧。,2 表单,2 表单,2 表单,2 表单,2 表单,2）应将分组标签文本统一放置于
4、各组填写区域左上角。,业务相关性分组：优先根据内容相关性进行分组。,控件相似性分组：在无明显内容相关性时，可根据控件形态相关性分组。,1）应进行相关性分组。,2 表单,2 表单,2）应在第二组页面中出现“上一步”按钮。返回查看上一组内容，同时保留当前填写内容。,1）应在用户填写完成当前信息内容时，方可点击“下一步”按钮跳转到下一页面，并保留当前页所填写内容。,3）应在分步表单提交完成后，提供提交完成反馈提示。,2 表单,1）当填写的内容步骤较多时，为避免用户产生厌烦情绪，建议图形化显示分步填写，在填写区域上方提示当前填写位置和填写流程。,目录,5,信息搜索,6,消息,7,界面内容跳转,8,键盘
5、,9,首次体验,3 表格,【对齐原则】表格中的各类元素应按照业务及用户需求进行组织，保证界面工整，信息呈现有序，便于用户扫视 。,【清晰视觉流原则】视觉流指用户注视区域的顺序。清晰的视觉流顺序应根据任务逻辑和用户的浏览习惯来设计。保证其合理、 顺畅、自然 。,3 表格,【相近性原则】表格中信息应根据相近性原则进行布局设计，即将相关元素相近放置，引导用户将其归为一组 。,【相似性原则】表格中信息应根据相似性原则进行布局设计和信息分类，即将相似元素相近放置，引导用户将其归为一组 。,3 表格,1）展示类表格：,2）表头操作类表格：,3 表格,3）操作类表格：,3 表格,3 表格,1）应在表格行数较
6、多时，使用“斑马线”（隔行变色），颜色对比不易过强且弱于表头颜色，特殊展示情景例外，如：告警类表格。,2）应设置表格中最多字数显示限制。文本显示未完全时，末尾文字应加“”，且鼠标悬浮时提示完整文本。若必要性信息无法完全展示，可折行显示。,3 表格,表头居中，列表左右对齐,表头和列表对齐方式不统一时，视觉体验较差，因此建议排除。左右对齐更利于信息对比，居中对齐适用范围更好，因此，默认使用居中对齐，对关键类对比信息采用左右对齐方式。,3 表格,3 表格,1）关联信息在表格列中建议相近放置，便于用户关联阅读。,2）对于进行对比分析的数据，建议显示差值或上下箭头。,3）表头数量即表格列数建议为5-9列
7、。,3 表格,3 表格,3 表格,1）表格中操作功能，优先使用图标按钮，且鼠标悬浮时，给予文字提示。专业性术语或非 常见功能，建议使用图标加文字同时显示。,目录,5,信息搜索,6,消息,7,界面内容跳转,8,键盘,9,首次体验,4 导航,系统导航的作用详细可以概括为以下4点：引导用户完成系统各内容页面间的跳转。理清系统各内容与链接间的联系。定位用户在网站中所处的位置。展现品牌形象。,面包屑帮助定位,展现品牌形象,提供页面跳转,4.1 导航 - 全局导航,【减轻认知负担原则】导航层次分类和命名应清晰明了，符合用户心理感知模型，以减少用户的学习成本，便于用户的使用。,【一致性原则】同类系统（产品）
8、间导航设计应遵循一致性原则，保持一致的交互体验和布局样式。,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模式,水平导航栏,垂直导航栏,树形导航栏
9、,工作台模式,强制规范,建议规范,1）应在水平导航栏中体现：系统（产品）标志、用户信息、基础导航栏目三个要素。,2）应在点击“系统（产品）标志”后，返回系统（产品）首页。,3）应在水平导航上突出从属关系，通过视觉元素加以表达。,4）应确保全局导航的水平导航栏层级不超过三级。,当导航栏层级为两级时：,当导航栏层级为三级时：,为什么？,4.1 导航 - 全局导航,4.1.1原则,4.1.3规范,4.1.2模式,为什么导航不宜超过三级？为什么三级使用全展开的形式？,信息结构过深不易于理解。 全展开一目了然，无需猜测三级标所属的二级。,水平导航栏,垂直导航栏,树形导航栏,工作台模式,强制规范,建议规范
10、,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）建议导航栏目出现在系统（产品）每个界面，给予用户相同的操作体验。,水平导航栏,垂直导航栏,树形导航栏,工作台模式,强制规范,建议
11、规范,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模式,
12、水平导航栏,垂直导航栏,树形导航栏,工作台模式,强制规范,建议规范,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模式,水平导航栏,垂直导航栏,树形导航栏,工作台模式,强制规范,建议规
13、范,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模式,水
14、平导航栏局部导航 “水平排列”局部导航：,水平导航栏局部导航 “倒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）
15、确保统一性（同前）。,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）内容同前
16、。,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
17、.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模式,面包屑导
18、航,站点地图,分页导航,选项卡导航,页内导航,页脚导航,定位面包屑,路径面包屑,强制规范：,1）位于正文顶部，告知当前层级。,2）区分当前与上级路径。,3）显示弱于主导航。,4）使用方向性符号分隔。,5）依次显示层级路径。,定位面包屑,路线面包屑,1）位于正文顶部，告知访问路径。,2）4）同上。,强制规范：,建议规范：,用颜色突显当前页面,用字号和加粗突显当前页面,1）路径个数控制在7个以内。,4.3 导航 辅助导航,4.3.1原则,4.3.3规范,4.3.2模式,面包屑导航,站点地图,分页导航,选项卡导航,页内导航,页脚导航,强制规范,建议规范,强制规范：,1）文字链接正确有效。,2）使用精
19、炼准确的关键词短语。,3）直观罗列栏目，不隐藏。,4）明确区分层级关系。,5）及时更新。,6）站点地图入口显而易见，位于界面头部或页面底部。,建议规范：,1）建议只展示系统（产品）结构中的二到三级，提供主要链接和页面。,4.3 导航 辅助导航,4.3.1原则,4.3.3规范,4.3.2模式,面包屑导航,站点地图,分页导航,选项卡导航,页内导航,页脚导航,强制规范,建议规范,1）应包含“上一页”、“下一页” 和页码。,2）应默认显示第一页， “上一页”不可点击，最后一页时，“下一页”不可点击。,3）应合理设置页码、按键尺寸、间距。,4）应使可点击页码和当前页码有所区分。,5）应在页数过多时，提供
20、直接跳转功能。,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）应使标
21、签包含：激活状态、悬浮状态和未激活状态。,3）应将当前标签和其内容区体现为一个连续的整体。,4.3 导航 辅助导航,4.3.1原则,4.3.3规范,4.3.2模式,1）不要将横向标签页和纵向标签页同时嵌套使用。,2）标签个数控制在27个之间。,3）Tab标签之间的切换实时响应。,4）小面积区域可使用鼠标悬浮来选中标签内容。,错误示例。,横向标签纵向标签不宜嵌套使用。,面包屑导航,站点地图,分页导航,选项卡导航,页内导航,页脚导航,强制规范,建议规范,4.3 导航 辅助导航,4.3.1原则,4.3.3规范,4.3.2模式,1）应与主导航相区分，位置接近主体内容。,2）应将信息内容划分明确，点击锚
22、点标题，可以跳转至相应的内容处。,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
23、.2模式,面包屑导航,站点地图,分页导航,选项卡导航,页内导航,页脚导航,模块间跳转,回到顶部,4.3 导航 辅助导航,强制规范：,1）应位于页面底部。,2）应对不同内容进行有效划分，不可分类的内容使用“丨”划分，可分类的内容使用区域模块化划分。,3）应采用文字链接的形式，可以配置图标。,4.3.1原则,4.3.3规范,4.3.2模式,面包屑导航,站点地图,分页导航,选项卡导航,页内导航,页脚导航,强制规范,建议规范,4.3 导航 辅助导航,4 .4 导航-上下文导航,【相关性原则】上下文导航与信息内容应具有很强的关联性。,【便捷性原则】上下文导航可使用户快速浏览相关内容信息。,4.4.1原则
24、,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模式,嵌
25、入式链接,相关链接,4 .4 导航-上下文导航,目录,5,信息搜索,6,消息,7,界面内容跳转,8,键盘,9,首次体验,【减轻记忆负担原则】系统（产品）的关键字搜索功能应根据已输入的关键字，提供智能匹配功能，减少输入并 提高用户工作效率。,【即时反馈原则】用户进行操作后系统（产品）即时进行响应反馈，便于用户清楚操作是否有效。,信息搜索是从信息集合中找出所需要的信息的过程。,【渐次呈现原则】当系统（产品）中信息搜索项过多时，可按照信息重要性有选择的依次显示。,图：减少记忆负担原则,图：渐次呈现原则,5.1原则,5.3规范,5.2模式,5 信息搜索,条件筛选模式：,关键字搜索模式：,条件查询模式：
26、,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）应在搜索过程中出
27、现加载提示。,7）应将“Enter”键作为搜索快捷键。,8）使用关键字搜索时，首次搜索中输入框为空，应给予用户提示;已搜索后，清空输入框再点击搜索时界面内容刷新展示全部内容。,关键字搜索模式,条件筛选模式,5.1原则,5.3规范,5.2模式,5 信息搜索,强制规范,建议规范,条件查询模式,1）建议全局关键字搜索提供智能匹配功能，可采用下拉列表形式显示，匹配项过多时，仅显示搜索频率较高项，无 需显示全部信息 。,2）建议搜索结果中相关联关键字高亮显示。,关键字搜索模式,条件筛选模式,5.1原则,5.3规范,5.2模式,5 信息搜索,强制规范,建议规范,条件查询模式,1）应将条件筛选内容置于筛选结
28、果上方 。,2）应在用户选择筛选条件后，即时显示筛选结果 。,3）应在系统（产品）搜索过程中出现加载提示，加载提示包括动态图标和提示文字：“正在为您搜索,请等待” 。,关键字搜索模式,条件筛选模式,5.1原则,5.3规范,5.2模式,5 信息搜索,强制规范,建议规范,条件查询模式,1）建议将下拉项文字应精简在16个字符，8个中文字以内 。,2）下拉列表的选项中包含“全部”或“全选”时，应将“全部”选项放置于下拉列表底部，如“全部类型”或“全 部状态”。若无业务设定需要，则建议将“全部类型”作为系统（产品）默认选择 。,关键字搜索模式,条件筛选模式,5.1原则,5.3规范,5.2模式,5 信息搜
29、索,强制规范,建议规范,条件查询模式,1）应将查询按钮放置于查询条件下方，居右显示 。,2）条件查询模式中信息输入项应遵循表单所有规范，例如： “非字形”对齐方式等 。,3）应对查询条件填写中的生僻项或易产生歧义选项提供填写帮助 。,4）应提供“清空搜索条件”功能，位置放置在查询按钮之后。,5）应在搜索过程中显示加载提示，加载提示包括动态图标和提示文字：“正在为您搜索,请等待 。,关键字搜索模式,条件筛选模式,5.1原则,5.3规范,5.2模式,5 信息搜索,强制规范,建议规范,条件查询模式,1）建议当查询条件较多时根据业务要求选择隐藏不常用的选项作为高级查询 。,2）当表单填写内容具有一定范
30、围或输入内容具有针对性时 ，默认信息项可由系统（产品）自动填写，减少用户输入 。,3）建议将下拉项文字应精简在16个字符，8个中文字以内 。,4）信息展示建议多使用图形化，增加表单的视觉体验，如：日历输入框，增加日历图标 。,5）建议加载提示中提供取消加载的功能，取消后回到加载前的信息。,关键字搜索模式,条件筛选模式,5.1原则,5.3规范,5.2模式,5 信息搜索,强制规范,建议规范,条件查询模式,目录,5,信息搜索,6,消息,7,界面内容跳转,8,键盘,9,首次体验,6.1 消息-错误消息,【简要原则】错误消息表述应精炼准确。,6.1.1原则,6.1.3规范,【清晰原则】错误消息措辞通俗易
31、懂。,【明确原则】,6.1.2模式,【礼貌原则】错误消息不应责备用户，避免使用歧视和侮辱性语言。,【相关性原则】错误消息所描述的问题是用户所关心的。,【及时性原则】及时向用户反馈出错提示。,错误消息在描述问题时应使用肯定的语言，给出具体名称、位置及数值。,对话框：,原地提示：,气球状提示：,6.1 消息-错误消息,6.1.1原则,6.1.3规范,6.1.2模式,对话框,原地,气球状,1）应包含标题区、内容区、操作区。,标题区：标题简洁易懂，置于标题区左侧。提供“关闭” 按钮，置于标题区右侧。,内容区：使用错误图标，置于内容文字前。告知用户问题、原因以及解决方法。,操作区：包含“确定”按钮，置于
32、操作区右侧。,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）措辞要求：,应避
33、免使用编程专业术语。应避免责备或者暗示用户造成了问题。应避免使用双重否定。应避免使用缩写格式；应避免使用特殊字符表意。应避免在标签之后使用冒号；错误提示内容后应避免使用感叹号。应注意用语的合理性。,对话框,原地,气球状,6.1 消息-错误消息,6.1.1原则,6.1.3规范,6.1.2模式,强制规范,建议规范,1）内容较多时，隐藏部分信息，点击查看信息详情。,为什么？,认知负荷VS操作负荷,脑力资源：认知负荷操作负荷增加操作而减少认知负荷。设计师要懂心理学,对话框,原地,气球状,6.1 消息-错误消息,6.1.1原则,6.1.3规范,6.1.2模式,强制规范,建议规范,错误消息置于输入框下方。
34、,错误消息置于输入框左方。,1）应将提示放置于错误对象旁边，凸显错误对象：,提示信息放置在操作对象下方,提示信息放置在操作对象右方,2）使用错误图标，置于提示文字前，使用红色。,为什么？,对话框,原地,气球状,6.1 消息-错误消息,6.1.1原则,6.1.3规范,6.1.2模式,强制规范,建议规范,1）应将提示放置于错误对象旁边，凸显错误对象：,提示信息放置在操作对象下方,提示信息放置在操作对象右方,2）使用错误图标，置于提示文字前，使用红色。,为什么？,使用符合文化习惯的颜色。,9%的男性和0.5%的女性是色盲。设计师要懂心理学,色盲用户的存在。,在文化习惯中，红色表征危险、警醒等。,3）
35、内容包含问题和问题解决措施。,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）措辞要求：（内容同上）,强制规范：,建议规范：,
36、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）包含标题区、内容区、操作区。,标题区：（内容同上）,内容区：使用警告图标，置于内容
37、文字前。告知操作后果以及相应的解决方法。,操作区：需确认的警告消息，包含继续、放弃按钮。,对话框,原地,气球状,强制规范,建议规范,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模式
38、,为什么？,符合用户习惯和预期。,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 消息
39、-警告消息,内容与“错误消息”中的“气球状”一致。,对话框,原地,气球状,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）操作会引起严重后果且
40、不可逆，必须使用确认消息。,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）措
41、辞要求：（内容同上）,强制规范：,建议规范：,1）信息提示内容过多时，可折行显示。,2）无特殊业务需求，提示在一段时间后消失。,6.4.1原则,6.4.3规范,6.4.2模式,6.4 消息-信息提示,强制规范,建议规范,【简要原则】提示音应直接的表达反馈的问题。,负面听觉引起焦虑等负面情绪；正面听觉反馈更有可能给人带来愉悦体验。,正面听觉关门,正面听觉敲键盘,1）单个声音文件时长不超过5秒,强制规范：,建议规范：,1）支持用户自定义声音文件。,2）提供声音预览功能。,3）操作成功时给予成功声音反馈。,为什么？,负面听觉反馈VS正面听觉反馈。About Face,负面听觉火警警报,4）无特殊业务
42、需求，避免在使用警告消息的同时使用提示音。,6.5.1原则,6.5.3规范,6.5.2模式,6.5 消息-提示音,强制规范,建议规范,目录,5,信息搜索,6,消息,7,界面内容跳转,8,键盘,9,首次体验,【即时反馈原则】,用户进行操作后系统（产品）应给用户即时反馈，告知用户操作是否有效。,【简要原则】,用于内容切换的超链接文字或按钮文字应精简，措辞通俗易懂，便于用户理解。,【一致性原则】,系统（产品）中界面跳转方式应保持一致。,7.1原则,7.3规范,7.2模式,7 界面内容跳转,界面局部刷新,弹出层,浮层显示,界面A,界面B,新窗口打开,界面A,当前界面刷新,正在加载,界面B,7.1原则,
43、7.3规范,7.2模式,7 界面内容跳转,当前界面刷新,新窗口打开,界面局部刷新,浮层显示,弹出层,变速运动增加趣味性,显示进度百分比,符合产品主题,7.1原则,7.3规范,7.2模式,7 界面内容跳转,强制规范,当前界面刷新,新窗口打开,界面局部刷新,浮层显示,弹出层,弹出层,1）弹出窗口的大小合理，样式保持一致。,2）设置关闭按钮。,强制规范：,建议规范：,1）增加显示和消失过渡动画。,7.1原则,7.3规范,7.2模式,7 界面内容跳转,目录,5,信息搜索,6,消息,7,界面内容跳转,8,键盘,9,首次体验,【操作灵活性原则】,【操作便捷性原则】,用户进行信息输入时，可通过设置快捷键输入
44、代替鼠标操作，避免鼠标和键盘间的重复切换，提高用户操作效率。,设定键盘快捷键时，需考虑用户的认知负荷和手指操作的便捷性，避免转义常用快捷键、避免组合距离太远，造成单手操作困难。,8.1原则,8.3规范,8.2模式,8 键盘,【操作灵活性原则】,【操作便捷性原则】,用户进行信息输入时，可通过设置快捷键输入代替鼠标操作，避免鼠标和键盘间的重复切换，提高用户操作效率。,设定键盘快捷键时，需考虑用户的认知负荷和手指操作的便捷性，避免转义常用快捷键、避免组合距离太远，造成单手操作困难。,信息输入,快捷键输入,8.1原则,8.3规范,8.2模式,8 键盘,1）应避免与操作系统默认快捷键相冲突，不应对常规的
45、快捷键组合进行转义。,2）不应使用复杂的快捷键组合。,3）搜索或者登录等操作时，应将“Enter键”设置为默认触发键。,4）应为用户频繁使用的操作设置快捷键。,强制规范,8.1原则,8.3规范,8.2模式,8 键盘,目录,5,信息搜索,6,消息,7,界面内容跳转,8,键盘,9,首次体验,【帮助性原则】首次体验应能够帮助用户学习系统（产品）操作。,【简单性原则】首次体验应尽可能的简单，让用户快速掌握系统（产品）的使用方法。,【明确性原则】首次体验应准确说明各个主要功能的作用和相应的操作流程。,9.1原则,9.3规范,9.2模式,9 首次体验,前置引导页,9.1原则,9.3规范,9.2模式,9 首
46、次体验,全局引导游览,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年国家电网公司桌面可视化设计规范培训,
