产品UE设计规范

产品UE设计规范 1.1.规范目的 31.2.规范的效益 31.3.适用的人员范围 31.4.适用的产品范围 31.5.设计原则 3.5.1用户为中心 3 理性 4 2.规范 42.1.用户视觉规范 42.1.1分辨率 52.1.2一键换肤 5.1.3对齐 52.2.导航规范 5.2.1菜单 52.3.基础控件 5.3.1字体 52.3.2颜色 62.3.3按钮 6 2.3.4输入框 7.3.5图标 72.4.界面规范 71布局 8 2.6.帮助 14 3.1.持续迭代 511.概述1.1.规范目的给产品内部的成员提供统一的规范和指导，使得设计人员能形成良好的思考习惯和设计习惯，提高整个产品质量，使操作更加人性化、减轻用户认知负担，改善产品用户体验，提争力。1.2.规范的效益规范的效益=提高效率(内容覆盖率×适用性×使用人数)+保障质量+统一体验规范可以帮助个人、团队以及整个企业提高效率和产出质量，保障用户体验统一。1.3.适用的人员范围参与产品的所有人员。1.4.适用的产品范围1.5.设计原则应，而不是由开发者按自己的意愿把操作流程强加给用户。述，简化操作步骤。多做"减法"运算，将不常用的功能区块隐藏，以保持界面的简洁，使用户专注于主要业务操作流程，有利于提高软件的易用性及可用性。用户常用功能要能做到一键操作，非常用功能可适当隐藏。按钮次数以便于后续开展用户行为分析。显示信息的含义应该非常明确，用户不必再参考其它信息源。码。1.5.5友好性用户基本不用查阅帮助就能知道该界面的功能并进行相关正确的操作。。尽量确保用户在不使用鼠标(只使用键盘)的情况下也可以流畅地完成一些常用的业务查询检索类页面，在查询条件输入框内按回车应该自动触发查询操作。用户，并让用户确认是否继续操作，必要时应该把操作造成的后果也告诉用户。信息提示窗口的"确认"及"取消"按钮需要分别映射键盘按键"Y"和"N"。功能点击无效。ab操作按钮间切换，并注意Tab的操作应该遵循从左向右、从上而下的顺序。 (如果允许的话)以及在不退出系统的情况下从错误状态中恢复。系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也提示，避免用户误认为没响应而重复操作;5秒以上显示处理窗口，保存等待及提示或显示进度条;一个长时间的处理完成时应给予完成警告信息。尽量保证所有页面响应时间不超过5秒。2.规范根据产品阶段初步判断需要主要产出基础型。2.1.用户视觉规范减少需要输入的字数，避免上下滚动条，但是滚动优于翻页，如果有太长的表单，还是设计成滚动页面更合理些；4、在不同的分辨率下应该充分考虑到人机交互的规律，方便阅读者阅读，同时我们还要考虑到残障人士的阅读需要，比如文字和图形在需要的时候可以放大。2.1.1分辨率1024*768，最高分辨率为1920*1080；严禁不同的分辨率界面元素比例失调，如图标、按钮.2一键换肤页面风格的选取除了需要考虑一般的用户感受外，还需要将用户所在环境的因素考虑进、.1.3对齐保持页面内元素对齐方式的一致，如无特殊情况应避免同一页面出现多种数据对齐方式。2.2.导航规范.2.1菜单保持菜单简洁性及分类的准确性，避免菜单深度超过3层；主菜单的宽度要接近，字数不应超过4个字；主菜单数目不应太多，最好为单排布置；未完成功能必须隐藏处理，不要置于页面内容中，以免引起误会；应给出提示信息，如产品logo，鼠标移入时应悬浮‘返回首页’。2.3.基础控件.3.1字体UI。：不同语种的文字之间应该有一个半角空格，汉字之间的标点要全用全角符号，英文和数字周围的括号用半角。文字默认无下划线。 2.3.2颜色详见UI规范2.3.3按钮文本录入框提示信息应简明扼要，键入后消失。5、6个字的用第三种。(UI规范)保持功能及内容描述一致-避免同一功能描述使用多个词汇，如编辑和修改，新增和增加、新建，删除、作废、注销和清除混用等。建议在项目开发阶段建立一个产品词典，包括产品中常用术语及描述，设计或开发人员严格按照产品词典中的术语词汇来展示文字信息。一规定为关闭。确认操作按钮放置左边，取消或关闭按钮放置于右边。所有按钮按照右对齐方式从右向左排序。同一界面相同或相近功能的按钮用Frame框起来，同一界面同一功能或任务的元素放在集中位置，减少鼠标移动的距离。常用按钮要支持快捷方式。在描述按钮状态时候按照默认状态、触发(激活态)、操作反馈、异常状态-禁用和报2.3.3.1新增当新增一条记录或多条记录时新增的记录必须排在首页首行，提交失败后必须保存用户已经输入的内容，以便再次提交。提交时需要对主要标识字段进行重复值、空值(空格)判断。2.3.3.2修改默认修改第一条记录进行修改；提交失败后必须保存用户已经输入的内容，以便再次提交。提交时需要对主要标识字段进行重复值、空值(空格)判断。2.3.3.3删除弹出提示界面提醒不能删除以及更明细的提示信息，或者弹出确认界面是否要删除该记录以及关联记录(不建议)2.3.3.4查询合2.3.3.5关闭当页面关闭时需要进行页面项判断，如有变动则给予提示；关闭后返回到父页面。2.3.3.6保存保存进程需要2-5秒窗口显示处理信息提示，避免用户误认为没响应而重复操作;5秒以上显示处理窗口，保存等待及提示或显示进度条;一个长时间的处理完成时应给予完成警告信息。2.3.3.7重置重置后与初始进入此页面时保持一致。2.3.4输入框可输入控件检测到非法输入后应给出说明并能保存时自动获得焦点；复选框和选项框按选择几率的高低而先后排列；确保存后自动截断；提交时给予提示，如》《》‘’等；界面打开时默认鼠标键入第一个可输入框；必填项旁边给出醒目标识(*);；入框内的文字处于全选状态，如绝不要让用户提供程序中可自动获取或计算出来的信息，如BMI、价格策略等；备注需要显示剩余能输入的字数说明，且文字是黑色的，数字是红色的。2.3.5图标同一种图标在不同页面必须保持完全一致，但尺寸可以放大或是缩小；所有图标必须配有文字主题，如需要隐藏文字主题，则需要增加鼠标悬浮时的文字主题效果。菜单展开时明确当前用户操作的是哪个菜单，对于用户当前所在的菜单需要通过特定的视觉样式或状态加以区分。如下图：特点：功能可见性、操作直接。2.4.界面规范长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。入框等已经明确长宽的控件，不支持放大和缩放。系统对话框只支持关闭，不支持缩放。通常父窗体支持缩放时，子窗体没有必要缩放。2.4.1布局2.3.2.1模板可根据需要设定固化站点每页都出现的元素，通过利用模板快速创建WEB页，可使整个站点具有统一的风格。页面布局以骨骼型为主，这种板式给人以和谐、理性的美，卡几种。在页面布局中，对各个功能区域的切分是按照像素和比例方式来进行的，以1366*768顶部区，宽度是按照比例方式设置的，宽度按照100%设置，高度采样所占的固定像素导航区和顶部区的配置要求是一样的，宽度按照100%设置，高度结合顶部区的高度确树形菜单区宽度是结合与内容区之间的黄金比例切分，按照固定像素的方式确定；内容区，高度和宽度方向布局都是按照比例方式来设置的。宽度定义：采用百分比定义页面宽度(单位：%):采用%百分比设定页面宽度时，可以不同宽度浏览器中显示时布局要整齐、内容排版比例协调。采用固定值定义页面宽度(单位：px):用固定值设定页面宽度时，随着浏览器宽度的屏注意内容在不同分辨率下的显示情况。三在制作过程中一定要按上述三种分类来规划好页面中内容表现形式。2.3.2.1.1正常改变区2.3.2.1.2有限改变区如下图红色标注所示-----不正确的内容表现：如下图红色标注所示-----正确的内容表 在浏览页面时，人的正常视觉角度是15度，超出视觉范围时会让用户产生内容断层的错觉，从而影响用户的正常浏览，所以在制作页面时要充分考虑用户的可视范围。2.3.2.1.3不可改变区内容不会随着分辨率的变化而改变，从而保持页面内容的可视性和完整性。如下图红色标注所示-----正确的内容表现：2.3.2.1表单列表表头水平、垂直居中对齐，表头应采用不同于表格内容的背景颜色，并要求对比明显，表格表头应加粗，或字号稍大个单元格宽度的设置示。如果为定长，则居中显示，如不固定长度，字符型数据保持左对齐，数值型右对齐(方表格中相邻行需要提供有一定差异的浅色作为背景色。 2.5.交互规范2.5.1用户操作规范用户可以取消绝大部分操作，如表单取消保存，上传的照片删除等。把保存按钮放在最容易点击的位置。目前按钮统一放在整个界面的右上方，右对齐。如表单数据发生变化而用户未保存，则加载确认框进行提醒。2.5.1.1快捷键操作鼠标与键盘一致性:尽量遵循可不用鼠标的原则：应用中的功能只用键盘也应当可以完成。但是，许多支持键盘上的enter操作一般为确定、保存、提交，TAB切换页签或控件遵循左上到右限制F5，IE工具栏、退格键(仅限于页面不限输入框)；界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目2.5.1.2容错性产品应允许用户犯错，首先要帮助用户避免出错，如采用合适的控件，给予输入帮助或启示，保存进行检验。用户操作后，需要加载提示框进行提醒，加载错误原因及解决方法，并能锁定错误位置。用户删除数据需要进行确认；用户不可操作的功能按钮隐藏或置灰。中断思路，并费时费力的重新登陆，而且已进行的操作也会因未存盘而全部丢失，因此需要在页面设计时应对输入按照规则进行校验，需要支持界面刷新依然为当前界面。2.5.1.3弹窗范如下。屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。高和宽的比例应大致保持3:4。 1、父窗体或主窗体的中心位置应该在对角线焦点附近；2、子窗体位置应该在主窗体的左上角或正中；3、多个子窗体弹出时应该依次像右下方偏移，以显示窗体出标题为宜，以保证不遮盖上层窗口标题为准，窗口嵌套层次最好不超过3层。4、当父窗体与子窗体都存在同样的查询条件时，父窗体已输入的查询条件被带到子窗体中；5、当子窗体的操作影响了父窗体的数据时，子窗体的关闭返回必须刷新父窗体数据；6、允许直接关闭父窗体，关闭父窗体必须连同子窗体一起关闭。2.5.1.4操作提示1、预先信息提示所有交互进行前需要提供给用户预先应该知道的提示信息。2、表单提交类号码要多少位，如扣除账号金额等，预先提示扣除金额数目，以及当前账户金额是否足够等。 4、差异化提示当一个功能的规则与用户习惯的规则具有一定的差异或者比较复杂时，需要给出提示，链接。注：提示信息用户可勾选不在提示功能，当用户勾选时该提示不在弹出。生的结果展示部分。即提交结果后应直接展示给用户他提交的结果。2.5.1.5提示确认框：提示信息字体与页面字体保持一致。保持语言的一致性，如"确定"对应"取消","是"对应"否"。弹窗提示信息以不遮盖与弹框信息相关页面用户可能需要核对的信息为基本原则，弹框在提交数据或是载有数据的页面关闭，或其他需要和用户确认的交互场景，需要软件能认执行结果的对话框，包含的情况有：性，给出‘确定’和‘取消’的选择按钮；是否保存更改的信息，给出‘是’和‘否’的选择按钮；确认离开当前页面，给出‘是’和‘否’的选择按钮；是否继续删除操作，给出‘确定’和‘取消’的选择按钮。关的提示：操作确认提示如删除确认提示框，这些信息的分类有：警告信息禁止信息操作执行成功信息操作执行失败信息错误信息帮助信息提示信息形式，对话框的页面结构如下图： 标题区：简要给出此次提示信息的性质，如警告：非法操作!图标区：给出和此次提示信息性质匹配的图标；号；提示信息如有主语，统一为您；提示信息不宜太长，宽度应不超过当前窗口宽度的1/2,换行，多条信息提示使用1、2、3进行排序。按钮区：给出供用户进行选