产品UE设计规范Word文档格式.docx

产品UE设计规范Word文档格式.docx

《产品UE设计规范Word文档格式.docx》由会员分享，可在线阅读，更多相关《产品UE设计规范Word文档格式.docx（16页珍藏版）》请在冰豆网上搜索。

视觉表现、交互行为、操作结果。

即相同属性的元素保持统一，并且在素在不同页面也是一样的。

这样可以减少用户学习成本，更快培养用户习惯，也体现了产品设计的严谨。

1.5.3简洁性

在保证主要业务流程顺利完成的基础上，消减其余不相关的干扰元素，同时精简文字描述，简化操作步骤。

多做"

减法"

运算，将不常用的功能区块隐藏，以保持界面的简洁，使用户专注于主要业务操作流程，有利于提高软件的易用性及可用性。

用户常用功能要能做到一键操作，非常用功能可适当隐藏。

注：

后续研发完成后需重点关注这一块进行主体业务流程优化。

可进行后台统计用户操作的按钮次数以便于后续开展用户行为分析。

1.5.4准确性

显示信息的含义应该非常明确，用户不必再参考其它信息源。

显示有意义的出错信息，而不是单纯的程序错误代码。

1.5.5友好性

用户基本不用查阅帮助就能知道该界面的功能并进行相关正确的操作。

要使用相关的专业术语，使用用户常用词汇、行业术语，而不是单纯的专业计算机术语。

1.5.6操作合理性

尽量确保用户在不使用鼠标（只使用键盘）的情况下也可以流畅地完成一些常用的业务操作，各控件间可以通过Tab键进行切换，并将可编辑的文本全选处理。

查询检索类页面，在查询条件输入框内按回车应该自动触发查询操作。

在进行一些不可逆或者删除操作时应该有信息提示用户，并让用户确认是否继续操作，必要时应该把操作造成的后果也告诉用户。

信息提示窗口的"

确认"

及"

取消"

按钮需要分别映射键盘按键"

Y"

和"

N"

。

控件避免使用鼠标双击动作，不仅会增加用户操作难度，还可能会引起用户误会，认为功能点击无效。

表单录入页面，需要把输入焦点定位到第一个输入项。

用户通过Tab键可以在输入框或操作按钮间切换，并注意Tab的操作应该遵循从左向右、从上而下的顺序。

（如果允许的话）以及在不退出系统的情况下从错误状态中恢复。

1.5.7响应时间

系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影响到用户的操作节奏，并可能导致错误。

因此在系统响应时间上坚持如下原则:

2-5秒窗口显示处理信息提示，避免用户误认为没响应而重复操作;

5秒以上显示处理窗口，保存等待及提示或显示进度条;

一个长时间的处理完成时应给予完成警告信息。

尽量保证所有页面响应时间不超过5秒。

2.规范

根据产品阶段初步判断需要主要产出基础型。

2.1.用户视觉规范

用户视觉规范以UI规范为准，本文只做适当补充。

1、在设计时需要充分考虑布局的合理化问题，遵循用户从上而下，自左向右浏览、操作习惯，避免常用业务功能按键排列过于分散，以造成用户鼠标移动距离过长的弊端。

2、绝对要避免水平滚动条；

3、不要设计太长的页面，用户的注意范围是有限的，减少需要输入的字数，避免上下滚动条，但是滚动优于翻页，如果有太长的表单，还是设计成滚动页面更合理些；

4、在不同的分辨率下应该充分考虑到人机交互的规律，方便阅读者阅读，同时我们还要考虑到残障人士的阅读需要，比如文字和图形在需要的时候可以放大。

2.1.1分辨率

目前主流分辨率1366*768默认此页面为产品最佳页面效果，产品支持的最低分辨率为1024*768，最高分辨率为1920*1080；

严禁不同的分辨率界面元素比例失调，如图标、按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。

2.1.2一键换肤

页面风格的选取除了需要考虑一般的用户感受外，还需要将用户所在环境的因素考虑进行，从而形成符合特定用户要求的页面风格，达到一键换肤效果，用户可以选择产品推荐的皮肤。

换肤后除颜色外，其他元素也需要跟着一起变化。

目前产品面向的客户主要包括全科、中医、妇幼等民营医疗机构，建议第一阶段做2-3种换肤效果。

2.1.3对齐

保持页面内元素对齐方式的一致，如无特殊情况应避免同一页面出现多种数据对齐方式。

2.2.导航规范

2.2.1菜单

保持菜单简洁性及分类的准确性，避免菜单深度超过3层；

菜单钱的图标不宜太大，与菜单名高度保存一致；

主菜单的宽度要接近，字数不应超过4个字；

主菜单数目不应太多，最好为单排布置；

未完成功能必须隐藏处理，不要置于页面内容中，以免引起误会；

不常规的链接或导航，点击时应给出提示信息，如产品logo，鼠标移入时应悬浮‘返回首页’。

2.3.基础控件

2.3.1字体

详见UI规范。

补充：

目前不考虑多语言包的功能，所有菜单、标题等均为中文。

文本输入自带自动排版功能，允许用户人工干预分段。

不同语种的文字之间应该有一个半角空格，汉字之间的标点要全用全角符号，英文和数字周围的括号用半角。

文字默认无下划线。

同一层级、页面的姿态必须保持一致，如标题、表头、菜单、TAB页签等字体大小、字数的长短都一定要有规范，最好不超过三种规格。

（UI规范）

2.3.2颜色

详见UI规范

2.3.3按钮

文本录入框提示信息应简明扼要，键入后消失。

按钮依据重要程度可以分为几个层级，同一层级、页面的按钮颜色、大小必须一致，不同页面的按钮可以根据按钮名称的长短进行调整，按钮大小给2个字的、4个字、6个字的宽度规范，如果同一个页面都是2个字的内容用第一种；

如果出现4个字的用第二种；

出现5、6个字的用第三种。

保持功能及内容描述一致 

-避免同一功能描述使用多个词汇，如编辑和修改，新增和增加、新建，删除、作废、注销和清除混用等。

建议在项目开发阶段建立一个产品词典，包括产品中常用术语及描述，设计或开发人员严格按照产品词典中的术语词汇来展示文字信息。

使用统一的语言描述，例如一个关闭功能按钮，不可以描述为退出、返回、关闭，则应该统一规定为关闭。

确认操作按钮放置左边，取消或关闭按钮放置于右边。

所有按钮按照右对齐方式从右向左排序。

同一界面相同或相近功能的按钮用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秒窗口显示处理信息提示，避免用户误认为没响应而重复操作;

2.3.3.7重置

重置后与初始进入此页面时保持一致。

2.3.4输入框

可输入控件检测到非法输入后应给出说明并能保存时自动获得焦点；

复选框和选项框按选择几率的高低而先后排列；

复选框和选项框要有默认选项，并支持Tab选择，Enter确认；

输入框限制：

只允许输入数字、日期、时间的输入框请给予限制或格式化，邮箱地址需要包含"

@"

，而不是输入其他字符后给予提示，甚至没有提示，在用户输入有误时给出明确提示；

当输入的内容达到字段长度限制时，请控制不允许输入，而不是保存时给予提示，甚至保存后自动截断；

对非法字符的控制，限制不可输入或者提交时给予提示，如》《》‘’等；

界面打开时默认鼠标键入第一个可输入框；

必填项旁边给出醒目标识（*）;

提供默认值、若不能提供默认值，则默认为‘请选择’，当控件获得焦点时，需要将输入框内的文字处于全选状态，如

；

绝不要让用户提供程序中可自动获取或计算出来的信息，如BMI、价格策略等；

多行文本如备注需要显示剩余能输入的字数说明，且文字是黑色的，数字是红色的。

2.3.5图标

同一种图标在不同页面必须保持完全一致，但尺寸可以放大或是缩小；

所有图标必须配有文字主题，如需要隐藏文字主题，则需要增加鼠标悬浮时的文字主题效果。

菜单展开时明确当前用户操作的是哪个菜单，对于用户当前所在的菜单需要通过特定的视觉样式或状态加以区分。

如下图：

特点：

功能可见性、操作直接。

2.4.界面规范

长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。

界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。

如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；

切忌只放大窗体而忽略控件的缩放。

若控件因为放大和缩小导致失真，则需要进行约束，如按钮、输入框等已经明确长宽的控件，不支持放大和缩放。

系统对话框只支持关闭，不支持缩放。

通常父窗体支持缩放时，子窗体没有必要缩放。

2.4.1布局

2.3.2.1模板

可根据需要设定固化站点每页都出现的元素，通过利用模板快速创建WEB页，可使整个站点具有统一的风格。

页面布局以骨骼型为主，这种板式给人以和谐、理性的美，既理性、条理、又活波而富有弹性。

页面典型风格又包括树表，树表卡，树卡，表卡，单表，单卡几种。

在页面布局中，对各个功能区域的切分是按照像素和比例方式来进行的，以1366*768的分辨率为基准，其中：

顶部区，宽度是按照比例方式设置的，宽度按照100%设置，高度采样所占的固定像素值来确定的；

导航区和顶部区的配置要求是一样的，宽度按照100%设置，高度结合顶部区的高度确定；

树形菜单区宽度是结合与内容区之间的黄金比例切分，按照固定像素的方式确定；

内容区，高度和宽度方向布局都是按照比例方式来设置的。

宽度定义：

采用百分比定义页面宽度（单位：

%）:

采用%百分比设定页面宽度时，可以随着浏览器宽度的改变而改变。

在制作过程中一定要考虑好页面内容的表现，要做到内容在不同宽度浏览器中显示时布局要整齐、内容排版比例协调。

采用固定值定义页面宽度（单位：

px）:

用固定值设定页面宽度时，随着浏览器宽度的改变但内容不会改变。

分辨率自适应：

现在采用宽屏分辨率的显示器越来越多，