系统界面标准及规范讲述

界面总体设计原则界面设计的中心是用户,我们要做的是提供给用户可操作性强的界面,而不是由界面来操作用户;界面是系统与用户交互的媒介,友好的界面设计,不但可以给用户以良好的视觉感官,而且可以提供给用户简易、规范的交互过程,从而引导用户逐渐形成良好的操作习惯,提高用户操作系统的效率;;•尽可能减少在动作间需记忆的信息数量;•合理的界面大小,高效利用显示器;3、界面交互人性化人性化的界面交互,让用户使用起来得心应手;我们做到的良好的人机交互,包括很多方面;我们经过长期的调研和努力,从适应性、有效性、易学习性、用户满意度几个方面出发来设计界面,做到更好更方便的人机交互;•窗口弹出位置明显;让用户轻松中转至新的界面;•出错信息及警告;出错信息是指出现问题时系统给出的提示,用来提醒用户应该做的正确操作;•执行动作提示;界面作为人机对话的工具,用户做了任何动作,我们会给您一个视觉或听觉提示,让您更加放心的使用我们提供的每一个功能;•联机帮助;安装系统的同时,系统自动为您提供帮助文档,方便您的前期使用和查阅;每个非全屏窗口都有一个关闭按钮,和功能按钮一样放在最下面一行,最后的位置;•表格表格内部无边框,外侧边框为浅蓝色6699CC,表头背景色739AE0,奇数行背景色F8F8FF,偶数行背景色E9F2FB;对于不带分页导航条的表格,要增加竖滚条,来使页面的布局稳定;•分页导航条和表格配合使用,放在表格下方,有当前页码、总页数、总记录数、首页、上一页、下一页、末页、跳转到指定页;•弹出框使用统一的样式,有标题,有边框,有背景色,居中显示弹出框;•日期选择使用统一的日期选择图片按钮,日期选择控件要求可以快速选择日期;•上移、下移、左移、右移按钮使用统一的按钮样式,操作的逻辑要统一;•文件选择按钮使用统一的文件选择图片按钮;•不能编辑的输入框背景色统一为灰色;。

系统界面标准及规范---优化版系统界面标准及规范 V1.0深圳市艾姆诗数码科技有限公司2017.05目录1. 规范说明----------------------------------- 61.1 目的---------------------------------- 61.2 原则---------------------------------- 62. 界面设计理念------------------------------- 72.1 易用性-------------------------------- 72.2 安全性-------------------------------- 82.3 美观与协调性-------------------------- 92.4 一致性------------------------------- 142.5 效率--------------------------------- 182.6 容错性------------------------------- 193. 控件通用规范------------------------------ 203.1 默认值------------------------------- 203.2 必填项------------------------------- 223.3 提示语------------------------------- 253.4 界面传递----------------------------- 283.5 输入框------------------------------- 293.6 新增--------------------------------- 32 3.7 编辑--------------------------------- 33 3.8 删除--------------------------------- 341.规范说明1.1目的以用户为中心，将用户体验细化到具体的可执行的要求，建立界面设计理念及界面布局的通用规则及要求，提升系统公用组件复用度及用户体验，从而提高用户工作效率。

系统界面设计规范标准B/S 系统界面设计规1.引言界面美观、操作易用性、维护成本低是评价B/S系统的关键。

本规参考了一些成熟产品科学的开发方法，将开发过程中的方式、规则等强行的约束。

希望藉此来提高用户操作感受，提升B/S产品的质量。

1.1. 编写目的广义的界面概念包含了除页面布局设计之外，交互性的设计，及人体工程学方面的研究。

本规制订的依据从广义概念出发，总结以往项目的成败经验，目的是从整体上提升公司B/S 类产品的质量、开发效率。

从以技术为中心发展为以客户为中心，将类似项目成功的经验继承和积累下来，将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层面。

新的开发方式强调分层，规出界面设计人员做什么，服务器编程人员做什么，这样就把页面和控制代码两个层面清晰的分开。

1.2. 背景B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点，在公司产品线中占越来越大的比重，.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工程方法统一起来，突出服务器端技术，这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作，团队的合作方式甚至决定了一个系统开发的成败。

目前公司较多的服务器端编程人员仍然处于“后ASP 时代”的开发方式，表现为前台页面仍然与服务器代码高度的关联，带来的后果是重复建设、高昂的维护成本或失去控制的项目，没有充分的发挥出集成开发工具的优势。

在以往的开发方式下界面设计侧重在静态页面的建设上，每个页面作为一个独立的模块来处理，在页面交互中则是程序员根据自己的习惯来控制，程序对个人的编程风格的依赖很强，这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的，甚至是背道而弛的，当然也不利于规模化的团队合作。

1.3. 定义术语定义：效果图：由界面设计人员设计的页面效果图，综合了概要设计的业务需要和整个站点的风格，它规定了页面布局上的每个细节。

营销系统UI规范说明对于整个系统来说，无论是在控件使用，提示信息措辞，还是在颜色、窗口布局风格，都必须遵循统一的标准，做到真正的一致。

这样得到的好处：首先使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神。

其次能够降低培训、支持成本，支持人员不会花费力气逐个指导。

再次能够给用户统一感觉，不觉得混乱，心情愉快，支持度增加。

因此该规范将给出系统在设计开发过程中的UI设计的准则。

具体包括以下几个部分：一、(Color)颜色1、统一色调，采用标准Windows的基本色调，做到与操作系统统一，读取系统标准色表。

2、整个界面色彩尽量少的使用类别不同的颜色。

除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。

3、同时色调也具有一定的含义，在整个系统中应保持色调含义的一致性，避免同一中颜色在不同的画面中表示不同的意义。

二、(Resource)资源计算机的资源包括图标资源和鼠标光标资源等。

1、图标资源也需要遵循统一的规则，因为不同的图标代表不同的意义。

例如：我们用图标来表示保存，因此我们在整个系统中只要涉及到保存的话,都应该使用同一个图标，不论是用在工具栏上还是在菜单上,还是在按钮上。

2、图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出默认奇妙的图案。

3、鼠标光标样式统一，使用系统标准。

注意：本系统中不采用窗体做进度条，对于点击按钮后，鼠标变成沙漏形状，执行完成后, 鼠标变回。

三、(Font)字体1、本系统中中文一律采用标准字体“宋体”，英文一律采用标准 Microsoft SansSerif ，原则上不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。

2、字体大小统一规定，例如 MSS字体8磅，宋体的小五号字（9磅）。

字体颜色一般采用系统默认颜色。

3、所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况。

UI设计(流程/界面)规范一：UI设计基本概念与流程1.1 目的规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。

1.2范围l 界面设计l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。

1.3 概述UI设计包括交互设计，用户研究，与界面设计三个部分。

基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。

UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。

本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。

1.4 基本介绍A、需求阶段软件产品依然属于工业产品的范畴。

依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。

所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。

什么地方用（在办公室/家庭/厂房车间/公共场所）。

如何用（鼠标键盘/遥控器/触摸屏）。

上面的任何一个元素改变结果都会有相应的改变。

除此之外在需求阶段同类竞争产品也是我们必须了解的。

同类产品比我们提前问世，我们要比他作的更好才有存在的价值。

那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。

我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。

通过分析上面的需求，我们进入设计阶段。

也就是方案形成阶段。

我们设计出几套不同风格的界面用于被选。

C、调研验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。

测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。

UI设计(界面)标准规范UI设计（用户界面设计）是指针对人机交互，设计安排各种功能模块和信息元素，进行合理布局，使用户可简单、直接、高效地使用诸如网站、软件、游戏等应用系统的界面设计。

UI设计界面的标准规范主要是为了确保用户可以直接理解用户界面设计。

本文将为您介绍一些UI设计界面的标准规范。

1、视觉设计UI设计视觉设计是一个很重要的环节，包括颜色、图片、字体的选择，以及各种设计元素的定义等。

UI设计的颜色设计应尽量遵循配色原则，不过分使用过于鲜艳或暗淡的颜色。

图片的选择应该是高质量、清晰的图片，能够吸引用户目光。

字体的选择应该是清晰、易读的字体，注重排版和字号的搭配，确保内容的易读性和视觉效果。

2、布局设计UI设计布局设计要求布局合理，页面整洁。

布局的形状应选择合适的几何形状，避免过多的复杂线条和图形。

在内容排版上，应该注意文字与图片之间的搭配和间距的设置，以及网页设计时应该遵循“三秒原则”，让用户能够在三秒内理解页面的主要内容。

3、导航设计UI设计导航设计要求导航栏清晰、明确。

导航栏位置应该在页面的顶部、左侧或右侧，导航栏元素排布应该尽量简化，避免使用过多，多余的导航元素。

导航栏中的元素应该按照其在网站中的内容层级和页面优先级划分，描绘网站的主线和次线。

导航栏中的字体要尽可能的易读，重要元素要有显著的区别。

4、表单设计UI设计表单设计应该侧重于用户体验、易用性和准确性。

表单中的每个字段应该有清晰的标签和容易理解的提示信息，应该感知到如何填写每个字段的目的。

在表单中使用输入提示作为默认字段值，可以增强用户体验。

表单填写结束后，应该启用表单验证，确保表单填写的准确性。

5、交互设计UI设计交互设计的目的在于使用户能够易于理解设计，使用户可以轻松完成任务。

对于用户交互设计的要求，应该尽量避免重复交互，确保确认和撤销等操作的明确性和易用性。

对于页面和功能的动效设计，应该根据页面的主要功能和用户预期的反应，不过分使用多余的动效和动画，以及在页面切换时适度减缓动效，确保用户操作的顺畅性和流畅性。

B/S 系统界面设计规1. 引言界面美观、操作易用性、维护成本低是评价B/S系统的关键。

本规参考了一些成熟产品科学的开发方法，将开发过程中的方式、规则等强行的约束。

希望藉此来提高用户操作感受，提升B/S产品的质量。

1.1. 编写目的广义的界面概念包含了除页面布局设计之外，交互性的设计，及人体工程学方面的研究。

本规制订的依据从广义概念出发，总结以往项目的成败经验，目的是从整体上提升公司B/S类产品的质量、开发效率。

从以技术为中心发展为以客户为中心，将类似项目成功的经验继承和积累下来，将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层面。

新的开发方式强调分层，规出界面设计人员做什么，服务器编程人员做什么，这样就把页面和控制代码两个层面清晰的分开。

1.2. 背景B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点，在公司产品线中占越来越大的比重，.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工程方法统一起来，突出服务器端技术，这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作，团队的合作方式甚至决定了一个系统开发的成败。

目前公司较多的服务器端编程人员仍然处于“后ASP 时代”的开发方式，表现为前台页面仍然与服务器代码高度的关联，带来的后果是重复建设、高昂的维护成本或失去控制的项目，没有充分的发挥出集成开发工具的优势。

在以往的开发方式下界面设计侧重在静态页面的建设上，每个页面作为一个独立的模块来处理，在页面交互中则是程序员根据自己的习惯来控制，程序对个人的编程风格的依赖很强，这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的，甚至是背道而弛的，当然也不利于规模化的团队合作。

1.3. 定义术语定义：效果图：由界面设计人员设计的页面效果图，综合了概要设计的业务需要和整个站点的风格，它规定了页面布局上的每个细节。

容器：即HTML 标记的嵌套结构，如在表格->行->单元格放置图片，那么可以认为单元格是放置图片的容器。

ui设计标准
UI设计标准。

UI设计，即用户界面设计，是指在软件、应用程序或者网站中，用户与系统之间进行交互时所设计的界面。

良好的UI设计可以提高
用户体验，增加用户粘性，因此UI设计标准显得尤为重要。

首先，UI设计应该符合用户习惯。

在设计界面时，应该考虑到
用户的操作习惯和心理预期，让用户在使用过程中能够得心应手，
提高使用效率。

比如，常见的返回按钮应该放在左上角，搜索框应
该放在显眼的位置等等。

其次，UI设计要求简洁明了。

过于复杂的界面会让用户感到困惑，降低用户体验。

因此，UI设计应该尽量简洁明了，避免过多的
装饰和冗余的信息，突出主要功能，提高用户的使用效率。

再次，UI设计需要考虑到不同设备的适配。

随着移动设备的普及，UI设计需要能够适配不同大小的屏幕，保证在不同设备上都能
够有良好的显示效果，提高用户体验。

另外，UI设计需要注重色彩搭配和排版规范。

色彩搭配要符合品牌形象，同时要考虑到色盲用户的使用，避免出现色彩对比不明显的情况。

排版规范要求文字清晰易读，避免出现过小或者过大的字体，保证用户能够舒适地阅读内容。

最后，UI设计需要注重交互细节。

交互细节包括按钮的反馈、动画效果、页面切换等等，这些细节可以让用户感受到产品的质感和品质，提高用户体验。

综上所述，良好的UI设计标准应该符合用户习惯，简洁明了，适配不同设备，注重色彩搭配和排版规范，以及注重交互细节。

只有这样，才能够设计出优秀的用户界面，提高用户体验，吸引更多用户使用。

Windows程序界面设计规范Windows程序界面设计规范为了使公司的软件产品具有美观的界面，避免不必要的返工，保证产品开发质量和开发效率，特制定本界面设计规范。

本规范从易用性、规范性、帮助设施、合理性、美观与协调性、菜单位置、独特性、快捷方式的组合、安全性共九个方面对界面设计加以规范。

要求产品开发人员、测试人员都按照本设计规范进行界面设计和测试。

一、易用性：按钮、菜单名称应该易懂，用词准确，摒弃模棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。

理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则：1)完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。

2)完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。

3)按功能将界面划分局域块，用Frame框括起来，并要有功能说明或标题。

4)界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。

5)界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前，位置也应放在窗口上较醒目的位置。

6)同一界面上的控件数最好不要太多，太多时可以考虑使用分页界面显示。

7)分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab8)默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。

9)可写控件应作非法输入检测，非法输入检测应在点击确认按纽后统一进行，检测到非法输入后应给出说明并能自动获得焦点。

避免在可写控件焦点离开时进行非法检测。

10)Tab键的顺序与控件排列顺序要一直，总体从上到下，同时行间从左到右的方式。

11)复选框和选项框按选择几率的高底而先后排列。

12)复选框和选项框要有默认选项，并支持Tab选择。

13)选项数相同时多用选项框而不用下拉列表框。

14)界面空间较小时使用下拉框而不用选项框。

15)选项数据较少时使用选项框，相反使用下拉列表框。

16)专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。

系统界面设计规范界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。

而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。

同时界面如同人的面孔，具有吸引用户的直接优势。

设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。

目前界面的设计引起软件设计人员的重视的程度还远远不够，直到最近网页制作的兴起，才受到专家的青睐。

我们的界面设计遵循以下基本原则：1、易用性按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。

理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则：1):完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。

2):完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。

3):按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。

4):Tab键的顺序与控件排列顺序要一致，目前流行总体从上到下，同时行间从左到右的方式。

5):复选框和选项框按选择几率的高底而先后排列。

6):界面空间较小时使用下拉框而不用选项框。

7):选项数较少时使用选项框，相反使用下拉列表框。

8):专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。

2、规范性通常界面设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。

规范性细则：1):状态条要能显示用户切实需要的信息，常用的有：目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。

2)：状态条的高度以放置五号字为宜，滚动条的宽度比状态条的略窄。

3、帮助系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。