用户体验产品规范V1.0
目录
1、概述 (3)
1.1规范目的 (3)
1.2规范人群 (3)
1.3规范范围 (3)
2、web架构 (3)
2.1 web社会化框架 (4)
2.1.1 AFO方法 (4)
首要活动 (4)
识别社会化交互对象 (5)
Feature（功能）- 选择核心功能集。 (6)
2.2 web信息架构 (7)
2.2.1 web架构 (7)
2.2.2 信息页面 (7)
2.2.2.1 *用户视觉习惯 (7)
2.2.2.2 *页面宽度 (10)
2.2.2.3 *一致性 (11)
2.2.2.4 *简洁性 (13)
2.2.2.5 *清晰 (13)
2.2.2.6 *当前状态 (13)
2.2.2.7 导航 (13)
2.2.2.8 平面版式 (13)
2.2.2.9 栏目布局 (18)
2.2.2.10 栏目 (19)
2.2.2.11 分页 (19)
2.2.2.12 搜索 (20)
2.2.2.13 文字 (21)
2.2.2.14 图片 (22)
2.2.2.15 页脚信息 (24)
2.2.3 界面内部交互 (24)
2.2.3.1 *用户的操作习惯 (25)
2.2.3.2 *用户行为自由可控 (25)
2.2.3.3 *容错性 (25)
2.2.3.4 *操作的灵活高效性 (26)
2.2.3.5 *操作提示 (26)
2.2.3.6 *各类弹框 (27)
2.2.4 页面间交互 (29)
2.2.5 任务交互（工具类） (29)
2.3 web业务架构 (30)
2.4 web结构seo (30)
2.4.1 逻辑结构 (30)
2.4.1.1 逻辑结构的意义 (30)
2.4.1.2 逻辑结构规范 (31)
2.4.1.3 逻辑结构两个要点 (31)
2.4.1.4 逻辑结构图 (32)
2.4.2 物理结构 (34)
2.4.2.1 物理结构的意义 (34)
2.4.2.2物理结构的规范-扁平式 (34)
2.4.2.3 物理结构的规范-树形结构 (34)
1、概述
1.1规范目的
·在产品规划时，给部门内部的成员提供统一的规范和指导，有利于保证产品；
·解决公司产品的可用性问题，即使操作更加人性化，减轻用户认知负担，改善产品的用户体验，提升产品的市场竞争力；
·使产品在表现层面上达成界面外观与操作行为的一致。
1.2规范人群
参与产品规划的产品部成员。
1.3规范范围
所有互联网产品。
2、web架构
如果把一个网站比喻成一座建筑，那么这个建筑的结构就是这个网站的架构。建筑的结构决定了人们对它的第一印象，也决定了它最凸出的个性。建筑的结构可以从美的角度、实用的角度、个性的角度等方面分析。
web架构主要可以从四方面分析：社会化框架、信息架构、业务架构、结构SEO。考察这四个方面的都有各自的意义：网站社会化框架，以提高用户粘度为中心；信息架构，以满足用户需求为中心；业务架构，以客户赚钱为中心；为web架构seo，以服务搜索引擎为中心。
其中社会化框架和信息架构二者可以相互促进；web架构seo相对独立，但它也跟信息架构的页面链接有很大的关系；信息架构和业务架构有时候会有冲突，这时取决于我们优先满足普通用户还是客户，或是当前产品的正处在的阶段决定它们的优先级。
2.1 web社会化框架
什么是社会化框架？社会化设计是对支持社会交往的网站或应用的构思、规划和构建的过程。社会化框架即是社会化网站设计时形成的框架。考察网站社会化框架，主要是以提高用户粘度为中心。
2.1.1 AFO方法
Activity（活动）-专注首要活动。
Object（对象）-辨识交互对象
Feature（功能）- 选择核心功能集。
首要活动
我们首先要解决（并伴随整个设计过程）的问题是——你的用户要用你的产品做什么？
首要活动只有一个
最能吸引人的应用，就是让人出色完成某个特定活动的应用
总结：
当我们在开发一个新产品时，我们要解决的最重要的问题不是“谁要用我的产品”，而是“用户要用我的产品来做什么”！
识别首要活动
用户的什么行为是网站获得成功的关键？亚马逊回答是付款、淘宝呢？微薄
目标：用户希望达到的最终目标
活动：实现目标的一系列任务的组合
往往会专注于具体的任务，而忽略更宽泛的活动。我们不能盯着付款这个具体操作，忽略购买这个活动
任务：具体的某个功能
识别社会化交互对象
每一个活动都与特定对象相关,确定首要活动后的下一步是，用户进行这些活动时的交互对象。
模拟实物：
Facebook——在哈佛大学，facebook是一个真正的本子
亚马逊的礼物愿望单——原型是人们用纸写下并相互分享的礼物愿望单
Web应用中社交对象不一定要表现真实物品（视频、音乐、电子狗），他们有时候也是可以抽象的
社交对象设计成功的案例
照片书签博客商品职位电影视频新鲜事消息演示文档…..
为社会化对象分配URL地址：
对象有了URL地址就可以被分享出去
对象有了URL地址就更容易被查找和寻回
URL让人可以直接链接对象
搜索引擎能利用URL更好工作
Feature（功能）- 选择核心功能集
我们可以从首要活动及交互对象推导出核心功能集。
为此我们要解决这些问题：
1 用户会对交互对象做哪些操作？
2 有哪些功能足够重要，是web应用必须支持的？
寻找动词
留意任何的对象集合，它们通常会成为有价值的功能。其中重要的集合方式是列表下面是搜索对象的几种常见的来源：
礼物愿望单我的…（照片、评论、书签）
购物车好友的…
收藏夹项目
分享条目
AFO的方法指引来搜索亚马逊提供的社会化功能
商品评分加入礼物愿望单
分享个人商品图片新婚/新生儿礼物单
买了该产品的用户还买了…告诉朋友
…
2.2 web信息架构
信息架构 ,一般认为是根据客户需求分析的结果，准确定位网站目标群体，设定网站整体架构，规划、设计网站栏目及其内容，制定网站页面操作流程及页面交互，以最大限度地符合用户的需求。
2.2.1 web架构
架构的层级
架构的层级很大程度上决定了，用户通过首页需要点击多少次才可以到达自己想看的内容。单纯考虑层级，层级越少越好，最佳状况是层级不超过三层。如果能保证层级不超过三层，就差不多可以保证用户点击三次以内就可以看到自己想看的内容。
架构的宽度
用户可以见的第一层架构宽度主要是导航的链接数。用户短时间的记忆力一般情况是7±2，因此每个层级下架构的宽度都不应该太宽，否则会考验用户的记忆力。
架构的平衡度
因为现在的大型网站，尤其是门户网站，它们的信息量非常的庞大，通过首页3次点击都能到达所有的内容已经完全无法实现。一定的信息量，架构的层级和架构宽度是相互对立的，如果层级少则要求架构宽度增加，反之毅然。架构可以给信息进行分类、组织，让用户更清晰地找到自己要找的内容，但是分类过多或是层级过深会增加用户的学习成本。在信息量大的时候一定要综合考虑架构的层级和宽度平衡
2.2.2 信息页面
页面是承载信息的载体。
2.2.2.1 *用户视觉习惯
1、顺应用户基本的阅读习惯：从左到右、从上到下
2、F型布局
. 尼尔森眼动发现，大多数用户浏览页面时的视觉热点是”F”布局
他们记录了232位用户浏览上千个网页的方式，发现对于不同的站点和任务，用户的主要阅读行为是相当一致的。这种F型的阅读模式有三个组成部分：
首先，用户横向运动阅读，通常是网页内容区域的上半部分；
接着，用户视线下移一点，开始第二次横向阅读，通常这一次涵盖的区域会比前一次短；最后，用户会纵向滴浏览网页内容的左边部分
对产品设计的启发:
. 用户不会从头到尾看完页面
. 首页首屏的前面位置应该传达网站的重要的信息（同理其他页面的头两段应该传达重要的信息，尤其是第一段）
. 用户从上到下浏览左侧的信息时，他们会注意标题、段落和要点信息，这些区块的头两个
词要包含重要信息，因为用户可能很少看第三个词。
3、区块
人们天然就有将信息分类的认知需求。
网站信息以方块呈现的效率最高：用户可以通过区块来分辨这个区域的信息是否是自己需要的，可以迅速缩缩小范围、进行仔细寻找或是浏览下一个区块
4、水平注意力
来自Nielson的报告：
. 网络用户花69%的时间看左半部分，花30%的时间看右半部分，看左半部分的时间大概是右半部分时间的两倍。剩下的时间花在需要水平滚动才能看到的页面部分，因此，绝对要避免水平滚动
5、垂直注意力
来自Nielson的报告：
垂直注意力大部分集中于一眼可见的页面内容：
. 用户通常花80%的时间看页面上直接可见的内容，只花20%的时间去看需要滚动才能看到的部分
. “page fold”概念，将最有价值的信息放在首屏
. 不要设计太长的页面，用户的注意范围是有限的。用户喜欢那些他们能迅速找到信息的网站，减少需要输入字数，减少滚动
. 但是，滚动优于翻页，如果长篇幅的文字，还是设计成一个滚动页面更合适些
. 首页的内容仍然很重要，因为用户依据在首页页面上看到的信息来判断页面下滚的信息是否有价值
. 倒数第一行信息获得的注意力优于倒数第二行信息，近因效应
2.2.2.2 *页面宽度
最新显示器分辨率比率调查结果：
目前主流分辨率1366*768在此状态下默认使用960的页面宽度，与腾讯网首页统一尺寸。
特殊情况：
1.信息量或是图片量过大的事情，可以考虑加宽承载，给出来年改革尺寸
985（paipai，Qbar）
1175(Qqshow 游戏产品等)
2.搜索类信息页面，采用自适应屏幕方式（比如soso 搜索产品）
不同浏览器，不同分辨率下网页第一屏最大可视区域：
说明：
比如1024*768下IE的可视面积是（1024-21）*（768-148）
1336*768在各个类浏览器
2.2.2.3 *一致性
一致性的意义：
良好的一致性，可以减少用户学习成本，可以更快培养用户习惯，也可体现产品设计的严谨。如果有不同，应作相应的区别处理，特别是视觉表现上要予以区分。
什么是一致性？
在相似的情景下，应在几个方面保持一致性：视觉表现、交互行为、操作结果。
即同一元素在不同页面应尽量是一样的（换句话说用户在不同页面看到都知道这个元素代表同一种含义），如果因为其他因素导致很难一样，也应该最大程度保持它们的相似度。同时也要求同一元素应该是代表一种或是一类含义，不可随意变更元素用途。
相同属性的元素保持统一，并且它们在不同页面都保持统一。
1. 标识
同一种标识在不同页面必须保持完全一致（但尺寸可以放大或是缩小）
2. 按钮
到达相同页面或是同一状态的按钮文字完全一样，如果因为视觉层次需要，形式可以不一样。
一个平台上的按钮依据重要程度，可以分出几个层级来，同一层级的按钮尺寸、形状一样。
4. 文字
同一平台上的同一层级的信息的字体应尽量保持一致，如标题的字体大小、显示字数的长短都一定的规范，最好不要超过3种规格。
5. 图片
同一类型的图片在不同的位置应保持长宽比率的一致，这样可以保持图片的美观性。图片的上的alt标签的格式一致，来源一致。
6.提示信息
提示信息在摆放的大体方位（如：都放在输入框的右侧、或是下方等）；信息提示的形式：如：主体形式都是主题加关键字，以及提示信息的字体等都应该保持一致。
2.2.2.4 *简洁性
少即是多，尽可能精简界面上的元素。当设计出原型，先将元素减半，然后再看能否再简化。保证主要任务流程顺利完成，消减其余不相关元素的干扰。
简洁体现在四个方面：减轻视觉干扰、精简文字表述、简化操作步骤。
2.2.2.5 *清晰
2.2.2.6 *当前状态
2.2.2.7 导航
1．字体一般用黑体或微软雅黑。要斟酌全体用户不同情形都适应的字体，而不是只雅观。2．对于主导航，要设置a标签，并且不同的属性要有不同的值，这样很明白能否点击。3．从导航都必须是有效链接，链接后的页面一定要有基本的功能。主导航一定不能有生链接（生链接指失效的链接）
4．主导不要用JS链接，因为搜索引擎是不读取的。
5．有些网站从用户体验角度考虑，用图片做导航链接，这样最好在图片的下方设放上文字链接，同时在图片上加上正文。否则搜索引擎无法抓取。
2.2.2.8 平面版式
版式的基本类型
网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。
1.骨骼型
网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有
竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。
优点：理性、条理、规范
2.满版型
页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。
优点：舒展、大方。
缺点：网速加载会比较的慢。
网页例子：https://www.doczj.com/doc/2b12542957.html,/blog/
3.分割型
把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积，来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果
优点：精致、简洁、明了
网页实例：http://stripes-design.pl/
4.中轴型
沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。
优点：稳定、平静、含蓄
网站实例：https://www.doczj.com/doc/2b12542957.html,/
5.曲线型
图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。
优点：平滑、柔和
网页实例：http://www.novita.co.kr/
6、倾斜型
特点：页面主题形象或是多幅图片，文本内容倾斜编排，形成不稳定感或是强烈的动感，引人注目。
优点：视觉冲击力强、个性突出
网页实例：https://www.doczj.com/doc/2b12542957.html,/y460/
7、对称型
特点：对称型的页面给人以稳定、严谨、理性、庄重的感觉。
对称分为绝对对称和相对对称，一般采用相对对称，可以避免呆板。
优点：稳定、严谨、理性、庄重
网站实例：https://www.doczj.com/doc/2b12542957.html,/
8、焦点型：
特点：焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。
焦点型又分为三种类型：
①中心以对比强烈的图片或是文字置于页面的中心。
②向心视觉元素引导浏览者向页面中心聚拢，形成一个向心的版式。
③离心视觉元素引导浏览者视线向外辐射，形成一个离心的网页版式。
网站实例：https://www.doczj.com/doc/2b12542957.html,/
9、三角形
特点：网页个视觉元素呈三角形，正三角最具稳定性，倒三角则产生动感，侧三角构成一种均衡的版式，既安定又具有动感。
优点：稳定而不是动感
网站实例：
10、自由型
特点：自由型的页面具有轻松活泼、轻快的风格。
优点：自由、舒展
网站实例：http://www.ktgardens.cz/
2.2.2.9 栏目布局
. 人们天然就有将信息分类的认知需求
. 网页设计中的“方块“
. 网站信息以方块呈现的效率最高，用户可以通过区块来分辨这个区域的信息是否是自己需要的，这样可以迅速缩小范围、进行细致寻找或是浏览下一个区域。
用户可以分辨出明显的4大区域，每个区域里又有小的区块划分版式区块的原则：
同类合并原则
确定中心原则
临近原则
要点
方块感越强能给用户方向感
方块越少越好
尽量用留白做视觉区分
检查方法：
将网站的背景图片，线条全部去掉，看是否还能保持层级和区块感
2.2.2.10 栏目
栏目的主要作用一般分两类：1.推荐可见的内容或是功能；2.通过推荐可见的信息，引导用户点击更多>>浏览与推荐内容相关的信息。通常一个栏目的推荐应是属于某一频道或是某一列表的内容，因此呈现在栏目的信息最好是最新、最吸引用户的内容。
2.2.2.11 分页
. 长文章分页呈现吗？一般来说不要
简单地将一篇长文章分成1、2、3……页并不好，如果仅仅通过“继续”或“下一页”那么还不如用一页显示，用滚动来代替翻页。
. 向导式的交互除外，比如电子商务的支付环节，分页是最好的呈现方式，因为每个步骤一个工作流程，必须完成上一步才能进入下一步
. 分页后各个页面的内容从某个角度应该是属于同一类的
2.2.2.12 搜索
1.基础规范
.文本框
a.搜索框文本框的长度应适中，至少应提供显示10个汉字字符的宽度；
b.搜索框组件中适应文本框必须为单行文本框；
c.文本框的长度不得少于130个像素高度不得低于18个像素；
. 分类选择
分类标签提示一般放在搜索框的上方，或是搜索按钮的前面
. 帮助信息
a.帮助信息一般包括三块内容：分类标签提示、提示性文字、热门关键词提示等；
b.”提示性文字”可设置灰色（#cccccc）显示，点击输入框后提示文字消失。提示文字应简
明扼要，文字一般用于内容、用途、搜索范围等用户有真正帮助的提示。“请输入关键字”
这样的提示不应出现。
c. “热门关键词提示”一般放在搜索框下面
. 搜索按钮
a.搜索按钮一般包含图标形式或者文字形式两种
b.使用图标形式时只能使用放大镜的图标，采用其他元素时需谨慎。
c.搜索按钮上的文字最好为搜索，避免其他描述。
d.图标形式（放大镜）和文字形式搭配使用，会出现如下三种情况：
2.应用场景
强表现方式：
. 加大搜索框的显示，输入框内采用大字体（14号）
. 突出搜索button的表现形式，更直观，更有点击欲
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 标记的嵌套结构，如在表格->行->单元格内放置图片，那么可以认为单元格是放置图片的容器。 样式表：即级联式样式表CSS，它是W3C机构在HTML标记语言上扩展的格式语言。 非标准交互控件：是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封装的控件，或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。 2. 界面设计规范细则 总体目标 以规范作为基本原则，在此框架内进行合理的扩展和变化，将站点内的每个模块服从于整个站点，模块页面与“高内聚”的控制代码紧密的结合在一起，同时对应于应用程序基于系统的架构分析。 2.1. 通用原则 1 界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种
. .. . WI-PSMIS-DJ-B008 02.01.000 （部资料） ECE项目图形用户界面设计规 自2012年8月日起正式生效 从兴电子开发 编制：审批： .. .. .. ..
目录 1引言 (4) 1.1目的 (4) 1.2围 (4) 1.3参考资料 (4) 2概述 (4) 3原则 (5) 3.1易用性 (5) 3.2规性 (5) 3.3合理性 (6) 3.4美观与协调性 (6) 3.5独特性 (7) 4设计规 (7) 4.1登录界面 (7) 4.2首页 (7) 4.3框架设计 (7) 4.4按钮设计 (8) 4.5对话框 (8) 4.5.1一般对话框 (8) 4.5.2有模式对话框 (9) 4.5.3无模式对话框 (9) 4.6面板设计 (9) 4.7菜单设计 (9) 4.8图标设计 (9) 4.9滚动条 (10) 4.10换肤功能 (10) 5保留字 (10) 5.1常用保留字 (10)
电力营销图形用户界面设计规 1引言 1.1目的 统一和规软件界面。 1.2围 电力营销改造。 1.3参考资料 2概述 界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够，直到最近网页制作的兴起，才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。 微软公司和苹果公司是这方面的典。 微软公司的所有产品包括Office、Windows、MSN Messenger和其所有的都是我们追随的对象。而且微软公司所有的文档和产品介绍也是我们模仿和学习的对象。 苹果公司更是这方面的鼻祖，它的所有产品无不表露着它在这方面是无人能及的。 我们考虑GUI设计时应该遵循基本的规则然后参考成熟的设计，并能够添加自己的独特性。 在一个时期很流行的界面风格在另外的时期可能已经落后，所以我们要有创新和超前的意识。
系统开发规范 1、数据库使用规范 1.1服务器上有关数据库的一切操作只能由服务器管理人员进行。 1.2程序中访问数据库时使用统一的用户、统一的连接文件访问数据库。 1.3原则上每一个频道只能建一个库，库名与各频道的英文名称相一致，库中再包含若干表。比较大的、重点的栏目可以考虑单独建库，库名与栏目的英文名称相一致。 1.4命名： （1）数据库、表、字段、索引、视图等一系列与数据库相关的名称必须全部使用与内容相关的英文单词命名（尽量避免使用汉语拼音），对于一个单词难以表达的，可以考虑用多个单词加下划线（_）连接（不能超过四个单词）命名。 （2）所有的名称必须统一使用英文小写字母。 （3）所有的名称起始和结尾不能使用下划线（_）。 （4）所有的名称不能包含26个英文小写字母和下划线（_）以外的其他字符。 1.5不再使用的数据库、表应删除，在删除之前必须备份（包括结构和内容）。 2、文档规范 所有的项目必须有相关的文档说明（可以是电子文档）。文档应包含如下内容： （1）项目名称。 （2）项目小组名单，项目负责人。 （3）项目开发起始时间和结束时间。 （4）项目内容描述。 （5）项目位置。（在哪个频道、哪个栏目） （6）与项目有关的程序文件名（含路径名），文件内容及实现的功能描述。 （7）完整的程序流程图。
（8）数据库、表、视图、索引的名称，用途。字段的名称、类型、长度、用途，必须附上相关的SQL语句。 3、源代码与页面嵌套规范 3.1源代码： （1）使用自定义变量（包括全局变量、局部变量）之前必须先声明变量，并用注释语句标明变量的类型、用途。 （2）自定义函数必须用注释语句标明函数的用途、参数的数据类型、意义，返回值的类型。 （3）程序中重要的过程或代码较长的过程应使用注释语句标明该过程的起始行和结束行，并注明该过程的功能。 （5）所有的注释文字一律使用简体中文。 3.2 HTML页面嵌套： （1）网页设计部设计的HTML页面以嵌套的方式确定用于动态显示程序执行结果的位置、宽度、行数（或高度）等，并在相应位置予以文字说明。页面中与程序无关的图片、文字、联结等必须使用完整的URL。 （2）软件开发人员和编辑人员可以根据情况协商，将页面文件及图片与程序独立存放在各自的服务器上，页面改版和修改程序独立进行。 （3）使用include技术将分割开的HTML页面分别嵌入程序代码中，要求做到修改HTML页面时无须改写程序，而修改程序时不会影响HTML页面效果，将页面改版和修改程序两项工作分别独立。 （4）页面和程序嵌套以后不能破坏原HTML页面的整体显示效果，字体、字号、颜色等应尽量保持原HTML页面的风格。 （5）动态生成的页面的各项指标（如图片大小、页面宽度、高度、页面文件的字节数等）应符合本公司网页设计方面的要求。 4、测试规范（软件部分） 对于较大的项目应成立相应的测试小组，小组成员由软件开发人员、网页设计人员、技术人员、
UE,UED，用户体验 先说说UE吧，全称Usre Experience，我们常说的UED就是后面增加了一个Designer而已。汉译：用户体验设计师 [书面解释]UE设计一般是指游戏设计或游戏相关设计，其中也包括网站设计。概念：用户体验设计师——user experience designer，国外叫UED，国内也简称UX/UE设计。个人认为此概念继续延伸下去，其实生活中很多也包含于UE里面的。你的生活中会碰到很多形形色色的trouble，这些trouble会让你very anger，so.... ----------------------------抽支烟，回来继续--------------------------------- UE定义：是指User访问一个web或者使用一个产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再来/使用。他们能够忍受的问题，疑惑和BUG的程度。 用户体验设计，就是最大程度上是网站的功能设置界面设置更加人性化，方便用户，满足用户体验基于以用户为中心的设计原则，采用焦点小组、可用性试验、用户测试等易用性研究方法，对用户在使用产品过程中的体验感受进行正确准确的评估、充分认识用户的真实期望和目的、对用户操作流程的预设设计进行修正和有效的改进，保证产品核心功能及用户任务需求的平衡，促进人机界面的协调工作，提高产品易用性减少产品BUG。 用户使用产品过程中建立起来的纯主观感受。对于界定明确的用户群体来讲，用户体验共性是能够经由良好设计实验来认识。新竞争力在网络营销基础与实践中曾提到计算机技术和互联网的发展，使技术创新形态正在发生转变，以用户为中心、以人为本越来越得到重视，用户体验也因此被称做创新2.0 模式的精髓。 UED步骤：数据调查、用户访谈、产品分析、产品定位、功能确认、信息架构、页面原型、UE 设计、视觉设计。 数据调查： 数据可以带来什么？对于各页面及路径的pv(产品),uv(用户)的总结，可以得到产品使用情况的一个大致概貌。缺乏什么？不了解用户，不了解过程，很难进入深层次的研究，不利于把握用户底需要什么。 用户访谈： 用户访谈有什么好处呢？产品和用户之间的联系，就像一个黑匣子。对用户的访谈，就是一个试图打开黑匣子的过程。打开了黑匣子，我们就可以改造他们之间的路径。从而使两者无缝融合。就像是研究dna，对结构的研究可以重塑基因。反映到产品上，就是我们可以以用户的心理模型去创造产品，或者是用富于创造的产品去影响用户。 产品分析： 即使了解用户，是否能提出有效的解决方案呢？此时，对于相关产品的研究就会作出帮助。如果说对用户的需求，可以对产品有纵深的认识。那么对产品的分析，有利于横向去加深去产品的理解。为什么做同一个功能，会产生出两种不同的产品？差异表现在大体，也体现在细节，通过不断的比较，会发现产品各功能间，产品和用户间千丝万缕的联系。 产品定位：
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、调研验证阶段 几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。 测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。 调研阶段需要从以下几个问题出发： 用户对各套方案的第一印象 用户对各套方案的综合印象 用户对各套方案的单独评价 选出最喜欢的 选出其次喜欢的 对各方案的色彩，文字，图形等分别打分。 结论出来以后请所有用户说出最受欢迎方案的优缺点。 所有这些都需要用图形表达出来，直观科学。
1目的 ?设计软件的用户界面，产生《用户界面设计报告》。 ?制作用户界面的资源如图像、图标或者界面专用组件等。 2适用范围 2.1机构 项目组设计人员。 2.2业务 适用于公司内所有包含用户界面开发的项目的软件用户界面设计。 3名词术语 UI：User Interface用户界面。 4概述 用户界面设计包括四个活动，活动描述如下： 1）、设计准备 2）、用户界面设计 3）、撰写文档 4）、设计评审 5角色和职责 ?界面设计人员：从事用户界面设计，如果可能的话，邀请用户或美工人员协助设计用户界面。6活动
用户界面设计规范页数第 1 页共 6页 编制部门XX部 生效日期2019年10月15日 6.1设计准备 ?界面设计人员阅读需求规格说明书和概要设计说明书，明确界面设计任务。 ?界面设计人员与用户交流，了解用户的工作习惯和他们对界面的看法。 ?界面设计人员准备相关的设计工具和资料，收集或创作基本的界面资源如图像、图标以及通用的组件。 ?界面设计人员确定本软件的用户界面设计规则（或指南），主要包括： ?优秀界面的特征或通用的设计原则； ?软件主界面（如主窗口、主页面）的设计规则； ?软件子界面（如子窗口、子页面）的设计规则； ?标准控件的使用规则； ?美学设计规则。 6.2用户界面设计 用户界面设计一般要经历“原型设计->原型评估->细化”等步骤，通常迭代进行。 ?原型创作 界面设计人员创作界面原型：先徒手画，或者用Visio等工具绘制界面的视图，再用软件开发工具实现可以运行的原型。 ?原型评估 界面设计人员邀请用户和同行们评估界面的原型，汇集意见，及时改进。 ?细化 界面设计人员细化界面原型，例如美工处理，添加细节等。 6.3撰写用户界面设计文档 用户界面定型之后，界面设计人员根据指定的模板撰写详细设计说明书中的用户界面设计部分，主要内容包括： ?应当遵循的界面设计规范
********系统系统设计文档 *****系统设计小组 组长：**** 组员：**** **** **** ****
目录 1 引言 (1) 1.1编写目的 (1) 1.2背景 (1) 1.3定义 (1) 1.4参考资料 (1) 2 系统功能设计 (3) 2.1 功能模块设计 (3) 2.2 ****模块设计 (3) 2.3 ****模块设计 (3) 3 类设计 (4) 4 数据库设计 (6) 5 接口及过程设计 (7) 6 界面设计 (8) 7 其它设计 (12) 8 小结 (13)
说明： ●在进行系统设计时可以任意传统系统设计方法或面向对象系统设计方 法，或者两者相结合，不局限于使用一种方法。 ●文档中每章图都需要配有相应的文字解释。 ●本文档中的图按照章编号，如“1 引言”表示第一章，“1.1 编写目的” 表示第一章第一节。第一章第一个图标号为“图1.1 ****图”，而第二个 图标号为“图1.2 ****图”，写在图的下面，居中。 ●本文档中的表也按照章编号，第一章第一个表标号为“表1.1 ****表”， 而第二个表标号为“表1.2 ****表”，写在表的上面，居中。 ●使用visio画用例时，Actor及用例的图示模具（用例图模具.vss）可以 到BB平台下载。 1 引言 1.1编写目的 说明编写这份系统设计说明书的目的，指出预期的读者。 1.2背景 说明： a．待开发的软件系统的名称； b．列出此项目的任务提出者、开发者、用户以及将运行该软件的计算站（中心）。 1.3定义 列出本文件中用到的专门术语的定义和外文首字母组词的原词组。 1.4参考资料 列出用得着的参考资料，如：
第1.0节： 简介 微软的Surface使开发人员和设计人员，为他们的客户提供惊人的，社交的，具有很强的互动体验。来自四面八方的人们可以使用360°接口面对面的协作，合作和建立信任。 开发引人注目的Serface体验需要不同的方法来设计接口。本文提出的设计原则和指导方针，以解决关键方面，包括：互动，视觉，声音，文字，和更多的应用程序界面设计。使用这些原则和惯例为出发点，得到最有效的界面软件和硬件平台的独特功能。 第4.0节： Serface 硬件 本节讨论具体涉及到serface的硬件设计注意事项和指导方针。 第4.1节： 输入法 1.基于视觉的触摸 与serface互动的主要方式是触摸。Serface从一开始就在为触摸设计，它是Surface 应用程序中互动的关键动力。 手指和blobs ：serface自动识别区分手指和blobs。当有人将手指放在屏幕上，手指会被识别。他们指出的方向，视觉输入系统会自动检测到手指数目、位置和方向。当其它不认定为手指或者标签的物品被放置在屏幕上时，被列为blobs。提供基本大小的信息并分配一个任意方向。方向值在blobs中通常是没有可靠的手指或者标签。 触摸交互- 表面SDK操作处理器识别三个离散的操作：移动，旋转和调整大小。 事实上，Surface SDK中只有三个操作手势是一个技术性的事实，但是从交互的角度看，有许多不同的触摸交互，一个人可以使用这些操作。下面的插图显示了如何使用一个手指或者几个手指，在各种触摸交互中执行虚拟对象。
点击- 按，然后释放 保持-然后按住 滑动或推- 使用你的手指滑动或推来移动对象
轻击-轻按，迅速滑落，然后释放 触摸并开启- 将你的手指，靠近物体外侧边缘的一块内容，并围绕其中心旋转 自旋- 扭转迅速用两个手指旋转对象
软件用户界面设计规范 1.导言 1.1 目的 为开发人员提供界面设计和开发的指南，引导开发人员设计简洁美观的用户界面； 1.2 适用范围 适用于xxxxxx。 2.软件界面设计的重要性 2.1 发展趋势 软件用户界面的发展经历了从简单到复杂、从低级到高级的过程，用户界面在软件系统中的价值比重越来越高。 2.2 开发竞争 得益于互联网的发展和普及，软件开发的技术门槛在不断下降，大部分软件企业的技术手段也趋向于雷同，“软件设计”变得越来越重要。当大家都掌握了相似的技术和需求信息后，企业之间的开发竞争“比的就是设计”。 –软件用户界面设计要综合考虑“易用性设计”、“艺术设计”和“技术实现”，很有挑战性。 2.3 用户挑剔 用户界面在很大程度上影响着软件的命运，因为广大用户对软件的评价主要来源于他们操作用户界面的感受。同类软件越多，选择余地越大，购买者对软件
用户界面就越挑剔。 3.软件界面设计的现状、问题及原因 3.1 不容乐观的现状 尽管国内有很多技术出色、聪明过人的软件工程师，但是不少人开发出来的软件产品却既难用又难看，客户很不满意。导致经常要修改软件的用户界面，造成极大的生产力浪费。 到处是用户界面设计缺陷： –界面措辞含糊，甚至有错别字。连简单的消息框都设计不好，可能存在文不对题的语病。 –界面布局混乱，缺乏逻辑，凡是能放的东西都堆集上去，让用户不知从何下手。–没有防错处理，不对用户输入的数据进行检验，不根据用户的权限自动隐藏或者禁用某些功能。执行破坏性的操作之前，不提醒用户确认。 –不提供进度条、动画来反映正在进行的比较耗时间的过程，对于重要的操作也不返回结果，让用户干着急。 3.2 问题和原因之一 由于国内没有开设软件界面设计的课程，大家对这部分知识没有深刻的意识，只是在工作中凭着个人的经验与感觉设计软件的用户界面，这样产生的界面往往得不到大众用户的认可。 3.3 问题及原因之二 开发人员在设计用户界面方面不仅存在先天的教育缺陷，更加糟糕的是还常常“错位”的毛病。他以为只要自己感觉用户界面漂亮、使用起来方便，那么用户也一定会满意。 3.4 问题及原因之三
系统页面设计规范V1.0 柯建树2013/07/30
目录 一、基础规范 01、系统宽、高度 02、文本框设计规范 (1)基础规范 (2)应用场景 03、页码设计规范 (1)普通页码翻页 (2)小型页码翻页 04、文字的编排与设计 (1)文字大小 (2)文字颜色 (3)文字行距 (4)英文字体规范 (5)文字链接 05、整齐的概念和应用 06、模块化表现 二、参考指南 01、页面修饰 (1)简单的光影效果
(2)质感的表现 (3)透明效果的应用 02、个性皮肤的应用 03、图标的统一使用 04、图标表意 05、表格
基础规范 一、系统宽、高度 显示器分辨率比例 在软件系统的使用上，遵循以大多数为视觉标准，同时遵循其他分辨率的显示效果。 软件系统一般采用满屏显示内容，宽度为100%，高度100%，在设计网页时，应与使用量最大的分辨率作为参照，即1024px*768px。在这个尺寸上，系统应当具有全部显示的能力。 不同浏览器，不同分辨率下网页第一屏最大可视区域
在IE下，宽度21表示17px的滚动条加上4px的浏览器边框，做到全部兼容，以小分辨率设计，目前我们系统的设计标准是1003*600。 即PS的设计文档1003px*600px，72dpi。 二、文本框设计规范 尺寸大小 (1)小型输入框应至少设置5个中文字符宽度，内边距（padding）上下3px，左右7px，单行不少于18px； (2)大型输入框应至少设置8个中文字符宽度，内边距（padding）上下3px，左右7px，单行不少于18px； (3)搜索框设计宽度至少设置8个中文字符宽度，内边距（padding）上下3px，左右7px，单行不少于18px，宽度不少于130px； 帮助信息 (1)帮助信息一般有二类，限定标签提示、标示性文字等； (2)“限定标签提示”一般放在搜索框的左面； (3)“标示性文字”可设置灰色（#CCCCCC）显示，点击输入框后提示文字消失。提示文字应简明扼要，文字一般用于内容、用途、搜索范围等对用户有真正帮助意义的提示，“请输入关键字”这样的提示不应出现。 1、2、
完成出色用户体验设计的六个简单步骤 原文作者：Henry Rahr，Product Manager & UX Guy at CoreLogic翻译：Sharon Fu 作为一名产品经理，在我的工作中会遇到很多较为紧迫而棘手的事情，项目的截止时间，对行业动态的了解，对项目预算的争取……上面这些只是其中的一部分，在这样的工作中让我意识到在一个领域中构建越简单越好的成功法则是如 此重要。 对于那些软件／网页／移动应用来说，用户体验正在获得更多的关注，这种关注很多时候可以给我们的产品带来更多好处。最近几年，一些软件开发公司开始将一些2C（面向用户）的设计应用在2B（面向商业）的领域，这已经带来了一场用户体验的革命。然而，用户体验设计师作为一个非比寻常的群体，往往需要support不同的项目和产品，他们很难获得专门的资源和路径，这正是你正在阅读这篇文章的原因。 在意识到上面的问题后，我花费了很多个晚上来思考，一些自由职业的UI/UX设计师也在寻找类似于行业认证的组织 或者认证的流程，比如Nielson Norman Group。而接下来的步骤定义了一种用户体验设计的简单流程，保证产品用户体验的关键在于在软件开发的全流程时刻关注于用户体验，让我们一起来看一下最近完成的一个app设计项目。
1发现 看到这个标题，有些人可能会感到紧张。但事实是站在你自己的角度去考虑用户体验是很容易出现失误的。没有充分的用户反馈却着急构建用户体验对大家来说是在浪费时间，而且你的开发team可能很快就会有理由拒绝支持你。 这是因为你的观点尽管有趣但是无关紧要。在这一步中，通过电话联系你的用户跟他们坦诚地聊聊他们在产品使用过程中所遇到的问题，在聊天的过程中，以一种好奇的心态，不要限制聊天内容的范围，不要局限在你的产品，了解一些他们正在使用的可以用来完成某些任务的产品对你来说也是有帮助的，就像Henry Ford说的：如果我问人们想要什么样的马，他们可能会说“跑的更快”的马。所以仔细得去倾听用户的痛点并且记录下来，因为他们就是你最终需要解决的问题。在这一步中不要试图设计任何东西，你必须专注于这些用户痛点而不是跳到痛点的解决方案中去。 在你跟5-8个用户聊过之后，可以去做第二步了。 2充分利用你的笔和纸 可以这么说，这一步就是笔和纸，你可能有很多出色的工具用来完成你的线框图，你的workflow，但是在我看来，没有任何工具比笔和纸更好用。在这一步中你起码需要画出三种可能的设计方案去解决用户的需求。在整个设计过程中，参考一下其他同类目标的竞品应用也是不错的办法，你可以把
用户界面设计规范 1.简介 软件用户界面的重要性。 软件用户界面的重要性。 一般地，成功的Web应用软件至少有三个卖点： 1)应用软件的功能符合用户需求。 2)用户容易使用该软件。 3)用户觉得该软件界面美观。 基于第1项，是用户需求方面的事情，2和3都是用户界面的事情，可见用户界面对于一个软件是多么的重要！所以用户界面设计是Web应用软件开发过程中的关键工作之一，而不是次要工作。 1.1.目的 本文档以用户界面(UI)设计理念和用户操作习惯为原则，为了保证界面设计的一致性、美观性、扩展性、安全性等，对WEB应用软件用户界面设计的原则、标准、约束和界面元素等内容提出详细要求，便于用户界面原形设计、用户界面开发、以及用户界面测试等角色使用和交流，并为以后的用户界面评估制定一套评价体系。 同时规范界面(UI)开发人员在设计、制作、开发用户界面行为，通过本文档来约束界面开发人员的随意性，避免造成页面效果不统一、不协调等问题。 1.2.范围 本规范适用于Web应用系统用户界面(UI)的设计、开发和测试评估工作。
1.2.1.内容范围 本规范严格定义了Web软件用户界面(UI)设计原则、要素和具体细则内容，并且对页面元素进的应用范围、样式进行了详细的定义。 1.2.2.适用范围 本规范适用于Web应用系统项目中所有界面(UI)设计开发工作。使用人员 包括：界面设计人员、制作开发人员、界面测试评估人员。 1.3.术语释义 1.3.1.用户界面 用户界面是人与软件系统进行交互的接口，实现用户与计算机之间的通信，以控制计算机或进行用户和计算机之间的数据传送的系统部件，是用来接收信 息和向用户展示信息的窗口，是软件系统成功与否的一个很重要因素。 1.3. 2.UI 即用户界面，又称用户接口 1.4.文档约定 本文档所指的页面，均基于1024×768的屏幕分辨率。 所有关于页面或控件的距离、大小描述，单位均是Pixel(像素),简写为PX。 1.5.参考资料 1、《用户界面设计--有效的人机交互策略(第三版)》电子工业出版社 2、《Web软件用户界面设计指南》电子工业出版社林锐等著 3、《GUI设计禁忌》机械工业出版社 4、《软件人机界面设计》高等教育出版社陈启安编
Web应用界面设计规范（Design Specific ation for Web UI） 主讲人：ARay 目录： 一、软件界面规范的重要性及其目的 二、用户体验为何如此重要 三、Web规范体系介绍 四、界面设计开发流程 五、应该遵循的基本原则 六、界面设计规范 一、软件界面规范的重要性及其目的 ①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。 二、用户体验为何如此重要 ①日常生活中的遭遇 X员工悲惨的一天： 早晨起来，发现闹钟没有按原先设定响起来。 一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。 到了地铁站，发现公交卡没有钱了。 无奈之下只能去排队买票。 排了3趟地铁，终于到公司了，但是你却迟到了。 结果：尽管你已经非常努力，但是你还是迟到了。 那么，让我们看看这一连串 的倒霉事， 是什么让我们如此狼狈？ ②什么是用户体验
用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。 糟糕的用户界面表现： 表现一：过分使用各种奇形怪状、五颜六色的控件。 表现二：界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。 表现三：界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。 表现四：违背使用习惯。你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。表现五：消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。 表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。这种
用户界面设计规范
目录 1.总体原则 (2) 2.窗体控件布局 (2) 2.1.控件间距 (2) 2.2.控件对齐 (3) 2.3.文字对齐 (3) 2.4.窗口缩放 (3) 3.界面配色 (3) 4.控件风格 (4) 5.字体 (4) 6.交互信息 (4) 7.其他方面 (5)
1.前言 任何计算机应用系统都是通过用户界面与用户交互的，用户界面已成为所有计算机系统的有机组成部分，它决定了人类如何控制和操纵系统。一个好的用户界面应该为用户提供统一、规范的交互界面，从而提高用户工作效率，增强用户对系统的认可程度。因此可以说，用户界面设计的优劣已经成为计算机应用系统成功与否的关键因素之一。 本规范主要从交通信息中心系统开发、设计的实际出发，对用户界面设计进行一定程度上的规范，主要内容为用户界面设计总体原则、窗体布局、界面配色、控件风格、字体、交互信息以及其他等几个方面。 2.总体原则 用户界面设计的总体原则：统一。这也是本规范遵循的最高原则，用户界面的设计，无论是控件、信息提示措辞、界面配色等，都要遵循统一的标准，做到真正的一致。 本规范的施行方法：针对用户界面设计的特殊性，用户界面设计规范队某些方面只进行原则性的规范，具体的内容（比如配色方案用暖色系还是冷色系等）应在每一个应用系统的开发启动之前，由项目小组根据应用系统自身的特点、系统用户对象的特点等信息，确立每一个部分的具体内容，然后在应用系统设计过程当中执行。 3.窗体控件布局 3.1.控件间距 窗体控件布局合理，绝对不能显得拥挤；拥挤的窗体控件布局让人难以理解，因而难以使用。让人看上去，不能太拥挤，也不能太松散。控件对窗体的覆盖率以不高于75%为宜。 控件间隔（垂直）：组与组之间间隔15，组内控件间间间隔10。 控件间隔（水平）：组与组之间间隔15，组内控件间间间隔10。
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标记的嵌套结构，如在表格-> 行-> 单元格内放置图片，那么可以认为单元格是放置图片的容器。 样式表：即级联式样式表CSS，它是W3C机构在HTML标记语言上扩展的格式语言。非标准交互控件：是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封装的控件，或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。 2. 界面设计规范细则 总体目标 以规范作为基本原则，在此框架内进行合理的扩展和变化，将站点内的每个模块服从于整个 站点，模块页面与高内聚”的控制代码紧密的结合在一起，同时对应于应用程序基于系统
产品设计交互规范 常州广传网络技术有限公司 编写：王英 2013年11月
目录
1概述 规范的制定采用UCD（以用户为中心的设计）方法，遵循ISO9241-11部分标准的要求。设计过程以用户的使用习惯和心理需求作为出发点，在认真研究并参考了国内外各种优秀设计的基础上，制定出了适合我集团应用服务产品的设计规范。此外，为保证规范具有良好的可用性和广泛的适用性，UE研究室对设计出的每个模式都进行了严格的用户测试，并对各组件采取了不同应用场景的测试。 该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中，给出了模式描述和扩展描述的规范描述，供不同的应用类型和使用场景选择、组合使用。 1.1规范的目的 ●在产品开发过程中，给不同部门的相关人员提供统一的规范与指导，使沟通与合作顺利 有效地进行，以保证产品界面的最终规范化实现； ●从一点一滴入手解决公司产品的可用性问题：使操作更人性化，减轻用户的认知负担， 改善产品的用户体验，提升产品的市场竞争力； ●使产品在界面外观和操作行为上形成一致，加强公司产品的品牌化特征。 1.2规范适用的范围 广传项目部内的所有产品。 1.3规范适用的人群 参与产品设计的所有人员、前端开发人员及测试人员等。 注：从正式发文之日起属于新项目范畴的必须遵循此规范，对于已有项目进行重大版本升级的项目要遵循此规范。
2基本原则 以下原则主要用来说明此规范的指导思想与设计依据。简单描述如下，以供该文档的阅读者参考和使用。具体的原则描述请参见《界面设计指南》。 2.1一致性 ●视觉一致：在同一产品内，所有的同类界面元素在相同的应用环境下，界面外观在视 觉上应该保持一致；否则，界面外观要予以区分； ●操作行为一致：类似场景的界面设计，其操作方式必须保持一致；当操作行为相同时 要保持视觉上的一致；当操作行为不同时，在视觉上就一定要有所区别； ●外观与使用者的预期一致：保持对象与其行为相符，保持不同作用的对象外观的不同； 视觉元素的外观及其操作结果，必须与用户的心理认知相符。 2.2简洁性 ●减轻视觉负担：使用尽可能少的元素，不提供与当前任务无关的信息； ●简明的文字表述：文字表述必须简明扼要、清晰易懂，内涵丰富，并易于理解和记忆； ●操作简单：减少冗余的操作步骤。 2.3避免干扰和打断 ●避免干扰：明确用户在特定界面中的首要任务和目标，尽可能避免该界面上的视觉噪 声和其它干扰。 ●避免打断：让用户的操作连贯顺畅，避免使用模态对话框（弹出的独占焦点的对话框） 打断用户的工作。 2.4减轻用户记忆负担 ●认知明确：产品中界面元素外观要明晰，易于辨别；产品的逻辑意义要合理，导航要 及时准确； ●系统智能化：提供默认值；帮助用户记住尽可能多的信息，最低限度地从用户那里索 取信息； ●合理的隐喻和习惯用法：使用用户熟悉的，符合使用习惯的隐喻，及通用的习惯用法， 为用户的任务提供直观易用的界面； ●有效的启示：提供具有明确引导性的启示来指导用户正确操作（启示：某对象用来说 明自身可以如何使用的外观属性）。 2.5及时有效的反馈
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鼠标与键盘一致性原则
用户界面规范 有关界面设计与测试的规范，我在工作中总结了一些有关界面设计与测试的规范，与大家共享。界面设计与测试规则界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。 目前流行的界面风格有三种方式、多窗体、单窗体以及资源管理器风格，无论那种风格，以下规则是应该被重视的。 1、易用性：按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。 易用性细则： 1)、完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。 2)、完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。 3)、按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。 4)、界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。 5)、界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。 6)、同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。 7)、分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab 8)、默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。 9)、可写控件检测到非法输入后应给出说明并能自动获得焦点。 10)、Tab键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式。 11)、复选框和选项框按选择几率的高底而先后排列。 12)、复选框和选项框要有默认选项，并支持Tab选择。 13)、选项数相同时多用选项框而不用下拉列表框。 14)、界面空间较小时使用下拉框而不用选项框。 15)、选项数叫少时使用选项框，相反使用下拉列表框。 16)、专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。 2、规范性：通常界面设计都按Windows界面的规范来设计，即包含“菜单条、
常用中后台交互设计控件使用场景与规范总结 最近刚完成平台安畅云 2.0 的改版设计，平台模块很多，经常存在很多类似的页面和组件，若不制定统一的规范和控件，则会导致很多重复的工作，大大降低产品的设计效率； 同时，平台的一致性也得不到保障。 所以，我们视觉、交互、前端的小伙伴们针对我们踩过的坑，大家认真总结和提炼出一个 符合公司定位的设计规范，统一公司项目的前端 UI 设计，规避不必要的设计差异和实现 成本，实现设计和前端资源的效率最大化。 此设计规范主要分享了中后台常用设计组件的定义、组成、使用场景及注意事项。 字体 概述 字体是界面设计中最基本的构成元素之一，用户通过文字来理解内容和完成任务，合适的 字体将大大提升用户的阅读体验及工作效率。在安畅云项目的字体使用中，为了使页面的 视觉层次更加清晰，我们从以下三方面来使平台的字体符合易阅读和美观的要求。 合理的使用不同的字重、字号和颜色来强调界面中需要突出的信息； 尽量使用单种字体，使用多种字体会让界面看起来零散和杂乱无章； 遵循 WCAG 2.0 标准（标准详情见 https://https://www.doczj.com/doc/2b12542957.html,/Translations/WCAG20- zh/#visual-audio-contrast），字体在使用时与背景颜色的对比值满足无障碍阅读的最 低标准。 字体使用建议 中文字体优先级：PingFang SC、Hiragino Sans GB 、Microsoft YaHei（平台使用字体）英文字体优先级：Helvetica Neue、Helvetica、Arial（平台使用字体）
字号使用建议 行高使用建议 行高也是影响用户阅读体验的重要因素之一，我们查阅资料得知西文的基本行高通常是字号的 1.2em 左右，而中文因为字符复杂，所以中文行高需要更大。现在公认1.5em 至1.8em 之间会有一个比较好的视觉阅读效果。 安畅云项目行高计算公式：行高值=字号 x 1.5，例如：12 号字体的行高为 18px，14 号字体的行高为 21px。