UI界面设计、交互设计及程序开发报告

1、UI 界面 设计、交互设计及程序开发在网络项目开发过程中，这个阶段也叫做构建阶段，是工作量最大、最艰 苦也是最难以控制的阶段。不管一座大楼的设计蓝图多宏伟，若没有管道工、 泥瓦匠、水电工等各种工匠一砖一瓦地艰辛积累，密切协作，这座大楼始终是 空中楼阁、海市蜃楼。一、界面设计打开用户之门对于以 Web 服务为模式的项目，无论是访问用户还是系统管理员，主要 工 作都是通过浏览器的界面交互完成。给系统设计合理友好的 * 作界面就像给人 穿 衣服一样，合体舒适的搭配能给人耳目一新的感觉，反之则令人敬而远之， 甚 至失去进一步深入了解的兴趣，这无疑不是开发人员所期望的结果。 以网 站为表现方式的系统界面

2、设计所涉及的知识远远超过了美术的范畴， 作为一个 优秀的 Web 界面设计师来说，需要掌握的不仅仅是电脑制图的能力， 还应该具 备心理学、广告创意、美术工艺、排版艺术等多方面的综合素质，系 统界面绝 不是孤芳自赏令人难以理解的抽象画，而应该成为绝大多数用户共同 接受的最 方便的日用品。关于 Web 美工创作的 * 作技巧不是本文所关注的，我们希望知道的是用户 最需要的是什么样的界面？根据笔者的经验，在进行产品设计和项目开发的界 面设计中是有所不同的。产品通常是指可大量分发销售的成熟性的产品，具体 用户是不确定的，而项目大多是针对具体客户的需求进行开发，不具备二次销 售的条件，当然，在二者之间总

3、还是能找到共同点的。产品设计由于面对的是未知的用户，因此界面设计必须挖掘的是用户习惯和观念的共性，大众化产品（例如邮件系统、BBS、门户网站等）、商业应用 产品（例如交易系统、电子办公系统）或专业应用产品（例如财务系统、杀毒 系统）等等，需要考虑的是所有人或某一类的人的共同习惯和审美观念，而不 是刻意地出奇招、不断地考验用户的智商和耐心。项目开发则相反，面对明确的具体用户考虑更多的是个性化设计，也许有 些是非常规的要求，但是用户已经具有特殊的偏好和习惯时，应尽可能满足用 户的需求进行设计。在笔者参与某个行业的办公系统设计过程中，用户就提出 了非常特别的要求，所有的界面不能出现外国人和外国场景的

4、形象，每一页都 需要变换颜色，另外站点标题要大得出乎寻常，失去比例，这时候美工只能迁 就用户的心理和习惯，可是这样的设计用到产品设计上，大多人都会感到不舒 服。不管是产品设计还是项目开发，界面设计都应该遵循以下共同的规则：1. 界面风格需要一致：每个新的系统对用户来说都是一次新的学习过程，如果界面风格经常变化， 不保持统一，无疑更增加了用户的学习难度，也许会导致用户的厌烦。比如： 第一页的导航条是图片型的放在页面顶部横排的，而在第二页导航条却成了文 字型居左竖排，用户会为了捉摸不清设计师的意图而大光其火。再比如，有些 设计师考虑到用户方便，在页面上放置了后退的按钮，但是要是不注意保持一 致的话

5、，用户也许会糊涂后退、回首页、BACK、上一页这些按钮究竟有什么 区别?也许非常恼火你是不是拿他在开涮！2. 界面元素对象化：在程序设计中需要注重模块化，而界面设计中对象化同样非常重要。将界面元素对象化，比如底部版权信息、导航条等，图片、JS也尽可能复用，比如 站点标志、搜索按钮、滚动信息的 JS 文件等等；3. 建立标准的文档管理和设计规范 界面设计涉及的要素比较多，文件类型复杂，而界面文件往往还需要另外通过 程序进行编译，这就要求了界面设计人员必须建立规的设计规范和标准的文档 管理方法：* 制定文件命名标准* 设定文件统一路径* 保存原始创作文件（例如 PSD 、Fla 源文件）* 最终完

6、成文件（经过用户认可的文件）* 单独管理摸版文件（经过编译或嵌入程序的文件）4. 考虑用户偏好习惯和方便性我们经常可以听到界面设计师说：“怎么在我机器上看得好好的，怎么在 你那里就变样了？”其实道理很简单，用户的 * 作环境和习惯与设计环境是有差 别的，界面设计同程序一样需要进行测试，主要测试的对象为：5. 浏览器类型和版本兼容问题：假如有个很重要的菜单是需要IE5.5 支持的，但是用户万一使用的是 IE4.0 版本，那么这个菜单就再也打不开，结果可想而知；6分辨率：界面设计师的屏幕也许是 17寸的，分辨率甚至做到1280 X 960都 是可以接受的，但是用户的如果用的 14 寸显示器，分辨率

7、只能达到640 X 480 ，界面布局看起来会很可笑；7.字体大小：利用样式表精确控制页面元素，特别是字体是很重要的。有不少用户喜欢更改浏览器默认的字体显示大小，当设计师看到用户将字体显示调整 成最大而将表格撑得乱七八糟的时候，或许会痛心疾首的；8.考虑特殊情况：用户或许在浏览器设置了禁止显示图片或禁止JS 脚本等，有必要为图片设置好尺寸以免影响其他元素的显示，并有其他的方式代替 JS 需要 显示的效果和信息。8. 编写帮助：无论多么出色的界面设计对用户来说都是陌生的，那么编写站点帮助或软 件帮助是个非常有效的办法，把你的设计意图和使用介绍明明白白地告诉用户， 在用户遇到困难的时候能够得到最快

8、的帮助，不但可以降低用户的不满程度， 同时可以帮助用户更加系统深入地学习和掌握。二：交互设计建立沟通的桥梁作为交互设计人员应该读读 Alan Cooper 的软件创新之路，被誉为“ VB 之父”地 Alan Cooper 明确地提出了将程序开发划分为交互设计和编码 设计两大部分，笔者非常赞同。“软件越来越难用，越来越难学。”我们不止一次地听到用户如此地抱怨， 也许程序员认为机器就是如此理解程序的，随着系统的日益复杂和功能的不断 强大，软件原来越难用，门槛越来越高是很正常的，但是别忘记用户才是系统 的所有者和使用者，期望用户成为计算机专家的要求显然是难以接受的。在国 内无论是从事商务的技术人员还

9、是技术型的商务人员都极其缺乏，交互设计师 就理所当然地应该成为彼此沟通的桥梁。程序员和用户的差别是很明显的，因此通过交互设计建立良好的沟通是非 常需要的。交互设计师的侧重点并不在程序的编码实现，而注重于用户如何最好地与系 统交互 *作，在设计中重点需要考虑的是：1. 系统易用性：并非每个用户都是计算机的熟练用户，面对隐藏的层和特殊设计的菜单可 能会抓瞎，用户不见得能明白双击左键能自动滚屏或者怎样能让自动滚屏停下 来、直接看最下面的结果？交互设计师特别需要重视的就是系统的易用性。有 条件的话，可以让不同的陌生用户从首页开始*作，不给予任何提示和帮助，观察用户的上手和熟练程度，记录并查找所有的陷阱

10、和缺陷，加以改进。 2.流程 简便：“简单就是美”，在系统交互设计方面更是如此，如何用最少的 *作，最明 显的提示和帮助，完成一项流程的 * 作是需要花大力气进行优化的。3. 盲点测试：用户的*作并不是严格的按照系统的提示顺序进行，也不一定会按照系统的 提示要求去做，而程序员在设计的过程中是按照既定的逻辑进行开发的，测试 中也难免以自己的习惯 * 作，这时就可能出现盲点，即系统存在未被测试到的状 态环境。编写测试软件或利用其他测试工具可以大大提高测试的可靠性。 例如一份表单正常提交以后，假如用户利用历史记录后退，回到提交前的 状态， 这时候修改了提交内容，又再一次提交，那么结果是什么呢？再比如

11、，假如设计的弹出窗口的尺寸是700 X 500，且不可改变大小，隐藏滚动条，而用 户万一 使用640 X 480的分辨率，那么弹出的窗口中，用户如何能点击到最下面的按钮？4. 出错及异常提示：凡是软件都是有 BUG 的，因此对各种出错或异常状态给予用户一个友好 的 提示和帮助，并提示用户大概是由于什么原因，那么用户会愉快的多。 笔 者遇到过一个用户注册系统，用户注册后希望修改密码，有的能做成功， 而有 些人怎么也改不了，检查了很长时间才发现由于密码设置的是不少于三位 不大 于八位，许多用户密码超过了八位，因此无法修改成功，但是由于没有提 示出 错原因，所以用户就不断拼命地提交，最后只好愤怒地去

12、投诉。 再例如发 布信息的时候，可能会因为填写时间过长，提交时被系统拒绝数 据丢失，那么 用户辛辛苦苦撰写的内容永远消失了，还有什么比这个更令用户 沮丧的吗？在 填写的输入部分给用户一个时间提示，或允许后退找回刚才的内 容，至少可以 让用户容易接受一些。5. 利用用户环境测试利用用户的 *作环境进行测试，用户的服务器、网络线路和客户机也许跟开 发环境差别巨大，用户的机器配置、网络环境对系统的要求是不一样的。比如 设计客户端的 APPLET 时也许会因为客户机的内存不足而崩溃，也可能因为文 件过大，远程访问时处理时间过长而响应失败。Web 的交互设计师需要掌握的技能主要是 Javas cript

13、 、VBs cript 、Dhtml 、 Flash 等，还需要了解心理学、人因工程学、系统工程等方面 的经验和知识，认真把握每个交互动作的合理性和可行性，这个交互也许是个 链接，也可能是个表单、提示窗口或者是滚动条的拉动距离，检查是否最优化 和最合理的方式。举个很简单的例子，在链接列表过多出现翻页的时候，程序员很自然地会 将上一页、下一页的翻页按钮放在了最底下，但是列表很长的时候，用户每次 翻页的时候都需要把滚动条拉到最下面才可以点击到翻页按钮，用户可能就会抱怨，明明知道在某一页，却每次要点击后拉滚动条寻找翻页按钮，而如果将 翻页按钮在列表的上面也放一条，并且设置直接跳转到某页的按钮，则大大

14、减 轻了用户的工作量，类似的例子在我们的设计中屡见不鲜。三：程序开发是系统的基石程序员进行编码，构成了系统的基础。在进行系统分析和软件建模以后，程序开发便进入实质性的过程。但是在程序员动手之前不单需要和系统分析员打交道，还要和界面工程师，交互设计师，业务流程分析员以及客户交流，除了理解程序逻辑以外，同时需要理解界面设计和交互设计的要求，使得程序开 发成功的可能性大大提高，达到事半功倍的效果。随着网络开发技术的日益发展和用户需求的不断增长，系统开发中的编码 工作日益繁重，不仅仅需要考虑性能和功能的实现，而且需要考虑今后的维护 和扩展，需要考虑到系统的集成和稳定，许多稍微复杂一些的系统开发便不再

15、是一个人能独立完成的，因此程序开发需要遵照严格规范的开发过程。1.文档规范：软件即文档。良好的文档习惯是系统开发极其重要的，文档是程序的一部分，程序员花 一定时间进行文档编写是份内的工作。具备完整的文档记录，对于系统今后的 二次开发、查错、升级具有重大的作用。可以说即使代码全部扔掉，只要文档 完整，很快就可以再造一个系统出来，而只保留了代码，缺乏文档的时候，就 像被抽了脊梁的标本，再难站起来恢复原样。2. 编码规范：编码规范包含了程序排版、注释、命名、可读性、变量、程序效率、质量保证、代码编译、代码测试和版本控制等等注意事项。程序员最常见的问题之一：“别人写的代码看不懂，与其改写不如重写”。

16、基本上都是没有按照编码规范开发的缘故。所以我们经常听说某个程序员离职 以后，他所写的那些模块就没法维护和管理了。3. 代码复用：代码复用是程序员的梦想，也是系统成熟度的重要标志，关于代 码复用方法的讨论不在本文之列，但是做为代码复用是程序员走向成熟和提升 的必经之路。4. 测试测试再测试：笔者在软件工程的讨论会上，微软的一位项目经理在介绍 微软如何保证产品质量时说：“微软质量保证的秘密就是：测试测试再测试！ 在 IE4.0 的开发小组中， 200 名开发程序员意外还有 200 多名测试工程师， 而 且测试工程师的水平甚至高于开发工程师。测试是系统质量最直接有效的手 段。 在国内的开发环境达到这

17、样的投入和水平显然是不太现实的，但是尽可能 提高 测试环境和加强测试管理，是程序员和测试工程师共同的方向。 四：本阶段 的重点工作：在这个阶段是整个项目组参与角色最多，也是协作最密切最难控制的过程， 笔者认为做为项目经理特别需要关注以下问题：1. 建立项目小组的沟通渠道：沟通是项目小组具有密切协作形成凝聚力的最重要的手段，在项目开发过 程随着各个角色的工作进展，冲突和矛盾是必不可少的，无论是通过论坛、邮 件、会议、口头还是私下沟通，项目管理人员有责任和义务建立小组通畅及时 的沟通渠道，根据有经验的 HR 经理分析：有效的沟通应该是在问题发生的 48 小时之内，否则解决的效率会降低 75 。2. 建