国家电网交互设计标准规范培训（PPT127页)

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