web配置界面设计规范

web 配置界面设计规范篇一：Web 应用界面设计规范Web 应用界面设计规范 发布时间：XX-10-10 10:21:40 来源：ARay - csdn评论：0 点击：2402 次 【字号：大 中 小】 QQ 空间 新浪微博 腾讯微博 人人网 豆瓣网 百度空间 百度搜藏 开心网 复制 更多 9 主讲人：ARay 目录： 一、软件界面规范的重要性及其目的； 二、用户体验为何如此重要； 三、Web 规范体系介绍； 四、界面设计开发流程； 五、应该遵循的基本原则； 六、界面设计规范 主讲人：ARay 目录： 一、软件界面规范的重要性及其目的 二、用户体验为何如此重要 三、Web 规范体系介绍 四、界面设计开发流程 五、应该遵循的基本原则 六、界面设计规范 一、软件界面规范的重要性及其目的 使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 产品设计通过规范的方式来达到以用户为中心的目的。 二、用户体验为何如此重要 日常生活中的遭遇 X 员工悲惨的一天： 早晨起来，发现闹钟没有按原先设定响起来。 一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。 到了地铁站，发现公交卡没有钱了。 无奈之下只能去排队买票。排了 3 趟地铁，终于到公司了，但是你却迟到了。结果：尽管你已经非常努力，但是你还是迟到了。 那么，让我们看看这一连串 的倒霉事， 是什么让我们如此狼狈？ 什么是用户体验 用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。 糟糕的用户界面表现： 表现一：过分使用各种奇形怪状、五颜六色的控件。 表现二：界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。 表现三：界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。 表现四：违背使用习惯。你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。表现五：消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否” ，让用户不知道什么意思。 表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。什么功能都往界面上挤，占地方不说，用户会厌烦，弄不好还会被吓跑。 用户体验的要素 用户体验和软件应用 面对大量的选择，用户只能自己想办法，去决定哪一个软件系统功能会符合她的要求。 企业开始意识到，提供优质的用户体验是一个重要的、可持续的竞争优势。 用户体验形成了客户对企业的整体印象，界定了企业和竞争对手的差异，并且决定了客户什么时候还会再次光顾。记住你的用户 以用户为中心的设计 -在开发产品的每一个步骤中，都要把用户列入考虑范围内 考虑用户体验 把它分为各个组成要素 从不同角度来了解它 -通过这些才能确保你控制了决策所造成的全部结果 用户体验很重要，最大的理由：它对你的用户很重要。协调一致，直观明了，甚至让人愉快的体验 -“一次”每件事都按照正确的方式在工作的体验。 三、Web 规范体系介绍 篇二：Web 页面设计规范Web 页面设计规范 目 录 1 引言 .4 目的 .4 范围 .4 缩略术语 .4 参考资料 .4 2 WEB 页面框架内容 . 4 页面框架 .4 页面布局 .5 布局原则 .5 布局要求 .5 页面分割 .5 页面结构 .6 页面展现 .7 页面美化 .7 页面字体 .8 边距 .8 表格 .8 段落排版 .9 FRAME . 9 其他页面元素 . 10 3 页面风格 . 10 风格分类 . 10 页面风格应用 . 11 4 WEB 页面交互 .11 页面元素焦点切换 11 信息填写 . 11 鼠标交互响应 11 页面信息交互 . 13 操作结果确认 13 其他规则 . 13 页面信息提示 . 13 键盘响应支持 . 15 5 WEB 页面通用规范 .16 一般页面功能 . 16 新增 . 16 修改 . 16 删除 . 16 查询 . 16取消 . 17 保存 . 17 重置 . 17 返回 . 17 分页 . 17 全选 . 17 一般页面规则 . 17 默认值 . 17 必填值 . 18 界面传递 . 18 窗口嵌套 . 18 输入框操作 . 18 在线帮助功能 18 菜单功能要求 19 快捷键功能 . 19 快捷键的限制 20 页面的规范性 20 系统易用性 . 21 输入安全性要求 21 独特性要求 . 22 多窗口的应用与系统资源 22 6 页面编程技术使用规范 23 页面元素命名 . 23 DHTMLX 控件 .24 FLEX 控件 . 25 7 页面资源规格说明 . 25 图标 . 25 图片 . 25 多媒体 . 26 8 附录 . 27 基于 DHX 的 CSS 规格示例 27 表格 CSS 示例 27 典型应用的页面示例 27 1 引言 目的 本文用于规范我公司所开发的商业软件中对于 web 页面的设计工作，明确在设计中所要遵循的准则和方法，web页面中各个元素的规格要求，确保所实现的 web 页面在风格、结构和功能上的统一，提升商业软件的外在品质。 范围 本规范适用于公司所有的商业软件产品。 缩略术语 DHMLX：web 页面的 UI 控件 参考资料 2 WEB 页面框架内容 页面框架 WEB 的页面框架是指构成完整页面的组织结构。通常是由以下三部分构成：Head，Main，Foot，有些时候出于布局的需要，在“Head”下面还会加上用于页面功能导航的“Menu” 。如图： 图 1 页面布局 布局原则 对于 WEB 应用来说，页面布局是和 web 应用的功能区相对应的，并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。 页面布局的设计，首先需要考虑用户在浏览 web 页面时视觉流向上的要求： 图 2 从视觉流向上看，用户首先看到的是页面“Head”部分的左面，通常那里是标识这个 WEB 应用的 Logo；然后是陈列 WEB 应用主要功能的“Menu”来用于页面导航；接下来用户将看的是处于页面左侧的“sidebar” ，通常这里也是用于页面功能导航的，和“Menu”出的选择相呼应，这里的内容可以通过类似树状结构的方式展示更为详细的功能；接下来是处于页面中心位置的内容部分，最后用户的视线落在 WEB 页面的底部。 布局要求 页面分割 以上面图示的布局方式为例，按照通常 web 页面设计时所遵循的方法，并结合黄金分割比例的方法： ? 首先，将页面按照 3*3 的方式进行分割，如下图： 篇三：Web 应用界面设计规范Web 应用界面设计规范 主讲人：ARay 目录： 一、软件界面规范的重要性及其目的 二、用户体验为何如此重要 三、Web 规范体系介绍 四、界面设计开发流程 五、应该遵循的基本原则 一、软件界面规范的重要性及其目的 使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 产品设计通过规范的方式来达到以用户为中心的目的。 二、用户体验为何如此重要 日常生活中的遭遇 X 员工悲惨的一天： 早晨起来，发现闹钟没有按原先设定响起来。 一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。 到了地铁站，发现公交卡没有钱了。 无奈之下只能去排队买票。 排了 3 趟地铁，终于到公司了，但是你却迟到了。 结果：尽管你已经非常努力，但是你还是迟到了。 那么，让我们看看这一连串 的倒霉事， 是什么让我们如此狼狈？ 什么是用户体验 用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。 糟糕的用户界面表现： 表现一：过分使用各种奇形怪状、五颜六色的控件。 表现二：界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。 表现三：界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。 表现四：违背使用习惯。你按 F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。表现五：消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否” ，让用户不知道什么意思。 表现六：还有一种糟糕的用户界面，乍