一个Web系统的界面设计和开发复习过程

1、一个web系统的界面设计和开发一个Web系统的界面设计和开发1 .工作流程下列图,是整个开发过程中与界面设计相关的主要流程工作江培设it撤要设计用户伏左税克津分析东比仇罪 片用柯中31抽象*面设计制柞功能绘尚界击史V风格设计界类学界面处闹用尸,剂从最初需求分析开始,我就参加工程,自始自终参加整个开发过程在需求分析阶段,参与了对客户的访问和调研;在概要设计阶段,参与了局部系统设计分析工作；在详细设计阶段,完成了整个系统界面设计和Demo制作,并提交用户反应；在代码开发阶段,参与了系统表现层的设计开发.2 .需求分析在需求分析阶段,主要针对界面交互相关问题,对用户进行假设干调研.主要包括以下内容

2、受众用户群调查 系统使用环境调查 受众用户使用习惯调查 用户对旧版本软件使用情况调查这一阶段,由于本钱原因,我并没有直接访问客户进行调查.工作主要是提出某些具体问题,由需求调 研人员,以问卷或口头问答方式,对客户进行调研.另外,公司经验丰富的客服人员和市场人员,也是 非常重要的需求来源之一.本系统的客户群主要为国家省市下属质检单位,最终受众年龄从年轻到较高龄都有.对于普通国家机关 人员,一般对计算机系统和网络不够熟悉,计算机环境一般,甚至比拟差,少有配置优良的环境.在这 种环境下,用户对计算机使用一般没有使用倾向,大多更适应手工操作.对本系统的前代使用,最主要 意见是使用困难,不方便.还有其他

3、具体调查反应,如用户根本不使用鼠标右键,年龄较大的用户难以看清密集的较小文字等等. .界面设计原那么在概要设计阶段,根据需求阶段的调研结果,我整理了系统界面设计的根本原那么.由于在代码开发阶 段,很多时候界面的具体制作是由开发人员直接写代码,因此必须确定一定的原那么和标准,以保证系统 界面的统一.一般适用原那么简单明了原那么：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前.对操作接口, 直接点击高于右键操作,文字表示高于图标示意,尽可能的符合用户对类似系统的识别习惯.方便使用原那么：符合用户习惯为方便使用的第一原那么.其它还包括,实现目标功能的最少操作数原那么, 鼠标最短距离移

4、动原那么等.用户导向原那么：为了方便用户尽快熟悉系统,简化操作,应该尽可能的提供向导性质的操作流程.实时帮助原那么：用户需要能随时响应问题的用户帮助提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能,可以对已经确定的常规操 作以及系统的方方面面进行符合自身习惯的自定义设置.包括常规操作、界面排版、界面样式等种种自 定义.界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同,应该注意这种差异作出恰当的色 彩搭配.对于需用户长时间使用的系统,应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜. 例如轻松的淡彩为主配色,灰色系为主配色等等.切忌色彩过多,花哨艳丽,严重阻碍用

5、户视觉交互.界面平面版式要求：系统样式排版整洁划一,尽可能划分不同的功能区域于固定位置,方便用户导航使 用；排版不宜过于密集,防止产生疲劳感.B/S构架适用原那么页面最小：由于 Web的网络特性,尽可能减小单页面加载量,降低图片文件大小和数量,加快加载速 度,方便用户体验.屏幕适应： Web界面需要适应不同用户屏幕大小.浏览器兼容：需要适应不同浏览器浏览效果,虽然目前可不考虑不同浏览器差异,但仍需考虑IE浏览器版本差异带来的客户端不同效果.最少垂直滚动：尽可能减少垂直方向滚动,尽可能不超过两屏禁止水平滚动：由于将导致非常恶劣的客户体验,尽可能禁止浏览器水平滚动操作.防止隐藏右键操作：浏览器的右

6、键操作不符合用户体验习惯,尽可能防止.本系统应用原那么瘦客户端要求：由于客户应用环境配置大多较低,除效劳器可单独配置较灵活外,应该保证瘦客户端, 使用户容易使用.例如尽量不要使用复杂的JS脚本和HTC组件,不要在客户端使用IE整合XML/XSLT 等等.大数据量表格的水平扩展要求：本系统中存在大数据量的列表,需要较大的交互界面支持,为防止水平 滚动,应尽可能获取大的屏幕水平空间.桌面面板导航简化操作：为了实现方便简捷的用户操作,应该保证用户绝大多数操作可通过首页桌面面 板的导航来实现.用户自适应定义：提供较多的可订制功能,尤其对桌面面板提供强大的定制功能；使用户能够将最常用 的功能定义到桌面面

7、板,每次登录即可直接使用,简化用户操作.用户常用操作记录定义：对某些需定义操作的功能如查询、搜索等,提供系统自动记忆和客户定制功能,系统可自动记忆用户前13次操作,或者用户可自定义操作记录,方便以后使用.大数据量表格的水平扩展要求：本系统中存在大数据量的列表,需要较大的交互界面支持,为防止水平 滚动,应尽可能获取大的屏幕水平空间.4.系统分析在概要设计过程中,界面设计人员需要浏览需求分析报告,了解用户的工作流程,和整个系统功能,再 根据这些原始需求功能,归纳整理分析,并针对用户交互设计需要,提出意见,参与系统设计.其中包括对原始功能的分类归纳,提出系统交互需要的新功能,对用户功能实现的优先级进

8、行定义等 等.例如,提出用户自定义快捷面板功能,常用操作自动记录功能等,需要在概要设计时尽早提出,以方便 作好系统规划.另外,需要对整个系统中的常见功能有比拟清楚的了解,归纳整个系统界面交互中常见的交互形式,例 如在本系统中就包括列表、查询、搜索、填写表单、工程分解、工程选择、审批、报告等等；只有清楚 的了解整个系统需求,才能较好的把握整个界面设计的统一性.当然,这也和界面设计人员的经验有很 大关系.4.1 主界面设计设计主界面,确定系统根本风格,是概要设计中的工作之一.首页主界面的主要实现功能是导航,它要 到达的目的,是尽可能使用户仅通过首页面板就可以完成所有常规任务.a fWTE_*n e

9、口曲亨曼族 QfiWE u.H在暖上口涧峭X仙百*WtFH ikzri-Hiq合屯用wsHHimm11中BJSWMflJlf如电登件110碑丰不且富uif咄I Hsmi回回戛域:由丛生心时及n*右屈以曰.*乃安才小花瞰*-期MM - SJMSS触跑口甲,盆不代叫*H口大町用二 g后田处* 口下星务 口电注 Fm 二代3；F*nwwQ| rf = AM0口和MXWFFO: Ht占H.K Io土|H*去it uaer | SI1性E?j比更漕u4n：HJ,AiJMAli；在整个系统界面的设计过程中,需要注意整个系统的统一,设计风格要一致,界面中的交互元素,从色 彩、样式到排版方式、具体位置都要具备

10、延续性,这样才能使用户尽快习惯整个系统操作.4 . 3.典型交互模式界面交互中,根据功能不同,有不同的交互方式.应该尽量提取抽象,尽可能减少交互模式的种类,或 者把交互方式尽可能设计的类似,以方便用户快速熟悉系统.F面列举3个系统中比拟典型的交互模式,供大家参考单项选择亚势第耗紧*也品隼酢号； 日击就的却肄于西 即思.恢不丸 产聚人.kiAf ; /Jl*c1曹玉JJo Irryp.f* *I & lrnq-1 :Explfirffr幺i此新H群净13i色建可局川 不无讦手工NSIM*SWfli等户齿口：孽口目.：雪胤Ota：LLLHP那么眼等户导言户胜St,遑舞意仁君.生产密曲I-IB2 0

11、344412吉胃奎业回害户考时2M&20344114A但苜也回层作客户名廊3HB2034 442(1曷包客把北匠府即.1茁Q至史客户名4S3Ma20B4Wll看的笑曾回L用不12 34R慨窜学户三阴摩跖牌号臼多项选择兆方委授垠提里求甥:3Ht四容：|一女花RI、客户借网：宗用麻口； |一丽| V+部K等拜日期军里R生生产空d9宅号车堤博护罡,耳登车生下全女23ea2-25回眄词怦曷名用M茶单枝9会吵/羽国躺疗显书于斗s*tk31WI.I3.39回i i a1g 国加工灯|#扁府位 回点击龙磬标可可比四 目瑚闻锭5不苒.产下工箱九一、1磋*连瑞隼场修讪 阳1州1:品名他3HR海晒或评号也 :设定

12、可法判不允百丁工院：ftftHT 图,MK.拨r霎料单瞿:依口口外生把七周.工程分解GIF动画4桢了任锦分解于杵葬*甘： 1-#20031229314分配 FUR 2005 13130件套书醇：某单1碰蚌谀箸梅鼬合同委聿完成：工程笠号理目名者：检蔓傕羽.Ml0031L士士乘客可触展之处棱股楸联车063406-3000一HtfaoaL 127313的槌骷同阿王GB&406-20aUHI2O03L137914下两鼠,平拦岩物苔拮例GBMOC 2OQ0侬的工11 ft*任务立凄要欠T索产降叶后国.目作方一 T住处-提型史U验装工程摧取费废：斫香惶航;日抬曩畜畜选眼费度：标宿岳推糠择人二回函包W即庭诙三百丽 9J黑盘心 |4洎 显示音同耳也信息提示二通过点击EJS白亮表超右的脏 ,分配你需要自闻目到住袈分睇咕建卷中.再进眼度脸上；珀二成靠读操性 度存杳卜分解亍柱辱,必不在斯白珈口分解二半口才整更交完成！4 . 4.Demo 开发Demo是详细设计阶段的重要成果之一,在对系统进行详细的分析设计之后,开发出界面Demo原型,主要作