产品UE设计规范.docx

1、产品UE设计规范手>。伶解释说明：在浏览页面时，人的正常视觉角度是15度，超出视觉范围时会让用户产生内容断层的错觉，从而影响用户的正常浏览，所以在制作页面时要充分考虑用户的可视范围。2.3.2.1.3不可改变区内容不会随着分辨率的变化而改变，从而保持页面内容的可视性和完整性。如下图红色标注所示“正确的内容表现：2.3.2.1表单列表表头水平、垂直居中对齐，表头应采用不同于表格内容的背景颜色，并要求对比明显,表格表头应加粗，或字号稍大表格中由于表单内容需要在页面中完整显示，因此原则上对表格各个单元格宽度的设置应采用百分比方式来进行，这样表格不仅能够将数据完整的显示，还能够适应不同的分辨率的

2、情况。但是由于表格中存在不定长的内容，所以为保证表格的宽度不被挤变形，对应不定长的内容可固定显示宽度，当超过此宽度后，以.显示，光标停留后，详细内容在浮动层显示。如果为定长，则居中显示，如不固定长度，字符型数据保持左对齐，数值型右对齐（方便阅读对比），并根据字段要求，统一显示小数位位数；列表正常色、选中色、鼠标滑动色三种效果。表格中相邻行需要提供有一定差异的浅色作为背景色。2.5.交互规范2.5.1用户操作规范所有的可操作按钮都要有一定响应，所有链接都可用，如何一个页面都要有清晰离开页面的按钮。用户可以取消绝大部分操作，如表单取消保存，上传的照片删除等。把保存按钮放在最容易点击的位置。目前按钮

3、统一放在整个界面的右上方，右对齐。如表单数据发生变化而用户未保存，则加载确认框进行提醒。批量操作：重复的操作可以考虑做成批量操作。2.5.1.1快捷键操作鼠标与键盘一致性：尽量遵循可不用鼠标的原则：应用中的功能只用键盘也应当可以完成。但是，许多鼠标的操作，如双击、拖动对象等，并不能简单地用键盘来模拟即可实现，此类操作可适当增加操作按钮。支持键盘上的enter操作一般为确定、保存、提交，TAB切换页签或控件遵循左上到右下的原则，ESC取消或关闭页面。快捷按钮如返回顶部、返回底部、返回首页等。由于IE本身原因，避免一些不必要的错误，故对其进行限制，在没有明确需求情况下,限制F5,IE工具栏、退格键

4、（仅限于页面不限输入框）；限制右键菜单的使用；界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能。界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。默认按钮要支持Enter操作，即按Enter后自动执行默认按钮对应操作。2.5.1.2容错性产品应允许用户犯错，首先要帮助用户避免出错，如采用合适的控件，给予输入帮助或启示，保存进行检验。用户操作后，需要加载提示框进行提醒，加载错误原因及解决方法，并能锁定错误位置。用户删除数据需要进行确认；用户不可操作的功能按钮隐藏或置灰。鼠标交互响应：对于鼠标在页面中所产生的事件进行处理，当页面元素获得焦点、被点击

5、、失去焦点时,则需要控件本身在颜色、大小或形状上的变化给予响应，亦可添加声音响应。（ui已实现）当前程序出现保护性错误而退出系统，会使用户对软件失去信息，因为这意味着用户要中断思路，并费时费力的重新登陆，而且已进行的操作也会因未存盘而全部丢失，因此需要在页面设计时应对输入按照规则进行校羚，需要支持畀面刷新依然为当前畀面。2.5.1.3 弹窗页面交互：除有效菜单打开时以tab页签形式外，其他页面均以弹窗加载，弹窗加载规范如下。屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。弹窗不要超过1024*768（最低分辨率），以免出现窗体覆

6、盖甚至超出屏幕的问题，同时高和宽的比例应大致保持3:4。1、父窗体或主窗体的中心位置应该在对角线焦点附近；2、子窗体位置应该在主窗体的左上角或正中；3、多个子窗体弹出时应该依次像右下方偏移，以显示窗体出标题为宜，以保证不遮盖上层窗口标题为准，窗口嵌套层次最好不超过3层。4、当父窗体与子窗体都存在同样的查询条件时，父窗体已输入的杏询条件被带到子窗体中;5、当子窗体的操作影响了父窗体的数据时，子窗体的关闭返回必须刷新父窗体数据；6、允许直接关闭父窗体，关闭父窗体必须连同子窗体一起关闭。2.5.1.4操作提示1，预先倍息提示所白.交H进行前需要提供给用户颍先座娜遵的提r带息l2、表单提交类表单提交的

7、步骤，每个表单项的要求需要给出提示信息，如必填项、身份证号码、手机号码要多少位3、谨慎类操作如果不能一个操作导致的结果会涉及到用户利益，都需要预先特别提示，如扣除账号金额等，预先提示扣除金额数目，以及汽前账户金额是否足够等。4, 差异（匕提示当一个，力能的规则勺用户习惯的规蚪法存一，定的差异蜻比较夏条时，需要给出提芋，或者给由帮助链接U注：提示信息用户可勾选不在提示功能，当用户勾选时该提示不在弹出。若某一个表单是对其他数据进行附加的，如结果录人,提交成功后应点接跳转到操作产,生的结果展灰部分U即提交结果后应直接展虹给用户他提交的结果L2.5.1.5提示操作结果确认：确认框：提示信息字体与页面字

8、体保持一致。保持语言的一致性，如”确定”对应”取消是”对应”否”。弹窗提示信息以不遮盖与弹框信息相关页面用户可能需要核对的信息为基本原则，弹框与原信息放在相近的位置,并保证用户的可见旦易操作。如删除或批量操作时再次碰认场景。在提交数据或是载有数据的页面关闭，或其他需要和用户确认的交互场景，需要软件能够提供个以弹出页面形式，要求用户确认执行结果的对话框，包含的情况有：提示确认输入信息正确：弹出对话框并将已填写的内容列出，要求用户确认内容的正确性，给出确定'和取消'的选择按钮；提示确认数据更改是否保存，弹出对话框，提示当前页面内容已经改变，要求用户确认是否保存更改的信息，给出是&#

9、39;和否的选择按钮；提示确认当前页面的跳转：弹出对话框，提示用户正在跳转到另外一个页面，要求用户确认离开当前页面，给出是'和否'的选择按钮；确认删除数据内容：弹出对话框，提示用户删除了当前选择的内容，要求用户确认是否继续删除操作，给出确定'和取消'的选择按钮。确认完毕后，变为通知框。页面信息提示：提示框：所有交互进行中需要提供操作相关的提示：操作确认提示如删除确认提示框，操作通知提示如数据已保存、已删除提示，操作错误提示。这些信息的分类有：警告信息禁止信息操作执行成功信息操作执行失败信息错误信息帮助信息提示信息这些信息在当前页面或弹出页面上显示，如果采用弹出对

10、话框的形式，对话框的页面结构如下图：标题区：简要给出此次提示信息的性质，如警告：非法操作！图标区：给出和此次提示信息性质匹配的图标；提示信息区：给出此次提示信息的具体内容；提示信息中如有标点符号，统一为全角符号；提示信息如有主语，统一为您；提示信息不宜太长，宽度应不超过当前窗口宽度的1/2,当超过此比利时，请视具体情况进行换行，多条信息提示使用1、2、3进行排序。按钮区：给出供用户进行选择的按钮；对应对话框的背景颜色要求和系统的整体风格选取的演示一致，而右上角的操作区只保留关闭这一个可操作功能，最小化和最大化的功能不显示。通知框：常用与确认框和操作框的确认后，通知用户结果，提示信息自页面中上加

11、载,下移到一定区域后悬浮1-3秒后消失。结果信息提示：查询类结果：任何信息列表、查询结果当对应信息无结果返I可的时候需要绐出有无结果状态提示。2.6. 帮助系统应提供详尽可靠的在线帮助文档，在界面右上角可以显示园按钮，点击后加载当前页面的操作文档，可附视频指导，若当前页为首页，则加载整个用户操作手册。同时增加该按钮的隐藏快捷方式F1。要求：帮助文档中的产品功能、性能介绍和说明要与系统性能配套一致；更新系统版本时，对做了修改的部分在帮助文档中要做相应的修改；最好提供目前流行的联机帮助格式或HTML格式；用户可以用关键词在帮助索引中搜索所需要的帮助，因此相应提供帮助索引功能；在帮助中应该提供我们的

12、技术支持方式，一旦用户难以为自己解决可以寻求新的帮助方式，同时也有助于我们搜集用户需求，提升、完善产品。2.7. 图片规范图片在产品中使用的规范，需要定义图片的属性：格式、尺寸、分辨率、内容、表现方式、大小，然后建议在统一的资源库中。同类型图片在不同位置应保持长宽比例的一致，如用户、个人头像。3.总结设计规范不应该成为束缚设计师的缰绳，应该根据工作中的具体需求灵活多变。主要是为了提高工作效率，统一产品风格，统一用户体验，提高网站性能，节约开发成本；规范的制定、执行、“落地”，需要整个团队共同努力遵守，维护更新，人人参与其中。3.1.持续迭代在设计任何产品都不可能-次就完美，在设计交互规范时也需

13、要按照优先级排期。基础的、必要的放在第一期，复合型、复杂的向后放，随着产品的逐渐完善，我们的交互规范也会越来越完整。迭代的时候可以从三个方面入手：1. 每个模块自身的优化。在之前的版本投入使用后可以找用户收集使用反馈，模块是否有用，是否通用，能够提高多少效率，能不能做到直接使用针对反馈意见进行模块优化。2. 丰富模块。将更多内容池中的组件模块规范化。3. 更多应用场景“经过一系列迭代后交互规范可能进入维护阶段，更新频次降低。这时候就需要将其“产品化”，可能是一本白皮书交互设计规范，可能是和视觉样式、前端代码封装组合的前端设计指南，将自己的设计规范扩散到更多领域。1. 概述31.1. 规范目的3

14、1.2. 规范的效益31.3. 适用的人员范围314适用的产品范围31.5.设计原则31.5.1用户为中心31.5.2 一致性3L5.3简洁性41.5.4准确性41.5.5友好性41.5.6操作合理性41.5.7响应时间42. 规范42.1. 用户视觉规范42.1.1分辨率52.1.2 一键换肤5对齐52.2. 导航规范5菜单52.3. 基础控件5字体52.3.1 颜色6按钮62.3.3.1 新增62.3.4输入框72.3.5图标72.4. 界面规范72.4.1布局82.321模板82.3.2.1表单列表102.5. 交互规范112.5.1用户操作规范112.5.1.1快捷键操作11容错性11

15、2.5.1.2 弹窗112.5.1.4操作提示122.5.1.5提示132.6. 帮助142.7. 图片143.总结15153.1.持续迭代1.概述1.1. 规范目的给产品内部的成员提供统一的规范和指导，使得设计人员能形成良好的思考习惯和设计习惯，提高整个产品质量，使操作更加人性化、减轻用户认知负担，改善产品用户体验，提示产品核心竞争力。1.2. 规范的效益规范的效益=提高效率（内容覆盖率X适用性X使用人数）+保障质量+统一体验规范可以帮助个人、团队以及整个企业提高效率和产出质量，保障用户体验统一。1.3. 适用的人员范围参与产品的所有人员。1.4. 适用的产品范围设计原则1.5.1用户为中心

16、明确用户是所有系统处理的核心，所以用户界面应当由用户来控制应如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。1.5.2一致性在相似的场景下应在如下几个方面保持一致性：视觉表现、交互行为、操作结果。即相同属性的元素保持统一，并且在素在不同页血也是一样的。这样可以减少用户学习成本，更快培养用户习惯，也体现了产品设计的严谨。1.5.3简洁性在保证主要业务流程顺利完成的基础上，消减其余不相关的干扰元素，同时精简文字描述，简化操作步骤。多做”减法”运算，将不常用的功能区块隐藏，以保持界面的简洁，使用户专注于主要业务操作流程，有利于提高软件的易用性及可用性。用户常用功能要能做到一键操作

17、，非常用功能可适当隐藏。注：后续研发完成后需重点关注这一块进行主体业务流程优化。可进行后台统计用户操作的按钮次数以便于后续开展用户行为分析。1.5.4准确性显示信息的含义应该非常明确，用户不必再参考其它信息源。显示有意义的出错信息，而不是单纯的程序错误代码。1.5.5友好性用户基本不用查阅帮助就能知道该界面的功能并进行相关正确的操作。要使用相关的专业术语，使用用户常用词汇、行业术语，而不是单纯的专业计算机术语。1.5.6操作合理性尽池确保用户在不使用鼠标（只使用键盘）的情况下也可以流畅地完成一些常用的业务操作，各控件间可以通过Tab键进行切换，并将可编辑的文本全选处理。查询检索类页面，在查询条

18、件输入框内按回车应该自动触发查询操作。在进行一些不可逆或者删除操作时应该有信息提示用户，并让用户确认是否继续操作，必要时应该把操作造成的后果也告诉用户。信息提示窗口的”确认”及”取消”按钮需要分别映射键盘按键V和”N”。控件避免使用鼠标双击动作，不仅会增加用户操作难度，还可能会引起用户误会，认为功能点击无效。表单录入页面，需要把输入焦点定位到第一个输入项。用户通过Tab键可以在输入框或操作按钮间切换，并注意Tab的操作应该遵循从左向右、从上而下的顺序。（如果允许的话）以及在不退出系统的情况下从错误状态中恢复。1.5.7响应时间系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时

19、间过快也会影响到用户的操作节奏，并可能导致错误。因此在系统响应时间上坚持如下原则：2-5秒窗口显示处理信息提示，避免用户误认为没响应而重复操作；5秒以上显示处理窗口，保存等待及提示或显示进度条；一个长时间的处理完成时应给予完成警告信息。尽量保证所有页面响应时间不超过5秒。2.规范根据产品阶段初步判断需要主要产出基础型。2-1-用户视觉规范用户视觉规范以UI规范为准，本文只做适当补充。1、在设计时需要充分考虑布局的合理化问题，遵循用户从上而下，自左向右浏览、操作习惯，避免常用业务功能按键排列过于分散，以造成用户鼠标移动距离过长的弊端。2、绝对要避免水平滚动条；3、不要设计太长的页面，用户的注意范

20、围是有限的，减少需要输入的字数，避免上下滚动条，但是滚动优于翻页，如果有太长的表单，还是设计成滚动页面更合理些；4、在不同的分辨率下应该充分考虑到人机交互的规律，方便阅读者阅读，同时我们还要考虑到残障人士的阅读需要，比如文字和图形在需要的时候可以放大。2.1.1分辨率目前主流分辨率1366*768默认此页面为产品最佳页面效果，产品支持的最低分辨率为1024*768,最高分辨率为1920*1080;严禁不同的分辨率界面元素比例失调，如图标、按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。2.1.2一键换肤页面风格的选取除了需要考虑一般的用户感受外，还需要将用户所在环境的因素考虑进行，从而

21、形成符合特定用户要求的页面风格，达到键换肤效果，用户可以选择产品推荐的皮肤。换肤后除颜色外，其他元素也需要跟着一起变化。目前产品面向的客户主要包括全科、中医、妇幼等民营医疗机构，建议第-阶段做2-3种换肤效果。2.1.3对齐保持页面内元素对齐方式的一致，如无特殊情况应避免同一页面出现多种数据对齐方式。22导航规范2.2.1菜单保持菜单简洁性及分类的准确性，避免菜单深度超过3层；菜单钱的图标不宜太大，与菜单名高度保存一致；主菜单的宽度要接近，字数不应超过4个字；主菜单数目不应太多，最好为单排布置；未完成功能必须隐藏处理，不要置于页面内容中，以免引起误会；不常规的链接或导航，点击时应给出提示信息，

22、如产logo,鼠标移入时应悬浮返回首页o2.3.基础控件2.3.1字体详见UI规范。补充：目前不考虑多语言包的功能，所有菜单、标题等均为中文。文本输入自带自动排版功能，允许用户人工干预分段。不同语种的文字之间应该有一个半角空格，汉字之间的标点要全用全角符号，英文和数字周围的括号用半角。文字默认无下划线。同一层级、页面的姿态必须保持一致，如标题、表头、菜单、tab页签等字体大小、字数的长短都一定要有规范，最好不超过三种规格。（UI规范）2.3.2颜色详见ui规范2.3.3按钮文本录入框提示信息应简明扼要，键入后消失。按钮依据重要程度可以分为几个层级，同-层级、页面的按钮颜色、大小必须致，不同页面

23、的按钮可以根据按钮名称的长短进行调整，按钮大小给2个字的、4个字、6个字的宽度规范，如果同一个页面都是2个字的内容用第一种；如果出现4个字的用第二种；出现5、6个字的用第三种。（UI规范）保持功能及内容描述一致-避免同一功能描述使用多个词汇，如编辑和修改，新增和增加、新建，删除、作废、注销和清除混用等。建议在项目开发阶段建立一个产品词典，包括产品中常用术语及描述，设计或开发人员严格按照产品词典中的术语词汇来展示文字信息。使用统的语言描述，例如个关闭功能按钮，不可以描述为退出、返回、关闭，则应该统一规定为关闭。确认操作按钮放置左边，取消或关闭按钮放置于右边。所有按钮按照右对齐方式从右向左排序。同

24、一界面相同或相近功能的按钮用Frame框起来，同一界面同一功能或任务的元素放在集中位置，减少鼠标移动的距离。常用按钮要支持快捷方式。容易误操作或是程序退出、关闭的按钮应不醒目，放在不易点的位置。在描述按钮状态时候按照默认状态、触发（激活态）、操作反馈、异常状态-禁用和报错、其他样式。2.3.3.1新增当新增一条记录或多条记录时新增的记录必须排在首页首行，提交失败后必须保存用户已经输入的内容，以便再次提交。提交时需要对主要标识字段进行重复值、空值（空格）判断。23.3.2修改勾选多条记录进行修改时，若点击修改，而非批量修改，则只能对条记录进行修改，默认修改第一条记录进行修改；提交失败后必须保存用

25、户已经输入的内容，以便再次提交。提交时需要对主要标识字段进行重复值、空值（空格）判断。23.3.3删除当删除一条或多条记录时，不要有确认删除的提示信息，删除成功后刷新，不显示删除的记录；删除成功后返回到原记录所在页面，如果原记录所在页不存在时返回上页；当被删除的记录与其他记录存在关联时，弹出提示界面提醒不能删除以及更明细的提示信息，或者弹出确认界面是否要删除该记录以及关联记录（不建议）查询每次查询后保留当前查询条件，当查询条件较多时，需要配置重置按钮提供使用；汽为查询到任何记录是，需要给未查找到相关记录的提示信息；需要提供模糊查询及组合查询功能。2.3.3.4 关闭当页面关闭时需要进行页面项判

26、断，如有变动则给予提示；关闭后返回到父页面。23.3.6保存保存进程需要2-5秒窗口显示处理信息提示，避免用户误认为没响应而重复操作;5秒以上显示处理窗口，保存等待及提示或显示进度条；一个长时间的处理完成时应给予完成警告信息。2.3.3.7重置重置后与初始进入此页面时保持一致。2.3.4输入框可输入控件检测到非法输入后应给出说明并能保存时自动获得焦点；复选框和选项框按选择几率的高低而先后排列；复选框和选项框要有默认选项，并支持Tab选择，Enter确认；输入框限制：只允许输入数字、日期、时间的输入框请给予限制或格式化，邮箱地址需要包含”，而不是输入其他字符后给予提示，甚至没有提示，在用户输入有

27、误时给出明确提示；当输入的内容达到字段长度限制时，请控制不允许输入，而不是保存时给提示，甚至保存后自动截断；对非法字符的控制，限制不可输入或者提交时给予提示，如等；界面打开时默认鼠标键入第一个可输入框；必填项旁边给出醒目标识(*)；提供默认值、若不能提供默认值，则默认为请选择'，当控件获得焦点时，需要将输入框内的文字处于全选状态，如5I二;绝不要让用户提供程序中可自动获取或计算出来的信息，如BMI、价格策略等；多行文本如备注需要显示剩余能输入的字数说明，且文字是黑色的，数字是红色的。2.3.5图标同一种图标在不同页面必须保持完全一致，但尺寸可以放大或是缩小；所有图标必须配有文字主题，如需要隐藏文字主题，则需要增加鼠标悬浮时的文字主题效果。菜单展开时明确当前用户操作的是哪个菜单，对于用户当前所在的菜单需要通过特定的视觉样式或状态加以区分。如下图：特点：功能可见性、操作直接。Xn四Ii_款曲电祝|2.4.界面规范长宽接近黄金点比例，切忌R宽比例失调、或宽度超过长度。界面风格要保持致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。若控件因为放大和缩小导致