规范3-程序用户体验标准和规范

互联网XXX平台用户体验标准

一、清晰。

通过使用文字、流程图、层级层、图标等元素，避免用户对界面的模糊认识。

7+/-2原则

2秒钟法则

3次点击法则

80/20法则

二、简洁

为了让界面清晰，可以通过在所有元素上添加浮动框或者标签这种简单的方法实现。

动态扩展表单。

输入框中的标签

搜索是简单的（使用自动完成输入框）；递进显示

使注册表单尽量简洁

驾驭wizard向导（sstab格式合并显示）

三、熟悉

在设计过程中，使用一些现实生活中共认的意象能够更好地帮助用户理解。

输入时自动、重新聚焦。使用浮动控件进行简化和解构。

链接到主页的网站标题通常在网站的左上方显示。

宣传语和二级标题通常紧靠在网站标题的下面。

网站的搜索框通常在网站的右上方或中部的上方。

四、响应性

一是响应必须迅速；二是界面应该提醒用户发生什么事，用户的输入是否成功的被处理，让用户了解这些信息反馈。

使用加载指示器。

使用按钮状态提高响应性。

减少图像的尺寸

图片聚合

Css放在顶部，而javascript放在底部。

压缩Css和Javascript

使用外部Css和Javascript文件。

使用一个文档类型

避免死链接。

五、一致性

在整个应用程序中保持界面一致性。

链接应该在同一窗口打开。

提供站点地图。

使用帮助。

六、美学性

好的界面。

尽可能地避免使用splash页面。

建立良好的导航。（全局导航、本地导航、上下文导航、补充导航）

七、高效性

通过快捷菜单或良好的设计帮助用户提高工作效率。

宣传应用程序的特点。

考虑增加“返回首页”链接

文字标签在输入框上面。中间可以增加标签说明。

用户输入数据的及时响应。

实时更新信息

八、容错性

一个好的用户界面不应该因为用户的错误而惩罚他们，而应该总为他们提供犯错后的补救方法。

九、黄金法则

努力做到连贯

允许频繁使用系统的用户使用快捷方式

提供信息反馈

为关闭这一动作设计对话框

提供简单的设计处理

允许简单的撤销操作

提供控制感。支持内部控制点。

降低短期记忆载荷。

十、提高访客的转化率

AIDA（注意力、兴趣、期望、行动）

使用视频展示产品

可以扫视的功能列表

馈赠让客户想回报

从众心理

隐性的建议

永远提供下一步操作

使用稀缺性来促进需求

退款保障，消除客户的后顾之忧。

鼓励用户试用

别让邮费吓跑客户

消除选择麻痹

简化注册

互联网XXX平台用户体验规范

一、明细界面规范

1)按钮大小：宽高：66px*20 px;

2)表格头高度为line-height:20px;表格里面字段内容长如名称，内容选择左对齐，日期时

间字段和状态字段居中对齐，数字型字段右对齐；

3)字体样式font{font-size：9pt；color：#000}；背景颜色浅色调为主：#F1F5FF

4)标题：为主色调加粗；

5)边框为主色调；border：#6B8DCD；1px solid

6)考虑列里面的元素要么全部居左，要么全部居右；考虑居左（左边列为背景为浅主色调）

7)鼠标滑过其中的行时为浅黄色背景（考虑顶部tr背景为渐变颜色，中间行tr部分背景

考虑为白色，底部行背景为接近主色调的颜色）

8)表中的排序图标统一用红、黄色、绿色三种颜色。

二、维护界面规范

1)弹出式窗口宽高比例必须为4:3;

2)注意必填项需加红色*号标识（即必填项的冒号之前加红色*号）；

3)标题：为主色调加粗；

4)边框为主色调；border：#6B8DCD；1px solid

5)考虑列里面的元素全部居右；

6)维护页面要对可编辑和不可编辑文本框进行颜色区分。

三、树形菜单：简洁

1)其中字体样式font-size: 9pt color:#000

四、分页显示（引用jQuery里面分页）‘

新增操作是单一tab,保存退出后自动弹出其他tab页面进行修改。

五、分页导航条：

每页显示数据20条或者15 什么的根据具体数据高度自由设置，标准一屏幕显示全部。

六、快捷键：

退出：ESC/ALT+X 新增：ALT+N 编辑：ALT+E 删除：ALT+D

过滤：ALT+F 刷新：ALT+R 保存：F8, ALT+K 保存退出：F7

七、其他

1)界面要输入要支持tab键，进行输入切换。

2)常用文本框要支持Google 自动提示。

3)所有的模块/功能组，都需要显示系统流程图。

4)可1不2，简捷至上。信息提示，禁止使用弹出对话框，使用label 进行提示。

5)网站程序必须考虑主流浏览器都要支持。IE + Firefox3

6)所有术语要一致

八、弹出窗口

1)DataTable 行单击表示选中（单选或者多选）;双击表示页面查询。

2)假如行双击有其他作用，则保留其他作用。