Web软件用户界面设计指南/博文视点 (2008 年度畅销榜NO.965 )

尽管国内有很多技术出色、聪明过人的软件工程师，但是许多开发出来的软件产品既难用又难看，客户很不满意，导致经常修改软件的用户界面，造成极大的生产力浪费。由于学生们在学校里接受的教育几乎全是科学与技术，他们不知道怎样才能设计易用、美观的用户界面，很多人甚至想都没有想过这个问题。当他们毕业后真正参与软件产品开发时，只好凭着个人的经验与感觉设计软件的用户界面，这样产生的界面往往得不到大众用户的认可。如何让软件人员开发出易用、美观的应用软件，这是让大多数企业领导头痛的问题。本书第1章分析国内企业面临的用户界面设计问题，给出解决问题的建议。第2章论述用户界面的10个设计要素，给出通俗易懂的解释。设计和实现Web软件用户界面要比开发传统的Windows应用软件麻烦得多。本书第3章第8章分别阐述：界面元素的一般规则、Web软件主界面结构、表格页面、对话页面、消息框、评审和测试用户界面。\r\n 本书主要读者对象是IT企业的研发主管、项目经理、用户界面设计人员和软件开发人员，以及即将到IT企业工作的高校毕业生。本书可以作为软件学院的教学参考书。

第1章 Web软件用户界面设计概述\r\n 1.1 软件用户界面的重要性 3\r\n 1.2 什么是好的用户界面 4\r\n 1.3 现状与问题分析 6\r\n 1.3.1 教育缺陷 7\r\n 1.3.2 设计错位 8\r\n 1.3.3 混淆网站与Web软件的用户界面 10\r\n 1.3.4 缺乏Web界面构件库 11\r\n 1.3.5 谁来设计Web软件用户界面 14\r\n 1.4 Web软件开发流程介绍 17\r\n 1.4.1 需求开发过程域 18\r\n 1.4.2 软件设计过程域（含用户界面设计） 19\r\n 1.4.3 软件实现 21\r\n 1.4.4 测试与改错 22\r\n 1.4.5 部署与验收 23\r\n 1.4.6 服务与维护 24\r\n第2章 用户界面的10个设计要素\r\n 2.1 用户界面适合于软件的功能（合适性） 27\r\n 2.2 容易理解 30\r\n 2.3 及时反馈信息 31\r\n 2.4 防错处理 32\r\n 2.5 风格一致和必要的个性化 33\r\n 2.6 合理的布局 35\r\n 2.7 合理的色彩 36\r\n 2.8 适应用户群体和国际化 37\r\n 2.9 最少操作步骤（最高效率） 39\r\n 2.10 可复用 41\r\n第3章 常用界面元素的设计规则\r\n 3.1 字体 45\r\n 3.2 菜单 46\r\n 3.3 命令按钮 47\r\n 3.4 工具条和图标按钮 48\r\n 3.5 Tooltip 49\r\n 3.6 Radio Button 50\r\n 3.7 Check Box 50\r\n 3.8 输入框和文本域 51\r\n 3.9 Combo box和List box 52\r\n 3.10 多页选项板（Tabbed Pane） 53\r\n 3.11 数据表格 55\r\n 3.12 Web日期控件 56\r\n第4章 Web软件的主界面设计与示例\r\n 4.1 Web软件与网站的区别 61\r\n 4.2 Web软件的主界面模型 66\r\n 4.3 Top Frame区 68\r\n 4.4 功能模块区 68\r\n 4.5 内容显示及操作区 73\r\n 4.6 信息反馈区 75\r\n 4.7 窗口的交互规则 76\r\n 4.7.1 一般规则 76\r\n 4.7.2 焦点规则 77\r\n 4.7.3 选择 77\r\n 4.7.4 拷贝、粘贴 78\r\n 4.7.5 拖曳 78\r\n 4.7.6 滚动 79\r\n 4.7.7 窗体缩放 79\r\n 4.7.8 功能调用 80\r\n 4.7.9 动态帮助 80\r\n 4.7.10 错误处理 81\r\n 4.7.11 默认值 81\r\n第5章 Web软件的表格\r\n 5.1 表格概述 85\r\n 5.2 数据编辑 91\r\n 5.3 选中 92\r\n 5.4 排序 94\r\n 5.5 分页 96\r\n 5.6 数据过滤 97\r\n第6章 Web软件的对话页面\r\n 6.1 如何放置Web对话页面:弹出新窗口还是原地刷新页面 102\r\n 6.2 Web对话页面的样式与示例 104\r\n 6.3 必填项的标记 108\r\n 6.4 出错处理 108\r\n第7章 Web软件的消息框\r\n 7.1 确认消息框 113\r\n 7.2 告警消息框 117\r\n 7.3 通知消息框 121\r\n 7.4 过程消息框 123\r\n第8章 评审和测试用户界面\r\n 8.1 用户界面检查表 128\r\n 8.2 用户界面原型评审 134\r\n 8.2.1 准备评审 135\r\n 8.2.2 举行评审会议 136\r\n 8.2.3 改进原型 136\r\n 8.3 用户界面测试 138\r\n 8.3.1 制定测试计划 140\r\n 8.3.2 设计测试用例 141\r\n 8.3.3 执行测试 143\r\n 8.3.4 消除缺陷 144\r\n 8.3.5 缺陷跟踪 145\r\n参考文献 149

林锐，1973年生。1990年至1996年，就读于西安电子科技大学，获硕士学位。1997年至2000年，就读于浙江大学计算机系，获博士学位。
大学期间两度被评为中国百名跨世纪优秀大学生，1996年获电子工业部科技进步二等奖，1997年获首届中国大学生电脑大赛软件展示一等奖。
2000年7月加入上海贝尔有限公司，从事软件工程和CMM的研究推广工作，2003年7月当选为Alcatel集团软件工程专家。
2004年初创建上海漫索计算机科技有限公司，致力于创作适合国内企业需求的软件研发管理解决方案，包括方法论和软件产品。
工作期间出版著作五部。

不可原谅的过失 小偷忐忑不安地向神父忏悔：“我闯入别人家里偷了东西。” 神父安慰小偷说：“没有关系，上帝会原谅你的。” 小偷说：“我偷了100万美元。” 神父失声叫道：“哇塞，那么多！” 小偷懊恼地说：“可是我忘记了擦除门把上的指纹，警察肯定会找到我。” 神父勃然大怒：“笨蛋，职业小偷犯了如此低级的错误，上帝不会原谅你的。” 你可知道大伙儿（软件人员）开发的应用软件中存在多少不可原谅的用户界面缺陷吗？例如：  界面措辞含糊，甚至有错别字。连简单的消息框都设计不好，可能存在文不对题的语病。  界面布局混乱，缺乏逻辑，凡是能放的东西都堆积上去，让用户不知从何下手。  没有防错处理，不对用户输入的数据进行检验，不根据用户的权限自动隐藏或者禁用某些功能。执行破坏性的操作之前，不提醒用户确认。总之，如果用户执行了错误的操作，那他活该。  不提供进度条、动画来反映正在进行的比较耗时间的过程，对于重要的操作也不返回结果，让用户干着急。 我们见到的用户界面缺陷不胜枚举…… 我曾经给一家软件企业做用户界面设计方面的咨询和培训，现场进行用户界面测试练习： 该公司用“政府机关的车辆管理”模块作案例分析。该模块的功能比较简单，主要是“申请用车、审批、调配、维护”等。这个模块开发完成数月了，已经交付给客户使用。 我请学员们依据我讲解的用户界面设计要素，查找bug并且讲述论据。现场气氛热烈，吸引了其他部门人员以及公司领导来参观。结果在20分钟左右，大家找出了十多个bug，而且大多数bug是“不可原谅的”。 这个测试结果让学员们大吃一惊：公司把软件交付给客户之前已经测试过了，想不到还有那么多的bug! 怎么搞的？可见全面学习用户界面设计、测试的方法是多么重要! 上述问题显然不是个别现象。我常使用国内某银行的“企业网上银行系统”，仅一个付款页面，我就发现了至少5处缺陷（不合理的用户界面设计）。该付款页面的逻辑让人费解，琢磨半天后才能学会使用，更糟糕的是没有防错处理，让人小心翼翼、提心吊胆。 有一次，我从上海给北京的员工支付一笔款项，输入了正确的用户名和账号，但是输错了城市，把北京写成了上海。我递交数据后才发现城市输错了，但是不能撤消，当时我也不着急，我认为软件会识别这个错误而自动终止这笔交易。于是我再次输入正确的用户名、账号和城市，重新支付款项。 3天后我查询账户，已经扣除了2笔款项，历史记录上写着“交易成功”，但是北京的员工却只收到1笔款项（即第二次交易），丢失了第一笔款项。我们在两地电话查询都没有办法，只能干等着。再过了数天，第一笔款项终于又回到了我的账户，历史记录上写着“退”字。 我对该“企业网上银行系统”用户界面的评价就一个字：“蠢”！ 国内软件开发商和运营商对软件的“品位”似乎还停留在“有功能就好，能凑合着用就行”这种档次。我们并不奢望所有用户都赞赏软件用户界面，但是至少不能老是被用户们痛贬。要对得起我们的职业，开发出来的软件要有点职业水准，这总不过分吧。 每当我使用那些“破烂”的软件用户界面时，我总怀疑人们在开发和测试软件的时候没有动过脑筋（否则会那么破烂吗？）。倘若软件人员干活不再需要动脑筋，那么他沦落为“软件民工”的日期就不远了。 如何让软件人员能开发出易用、美观的应用软件，这是让大多数企业领导头痛的问题。 尽管国内有很多技术出色、聪明过人的软件工程师，但是许多人开发出来的软件产品却既难用又难看，客户很不满意。导致经常要修改软件的用户界面，造成极大的生产力浪费。 由于学生们在学校里接受的教育几乎全是科学与技术，他们不知道怎样才能设计易用、美观的用户界面，很多人甚至想都没有想过。当他们毕业后真正参与软件产品开发时，只好凭着个人的经验与感觉设计软件的用户界面，这样产生的界面往往得不到大众用户的认可。 《Web软件用户界面设计指南》的目的就是帮助IT企业的项目经理、用户界面设计人员和软件开发人员掌握Web软件用户界面的设计方法，基本上不存在学习的难度。本书中的软件用户界面示例，主要来源于作者自己设计开发的“集成化项目管理系统Future2.0”。该软件将不断升级，请读者从http://www.chinaspis.com 下载最新的版本。 本书侧重于论述软件易用性设计，而不是艺术（美学）设计。本书作者林锐正和浙江大学工业设计专家彭韧合著《软件用户界面艺术设计》，该书将论述软件用户界面的视觉美学、创意设计、色彩设计、图形设计、文字设计、平面设计等。该书将在2005年由电子工业出版社出版。 如果读者有更好的见解，请不吝赐教，与作者们多多交流。 感谢电子工业出版社出版了我们的五部著作：  《高质量程序设计指南——C++/C语言》（2002年）  《CMMI3级软件过程改进方法与规范》（2003年）  《软件工程与项目管理解析》（2003年）  《面向企业的软件研发管理解决方案：方法与工具》（2004年）  《Web软件用户界面设计指南》（2005年） 感谢博文视点出版团队为我们的著作顺利出版所做的一切努力。我们将持久合作，不断推出适合于中国IT企业需求的计算机相关著作。 林锐，2005年2月 linrui@chinaspis.com 上海漫索计算机科技有限公司 http://www.chinaspis.com

无封面