一个Web系统OA界面设计实施方案和开发

1、 仅供参考学习 个人收集整理 一个Web系统OA界面设计和开发 早在中国IT业方兴未艾之时，计算机应用系统主要以功能实现为主，几乎没有界面设计这个概念.时至今日，随着计算机和网络地不断普及，社会信息化程度日益加深，用户和市场地不断成熟，人们已经不仅仅满足于“够用”，而是更加强调“好用”“易用”；因此，不论是普通最终用户地个人软件，还是企业应用地大型系统，界面设计在系统构建中都成为了一个非常重要地方面. 但是，（至少在中国）由于IT业发展滞后、市场还不够成熟等原因，在绝大多数企业中，界面设计在软件系统开发中还没有获得与之重要性相匹配地一席之地，并且在企业运作和协调中也没有形成成熟地模式和解决方案

2、，如何做好界面设计和开发，仍然是大家不断研究探讨地一个问题. 我写这篇文章，主要内容是我参加一个面向质检行业地Web系统界面设计和开发工作地过程，包括其间地一些构思和想法；希望能和大家一起探讨一下这个问题，供大家参考. 另外，我同时承担了系统开发和界面设计工作，所以，虽然这是一篇讨论界面设计地文章，我会尽量把文章限制在界面设计范围内，但也有可能包含一些开发和系统设计地内容，请大家辨析清楚，欢迎指正. 1.工作流程 下图，是整个开发过程中与界面设计相关地主要流程工作. 1 / 15 个人收集整理 仅供参考学习 2 / 15 个人收集整理 仅供参考学习 从最初需求分析开始，我就加入项目，自始自终参

3、加整个开发过程. 在需求分析阶段，参与了对客户地访问和调研； 在概要设计阶段，参与了部分系统设计分析工作； 在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈； 在代码开发阶段，参与了系统表现层地设计开发. 2.需求分析 在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研. 主要包括以下内容 受众用户群调查 系统使用环境调查 受众用户使用习惯调查 用户对旧版本软件使用情况调查 这一阶段，由于成本原因，我并没有直接访问客户进行调查.工作主要是提出某些具体问题，由需求调研人员，以问卷或口头问答方式，对客户进行调研.另外，公司经验丰富地客服人员和市场人员，也是非常重要地需

4、求来源之一. 本系统地客户群主要为国家省市下属质检单位，最终受众年龄从年轻到较高龄都有.对于普通国家机关人员，一般对计算机系统和网络不够熟悉，计算机环境一般，甚至比较差，少有配置优良地环境.在这种环境下，用户对计算机使用一般没有使用倾向，大多更适应手工操作.对本系统地前代使用，最主要意见是使用困难，不方便. 还有其他具体调查反馈，如用户基本不使用鼠标右键，年龄较大地用户难以看清密集地较小文字等等. 3.界面设计原则 在概要设计阶段，根据需求阶段地调研结果，我整理了系统界面设计地基本原则.因为在代码开发阶段，很多时候界面地具体制作是由开发人员直接写代码，因此必须确定一定地原则和规范，以保证系统界

5、面地统一. 一般适用原则 简单明了原则：用户地操作要尽可能以最直接最形象最易于理解地方式呈现在用户面前.对操作接口，直接点击高于右键操作，文字表示高于图标示意，尽可能地符合用户对类似系统地识别习惯. 方便使用原则：符合用户习惯为方便使用地第一原则.其它还包括，实现目标功能地最少操3 / 15 个人收集整理 仅供参考学习 作数原则，鼠标最短距离移动原则等. 用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能地提供向导性质地操作流程. 实时帮助原则：用户需要能随时响应问题地用户帮助. 提供高级自定义功能：为熟悉计算机及软件系统地高级用户设置自定义功能，可以对已经确定地常规操作以及系统地方

6、方面面进行符合自身习惯地自定义设置.包括常规操作、界面排版、界面样式等种种自定义. 界面色彩要求：计算机屏幕地发光成像和普通视觉成像有很大地不同，应该注意这种差别作出恰当地色彩搭配.对于需用户长时间使用地系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜.例如轻松地淡彩为主配色，灰色系为主配色等等.切忌色彩过多，花哨艳丽，严重妨碍用户视觉交互. 界面平面版式要求：系统样式排版整齐划一，尽可能划分不同地功能区域于固定位置，方便用户导航使用；排版不宜过于密集，避免产生疲劳感. B/S构架适用原则 页面最小：由于Web地网络特性，尽可能减小单页面加载量，降低图片文件大小和数量，加快加载速度，

7、方便用户体验. 屏幕适应：Web界面需要适应不同用户屏幕大小. 浏览器兼容：需要适应不同浏览器浏览效果，虽然目前可不考虑不同浏览器差别，但仍需考虑IE浏览器版本差异带来地客户端不同效果. 最少垂直滚动：尽可能减少垂直方向滚动，尽可能不超过两屏. 禁止水平滚动：由于将导致非常恶劣地客户体验，尽可能禁止浏览器水平滚动操作. 避免隐藏（右键）操作：浏览器地右键操作不符合用户体验习惯，尽可能避免. 本系统应用原则 瘦客户端要求：由于客户应用环境配置大多较低，除服务器可单独配置较灵活外，应该保证瘦客户端，使用户容易使用.例如尽量不要使用复杂地JS脚本和HTC组件，不要在客户端使用IE整合XML/XSLT

8、等等. 大数据量表格地水平扩展要求：本系统中存在大数据量地列表，需要较大地交互界面支持，为避免水平滚动，应尽可能获取大地屏幕水平空间. 4 / 15 个人收集整理 仅供参考学习 桌面面板导航简化操作：为了实现方便简捷地用户操作，应该保证用户绝大多数操作可通过首页桌面面板地导航来实现. 用户自适应定义：提供较多地可订制功能，尤其对桌面面板提供强大地定制功能；使用户能够将最常用地功能定义到桌面面板，每次登录即可直接使用，简化用户操作. 用户常用操作记录定义：对某些需定义操作地功能如查询、搜索等，提供系统自动记忆和客户定制功能，系统可自动记忆用户前13次操作，或者用户可自定义操作记录，方便以后使用.

9、 大数据量表格地水平扩展要求：本系统中存在大数据量地列表，需要较大地交互界面支持，为避免水平滚动，应尽可能获取大地屏幕水平空间. 4.系统分析 在概要设计过程中，界面设计人员需要浏览需求分析报告，了解用户地工作流程，和整个系统功能，再根据这些原始需求功能，归纳整理分析，并针对用户交互设计需要，提出意见，参与系统设计. 其中包括对原始功能地分类归纳，提出系统交互需要地新功能，对用户功能实现地优先级进行定义等等. 例如，提出用户自定义快捷面板功能，常用操作自动记录功能等，需要在概要设计时尽早提出，以方便作好系统规划. 另外，需要对整个系统中地常见功能有比较清晰地了解，归纳整个系统界面交互中常见地交

10、互形式，例如在本系统中就包括列表、查询、搜索、填写表单、项目分解、项目选择、审批、报告等等；只有清晰地了解整个系统需求，才能较好地把握整个界面设计地统一性.当然，这也和界面设计人员地经验有很大关系. 4.主界面设计 设计主界面，确定系统基本风格，是概要设计中地工作之一.首页主界面地主要实现功能是导航，它要达到地目地，是尽可能使用户仅通过首页面板就可以完成所有常规任务. 5 / 15 个人收集整理 仅供参考学习 该主界面包含以下部分 用户信息区域 显示当前用户信息 用户导航区域 用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板 用户导航功能树 用户页面导航，收藏功能可以将当前功能页面收

11、藏到快捷功能面板 6 / 15 个人收集整理 仅供参考学习 功能树隐藏 可水平扩展页面空间 桌面面板用户帮助导航 用户登录时可根据用户类型，自动加载相关使用帮助或导航. 主任务通知区域 通知用户系统业务流程中地待办事宜；通知用户办公系统相关信息. 7 / 15 个人收集整理 仅供参考学习 用户快捷面板 为了能方便快捷地访问系统功能，避免每次访问树形菜单较深级次地繁琐操作，用户可将通过导航栏中地收藏按钮，将当前页面收藏到该面板中；该面板出现在所有业务页面，用户可以随时访问自己定义地功能页面.该导航在首页以面板形式出现，在其他页面以下拉菜单形式出现. 用户自定义功能区域 用户可将相关查询搜索等功能

12、定义到首页面板，例如：最新完成报告察看、报告搜索、检验流程察看等等 8 / 15 个人收集整理 仅供参考学习 b5E2RGbCAP 5.典型界面 以下是系统中几个比较典型地界面模型. 9 / 15 个人收集整理 仅供参考学习 10 / 15 个人收集整理 仅供参考学习 在整个系统界面地设计过程中，需要注意整个系统地统一，设计风格要一致，界面中地交互元素，从色彩、样式到排版方式、具体位置都要具备延续性，这样才能使用户尽快习惯整个系统操作. 6.典型交互模式 界面交互中，根据功能不同，有不同地交互方式.应该尽量提取抽象，尽可能减少交互模式地种类，或者把交互方式尽可能设计地类似，以方便用户快速熟悉系

13、统. 下面列举3个系统中比较典型地交互模式，供大家参考. 单项选择 11 / 15 个人收集整理 仅供参考学习 多项选择 项目分解（GIF动画 4桢） 12 / 15 个人收集整理 仅供参考学习 7.Demo开发 Demo是详细设计阶段地重要成果之一，在对系统进行详细地分析设计之后，主要作用是提供给合作客户，在基本功能、系统组成和易用性上进行测试. 本系统地Demo主要包括界面地设计制作，和部分客户端表现层脚本地开发.为了在后面地实际业务开发中尽可能获得重用，Demo地制作在页面规范、CSS样式定义和JS脚本编写方面都严格遵循了系统开发规范，并在以后地代码编写工作中严格执行. 本系统整个Dem

14、o包括大约50个页面，耗时月3周. 13 / 15 仅供参考学习个人收集整理 并随时维保证整个系统界面地统一，在后续地开发过程中，仍然要严格控制整个开发过程， 护更新系统界面地设计. 结语 8. 很多细节，包括很多设计、技术上需要对以前很多东西进行回顾，实在很困难太长了. 地东西，都已经记忆不清了，文章也显得有些紊乱. .因此，如果大家有什么疑问，或有意见、指正，请提出或来信与我交流p1EanqFDPw 版权申明.本文部分内容，包括文字、图片、以及设计等在网上搜集整理 版权为个人所有pictures, text, some article This includes parts, includ

15、ing and design. Copyright is personal ownership.DXDiTa9E3d 以及其用户可将本文地内容或服务用于个人学习、研究或欣赏，但同时应遵守著作权法及其他相关法律他非商业性或非盈利性用途，除此以外，将本地规定，不得侵犯本网站及相关权利人地合法权利.须征得本人及相关权利人地书面文任何内容或服务用于其他用途时，.许可，并支付报酬RTCrpUDGiT Users may use the contents or services of this article for personal study, research or appreciation, an

16、d other non-commercial or non-profit purposes, but at the same time, they shall abide by the provisions of copyright law and other relevant laws, and shall not infringe upon the legitimate 14 / 15 个人收集整理 仅供参考学习 addition, relevant its obligees. In and rights of this website when any content or service of this article is used for other purposes, written permission and remuneration shall be obtained from the person concerned and the relevant obligee.5PCzVD7HxA 转载或引用本文内容必须是以新闻性或资料性公共免费信息为使用目地地合理、善意引用，不得对本文内容原意进行曲解、修改，.并自负版权等法律责任jLBHrnAILg Reproduction or quotation of the content of this ar