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

UI界面设计、交互设计及程序开发在网络项目开发过程中，这个阶段也叫做构建阶段，是工作量最大、最艰苦也是最难以控制的阶段。不管一座大楼的设计蓝图多宏伟，若没有管道工、泥瓦匠、水电工等各种工匠一砖一瓦地艰辛积累，密切协作，这座大楼始终是空中楼阁、海市蜃楼。一、界面设计打开用户之门对于以Web服务为模式的项目，无论是访问用户还是系统管理员，主要工作都是通过浏览器的界面交互完成。给系统设计合理友好的*作界面就像给人穿衣服一样，合体舒适的搭配能给人耳目一新的感觉，反之则令人敬而远之，甚至失去进一步深入了解的兴趣，这无疑不是开发人员所期望的结果。以网站为表现方式的系统界面设计所涉及的知识远远超过了美术的范畴，作为一个优秀的Web界面设计师来说，需要掌握的不仅仅是电脑制图的能力，还应该具备心理学、广告创意、美术工艺、排版艺术等多方面的综合素质，系统界面绝不是孤芳自赏令人难以理解的抽象画，而应该成为绝大多数用户共同接受的最方便的日用品。关于Web美工创作的*作技巧不是本文所关注的，我们希望知道的是用户最需要的是什么样的界面？根据笔者的经验，在进行产品设计和项目开发的界面设计中是有所不同的。产品通常是指可大量分发销售的成熟性的产品，具体用户是不确定的，而项目大多是针对具体客户的需求进行开发，不具备二次销售的条件，当然，在二者之间总还是能找到共同点的。产品设计由于面对的是未知的用户，因此界面设计必须挖掘的是用户习惯和观念的共性，大众化产品（例如邮件系统、BBS、门户网站等）、商业应用产品（例如交易系统、电子办公系统）或专业应用产品（例如财务系统、杀毒系统）等等，需要考虑的是所有人或某一类的人的共同习惯和审美观念，而不是刻意地出奇招、不断地考验用户的智商和耐心。项目开发则相反，面对明确的具体用户考虑更多的是个性化设计，也许有些是非常规的要求，但是用户已经具有特殊的偏好和习惯时，应尽可能满足用户的需求进行设计。在笔者参与某个行业的办公系统设计过程中，用户就提出了非常特别的要求，所有的界面不能出现外国人和外国场景的形象，每一页都需要变换颜色，另外站点标题要大得出乎寻常，失去比例，这时候美工只能迁就用户的心理和习惯，可是这样的设计用到产品设计上，大多人都会感到不舒服。不管是产品设计还是项目开发，界面设计都应该遵循以下共同的规则：1.界面风格需要一致：每个新的系统对用户来说都是一次新的学习过程，如果界面风格经常变化，不保持统一，无疑更增加了用户的学习难度，也许会导致用户的厌烦。比如：第一页的导航条是图片型的放在页面顶部横排的，而在第二页导航条却成了文字型居左竖排，用户会为了捉摸不清设计师的意图而大光其火。再比如，有些设计师考虑到用户方便，在页面上放置了后退的按钮，但是要是不注意保持一致的话，用户也许会糊涂后退、回首页、BACK、上一页这些按钮究竟有什么区别?也许非常恼火你是不是拿他在开涮！2.界面元素对象化：在程序设计中需要注重模块化，而界面设计中对象化同样非常重要。将界面元素对象化，比如底部版权信息、导航条等，图片、JS也尽可能复用，比如站点标志、搜索按钮、滚动信息的JS文件等等；3.建立标准的文档管理和设计规范界面设计涉及的要素比较多，文件类型复杂，而界面文件往往还需要另外通过程序进行编译，这就要求了界面设计人员必须建立规的设计规范和标准的文档管理方法：*制定文件命名标准*设定文件统一路径*保存原始创作文件（例如PSD、Fla源文件）*最终完成文件（经过用户认可的文件）*单独管理摸版文件（经过编译或嵌入程序的文件）4.考虑用户偏好习惯和方便性我们经常可以听到界面设计师说：“怎么在我机器上看得好好的，怎么在你那里就变样了？”其实道理很简单，用户的*作环境和习惯与设计环境是有差别的，界面设计同程序一样需要进行测试，主要测试的对象为：5.浏览器类型和版本兼容问题：假如有个很重要的菜单是需要IE5.5支持的，但是用户万一使用的是IE4.0版本，那么这个菜单就再也打不开，结果可想而知；6.分辨率：界面设计师的屏幕也许是17寸的，分辨率甚至做到1280×960都是可以接受的，但是用户的如果用的14寸显示器，分辨率只能达到640×480，界面布局看起来会很可笑；7.字体大小：利用样式表精确控制页面元素，特别是字体是很重要的。有不少用户喜欢更改浏览器默认的字体显示大小，当设计师看到用户将字体显示调整成最大而将表格撑得乱七八糟的时候，或许会痛心疾首的；8.考虑特殊情况：用户或许在浏览器设置了禁止显示图片或禁止JS脚本等，有必要为图片设置好尺寸以免影响其他元素的显示，并有其他的方式代替JS需要显示的效果和信息。9.编写帮助：无论多么出色的界面设计对用户来说都是陌生的，那么编写站点帮助或软件帮助是个非常有效的办法，把你的设计意图和使用介绍明明白白地告诉用户，在用户遇到困难的时候能够得到最快的帮助，不但可以降低用户的不满程度，同时可以帮助用户更加系统深入地学习和掌握。二：交互设计建立沟通的桥梁作为交互设计人员应该读读AlanCooper的《软件创新之路》，被誉为“VB之父”地AlanCooper明确地提出了将程序开发划分为交互设计和编码设计两大部分，笔者非常赞同。“软件越来越难用，越来越难学。”我们不止一次地听到用户如此地抱怨，也许程序员认为机器就是如此理解程序的，随着系统的日益复杂和功能的不断强大，软件原来越难用，门槛越来越高是很正常的，但是别忘记用户才是系统的所有者和使用者，期望用户成为计算机专家的要求显然是难以接受的。在国内无论是从事商务的技术人员还是技术型的商务人员都极其缺乏，交互设计师就理所当然地应该成为彼此沟通的桥梁。程序员和用户的差别是很明显的，因此通过交互设计建立良好的沟通是非常需要的。交互设计师的侧重点并不在程序的编码实现，而注重于用户如何最好地与系统交互*作，在设计中重点需要考虑的是：1.系统易用性：并非每个用户都是计算机的熟练用户，面对隐藏的层和特殊设计的菜单可能会抓瞎，用户不见得能明白双击左键能自动滚屏或者怎样能让自动滚屏停下来、直接看最下面的结果？交互设计师特别需要重视的就是系统的易用性。有条件的话，可以让不同的陌生用户从首页开始*作，不给予任何提示和帮助，观察用户的上手和熟练程度，记录并查找所有的陷阱和缺陷，加以改进。2.流程简便：“简单就是美”，在系统交互设计方面更是如此，如何用最少的*作，最明显的提示和帮助，完成一项流程的*作是需要花大力气进行优化的。3.盲点测试：用户的*作并不是严格的按照系统的提示顺序进行，也不一定会按照系统的提示要求去做，而程序员在设计的过程中是按照既定的逻辑进行开发的，测试中也难免以自己的习惯*作，这时就可能出现盲点，即系统存在未被测试到的状态环境。编写测试软件或利用其他测试工具可以大大提高测试的可靠性。例如一份表单正常提交以后，假如用户利用历史记录后退，回到提交前的状态，这时候修改了提交内容，又再一次提交，那么结果是什么呢？再比如，假如设计的弹出窗口的尺寸是700×500，且不可改变大小，隐藏滚动条，而用户万一使用640×480的分辨率，那么弹出的窗口中，用户如何能点击到最下面的按钮？4.出错及异常提示：凡是软件都是有BUG的，因此对各种出错或异常状态给予用户一个友好的提示和帮助，并提示用户大概是由于什么原因，那么用户会愉快的多。笔者遇到过一个用户注册系统，用户注册后希望修改密码，有的能做成功，而有些人怎么也改不了，检查了很长时间才发现由于密码设置的是不少于三位不大于八位，许多用户密码超过了八位，因此无法修改成功，但是由于没有提示出错原因，所以用户就不断拼命地提交，最后只好愤怒地去投诉。再例如发布信息的时候，可能会因为填写时间过长，提交时被系统拒绝数据丢失，那么用户辛辛苦苦撰写的内容永远消失了，还有什么比这个更令用户沮丧的吗？在填写的输入部分给用户一个时间提示，或允许后退找回刚才的内容，至少可以让用户容易接受一些。5.利用用户环境测试利用用户的*作环境进行测试，用户的服务器、网络线路和客户机也许跟开发环境差别巨大，用户的机器配置、网络环境对系统的要求是不一样的。比如设计客户端的APPLET时也许会因为客户机的内存不足而崩溃，也可能因为文件过大，远程访问时处理时间过长而响应失败。Web的交互设计师需要掌握的技能主要是Javascript、VBscript、Dhtml、Flash等，还需要了解心理学、人因工程学、系统工程等方面的经验和知识，认真把握每个交互动作的合理性和可行性，这个交互也许是个链接，也可能是个表单、提示窗口或者是滚动条的拉动距离，检查是否最优化和最合理的方式。举个很简单的例子，在链接列表过多出现翻页的时候，程序员很自然地会将上一页、下一页的翻页按钮放在了最底下，但是列表很长的时候，用户每次翻页的时候都需要把滚动条拉到最下面才可以点击到翻页按钮，用户可能就会抱怨，明明知道在某一页，却每次要点击后拉滚动条寻找翻页按钮，而如果将翻页按钮在列表的上面也放一条，并且设置直接跳转到某页的按钮，则大大减轻了用户的工作量，类似的例子在我们的设计中屡见不鲜。三：程序开发是系统的基石程序员进行编码，构成了系统的基础。在进行系统分析和软件建模以后，程序开发便进入实质性的过程。但是在程序员动手之前不单需要和系统分析员打交道，还要和界面工程师，交互设计师，业务流程分析员以及客户交流，除了理解程序逻辑以外，同时需要理解界面设计和交互设计的要求，使得程序开发成功的可能性大大提高，达到事半功倍的效果。随着网络开发技术的日益发展和用户需求的不断增长，系统开发中的编码工作日益繁重，不仅仅需要考虑性能和功能的实现，而且需要考虑今后的维护和扩展，需要考虑到系统的集成和稳定，许多稍微复杂一些的系统开发便不再是一个人能独立完成的，因此程序开发需要遵照严格规范的开发过程。1.文档规范：软件即文档。良好的文档习惯是系统开发极其重要的，文档是程序的一部分，程序员花一定时间进行文档编写是份内的工作。具备完整的文档记录，对于系统今后的二次开发、查错、升级具有重大的作用。可以说即使代码全部扔掉，只要文档完整，很快就可以再造一个系统出来，而只保留了代码，缺乏文档的时候，就像被抽了脊梁的标本，再难站起来恢复原样。2.编码规范：编码规范包含了程序排版、注释、命名、可读性、变量、程序效率、质量保证、代码编译、代码测试和版本控制等等注意事项。程序员最常见的问题之一：“别人写的代码看不懂，与其改写不如重写”。基本上都是没有按照编码规范开发的缘故。所以我们经常听说某个程序员离职以后，他所写的那些模块就没法维护和管理了。3.代码复用：代码复用是程序员的梦想，也是系统成熟度的重要标志，关于代码复用方法的讨论不在本文之列，但是做为代码复用是程序员走向成熟和提升的必经之路。4.测试测试再测试：笔者在软件工程的讨论会上，微软的一位项目经理在介绍微软如何保证产品质量时说：“微软质量保证的秘密就是：测试测试再测试！”在IE4.0的开发小组中，200名开发程序员意外还有200多名测试工程师，而且测试工程师的水平甚至高于开发工程师。测试是系统质量最直接有效的手段。在国内的开发环境达到这样的投入和水平显然是不太现实的，但是尽可能提高测试环境和加强测试管理，是程序员和测试工程师共同的方向。四：本阶段的重点工作：在这个阶段是整个项目组参与角色最多，也是协作最密切最难控制的过程，笔者认为做为项目经理特别需要关注以下问题：1.建立项目小组的沟通渠道：沟通是项目小组具有密切协作形成凝聚力的最重要的手段，在项目开发过程随着各个角色的工作进展，冲突和矛盾是必不可少的，无论是通过论坛、邮件、会议、口头还是私下沟通，项目管理人员有责任和义务建立小组通畅及时的沟通渠道，根据有经验的HR经理分析：有效的沟通应该是在问题发生的48小时之内，否则解决的效率会降低75％。2.建立文档规范和管理办法，借助PVCS、WINCVS等相关工具建立整个项目小组的文档；3.建立BUG报告系统，在内部预先创建测试环境，将BUG尽可能早地消除掉。4.测试和文档工程师的工作自始自终地贯穿着项目开发过程，这在以后的文章中会继