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

 

昨天看了一篇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

 

 

评论

32 楼 znjq 2011-06-04  

如果框架封装的比较好,做出楼主图片中那样的原型界面也就是几分钟的事情,而且100%重用.

31 楼 fflame 2011-05-30  

Durian 写道

yizhilong28 写道

界面原型设计来引导客户，挖掘需求，只能说是获取需求的一种方式。
优点是能快速的设定客户心中的期待，还称不上需求，还需要加工成需求，另外可以加快开发；
缺点也很明显，将客户引进来，很有可能让客户过度集中在界面上，而忽略了功能及背后的业务及难度。
曾经有客户对着界面说，加某某功能。程序员说实现不了，客户答曰，不就是加个按钮吗？

=====
说实话，用户的职责仅仅是提供需求而已，设计，实现都是应该是乙方责任。

设计和实现也是参照用户的意见出来的吧？
尤其是那些需要根据数据库规范做的行业软件，有些数据表设计实在是坑爹啊……

30 楼 抛出异常的爱 2011-05-30  

原型不过是统一
用户与程序员脑补图的东西.....
如果用户与你的team一起工作了七八年了.

原型用口述也就够了

29 楼 Durian 2011-05-30  

yizhilong28 写道

Durian 写道

yizhilong28 写道

界面原型设计来引导客户，挖掘需求，只能说是获取需求的一种方式。
优点是能快速的设定客户心中的期待，还称不上需求，还需要加工成需求，另外可以加快开发；
缺点也很明显，将客户引进来，很有可能让客户过度集中在界面上，而忽略了功能及背后的业务及难度。
曾经有客户对着界面说，加某某功能。程序员说实现不了，客户答曰，不就是加个按钮吗？

=====
说实话，用户的职责仅仅是提供需求而已，设计，实现都是应该是乙方责任。

理想状态，完全同意你的说法
关键点是，碰到的客户就如你所说的，天马行空型、自己都不知道自己需要神马型。求指教。

----------------
这种项目就不该接

28 楼 yizhilong28 2011-05-30  

Durian 写道

yizhilong28 写道

界面原型设计来引导客户，挖掘需求，只能说是获取需求的一种方式。
优点是能快速的设定客户心中的期待，还称不上需求，还需要加工成需求，另外可以加快开发；
缺点也很明显，将客户引进来，很有可能让客户过度集中在界面上，而忽略了功能及背后的业务及难度。
曾经有客户对着界面说，加某某功能。程序员说实现不了，客户答曰，不就是加个按钮吗？

=====
说实话，用户的职责仅仅是提供需求而已，设计，实现都是应该是乙方责任。

理想状态，完全同意你的说法
关键点是，碰到的客户就如你所说的，天马行空型、自己都不知道自己需要神马型。求指教。

27 楼 Durian 2011-05-28  

yizhilong28 写道

界面原型设计来引导客户，挖掘需求，只能说是获取需求的一种方式。
优点是能快速的设定客户心中的期待，还称不上需求，还需要加工成需求，另外可以加快开发；
缺点也很明显，将客户引进来，很有可能让客户过度集中在界面上，而忽略了功能及背后的业务及难度。
曾经有客户对着界面说，加某某功能。程序员说实现不了，客户答曰，不就是加个按钮吗？

=====
说实话，用户的职责仅仅是提供需求而已，设计，实现都是应该是乙方责任。

26 楼 Durian 2011-05-28  

我不同意楼主的看法：
1.项目必须要有界面原型，并且，跟最后的实现要一模一样
2.原型应该是可以运行的，并且包含所有的用户需求，跟客户沟通的唯一凭据就是原型。
3.原型通过客户评审和内部评审就要保持稳定，进入开发阶段
4.如果用户有变动，在项目二期实现
没有原型就无法限定用户天马行空的思维，就无法直观的反映软件提供商的理解情况和实现内容。

25 楼 我是来看热闹的 2011-05-28  

yizhilong28 写道

界面原型设计来引导客户，挖掘需求，只能说是获取需求的一种方式。
优点是能快速的设定客户心中的期待，还称不上需求，还需要加工成需求，另外可以加快开发；
缺点也很明显，将客户引进来，很有可能让客户过度集中在界面上，而忽略了功能及背后的业务及难度。
曾经有客户对着界面说，加某某功能。程序员说实现不了，客户答曰，不就是加个按钮吗？

界面设计和需求完全混起来就一塌糊涂了。
撑死算一个辅助手段，功能需求搞的差不多了才好干这个，收集一些非功能性的客户偏好方面的需求。

24 楼 yizhilong28 2011-05-27  

界面原型设计来引导客户，挖掘需求，只能说是获取需求的一种方式。
优点是能快速的设定客户心中的期待，还称不上需求，还需要加工成需求，另外可以加快开发；
缺点也很明显，将客户引进来，很有可能让客户过度集中在界面上，而忽略了功能及背后的业务及难度。
曾经有客户对着界面说，加某某功能。程序员说实现不了，客户答曰，不就是加个按钮吗？

23 楼 lovewinner 2011-05-27  

ltian 写道

除了吵架之外，中国的技术论坛上看不出有什么建设新的建议。

这也算不上是吵架吧 论事而已 没有矛盾怎么会进步呢？

22 楼 ltian 2011-05-26  

除了吵架之外，中国的技术论坛上看不出有什么建设新的建议。

21 楼 lovewinner 2011-05-25  

longfeisoft 写道

我来唱反调了，我觉得，那位仁兄说的还是有道理的，或者说在他的条件下是非常好的。

你现在做的是产品不是项目，在需求调研人员对于某个行业或者某个企业很熟悉的情况下，如果能够有这个原型工具的话，那是相当的好的，因为本身他已经具备了很好的能力，很好的经验，他可以引导客户的需求，虽然他在画界面，可是，他心里有数后台的数据结构、处理逻辑，他让客户有了感性的认识，有利于需求的确认，如果确认的界面还能够在后续逻辑开发的时候能够复用，那就太好了。

其实，很多时候，客户都不知道自己想要是什么样子，与其让客户天马行空的想，不如让他落地，带领他一起需求落地，而且客户也会很踏实。

凡事没有一刀切 画界面对于我现在的项目来说还是很有必要的 毕竟客户有点。。。

20 楼 p_3er 2011-05-23  

我是来看热闹的 写道

他说的很有道理啊。
你的问题是要先分清是BS或CS应用。
BS应用，界面原型高度可重用，若有可能，为什么不做的给力点，客户沟通也更直观，从操作上也可以有效收集客户偏好(如客户更习惯autocomplete还是下拉抑或弹出，等等)。

+1

我想除了楼上所说的那些原因之外，项目的规模也是一个问题。
1、中小型项目，完全可以照出一个html静态页面的原型出来给客户看，那样子会很形象，客户也会比较容易接受。可能由美工来做的话，大概也在3-7天之内就可以把东西拿出来。

2、如果是大型的项目的话，我想全出原型所用的时间会比较长，增加开发的时间与成本，这样还不如像春哥所说的，直接用软件把相关的图画出来就好了。

3、敏捷开发，个人认为就是在保证质量与客户需求的基础上，无所不用。

19 楼 我是来看热闹的 2011-05-22  

他说的很有道理啊。
你的问题是要先分清是BS或CS应用。
BS应用，界面原型高度可重用，若有可能，为什么不做的给力点，客户沟通也更直观，从操作上也可以有效收集客户偏好(如客户更习惯autocomplete还是下拉抑或弹出，等等)。

18 楼 kapic 2011-05-22  

xieyanhua  和我的情况很像。
   界面原型的方式蛮好的

17 楼 eredlab 2011-05-22  

：）

感谢寒江雪对G4的关注和支持

16 楼 寒江雪 2011-05-22  

在某些特定的情况下（注意是特定的情况，而不是普遍情况），比如：对该行业相当熟悉，自己的产品或者说已经完成的相关系统级产品已经得到大量积累和沉淀，对该行业已经提炼出来一套针对性较强的框架和组件，用户所提需求已经没有太多的新意。这个时候，原型法的意义已经不大，基本上可以将需求和设计两个阶段的工作合并起来。我想xieyanhua君应该就属于该种情形。
我认为，这种情况下来讨论原型法是否正确，对原型法来说就太不公平了。xieyanhua也说明了他的情况是特殊的，不一定就放之四海而皆准。在这个特殊的环境下，xieyanhua的做法是合适和合理的，我也遇到过类似情况。
而春哥为何会在看到xieyanhua的帖子后先很兴奋，而后“想了一夜”，最终觉得被误导？我想大概和春哥一直想做G4Builder有关，春哥想做一个尽可能通用且能大幅提高G4程序员开发效率的设计器。这种思想作用下，春哥先“被自己”误导了。呵呵，是不是这样，春哥？

在下是G4的fans，很佩服春哥的。在此就事论事，各位楼主见笑！

15 楼 eredlab 2011-05-19  

<div class="quote_title">xieyanhua 写道</div>
<div class="quote_div">
<p><strong>不知道楼主是否认同！</strong></p>
</div>
<p><br>认同了。睡觉了。</p>

14 楼 xieyanhua 2011-05-18  

<p>很简单的一个问题，也有很多人讨论过，在此再提一提这个老问题，不是真的要讨论出一个结果，只想以此说明问题，任何事情都需要前提条件，那样才有意义：</p>
<p><br>    <span style="color: #ff0000;"> 问题1、JAVA和C++两门语言，那个语言烂？<br></span>                 <span style="color: #0000ff;">答案一：java语言烂</span>-------结果肯定是绝大部分JAVA的程序员看不惯，奋起反击，甚至也会包括部分的C++程序员。<br>                 <span style="color: #0000ff;">答案二：C++语言烂</span>-------结果肯定是绝大部分C++的程序员看不惯，奋起反击，甚至也会包括部分的java程序员。<br>                 <span style="color: #0000ff;">合理的答案：无法解答，没有更多的信息来判断谁好谁坏。</span>你这样回答，99%的C++和99%的JAVA程序不会反驳你，生气其他语言的程序员也不会反驳你。<br> </p>
<p><span style="color: #ff0000;">     问题2、做一个WEB开发，是JAVA语言好/烂，还是C++好/烂？<br></span>                你回答 <span style="color: #0000ff;">C++语言烂，</span>我想99%的java程序和C++程序都不会反驳你。</p>
<p> </p>
<p><span style="color: #ff0000;">     问题3、做一个底层的电信通信控制模块，是JAVA语言好/烂，还是C++好/烂？</span></p>
<p>                你回答 <span style="color: #0000ff;">JAVA语言烂（其实用‘烂’这个字不合适，用‘不适合’可能比较合适），</span>我想70%以上的java程序和99%C++程序都不会反驳你。当然，java也可以做一些底层的东西，尽管JAVA的性能也在不断的提升，但是总体来说，java的性能不如C++，这是不争的事实，大多数正常的程序都不会反驳，在剩下的30%中，可能有一部分人不那么认为，要看要做的软件的性能等各方方面的约束了，在都能实现并达到要求的前提下，可能java比C++更适合。再剩下的一部分偏执型的，也都不需要理会了</p>
<p> <br><span style="color: #0000ff;">     三个本质一样的问题，同样的答案为什么会出现不一样的反应，问题再与，第一个问题没有任何参考条件或者实际的环境下进行讨论，下结论是没有任何意义的。</span></p>
<p> </p>
<p> </p>
<p><span style="color: #0000ff;"><span style="color: #000000;"><strong>不知道楼主是否认同！</strong></span>
<p> </p>
</span></p>

13 楼 xieyanhua 2011-05-18  

<div class="quote_title">eredlab 写道</div>
<div class="quote_div">
<p>看来xieyanhua有点生气了。撇开分歧不说，光说老兄这份认真劲就把偶折服了。偶以个人名义像您致歉！</p>
<div class="quote_title"> 写道</div>
<div class="quote_div">看了看你也是个设计师（eRedG4平台总设计师），既然是个总设计师，我认为那么轻率的下一些结论，有点不太好。</div>
 <br>偶是沦落民间的草根派设计师， 自己冠名自娱自乐的，在公司是最底层的民工型程序员， 见笑了 哈哈
<p> </p>
</div>
<p><br>分歧很正常，感觉楼主有点误解我的意思，而且确实是我的实际经验以及实际遇到的，只想事实求是，还原一些事情的真像而已，以免有些没有去看原文或者没有认真看完原文的同学误以为我真的您所言那样，只是忽悠大家或者忽悠客户。</p>