UI设计规范说明书
前端UI设计规范制定指导手册
前端UI设计规范制定指导手册一、引言UI设计是前端开发过程中不可或缺的环节，它直接影响着用户对网站或应用的体验感受。
为了保证设计的一致性和高效性，制定UI设计规范是必要的。
本指导手册旨在提供前端UI设计规范的制定指南，帮助团队成员在设计过程中遵循一致的标准和流程，提高设计效率及用户体验。
二、设计原则1. 一致性与统一性在整个项目中保持一致的设计风格和界面元素使用，从而形成统一的用户体验。
2. 可读性与可理解性界面元素的设计应当简洁明了、易于理解和操作，避免过多干扰和复杂性。
3. 可访问性与可用性设计应当考虑到不同用户群体的视觉和操作习惯，保证在不同设备和浏览器中的可用性和可访问性。
4. 响应式布局与适应性前端设计应兼顾不同屏幕尺寸和设备，实现响应式布局和适应性，提供良好的用户体验。
三、设计规范1. 布局规范- 使用栅格系统进行布局，确保页面元素的有序排列。
- 保持页面布局的稳定，避免出现错位或错乱的现象。
2. 颜色规范- 使用符合品牌形象及项目定位的主色调。
- 配色应搭配明暗相间的色调，保证页面整体的视觉效果和质感。
- 避免使用过于鲜艳刺眼的颜色，以免影响用户体验。
3. 字体规范- 使用适合屏幕阅读的字体，保证文字清晰可读。
- 设置合适的字号和行距，避免文字过小或过大，影响用户阅读体验。
- 使用字体的粗细和颜色来强调重要信息和层次。
4. 图标规范- 使用矢量图标，保证在不同分辨率下的显示清晰度。
- 图标的颜色和尺寸应和整体设计风格相一致。
5. 按钮规范- 按钮样式应当统一，包括大小、形状、边框和颜色等。
- 按钮文案应当简洁明了，表示按钮功能的动词，增强交互可懂性。
6. 表单规范- 表单元素的样式应当一致，包括输入框、下拉框、单选框和复选框等。
- 表单的布局应符合用户习惯，便于用户填写和提交。
7. 图片规范- 图片应当具有高分辨率和清晰度，避免模糊或失真的现象。
- 图片的尺寸和比例应当符合页面布局的要求，保持页面美观和平衡。
UI设计规范
UI设计规范（注：各小组意见相左时，需向上级汇报。
）一、关于B/S架构系统、后台UI设计（亦应用于网页制作，风格根据需求而定）1.团队一起设计，先共同完成一个模板，再根据模板设计该系统的其他界面2.字体规范：（文字用系统自带的常规字体）(1)web常规中文字体：黑体，正文字号14px，导航及菜单字体16px（可视情况而定）(2)ios/mac字体：pingfang sc (平方)3.设计尺寸：（常规如下，可视情况而定）1920px 分辨率72px4.排版布局区块应尽量等分，使等分后的数值为偶数值5.系统、后台类有表单的界面，需做分页设计、6.切图规范：命名规范统一，切图大小保存一致（如菜单图标，按最大的icon尺寸切图）7.同套系统，不同界面风格需保持一致。
效果图命名需排序，方便查找8.文件：效果图（不同模块分文件夹）、素材、切图、源文件、线框图（视情况而定）9.设计后需出设计规范，如鼠标经过、点击效果，方便前端调试二、关于APP的UI设计1.字体规范：（文字用系统自带的常规字体）（1）Android字体：思源黑体(或者其他)（2）Ios字体：pingfang sc (苹方)2.设计尺寸：(1)Android：一般用1080px*1920px设计(2)Ios：一般用iPhone6尺寸750px*1334px设计（启动页通用尺寸1125px*2436px、1242px*2208px、750px*1334px、640px*960px、640px*1136px）3.排版布局：(1) 分辨率72px（网页和UI都是72dpi，打印则需300dpi）色彩模式RGB，常用的全局边距有32px、30px、24px、20px(2) 排版布局区块应尽量等分，使等分后的数值为偶数值4.切图说明：(1) 文件：文件要包括：image、效果图+标注图（根据实际情况而定）(2) 注意事项：不要出现大写、不要有中文、特殊符号及空格、同类切图大小一致5.图标说明：通用图标尺寸16X16px、24X24px、48X48px、64X64px、100X100px（其他尺寸按实际项目应用）建立统一风格的图标。
UI设计规范说明书
UI设计规范说明书修订历史记录日期版本说明作者1前言1.1文档简介本文档是对整个系统界面设计风格进行描述，和用户交互的最终界面在《详细设计说明书》中设计和解释。
1.2系统定义用户界面：又称人机界面，实现用户与计算机之间得通信，以控制计算机或进行用户和计算机之间得数据传送得系统部件。
GUI：即图形用户界面，一种可视化得用户界面，它使用图形界面代替正文界面。
1.3编写目的统一图形界面规范，为开发人员提供统一的标准，为用户提供统一显示效果、统一操作方式的界面，便于用户识别与使用。
2界面设计准则Rules2.1引言Introduction在界面设计中应该保持界面的一致性。
一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、风格、颜色、术语、提示信息等方面确保一致。
2.2主要内容Content2.2.1显示信息一致性原则坚持图形用户界面（GUI）设计原则，界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。
明确用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。
界面设计必须经过最终确认才能完成。
2.2.2布局合理化原则应注意在一个窗口内部所有控件的布局和信息组织的艺术性，使得用户界面美观。
在一个窗口中按tab键，移动聚焦的顺序不能杂乱无章，tab的顺序是先从上至下，再从左至右。
一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前，位置也应放在窗口上较醒目的位置。
布局力求简洁、有序、易于操作。
2.2.3鼠标与键盘一致性原则尽量遵循可不用鼠标的原则：应用中的功能只用键盘也应当可以完成，即设计的应用中还应加入一些必要的按钮和菜单项。
但是，许多鼠标的操作，如双击、拖动对象等，并不能简单地用键盘来模拟即可实现，此类操作可适当增加操作按钮。
2.2.4向导使用原则对于应用中某些部分的处理流程是固定的，用户必须按照指定的顺序输入操作信息，为了使用户操作得到必要的引用应该使用向导，使用户使用功能时比较轻松明了，但是向导必须用在固定处理流程中，并且处理流程应该不少于3个处理步骤。
UI界面设计规范方案
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.）也就是使用者，使用环境，使用方式的需求分析。
所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。
什么地方用（在办公室/家庭/厂房车间/公共场所）。
如何用（鼠标键盘/遥控器/触摸屏）。
上面的任何一个元素改变结果都会有相应的改变。
除此之外在需求阶段同类竞争产品也是我们必须了解的。
同类产品比我们提前问世，我们要比他作的更好才有存在的价值。
那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。
我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。
B、分析设计阶段通过分析上面的需求，我们进入设计阶段。
也就是方案形成阶段。
我们设计出几套不同风格的界面用于被选。
C、调研验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。
测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。
UI设计技术手册
UI设计技术手册UI（User Interface）设计是一门关于人机交互界面的设计学科，它旨在提供用户友好、易用和美观的界面。
本手册将介绍UI设计的基本原则、流程和技巧，帮助读者深入了解UI设计，并在实践中运用这些技术。
一、UI设计基本原则1. 目标导向：UI设计应以用户需求和目标为中心，提供符合用户期望和实现目标的界面。
考虑用户的使用场景、习惯和心理需求。
2. 简约性：界面应简洁、清晰，减少冗余信息和干扰元素。
遵循“少即是多”的设计原则，使用户能够快速理解和操作界面。
3. 一致性：界面元素应保持一致，包括布局、颜色、字体等方面。
一致性可以提高用户的学习成本和使用效率。
4. 易学性：界面应易于学习和记忆，新手能够快速上手。
合理设计交互操作和引导，提供明确的指导和反馈。
5. 可访问性：界面应考虑到不同用户的需求和能力，如颜色盲人、残障人士等。
使用合适的对比度、字体大小和无障碍功能来确保可访问性。
二、UI设计流程UI设计流程大致包括需求分析、原型设计、视觉设计和评估四个主要阶段。
1. 需求分析：了解用户需求和业务目标，确定设计的基本方向。
收集用户反馈和市场调研数据，制定设计规范和用户画像。
2. 原型设计：根据需求分析，创建界面的低保真或高保真原型。
通过原型演示和用户测试，检验交互逻辑和用户体验。
3. 视觉设计：基于原型进行界面的美化和细化设计。
考虑色彩搭配、字体和图标的选择，保证界面的美观和一致性。
4. 评估：通过专业评审和用户测试，评估设计的有效性和可用性。
根据反馈和改进建议进行优化和迭代。
三、UI设计技巧1. 色彩运用：选择合适的色彩方案来传达品牌形象和用户情感。
运用色彩心理学理论，使界面充满活力和吸引力。
2. 字体设计：选择易读清晰的字体，合理运用字体的粗细和排布。
注意字号和行距的搭配，确保文字的可读性和美观性。
3. 图标设计：图标是界面中重要的视觉元素，应具备简洁、易懂、易辨识的特点。
运用扁平化设计风格，减少细节和阴影，使图标更具现代感。
UI设计规范两篇.doc
UI设计规范两篇第1条用户界面设计流程/界面规范——用户界面设计的基本概念和流程1.1目的规范公司的用户界面设计流程，使用户界面设计人员能够参与产品设计的全过程，对产品可用性的全过程负责，规范用户界面设计流程，确保用户界面设计流程的可操作性。
1.2范围接口设计本文件用于接口设计。
本文档的读者是项目管理人员、售前服务人员、用户界面设计人员、界面审核人员和配置测试人员。
1.3概述用户界面设计包括交互设计、用户研究和界面设计。
基于这三个部分的用户界面设计流程从产品项目启动开始，用户界面设计人员应根据流程规范，通过参与需求阶段、分析和设计阶段、研究和验证阶段、方案改进阶段、用户验证和反馈阶段等方式，履行相应的工作职责。
用户界面设计者应该全面负责以用户体验为中心的产品用户界面设计，并根据客户(市场)需求不断提高产品可用性。
本规范明确规定了各环节用户界面设计的职责和要求，以保证各环节的工作质量。
1.4基本介绍A、软件产品仍属于需求阶段的工业产品类别。
它仍然离不开3W考虑(谁、在哪里、为什么.)，即用户需求分析、使用环境和使用模式。
因此，在设计软件产品之前，我们应该弄清楚谁使用了用户的年龄、性别、爱好、收入、教育水平等。
在哪里使用它(在办公室/家庭/车间/公共场所)。
如何使用(鼠标、键盘/遥控器/触摸屏)。
上面的任何元素都会相应地改变结果。
此外，我们还必须了解处于需求阶段的类似竞争产品。
类似的产品比我们更早出现，我们必须比他做得更好才能有价值。
因此，仅仅从界面美学的角度来说，并没有一个客观的评价标准来判断好坏。
我们只能说哪个更合适，哪个更适合我们的最终用户是最好的。
通过分析上述需求，我们进入了设计阶段。
也就是计划的形成阶段。
我们设计了几套不同风格的界面供选择。
C、在调查和验证阶段，必须保证在相同的设计和生产水平上有多套款式，并且看不到明显的差异，以获得用户客观、真实的反馈。
在测试阶段开始之前，我们应该清楚地分析和描述测试的具体细节。
UI设计规范方案说明书模板
UI设计规范说明书修订历史记录日期版本说明作者1前言1.1文档简介本文档是对整个系统界面设计风格进行描述，和用户交互的最终界面在《详细设计说明书》中设计和解释。
1.2系统定义用户界面：又称人机界面，实现用户与计算机之间得通信，以控制计算机或进行用户和计算机之间得数据传送得系统部件。
GUI：即图形用户界面，一种可视化得用户界面，它使用图形界面代替正文界面。
1.3编写目的统一图形界面规范，为开发人员提供统一的标准，为用户提供统一显示效果、统一操作方式的界面，便于用户识别与使用。
2界面设计准则 Rules2.1引言 Introduction在界面设计中应该保持界面的一致性。
一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、风格、颜色、术语、提示信息等方面确保一致。
2.2主要内容 Content2.2.1显示信息一致性原则坚持图形用户界面（GUI）设计原则，界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。
明确用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。
界面设计必须经过最终确认才能完成。
2.2.2布局合理化原则应注意在一个窗口内部所有控件的布局和信息组织的艺术性，使得用户界面美观。
在一个窗口中按tab键，移动聚焦的顺序不能杂乱无章，tab的顺序是先从上至下，再从左至右。
一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前，位置也应放在窗口上较醒目的位置。
布局力求简洁、有序、易于操作。
2.2.3鼠标与键盘一致性原则尽量遵循可不用鼠标的原则：应用中的功能只用键盘也应当可以完成，即设计的应用中还应加入一些必要的按钮和菜单项。
但是，许多鼠标的操作，如双击、拖动对象等，并不能简单地用键盘来模拟即可实现，此类操作可适当增加操作按钮。
2.2.4向导使用原则对于应用中某些部分的处理流程是固定的，用户必须按照指定的顺序输入操作信息，为了使用户操作得到必要的引用应该使用向导，使用户使用功能时比较轻松明了，但是向导必须用在固定处理流程中，并且处理流程应该不少于3个处理步骤。
ui界面设计说明范文
ui界面设计说明范文
以下是一个简单的 UI 界面设计说明范文：
设计目的：为一款购物应用程序进行用户界面设计。
用户群体：年龄在 18~45 岁之间的在线购物爱好者。
设计风格：简约、时尚、清晰、易用。
整体布局：
- 首页：顶部放置应用程序名称和搜索栏,在下方分为四个功能区：推荐、热销、特价、新品。
用户可以滑动页面查看不同功能区的商品列表。
- 商品详情页：放置商品主图、名称、描述、价格等信息,底部有“立即购买”和“加入购物车”两个按钮。
- 购物车页：列出用户选择的商品列表,显示总价格和提交订单按钮。
- 订单页：显示用户订单的详细信息,包括商品列表、配送地址、支付方式等。
用户可以选择修改地址和支付方式。
配色方案：以白色为基础色调,融入一些明亮的橙色和黄色作为强调色,使整体界面看起来充满活力和时尚感。
字体选择：选用清晰易读的字体,注意字号大小和间距。
在不同的页面使用不同的字体和排版方式,增加与众不同的视觉效果。
图标设计：所有的图标设计都应简约易懂,符合用户的使用习惯,同时能够清晰地传递信息。
交互设计：应用程序的交互设计应该符合用户的直觉习惯。
例如,在商品详情页中,可以通过滑动页面或者轻击查看不同角度的商品图片。
总结：上述设计方案突出了清晰、简明的风格,使用户可以轻松地浏览和购买商品。
同时,也要不断地进行优化和改进,以满足用户的需求。
UI设计规范说明书
UI设计规范说明书UI设计说明书UI设计规范说明书修订历史记录日期版本说明作者1 前言1.1 文档简介本文档是对整个系统界面设计风格进行描述，和用户交互的最终界面在《详细设计说明书》中设计和解释。
1.2 系统定义用户界面：又称人机界面，实现用户不计算机之间得通信，以控制计算机或进行用户和计算机之间得数据传送得系统部件。
GUI：即图形用户界面，一种可视化得用户界面，它使用图形界面代替正文界面。
1.3 编写目的统一图形界面规范，为开发人员提供统一的标准，为用户提供统一显示效果、统一操作方式的界面，便于用户识别不使用。
第 1 页共 8 页UI设计说明书2 界面设计准则 Rules2.1 引言 Introduction在界面设计中应该保持界面的一致性。
一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、风格、颜色、术诧、提示信息等方面确保一致。
2.2 主要内容 Content2.2.1 显示信息一致性原则坚持图形用户界面（GUI）设计原则，界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。
明确用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。
界面设计必须经过最终确认才能完成。
2.2.2 布局合理化原则应注意在一个窗口内部所有控件的布局和信息组织的艺术性，使得用户界面美观。
在一个窗口中按tab键，移劢聚焦的顺序不能杂乱无章，tab的顺序是先从上至下，再从左至右。
一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前，位置也应放在窗口上较醒目的位置。
布局力求简洁、有序、易于操作。
2.2.3 鼠标与键盘一致性原则第 2 页共 8 页UI设计说明书尽量遵循可不用鼠标的原则：应用中的功能只用键盘也应当可以完成，即设计的应用中还应加入一些必要的按钮和菜单项。
UI设计规范说明书三篇
UI设计规范说明书三篇篇一：UI设计规范说明书目录概要 (3)登录页面 (4)1. 启动 (4)2. 登录页面元素 (4)导航菜单 (5)1. 弹出框比例 (8)2. 弹出框风格 (8)3. 弹出框边界 (8)4. 弹出元素对齐 (8)整页面 (10)字体规范 (11)页面元素 (15)页面色调 (18)用户界面行为 (19)概要界面设计中保持界面的一致性。
一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。
界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。
功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。
1.启动目前我们的pride、EMRS系统首页登录都是以（图1）的展现方式，有2个页面，此法太过累赘，同时跳出框也把产品的logo信息给遮住，可以以一个页面的方式来显示不需要2个页面，类似（图2）。
（图1）2.（图2）3.登录页面元素登录页面的基本元素包括：输入框、按钮、进度条。
这样的好处就是以一个页面代替2个页面，简洁明了，登录页面都需要加入进度条，便于客户等待页面进度规范1）菜单深度一般不要超过三层2）菜单层次太多时应给出返回主窗口、主分支的快捷链接。
（图3）导航如不是客户特俗要求的定制，均制成类似以上的导航（图3），采用windows 标准的定制导航界面，导航必需兼容1024*768、1280*800、1440*900三个主流分辨率，其中默认分辨率为1024*768。
（图4）（图5）【1】标题区：显示当前用户姓名、所属科室。
字体：15像素，黑色，加粗【2】工具栏区：可显示二级菜单相应栏目。
字体9pt，不加粗，黑色，每个栏目必须有快捷键，栏目间的间距为20像素【3】二级菜单区：二级菜单字体为9pt，宋体，不加黑，行距10像素；所有的二级菜单栏目都应该有相应的图标设计。
移动UI设计规范1.0
公司移动UI设计规范说明书修改记录1、前言本文档主要为UI设计师和前端工程师提供设计参考和最佳实践，避免相互之间出现技术衔接脱节的问题。
文档将由设计尺寸、界面元素、设计细节、切图细节四个部分组成，分别说明如下。
2、设计尺寸本节主要阐明目前主流浏览设备和软件中的界面尺寸，相关设备和软件分别为iPhone、iPad、Android、Web。
详细说明如下2.1 iPhone2.2 iPad2.3 Android屏幕尺寸指实际的屏幕物理尺寸，以屏幕对角线来测量。
为方便起见，Android把屏幕大小分为广义的四类：小、正常、大、特大。
像素代表屏幕上一个物理的像素点。
屏幕密度为解决Android设备中屏幕的碎片化，Android厂商引入了DP的概念。
即一定尺寸屏幕显示像素的数量，因此有了四类屏幕密度：低（120dpi）,中（160dpi）,高（240dpi），超高（320dpi），而像素= DP*(dpi/160)。
例如一个240dpi的屏幕里，1DP = （240/160）=1.5px。
因此，设计尺寸确认后，以图标为例，需向上或向下做小、正常、大、特大，以及低、中、高、超高的图标尺寸与密度来适配不同的机型。
典型的设计尺寸320dp：一个普通的手机屏幕（240x320,320x480,480x800）480dp：一个普通的平板（480x800）600dp：7寸平板（600x1024）720dp：10寸平板（720x1280,800x1280）安卓设计尺寸建议为720x1280或是480x8002.4 WebWindows XP的任务栏高度为30px，Windows7任务栏的高度为40px系统分辨率统计最安全的分辨率为1024x768，建议分辨率1280x800分辨率统计网页宽度与首屏高度安全宽度为1002px，建议宽度为1258px高度：Windows xp下首屏为580px，Windows 7下为710px3界面元素3.1iPhoneiPhone的界面元素一般由状态栏、导航栏、标签栏、内容区域四部分组成。
UI设计界面规范
UI设计界面规范UI设计(流程/界面)规范一：UI设计基本概念与流程目的规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。
范围l界面设计l此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。
概述UI设计包括交互设计，用户研究，与界面设计三个部分。
基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。
UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。
本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。
基本介绍A、需求阶段软件产品依然属于工业产品的范畴。
依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。
所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。
什么地方用（在办公室/家庭/厂房车间/公共场所）。
如何用（鼠标键盘/遥控器/触摸屏）。
上面的任何一个元素改变结果都会有相应的改变。
除此之外在需求阶段同类竞争产品也是我们必须了解的。
同类产品比我们提前问世，我们要比他作的更好才有存在的价值。
那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。
我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。
B、分析设计阶段通过分析上面的需求，我们进入设计阶段。
也就是方案形成阶段。
我们设计出几套不同风格的界面用于被选。
C、调研验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。
测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。
UI设计规范(流程、界面)
UI设计规范（流程、界面）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.）也就是使用者，使用环境，使用方式的需求分析。
所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。
什么地方用（在办公室/家庭/厂房车间/公共场所）。
如何用（鼠标键盘/遥控器/触摸屏）。
上面的任何一个元素改变结果都会有相应的改变。
除此之外在需求阶段同类竞争产品也是我们必须了解的。
同类产品比我们提前问世，我们要比他作的更好才有存在的价值。
那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。
我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。
B、分析设计阶段通过分析上面的需求，我们进入设计阶段。
也就是方案形成阶段。
我们设计出几套不同风格的界面用于被选。
C、调研验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。
测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。
UI设计规范指南
UI设计规范指南一、什么是UIKIT？UIKIT是项目中应遵循统一规范的视觉参数、控件与模块设计文件集合，KIT 应当配备关键参数标注文件，用于FE或DE创建开发所需的公共内容。
UIKIT文件夹包含KIT的PSD/sketch等设计源文件、效果图及标注。
二、UIKIT在项目中有什么作用？1、UIKIT主要用于项目多UI之间的合作，用于制定视觉规范，快速迭代。
2、用于前端查看与参考。
三、与前端的合作注意哪些？1、KIT产出时间UIKIT一般在视觉提案评审通过之后，整理视觉参数，控件模块等设计文件，交付产出UIKIT文件夹，并告知前端，如果该项目没有视觉提案，则产出于页面评审通过之后。
2、状态及分类UIKIT应当包含控件完整的交互状态，UIKIT对控件的分类可参照bootstrap 对组件的分类，必要时需要标注组件颜色，大小，间距等相关视觉参数。
3、更新与迭代如果UIKIT有更新和迭代，即时传达至前端，并且告知本次更新和迭代的内容，最好配备图文说明。
四、与UI设计师的合作注意哪些？1、产出方式统一先由一个人按照规范将控件，模块，视觉参数等整理到UIKIT，需按照一定的规律布局，切勿随意布局。
2、产物类型与设计成员统一设计工具，产出设计源文件3、更新与迭代建议统一由一个人整理和更新UIKIT，如果多人更新，则需按照规范，更新前先告知其他UI这次更新和迭代的内容，并且告知影响的页面。
4、命名规范- 重要内容图层应重新命名，图层应按用途、内容、状态、版本等维度进行命名。
- 命名语言应在产品产物范围内保持一致；不建议多语言混用。
- 如选用英文命名方式，则须按照前端开发的习惯拟定各图层名称。
五、 UIKIT具体应包含哪些内容？1、色彩（1）主色调主色调指的是在某一产品中，以某一色调为主的颜色。
（2）辅助色辅助色是指在某一产品中辅助或者补充主体色的颜色。
（3）状态色状态色是指在某一产品中需表达成功、报错、警示等系统状态所采用的颜色（4）中性色中性色是指在某一产品中所采用的的灰色系颜色。
UI设计规范文档
BS结构的系统项目开发流程中，主要涉及到的UI文档是《UI需求调研报告》和《UI设计规范》？？？？主要文档有没有遗漏？？？？不知道哪位前辈有完整的相关文档，为我们的UI事业的进步与发展贡献出来。
《UI设计规范》目录结构如何？？？？总论系统页面设计及架构规范系列文档将针对以下16个方面进行规范和说明。
以后将在此规范说明基础上进行页面设计和制作。
总体说明及原则：1．页面总的艺术设计指导原则2．CSS以及TEXT关于色值和字体大小的不同等级特性规范。
3．关于客户自定义不同颜色的CSS 样式表元素主题色值及其相关色定义。
4．HTML架构规范。
（FRAME）页面组件：1．所有BUTTON的说明定义规范。
2．各种形式导航条的规范说明。
3．页面流转形式的规范。
（步骤样式）4．各个信息框的表现规范。
5．术语列表。
6．页面各个部分之间的间距和表格色值。
7．时间控件。
页面模版：1．页面结构分解及相关模版。
2．表的形式和规范。
3．首页形式结构模版。
4．报错和警告信息的定义规范和模版。
5. 版权信息模版。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
UI设计规范说明书
修订历史记录
日期版本说明作者
1前言
1.1文档简介
本文档是对整个系统界面设计风格进行描述，和用户交互的最终界面在《详细设计说明书》中设计和解释。
1.2系统定义
用户界面：又称人机界面，实现用户与计算机之间得通信，以控制计算机或进行用户和计算机之间得数据传送得系统部件。
GUI：即图形用户界面，一种可视化得用户界面，它使用图形界面代替正文界面。
1.3编写目的
统一图形界面规范，为开发人员提供统一的标准，为用户提供统一显示效果、统一操作方式的界面，便于用户识别与使用。
2界面设计准则Rules
2.1引言Introduction
在界面设计中应该保持界面的一致性。
一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、风格、颜色、术语、提示信息等方面确保一致。
2.2主要内容Content
2.2.1显示信息一致性原则
坚持图形用户界面（GUI）设计原则，界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。
明确用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。
界面设计必须经过最终确认才能完成。
2.2.2布局合理化原则
应注意在一个窗口内部所有控件的布局和信息组织的艺术性，使得用户界面美观。
在一个窗口中按tab键，移动聚焦的顺序不能杂乱无章，tab的顺序是先从上至下，再从左至右。
一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前，位置也应放在窗口上较醒目的位置。
布局力求简洁、有序、易于操作。
2.2.3鼠标与键盘一致性原则
尽量遵循可不用鼠标的原则：应用中的功能只用键盘也应当可以完成，即设计的应用中还应加入一些必要的按钮和菜单项。
但是，许多鼠标的操作，如双击、拖动对象等，并不能简单地用键盘来模拟即可实现，此类操作可适当增加操作按钮。
2.2.4向导使用原则
对于应用中某些部分的处理流程是固定的，用户必须按照指定的顺序输入操作信息，为了使用户操作得到必要的引用应该使用向导，使用户使用功能时比较轻松明了，但是向导必须用在固定处理流程中，并且处理流程应该不少于3个处理步骤。
2.2.5系统响应时间
系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影响到用户的操作节奏，并可能导致错误。
因此在系统响应时间上坚持如下原则：
响应时间长度界面设计：
0-5秒鼠标显示成为沙漏；
5秒以上显示处理窗口，或显示进度条；
一个长时间的处理完成时应给予完成警告信息。
2.2.6出错信息和警告
出错信息和警告是指出现问题时系统给出的坏消息，对于出错信息和警告应该遵循以下原则：
信息以用户可以理解的术语描述；
信息简明扼要，指出出错原因并提供解决办法提示。
2.2.7信息显示原则
信息显示遵循以下原则：
1）只显示与当前用户语境环境有关的信息；
2）不要用数据将用户包围，使用便于用户迅速吸取信息的方式表现信息；
3）使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源；
4）产生有意义的出错信息；
5）使用缩进和文本来辅助理解；
6）使用窗口分隔控件分隔不同类型的信息；
7）高效地使用显示器的显示空间，但要避免空间过于拥挤。
2.2.8数据输入原则
数据输入遵循以下原则：
1）尽量减少用户输入动作的数量；
2）维护信息显示和数据输入的一致性；
3）交互应该时灵活的，对键盘和鼠标输入的灵活性提供支持；
4）在当前动作的语境中使不合适的命令不起作用；
5）让用户控制交互流，用户可以跳过不必要的动作、改变所需动作的顺序（如果允许
的话）以及在不退出系统的情况下从错误状态中恢复；
6）为所有输入的动作提供帮助；
7）消除冗余输入。
可能的话提供默认值、绝不要让用户提供程序中可以自动获取或计
算出来的信息。
3界面实施细则Detail
3.1概述
界面设计中保持界面的一致性。
一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。
界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。
功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。
3.2颜色搭配Corlor
3.3字体Font
3.4资源Resources
3.5控件风格Style
3.5.1窗体Window
3.5.2菜单Menu
3.5.3工具栏ToolBar
3.5.4状态栏StatusBar
3.5.5导航栏OutlookBar
3.5.6数据窗口DataWindow
3.5.7按钮Button
3.5.8单选框RadioButton
3.5.9静态文本Statictext
3.5.10文本框SingleLineEdit
3.5.11下拉选择框DropDownList
3.5.12树形视图TreeView
3.5.13图片PictureBox
3.6界面布局Layout
3.6.1引言Introduction
3.6.2间距Distance
3.6.3对齐Align
3.6.4分辨率
3.6.5主界面布局
3.6.6用户主要工作区布局
3.6.6.1衍生布局1
3.6.6.2衍生布局2
3.6.6.3衍生布局3
3.6.7弹出式窗口布局
3.6.7.1业务模块弹出式窗口
3.6.7.2管理模块弹出式窗口
3.6.7.3弹出式窗口上数据窗口
3.7快捷键ShortCuekey
在菜单项中使用快捷键可以让使用键盘的用户操作得更快一些，在Windows及其应用软件中快捷键的使用大多是一致的。
应用的快捷键在各个配置项上语义必须保持一致。
3.8用户简单交互Action
3.8.1消息框MessageBox
3.9联机帮助Help
3.9.1帮助Help
常用的帮助有两种：集成的和附加的。
集成的帮助一开始就是设计在软件中的，它与语境有关，用户可以直接选择与所要执行操作相关的主题。
通过集成帮助可以缩短用户获得帮助的时间，增加界面的友好性。
附加的帮助在系统建好以后再加进去的。
通常是一种查询能力比较弱的联机帮助。
提供这两种帮助，设计和实现时遵循以下原则：
1）进行系统交互时，提供部分帮助功能，即：提供主要操作的帮助；
2）用户可以通过帮助菜单、F1键和帮助按钮（如果有的话）访问帮助；
3）表示帮助时根据需要提供三种方式的选择：另一个窗体、微帮助和指出参考某个文
档；
4）用户如何回到正常交互方式有两种选择：返回键和功能键。
帮助信息的构造：采用分层式帮助。
3.9.2微帮助MicroHelp
微帮助提供：由状态栏提供，或控件上的提示文本。
微帮助要求：简明扼要的说明问题，避免冗长繁复的阐述。
3.9.3Tooltip
3.9.4帮助文件CHM/HLP
4追加说明
更改说明或更改本用户界面设计时应该征得所有开发者的同意，所有开发者应该按更正后的原则修改和设计用户界面。