关于界面原型设计的再思考

 

昨天看了一篇ITEye上一篇关于界面原型设计讨论的帖子，其中某君的观点引起了偶的注意，他在帖子中如是说：

“个人观点，而且一直以来，都是用JSP代码，而且是基于后台框架的（根据时间情况），基本上是半成品，作出的原型后基本不需要修改（90%已经跟客户确认过）；而且我们的原型时在需求调研阶段并行做的。基本上需求完了，界面原型也完了。

以前做过的原型的程度有，界面原型，样式、风格，布局，功能基本都与真实产品一样：

1、存JSP/HTML+CSS+JS，

2、JSP/HTML+CSS+JS + 后台java代码（如Struts），只是简单的页面跳转，没有任何逻辑处理

”.....(这里省略很多此君误导偶的高论)

见原文：http://www.iteye.com/topic/1019296?page=2#2089719

昨天晚上一读完此君高论后让偶热血沸腾，便开始构思在以后的G4.Builder中要如何按照他的这个理论将界面原型设计工具设计出来的原型和后续开发无缝接轨的问题。想了一夜，想明白了：这个理论基础就是错的。如果按照此想法去实现我的G4.Builder势必被引入歧途。唉，还好醒悟得早。这也再一次警醒自己，可以开放视听，但不要轻信别人言论，要做一个有独立思考能力的人。

此君解释了为什么要建议那么做的几条原因，下面偶逐一批斗一下,交流就该碰撞，还望楼主莫见怪。

他说：

1、在做界面原型时间，基本上90%都不需要修改，开发可以直接重用，而其他方式实现，比如PPT，word，gui designer等工具，时间比较快，但是基本交互完后，100%无法供后续开发使用，即重用率为0；

偶说：

客户给你那么多做需求时间吗？你有快速生成界面又能生成代码且这个代码还能很好的无缝的被后续开发平台使用的工具吗？开发这样一个工具的成本几何？

-------------------------------

他说：

2、跟客户沟通的时候，容易沟通，因为具有交互性，所有客户配合很好，大家也很容易了解彼此想要的东西；而其他工具做的原型，都不具备交互性，或者交互性非常非常的少，会导致客户不配合；我就遇到过这样的情况；让客户确认需求，让客户看原型，客户根本不鸟我们，你发给他，他都不看，然后几天后你问他有什么问题，人家说没有看~~~~~~

偶说:

做需求就是和客户面对面交互，我们要抓住的是客户的功能性需求而非在做需求阶段把时间拿去搞一些花哨的所谓的可以点击可以跳转可以提示信息的交互界面来误导客户，让客户停留在兴奋型需求上而不去深挖最有价值最能主导需求分析成败的功能需求上。这个环节，并不是说不做界面原型，要做，但要有度。

--------------------------------

他说：

3、把风险往前提，在需求阶段通过原型，客户配合好了，需求就更好做了，分先也少点了，而且设计阶段的工作提到了需求阶段，将界面设计不符合客户要求的时候，而且也能极少发现我们做的是不是客户想要的。因为如果到设计阶段再去考虑界面，而且一般都是在开发到一定阶段或测试的时候，客户才会介入，此时发现设计不符合客户要求的时候，那就要修改，风险就更大了，因为往往到编码阶段，是最紧张的时候，而且时间的问题更加明显。

偶说：

在需求阶段穿插一定的界面原型设计目的是要辅助需求分析人员更好更顺畅的和客户进行交互沟通。并非是把界面设计的工作往前提，更不是要让客户确认以后系统的界面就是长这么个样子了.一般来说客户是不会来干预你的界面的，你做的再漂亮设计得再艺术对于客户来说只是兴奋需求，所以说风险在于功能型需求而非兴奋型需求。

------------------------------------

他说：

4、界面原型好了后，因为90%的功能界面客户都已经确认了，所以后期大范围修改界面原型的情况几乎是不可能的，除非需求有很大的变动；而且我做的界面的基本交互已经模拟出来了，比如按某个按钮会怎么处理，有些都会模拟出来，实在不容易实现或时间太急就暂时不实现，跟客户沟通的时候会跟他解释；所以到编码阶段，开发员基本不用管太多的界面处理，基本上只专注于自己的后台逻辑实现，页面就往里套数据就ok了，开发也很happy；

偶说：

客户需求阶段出来的界面原型只是辅助需求分析的一个输出成果。给后续设计阶段(包括界面设计)的一个参考。此是需求才做结束，你弄出来的那个原型就能说以后很少修改？？连库表结构什么样都不清楚，这种做法那你可能得在需求时候把设计全做了，回来就可以直接进入代码实现阶段了.这似乎是个一点也不好笑的笑话。

下面偶简单说一下偶结合自己经历过的项目并结合今天界面设计这个话题总结出来的一个界面设计环节软件过程，欢迎大家拍砖：

1.大家肯定会纠结过这样的问题，在软件过程中我们到底要不要做界面设计？界面设计在什么时候做？界面设计用什么工具做？界面设计的输出是什么？做界面设计付出的成本和带来的效益如何？

界面设计必须得做，而且要两份。

一份就是和需求一起的以需求附件形式输出的界面原型。这个界面原型可以使用pencil等界面原型设计工具来超级快速的实现，他会有很多缺陷比如显示字段不全，布局摆放不合理等等。但这都是正常的，因为他只是在和客户需求交流时的一个附带输出。他的意义在于辅助说明需求分析，给后续的设计提供参考。比如，我下面一份图所示：(只用了5分钟就画出来了)

 

另一份就是在需求分析的基础上做了概要设计(含数据库设计)，并在进行功能模块详细设计的时候出来的。我觉得真正意义上的界面设计应该是和功能模块详细设计并行的，只有在有了库表对具体功能模块进行详细设计的同时也才出得来在代码实现阶段能直接以此为模版进行开发的界面设计。此阶段的界面设计我认为很重要，第一：界面元素界面风格界面布局方案小到一个很小的元素和页面边距是多少的细节都要在此界面设计中反映，代码实现必须按照这个界面设计来做，如果不按照这个界面做，到时候自由发挥出来的界面那就可以让开发人员自己改到统一风格上去，这是开发人员也没什么话说。第二：界面设计和详细设计是相辅相成的，界面上放置的任何一个元素肯定是和后台有一一关联关系的，并不是随便乱放。而后台设计也决定了界面元素甚至是界面布局。这样就互相促进，是设计人员考虑得更周全，而不是写个设计文档出来，界面什么样也不知道。到时候开发人员看这个这个纯文字的设计就去画界面，这样不仅风格不统一而且设计文档的质量考虑的是否周全都大打折扣。界面设计文档可以单独出报告也可以和功能详细设计报告合并。

下面是偶在做功能模块详细设计的同时在需求分析阶段出的界面原型基础上做的界面设计，如下图所示：

当然界面设计不应该仅仅是一张图，还应该辅以文字说明一些控制逻辑、约束规则、跳转逻辑等等。

最后做个广告哈：)

eRedG4(易道系统集成与应用开发平台)是一个开放源代码的、面向企业计算环境下异构系统集成与行业应用快速二次开发的平台。

您可以通过下面的地址获取到G4最新版本和相关资源：

GoogleCode项目主页

http://code.google.com/p/g4-xiongchun/
在线演示系统暨G4平台在线交流社区

http://web230531.host89.chinajsp.net
eRedG4平台总设计师个人博客

http://hi.baidu.com/eredlab