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

1、一个Web系统的界面设计和开发L工作流程（下图，是整个开发过程中与界面设计相关的主要流程工作）需求分析j蚊要设计，八详细设计在需求分析阶段,在概要设计阶段,在详细设计阶段,从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。参与了对客户的访问和调研；参与了部分系统设计分析工作；完成了整个系统界面设计和Demo制作，并提交用户反馈;在代码开发阶段,参与了系统表现层的设计开发。2.需求分析在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。主要包括以下容 受众用户群调查 系统使用环境调查 受众用户使用习惯调查 用户对旧版本软件使用情况调查这一阶段，由于成本原因，我并没有直接访问客

2、户进行调查。工作主要是提出某些具体问题，由需求调研人员，以问卷或口头问答方式，对客户进行调研。另外，公司经骏丰富的客服人员和市场人员，也是非常重要的需求来源之一。本系统的客户群主要为国家省市下属质检单位，最终受众年龄从年轻到较高龄都有。对于普通国家机关人员，一般对计算机系统和网络不够熟悉，计算机环境一般，甚至比较差，少有配置优良的环境。在这种环境下，用户对计算机使用一般没有使用倾向，大多更适应手工操作。对本系统的前代使用，最主要意见是使用困难，不方便。还有其他具体调查反馈，如用户基本不使用鼠标右键，年龄较大的用户难以看清密集的较小文字等等。3 .界面设计原则在概要设计阶段，根据需求阶段的调研结

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

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

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

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

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

8、了解，归纳整个系统界面交互中常见的交互形式，例如在本系统中就包括列表、查询、搜索、填写表单、项目分解、项目选择、审批、报告等等；只有清晰的了解整个系统需求，才能较好的把握整个界面设计的统一性。当然，这也和界面设计人员的经脸有很大关系。4.1 主界面设计设计主界面，确定系统基本风格，是概要设计中的工作之一。首页主界面的主要实现功能是导航，它要达到的目的，是尽可能使用户仅通过首页面板就可以完成所有常规任务。Q0 二 B 修2 口的天分 口口侬手 00初好 彳忸辩”Q程皆注白乔k访W。口不照噌晒A40度为芝列及-林彳娟秋.D -加物通注归之分» HteUitti > 1 W.1I5&

9、#187;天于杳瞥内电U硒9t烟a a4 i KftH-XMitaShSfli $ Mona天子江玛» )us xMjrauz i 坏冬R工由知» 2W32.K U方身及-MGKsSa 2 x)8，tq-公司:大©11，： gq3. OSXUWJAft利于元处员工骑会=乃通1：皿与皆山福也台之文铁次用?0十艮比动里| 依MM四上m/欢迎使用吉天2质检版sa«»3：检人XWA完舶期鬲幺产七索三于三aICO)1225XXIC01X1WT笛不丽1耿l*/tT短555ZOOT12Z>XW0JX1MT墨企支13产ARM芥ft*555SMQ312Zi

10、xwoiriM?*至好。产MiiiHfT季三思108124XWOIKSWTK£Mf：XiWa时H:芥fr空曷Q1?若该主界面包含以下部分用户信息区域显示当前用户信息用户导航区域用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板用户导航功能树用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板Q曰业务流程demo自业务委托，门合同评审任务分解口子任务单检蛉记录匚1报告编制日报告审核口报告终审0报告发放a基础错案demo口客尸管理口人事管理口设备管理e3系统管理击moL口流程定义）口表单定义报告定义功能树隐藏可水平扩展页面空间桌面面板用户帮助导航用户登录时可根据用户类型，自

11、动加载相关使用帮助或导航。O用户帮助向导1向导2O帮助向导3用户向导4Q主任务通知区域通知用户系统业务流程中的待办事宜；通知用户办公系统相关信息。目待办事宜列表+待审批委托单 12 2003.11.5+待检验计划 3 2003.11.5+其他待处理项目1 5 2003.11.3+其他待处理项目2 1 2003.11.8+待官核用告 2 2003.11.12目办公信息+紧念通知 2003.11.5+关于春节期间放假通知 2003.12.S+关于元旦期间放假通知 2003.12.S+年终公司工作总结通知 2003.12.1S十年终公司全体吊工大会通如 2003.12 .茄+关于元旦曷工馀合举办通的

12、1 2002.12.下用户快捷面板为了能方便快捷的访问系统功能，避免每次访问树形菜单较深级次的繁琐操作，用户可将通过导航栏中的收藏按钮，将当前页面收藏到该面板中；该面板出现在所有业务页面，用户可以随时访问自己定义的功能页面。该导航在首页以面板形式出现，在其他页面以下拉菜单形式出现。快捷面板_+快隹功能列表十快建功能列表+计划管理抽样单+任务分派+自定义快捷功能+快便功能+自定义快捷功能+快捷功能口区用户自定义功能区域用户可将相关查询搜索等功能定义到首页面板，例如：最新完成报告察看、报告搜索、检验流程察看等等I/新完成报告3报告编导报告名称主检人主审人完成日期H2D031321267某企业某品牌

13、产品检验报告先三李三思2003.12.25H20O31321267某企业某晶6$产品检会报告光三李三思2003.12.25H20O31321267某企业某国法产品检骆报告张三至三思200312.25)(20031321267某企业某品牌产品检验报告非三李三忠2003.12.25H20O33321267某企业某牌产品检骐报告张三李三思2003.12.25更乡结果4.2.典型界面以下是系统中几个比较典型的界面模型。女弟impaaf«s：中“8白，#促母。2口却靛言口哈E制O隹与力1白公匕H不宣僚纪口界暑H9口片不OJJftfttt争O整的科26口茶R*R*a储2&孑*UM“6；0

14、9123>919理理至?品”找找，才OW1223如»««w3izin仁拓白话名旅Z2md松）旗HMW312201&蛤编6松3MOI2.25膛叫QI1MQ”目归伐名§1X4A0M2.23强82纥史23露日系雪仃支,一十纪期h套一今大住工？9修女工后院任多阜幺a%，停小的=匕七口五余冏任备其寰阪林S京"解铜RT电电aGM-RCyrS903*2口乐穿行口加仔口名少M子屈辩”QG玲召口廿15耐n®4nGQ拧依修Wwnxe。口同5加g。0万秀芳&七3寸%Rll>>于也势差，fl势分*mww82rttMX

15、1;8535F2H欣岩金K力配口；山不先京：gx.i.nia务名余：不域！通!区二盘总段n史&ihMBus配仁期要浏饶r犯中百蝇心心人易开a,?，B*K?*tK在马方:为制了电务.。:J&死口胃F1”第亢fRN匕作2和号必值义七见康I用E。Itffe14±de/ftSwEwaA5l:4±1c7ex妙仙>演小愕i口/少吃用e»i口任衣分口学代务”Oft杀uAR名茶？工修¥金正以飞给1T寰死尊在；3H151不付*常会七K*:也*左及«*R0!里免我RH；：公PI”大：201.hU富名灯WE蝌名。3彳的工城A.Rn«x

16、eO0不也若38M：3,4gA3于圮：.KKWtl：9I1«SHEZmi127)12911z«变KKHSiKtSU««*«««<«66836.2000«*«JC合脩“m.杨崎露000*00-2000台忖车徊忏UM)anuS08%(K00。®寻修车6B8*38-200U®男3Q她|包£l%在整个系统界面的设计过程中，需要注意整个系统的统一，设计风格要一致，界面中的交互元素，从色彩、样式到排版方式、具体位置都要具备延续性，这样才能使用户尽快习惯整个系统操作。4.3

17、.典型交互模式界面交互中，根据功能不同，有不同的交互方式。应该尽量提取抽象，尽可能减少交互模式的种类，或者把交互方式尽可能设计的类似，以方便用户快速熟悉系统。下面列举3个系统中比较典型的交互模式，供大家参考。单项选择业国2»止务妻托船务圣托珞1拄建功能列友二J写委足手并毁迂靠既您乐号:耍非内容，委托时阻：SPCTA：3SHC0JB.:费用像盒：察.日击此图赫用到tfc气期连葬粗，不允产喊人.LLLLr-*|http7/l«calhe*(一内关Deo-icr©x.££：(»ttra»1Zxpl«rJulXIspj&#

18、171;，此的可界出a：避定询送到3不尤许手工监名尸名稀者尸绘号签妁书尸件fit送开某量S?至生产企业HB20344412黑台资金业回名户名林2H6203444114息就2企业回|林作公客户名林aHB-20344410晟电也企业EHPA.容尸名琼4HB2Q34令1】否民奔企业回i-1保存Cb|?箕节客尸名窝17生优;12f尸残号叵4p%Kpr-w>vr提示：觊楣Q布铺自动生喝其合同多项选择曲多委托现装索托同并图S握水立古此除可找出y口日脸算毅，不允5要先单序号：1变先内营：矮茏时日：r-铲指白;r-项目新XPLjfffliflifl；r函1样品列要|迪舜列聂 J样品名比©Kff

19、iK»«密把口期殛碰年选车场J处方 脚双祥陆名的3母程军富健碰车生产会上92003.12.25寰应至均械妒后英必注丰生产史过22003. L 2.25罂试探品右秸2JE«fiS2003.12.25回配在品名密4茎维ta32003. i 2.23回1 234& laswaa访|抵都2好过 回国|财3 http： /l«eolhoxt - 客天De.e - Nier«z«£t Xnt«r&et txplor«r；或曲酊臂出依不允湃手工而工步人.筌东二笠死提灾后将CJ昵毓娈先合同.项目分解（GI