《bs系统界面设计与开发.docx》由会员分享，可在线阅读，更多相关《bs系统界面设计与开发.docx（12页珍藏版）》请在三一办公上搜索。
1、B/S系统界面设计与开发详解早在中国IT业方兴未艾之时，计算机应用系统主要以功能实现为主，几乎没有界面设计这个概念。时至今日， 随着计算机和网络的不断普及，社会信息化程度日益加深，用户和市场的不断成熟，人们已经不仅仅满足于够 用”，而是更加强调好用”易用”；因此，不论是普通最终用户的个人软件，还是企业应用的大型系统，界面设 计在系统构建中都成为了一个非常重要的方面。但是，（至少在中国）由于IT业发展滞后、市场还不够成熟等原因，在绝大多数企业中，界面设计在软 件系统开发中还没有获得与之重要性相匹配的一席之地，并且在企业运作和协调中也没有形成成熟的模式和解 决方案，如何做好界面设计和开发，仍然是大
2、家不断研究探讨的一个问题。这篇文章，主要内容是我参加一个面向质检行业的Web系统界面设计和开发工作的过程，包括其间的一 些构思和想法；其目的就是希望能和大家一起探讨一下这个问题，希望能供大家参考，起到抛砖引玉的作用。另外，我同时承担了系统开发和界面设计工作，所以，虽然这是一篇讨论界面设计的文章，我也尽量把 文章限制在界面设计范围内，但也有可能包含一些开发和系统设计的内容，请大家辨析清楚，欢迎指正。1. 工作流程下图，是整个开发过程中与界面设计相关的主要流程工作。用户需求分析概要设计界面设计制作功能结构详细设计分析/风格设计界面类型抽象界面类型 I设计界面DEMO 制作用户评测完成从最初需求分析
3、开始，我就加入项目，自始自终参加整个开发过程。在需求分析阶段，参与了对客户的访问和调研；在概要设计阶段，参与了部分系统设计分析工作；在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈;在代码开发阶段，参与了系统表现层的设计开发。2. 需求分析在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。主要包括以下内容受众用户群调查系统使用环境调查受众用户使用习惯调查用户对旧版本软件使用情况调查这一阶段，由于成本原因，我并没有直接访问客户进行调查。工作主要是提出某些具体问题，由需求调研人员， 以问卷或口头问答方式，对客户进行调研。另外，公司经验丰富的客服人员和市场人员，也是非
4、常重要的需求 来源之一。本系统的客户群主要为国家省市下属质检单位，最终受众年龄从年轻到较高龄都有。对于普通国家机关人员， 一般对计算机系统和网络不够熟悉，计算机环境一般，甚至比较差，少有配置优良的环境。在这种环境下，用 户对计算机使用一般没有使用倾向，大多更适应手工操作。对本系统的前代使用，最主要意见是使用困难，不 方便。还有其他具体调查反馈，如用户基本不使用鼠标右键，年龄较大的用户难以看清密集的较小文字等等。3. 界面设计原则在概要设计阶段，根据需求阶段的调研结果，我整理了系统界面设计的基本原则。因为在代码开发阶段，很多 时候界面的具体制作是由开发人员直接写代码，因此必须确定一定的原则和规范
5、，以保证系统界面的统一。一般适用原则简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对*作接口，直接点 击高于右键*作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯。方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少*作数原则，鼠标最 短距离移动原则等。用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的*作流程。实时帮助原则：用户需要能随时响应问题的用户帮助。提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能，可以对已经确定的常规操作以及 系统的方方面面进行符合自身习惯的自定义设置
6、。包括常规操作、界面排版、界面样式等种种自定义。界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别作出恰当的色彩搭配。 对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例如轻松的淡彩 为主配色，灰色系为主配色等等。切忌色彩过多，花哨艳丽，严重妨碍用户视觉交互。界面平面版式要求：系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，方便用户导航使用；排 版不宜过于密集，避免产生疲劳感。B/S构架适用原则页面最小：由于Web的网络特性，尽可能减小单页面加载量，降低图片文件大小和数量，加快加载速度，方 便用户体验。屏幕适应：Web界面
7、需要适应不同用户屏幕大小。浏览器兼容：需要适应不同浏览器浏览效果，虽然目前可不考虑不同浏览器差别，但仍需考虑IE浏览器版本 差异带来的客户端不同效果。最少垂直滚动：尽可能减少垂直方向滚动，尽可能不超过两屏。禁止水平滚动：由于将导致非常恶劣的客户体验，尽可能禁止浏览器水平滚动*作。避免隐藏（右键）*作：浏览器的右键*作不符合用户体验习惯，尽可能避免。本系统应用原则瘦客户端要求：由于客户应用环境配置大多较低，除服务器可单独配置较灵活外，应该保证瘦客户端，使用户 容易使用。例如尽量不要使用复杂的JS脚本和HTC组件，不要在客户端使用IE整合XML/XSLT等等。大数据量表格的水平扩展要求：本系统中存
8、在大数据量的列表，需要较大的交互界面支持，为避免水平滚动， 应尽可能获取大的屏幕水平空间。桌面面板导航简化操作：为了实现方便简捷的用户*作，应该保证用户绝大多数*作可通过首页桌面面板的导 航来实现。用户自适应定义：提供较多的可订制功能，尤其对桌面面板提供强大的定制功能；使用户能够将最常用的功能 定义到桌面面板，每次登录即可直接使用，简化用户操作。用户常用操作记录定义：对某些需定义操作的功能如查询、搜索等，提供系统自动记忆和客户定制功能，系统 可自动记忆用户前13次*作，或者用户可自定义操作记录，方便以后使用。大数据量表格的水平扩展要求：本系统中存在大数据量的列表，需要较大的交互界面支持，为避免
9、水平滚动， 应尽可能获取大的屏幕水平空间。4. 系统分析在概要设计过程中，界面设计人员需要浏览需求分析报告，了解用户的工作流程，和整个系统功能，再根据这 些原始需求功能，归纳整理分析，并针对用户交互设计需要，提出意见，参与系统设计。其中包括对原始功能的分类归纳，提出系统交互需要的新功能，对用户功能实现的优先级进行定义等等。例如，提出用户自定义快捷面板功能，常用操作自动记录功能等，需要在概要设计时尽早提出，以方便作好系 统规划。另外，需要对整个系统中的常见功能有比较清晰的了解，归纳整个系统界面交互中常见的交互形式，例如在本 系统中就包括列表、查询、搜索、填写表单、项目分解、项目选择、审批、报告等
10、等；只有清晰的了解整个系 统需求，才能较好的把握整个界面设计的统一性。当然，这也和界面设计人员的经验有很大关系。4.主界面设计设计主界面，确定系统基本风格，是概要设计中的工作之一。首页主界面的主要实现功能是导航，它要达到的 目的，是尽可能使用户仅通过首页面板就可以完成所有常规任务。该主界面包含以下部分用户信息区域显示当前用户信息用F : 楚色:系统管理员用户导航区域用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板首页I帮助I退出Q返回盘前进富刷新收藏用户导航功能树用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板 .白业曾施程demo 业第委托合同评审任任解子任务单桂验记录报
11、告编制报告审核报告终审报告发放0 ,白基础档案demo客户管理人事管理设备管理 &系统管理demo流程定义口表单定义报告定义功能树隐藏可水平扩展页面空间桌面面板用户帮助导航用户登录时可根据用户类型，自动加载相关使用帮助或导航O用户裙曲向导12向导z 毫？裕助向导30用尸向导4Q主任务通知区域通知用户系统业务流程中的待办事宜；通知用户办公系统相关信息。目待办事宜列表+待审批委托单|12 12003.11.5+待检验计划|312003.11.5+其他待处理项目1|512003.11.3+其他待处理项目2|112003.11.8+待审核报告|212003.11.12目办公信息+紧急通知1 2003.
12、11.5+关于春节期间放1段通知1 2003.1225+关于元旦期间放怫通知1 2003.1225+年终公司工作总结通知1 2003.12.15+年终公司全体员工大会通知1 2003.1226+关于元旦员工晚登举办通知1 2003.1226用户快捷面板为了能方便快捷的访问系统功能，避免每次访问树形菜单较深级次的繁琐操作，用户可将通过 导航栏中的收藏按钮，将当前页面收藏到该面板中；该面板出现在所有业务页面，用户可以随时访问自己定义 的功能页面。该导航在首页以面板形式出现，在其他页面以下拉菜单形式出现。快捷面攒_+快捷功能列表快健功能列表+计划管理抽样单+任第分派自定义快捷功能+快捷功能自定义快捷
13、功能+快捷功能田匡用户自定义功能区域用户可将相关查询搜索等功能定义到首页面板，例如：最新完成报告察看、报告搜索、 检验流程察看等等5.典型界面以下是系统中几个比较典型的界面模型。占检召毒|%*：言。牛R*口弥,吏 JiflSE 尊Q Q粟泗卧R五ME戒务并解ftstF&a*DK心dr罟曲m 口攻墨或 口古*口岂玮JP 吁曾心！ 口盼期！ 口押85尊去柱史踌础mTTHHRfl埼4王WntSJtif务pm-n-ti泌心曲mE”冶魅名芥gaw iZiis-姓HUE411235014MO 3 1 2J3-I!E-2D43I275-D2LRs*ttaih+2WXI2缠K:; 2 itElMR：-9Efr
14、K.?r 1 一牙会诙岁柴:一午汽任击晕；妨军业务想士:任曜率落整胃 土区蚩拳宜:齐位匕口富-嵌WE?|心存S加.|gw：M 口口 Hl 邑逐住宙咨二立” 涯善并解WWLMWA-曜尸:皿膏鼻皿於 ILIJFW I5WEJE蛀哲:琴KrtHE-?31213Qn联曜适耳卷#还务axHtSZllZill治性巴击S芥g双。I，姓nrzsnxEM2OC7 12.29-迪IIE-2D43I235-D2L鞘畤右非降200X1 2 J3-缠我京1 HLEi臼5田珂开告的*兰！ 一T咨脚就.尸*:一亍Ktt务：妁单丑务冷欧U弟卓免JWIr、任矣单直:齐lkn】SF百耳暮节仁片.*诰皆在整个系统界面的设计过程中，
15、需要注意整个系统的统一，设计风格要一致，界面中的交互元素，从色彩、样 式到排版方式、具体位置都要具备延续性，这样才能使用户尽快习惯整个系统操作。6.典型交互模式界面交互中，根据功能不同，有不同的交互方式。应该尽量提取抽象，尽可能减少交互模式的种类，或者把交 互方式尽可能设计的类似，以方便用户快速熟悉系统。下面列举3个系统中比较典型的交互模式，供大家参考。单项选择哲户名彝客户始号踊客户性肌基斑喽车奸色业HB2034-5412台金签业回客户名瞬H 能网4&4：14国宜定北回客尸名膝3HB2a344410陷色企业富H名琳4HB20344411否L鼓|按常停户名新|授常军户涅号 四旧作犯kEHfi?可
16、津出四i卷定可JS列不片洋孚工髯客户CLC1：r对逸伽不嫩多项选择以急技程“mt帑荐花I快理功琵波蟀隼序争I雯抚内苗投示:此盛可捍光轲片切钢 口有坡手工牖点击此Efe可厦出 71 日舞K惑，球 卓不工心项目信a样品列骤II林盅名的耋托华位教场装招日期暧暧至某嬷不生产企业9200.11.23逐亦丰场地防护在莱瑾砂生产主堂2zemZwLid91试律品：5（?1某单位5Sg.EgS旦响U品若井4320KX3.i2.2S可k 23 4胃1映样*S瑟：1世罢弟托单位匝碰述年*初胡J6H 狷试昏客快3项目分解（GIF动画4桢）子任务分解子任翦镣号： HB20031229314分配日期： 2003.12.3
17、0任碧名称：某单位碰碰车设备检验合同要求完成：2004.1.11项目锦号项目名株检芸样品检芸械露详细选曝HI20031127312乘客可触及之处检验碰碰车GBS40S-2000HI20031127313缓冲轮胎碰碰车GBS40S-2000HI20031127314车场缓冲拦挡物拦挡物GBS40S-20001 选取任翦直接提交本操作将所有项目作为一个任罟提交到人检裴项目选联列表:所有检验项目检会设备选曝列表：5|请选择领样人二|话鹿择主翰二|话选择副翰二|完成时间智提交任第职消显示合同其他信息提示:通过点击巷裴项目列表最右图标 ,分配你需要的项目到“任务分解构建拦中，再选取检验人员并保存；可多次
18、操作 保存多个分解子任务。必须在所有项目分解完毕后才能提交完成7.Demo 开发Demo是详细设计阶段的重要成果之一，在对系统进行详细的分析设计之后，开发出界面Demo原型，主要 作用是提供给合作客户，在基本功能、系统组成和易用性上进行测试。本系统的Demo主要包括界面的设计制作，和部分客户端表现层脚本的开发。为了在后面的实际业务开发中尽 可能获得重用，Demo的制作在页面规范、CSS样式定义和JS脚本编写方面都严格遵循了系统开发规范，并 在以后的代码编写工作中严格执行。本系统整个Demo包括大约50个页面，耗时月3周。在后续的开发过程中，仍然要严格控制整个开发过程，保证整个系统界面的统一，并随时维护更新系统界面的 设计。8.结语文章太长了需要对以前很多东西进行回顾，实在很困难。很多细节，包括很多设计、技术上的东西，都已 经记忆不清了，文章也显得有些紊乱。
