精雕细刻:用户交互的Message反馈

 

        随着做Coder的日子一天天多了起来,自己对软件的理解也渐渐有所加深,按一般瓜熟蒂落的思路,在这篇的Blog里记录一下用户交互时的Validation和Message反馈的重要性.

 

        记得刚学Java时,自己的注意力都放在软件真正要做的事上,例如一个网上付费的操作,自己能想的(或想的最多的)就是业务层如何操作,怎么来配置事务控制,怎么在DAO层完成这个付费所涉及的小功能块.现在日子久了,也能更多地从用户的角度来考虑问题并考虑用户的感受了.
       
        软件是用来做事的,这没什么可说的,但这个做事是通过的用户的操作来完成的,用户的操作就是与软件系统的一次交互,交互时用户就得知道后台系统处理的结果怎样,而后台所需的数据也该在处理前通过某种规则的验证. 这样就有了交互时所需要的做的Validation和Message反馈.

 

        Validation这个不必多说,关键是反馈回的Message的显示,以及显示后在什么情况下disable掉或hidden起来.

 

        现在的B/S结构中的不少运用Ajax来改善用户交互,有了Ajax(再加上一些JavaScript的framework),B/S越来越接近于C/S的富功能表现与交互.另一方面,由于有了Ajax的灵活性,Message的管理也更加方便,在这个方便的基础上,如果处理不当也就很是混乱了.

 

        下面试着从最根儿上的用户交互出发来一步步引出Message的考虑点. 用户的一次交互的组成部分有:
               
                1,提交前的Validation(JavaScript在Browse端验证及其验证信息的反馈),
                2,提交到后台的验证及真正的业务处理,
                3,处理结果以Message的形式反馈给用户.

 

        Validation和后台的处理都有具体的业务规则来处理,这里不必多说.重点说说Message的显示.

 

        Message在Browse里反馈给用户时,可能最容易想到的就是采用Alert的方式.不过这种alert的方式虽然能达到朴素的效果,但总是不够优雅.于是就用了通过JavaScript在DOM动态显示Message的新方法.在具体操作上我们可以在整个页面中定义一个id为messageDisplay的DIV,再写一个名为displayMessage的JavaScript Function.

 

        采用DIV的方式显示Message与那种很原始的Alert相比有它优雅的好处,不过有些不足或者说是需要我们再在具体操作中加以弥补的是要视情况来决定这个div是否要隐藏起来.比如说页面中有如下的一个input:

 

        <input type = "text" id = "username" />

 

        用户输入UserName,Browse这边也做非语义的验证,这时(为了说明问题)我们在此反馈给用户一个信息:User name is OK.现在的问题是这条信息显示给用户后它会一直在这呆着的,我们在什么时候把它隐藏起来?若不采取任何有效的措施的话,这条信息会被新的Message覆盖掉,这显然不是我们最想要的结果,毕竟这个Message是很被动地消失了的.有没有什么更的方式来让它以"很情愿"的方式disappear呢?

 

        现在能想到的是:
                1, 当用户在做其它操作时(如鼠标点别的按钮)也触发一个事件,通过这个事件响应把Message隐藏起来.是有些复杂.
                2, 给这个Message点下时,让它在指定时间(比如说30秒)后自动disappear.这也不是很容易实现.

       
        一个小小的Message居然牵涉到这么多麻烦事,不由的想起IBM的Lotus产品了,人家那才就世界级的.

 

        上面是以动态的角度来看如何处理那个DIV的显示与否,下面的这点相对来说容易些: 以红绿来显示Message的性质,也就是当Message时成功类型时就以绿色来显示,若是失败类型的Message时就以红色来显示.这个就是小Case了,具体的实现也就不再多说了.