基于网页模板与状态机的网页交互设计

    1.用WinForm做东西，在交互这一块，通过窗体、按钮和事件等，可以很方便快捷的做出比较复杂的交互。但我们发现，用Web做这种交互，则非常难。

 

    2.原因何在？细细分析，比如登录。WinForm的窗体，打开时，时未登录的。登录后，首先后台数据发生改变，比如后台会有一个类，记录当前登录的账户信息。而点击登录按钮后，前台界面元素也发生相应改变，比如登录信息输入框没了，变成了用户信息栏。仔细分析后，还可得知，这种改变，是持久性的。而对于Web，由于Web是无状态的，每一次更新后（刷新\post\跳转 等），前台后台的界面，与网页上的即时数据，都无法持久化的保留。虽然，Web目前有cookie和session等可以保存数据，但没有一种机制，可以像WinForm那样保存界面的状态信息。

 

    3.综上，网页交互设计之难，难在所有的状态都需要设计师和程序员去手动维护。对于WinForm，它不仅帮你维护了UI的状态，通过绑定，UI还可以关联部分数据，因此WinForm实际帮你维护了所有UI状态和部分数据状态。而对于Web，所有状态，都必须自己手动维护。

 

    4.对于Web交互，我们应该怎么做？

        4.1 由于UI无法维护，因此，对于单个 UI，我们只能通过把它的状态进行数据化，通过维护数据，来达到维护UI的目的。这需要很大的工作量和设计量。

        4.2 不仅要维护单个UI，还要维护与UI相关联的步骤的状态。举个例子，程序一开始打开，为显示最初数据，并且，并未登录。此状态假设为1.登录后，界面上还是显示相同数据，但登陆框没有了，取而代之的是显示当前用户信息。此状态假设为2。WinForm通过窗口状态的自动持久化，把这个状态自动维护了，但对于Web，我们需要自己来维护。

        4.3 数据的状态。比如，WinForm下的全局数据保存类、与当前UI关联的数据类等，都需要我们自己去维护。

 

    5.基于网页模板与状态机的网页交互设计

        5.1 有了以上分析，我们可以得出一个Web交互设计的方法：基网页模板，与状态机的网页交互设计。

            5.1.1 组件拆分：尽量把网页，拆分为单个功能的组件，组件实际上是 网页html的一部分(View)，以及它需要的数据（Data），加上操作它的方法（Controller）。注意了，这有点像MVC，只是，此处的Controller仅仅为一个方法体，与Asp.net的MVC种的Controller无关。

            5.1.2 状态划分：按流程，把每一个步骤需要的界面，做一个全局唯一的标志，每个标志都形成一个网页模板。当然，流程也要弄清楚。流程主要有两个，第一是当前状态是从哪个状态来的，以及当前状态通过交互后，会移动到哪个状态去。

            5.1.3 状态分支（流向）判断：如果一个状态，会跳转到多个状态，则如何判定当前状态应该跳转到哪个状态，并且，应该先做哪个判断，再做哪个判断。

 

    6.总之，这种设计方法，非常复杂，而且耗时，但它是网页交互设计的最基础原理与方法。如果能有页面控件或其他设计方法，能减少这种原始方法使用，则尽量避免。但实在无法避免的情况下，也只能采用它了。

        这种方法复杂且耗时的原因是，它把每一种静态的状态，当成一个原子状态，因此，一些过程比较多的复杂交互，就需要分解成很多个原子状态，无论是状态维护还是数据交换，都非常麻烦。

 

    7.在以往的开发经验中，网页设计者实际上采用的是一种低复杂度的方法。

       低复杂度：它基于Action这个主状态。比如，用户浏览主页时，Request里的Action为NULL，此时只需要显示主页信息，以及显示用户登录控件就行了。然后，当用户输入用户名和密码，进行登录后，Request里的Action变成"Regist_Test"，然后，基于这种状态，开发者就知道，此时应该验证用户名和密码，以及进行登录测试了。如果登录失败，则Action变成"Regist_Fail"（实际上，Action只是用来区分客户端的操作，服务端的状态转变，并不需要输出到Action。但为了规范以及方便调试，可以用Action记录整个系统的状态，整个系统是包含了服务端和客户端的）。基于这种Action状态转换，可以比较方便地设计出基于状态转换的网页。