一个Web系统OA界面设计和开发

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

2、是大家不断研究探讨的一个问题。我写这篇文章，主要内容是我参加一个面向质检行业的Web系统界面设计和开发工作的过程，包括其间的一些构思和想法；希望能和大家一起探讨一下这个问题，供大家参考。另外，我同时承担了系统开发和界面设计工作，所以，虽然这是一篇讨论界面设计的文章， 我会尽量把文章限制在界面设计范围内，但也有可能包含一些开发和系统设计的内容，请大家辨析清楚，欢迎指正。1工作流程F图，是整个开发过程中与界面设计相关的主要流程工作。需求分析概要设计定义结构树系统功能定义功能描象流程分析検决划分用户优先级系统功能界面设计制作功能结构、分析y风格设计界血类型抽象界面类型 设计界面DEMO 制作用户评测

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

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

5、面的具体制作是由开发人员直接写代码， 因此必须确定一定的原则 和规范，以保证系统界面的统一。一般适用原则简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对操作接口， 直接点击高于右键操作， 文字表示高于图标示意， 尽可能的符合用户对类似系 统的识别习惯。方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少 操作数原则，鼠标最短距离移动原则等。用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的操 作流程。实时帮助原则：用户需要能随时响应问题的用户帮助。提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功

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

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

8、S 脚本和 HTC 组件， 不要在客户 端使用 IE 整合 XML/XSLT 等等。大数据量表格的水平扩展要求：本系统中存在大数据量的列表，需要较大的交互界面支持， 为避免水平滚动，应尽可能获取大的屏幕水平空间。桌面面板导航简化操作：为了实现方便简捷的用户操作，应该保证用户绝大多数操作可通 过首页桌面面板的导航来实现。用户自适应定义：提供较多的可订制功能，尤其对桌面面板提供强大的定制功能；使用户 能够将最常用的功能定义到桌面面板，每次登录即可直接使用，简化用户操作。用户常用操作记录定义：对某些需定义操作的功能如查询、搜索等，提供系统自动记忆和 客户定制功能， 系统可自动记忆用户前 13次操作，

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

10、系统中的常见功能有比较清晰的了解， 归纳整个系统界面交互中常见的交 互形式， 例如在本系统中就包括列表、 查询、 搜索、 填写表单、 项目分解、 项目选择、 审批、 报告等等；只有清晰的了解整个系统需求，才能较好的把握整个界面设计的统一性。当然， 这也和界面设计人员的经验有很大关系。4.主界面设计设计主界面， 确定系统基本风格， 是概要设计中的工作之一。 首页主界面的主要实现功能是 导航，它要达到的目的，是尽可能使用户仅通过首页面板就可以完成所有常规任务。0 |Q| = ._!；=口 印 邑曙勺 ?(!<> 昌苗 Bftfl* O口醉鼻宜尊 容0爭畤"畑 ©0不

11、廉曙:i.K* tyeae:pE» Q iJnQjiJl.-nm卩帕冷才划1 f-需于書耳稍点笊砂忙If-M-冨H舲曲01 4 K« aiJ<-JiTjLntrtta'L* wuat«* X»ii!Rlli2 I *ma ait 3WU 1ih *<(!«丄f2vttJI-Ul耳n營割盘滋良工黑盅帀绘-却旦X*呃M览贬-打斤土为工強土岂办;v MtUM wirc4血坦芒趣昙出矗3B耳r>A劉人KXCtllHLMfEJ厶夏曲IFJ1H幻凰恆聲 E3S3.I± a鈕峦百谕*特三辛詐sm i2 薯疋CdatMLXF

12、竝匹 5 产 JSJSKjli"1fl£Z3Z®3CQ 1? 3比立的耳即2>3®3MU ISK冨£2沙占*#1蛀g也空If带vntw该主界面包含以下部分用户信息区域显示当前用户信息用尸: 角色：锵管琛员用户导航区域用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板首1可1帮辭1退出口返回G前进区:刷新E1收藏用户导航功能树用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板曰 业务流程dewiD1包业务否托合同评审I- 口任务分解子任务单；檢脸记录.口报告漏制 口报告审核 丨L 报告鏤审 L 口报告发放 O 基础档案血1W

13、客户管理.口人爭管理 j L.Q设备管理 Q曰系统管理demot- 口流程定义I- 口表单定义：口报吉定丈功能树隐藏可水平扩展页面空间桌面面板用户帮助导航 用户登录时可根据用户类型，自动加载相关使用帮助或导航。劭用户帮an佝导】O问导2O帮助向导3O用户向导4O主任务通知区域 通知用户系统业务流程中的待办事宜；通知用户办公系统相关信息。目待办爭宜列表L目办公信+持审批委托单| 12 200B41S+紧急通知|200.11.5待检验计划|31200B.11S+关于春节期间放假通知|2003.12.25+苴他待处珪项目1p S |2009413+关于元旦期间战假通知| 2003,1225+苴他待处

14、理项目z1 1 1200941,$+年终公司工作总结通知|2003,12 4E+侍审核报告1 z 1Z003.1112*年鏤公司全林员工大会通知|2003.1Z .26+关于元旦员工晚会举办通知|2003.1226用户快捷面板 为了能方便快捷的访问系统功能，避免每次访问树形菜单较深级次的繁琐操 作，用户可将通过导航栏中的收藏按钮，将当前页面收藏到该面板中；该面板出现在所有业务页面，用户可以随时访问自己定义的功能页面。该导航在首页以面板形式出现，在其他页面以下拉菜单形式出现。快35面板_ _ _ _ -+快捷功能列表+快捷功能列表+计划管理+抽徉单+任务分派+自定义快11功能+快捷功能+自定义快

15、捷功能+快捷功能用户自定义功能区域 用户可将相关查询搜索等功能定义到首页面板，例如：最新完成报告 察看、报告搜索、检验流程察看等等快魏面板_ _ _ _ +快捷功能列表+快捷功能列表+计划首理+抽祥单+任务分派+自定义快捷功能+快捷功能+自定义快捷功能+快捷功能0135典型界面 以下是系统中几个比较典型的界面模型。jJjJax 1I <)h | !f：sbeoouaooQS|盘HGE 港I”帮砖LJ.HUUli死研5壮u建誅三hbK<O3i12±»I113i±!k吏謔曲怆站抑冲1S.Z»it污：北走颅命馬确書益片st"nrlfrs-

16、TS*!両；勇箏包*陌征* s Ww r ff*>t?s总旳立.何>疋鬲3jJ对桎野出更邑世恃素看 京i话冃酥亘不5h (wrstDS' 百jJcj皿O-xvO处<zO«rw ISBM9QO>KTfWrw>|wmxtiKHA.KPaaBH.cj皿cj皿u乐2 it5：a««xKr±.大*:勺怖心任力，任1*;肓1：切凉cj皿cj皿MMWOtWMpZ>U14m»Oir«Mo-xvO处<z O«RW ISBM9QO>KTfWrw>|wmxtiKHA.KPaaBH.cj

17、皿cj皿u乐2 it5：a««xKr±.大*:勺怖心任力，任1*;肓1：切凉cj皿cj皿MMWOtWM|盘m畫*I1E4ESH覆器打LJ.Hfl:WV1ZZB歸 Id 胡>10紳帕殍总、苗it栓哮侖«240*9 1S.Z»w*i： Jtsas-st »-ritnrt-Ta*i>£: via*iirfE+ hf n*>t: s is laijtf.口口已口口 udQa口趕将出吏邑*童盲Si帝诃0在整个系统界面的设计过程中，需要注意整个系统的统一， 设计风格要一致，界面中的交互元素，从色彩、样式到排版方式、具体

18、位置都要具备延续性，这样才能使用户尽快习惯整个 系统操作。6典型交互模式界面交互中，根据功能不同，有不同的交互方式。 应该尽量提取抽象， 尽可能减少交互模式 的种类，或者把交互方式尽可能设计的类似，以方便用户快速熟悉系统。下面列举3个系统中比较典型的交互模式，供大家参考。单项选择j«咅此邮M撑掰 日畔;S择肛不丸 :曲n xifllSA.宴圧由容MMHi 席户掘釦 9UCIA; 曹用it易:喜户名雷宫户“号善户性fii進捕HB20344412<台缶全业茴"事户5（52HB003444H44国査生业回HB2D34-i410X回薯A名株4HB20344411W回；此图标可齐岀取光许手工慎3|lil; Ip： fflat-胡F黃UmMib - 览耳1!申嗟£Zsli幺|1»*右户劭愼亦*户炖EU123 4多项选择£；y?"蜩麻业餐盡吒迥示爲由址齢可理出哲 曰IB删幣，不尤31J6聖序弓：l委兀內畔:春托时何;切tdaa«A：苛项目分解（GIF动画4桢）子任隽分解子任务輪号： HB2003122931斗任勢名轟：某单位碰碰车设备检验含同分配日期:20