6.典型交互模式

界面交互中，根据功能不同，有不同的交互方式。应该尽量提取抽象，尽可能减少交互模式的种类，或者把交互方式尽可能设计的类似，以方便用户快速熟悉系统。

下面列举3个系统中比较典型的交互模式，供大家参考。

单项选择

多项选择

项目分解（GIF动画 4桢）

7.Demo开发

Demo是详细设计阶段的重要成果之一，在对系统进行详细的分析设计之后，开发出界面Demo原型，主要作用是提供给合作客户，在基本功能、系统组成和易用性上进行测试。

本系统的Demo主要包括界面的设计制作，和部分客户端表现层脚本的开发。为了在后面的实际业务开发中尽可能获得重用，Demo的制作在页面规范、CSS样式定义和JS脚本编写方面都严格遵循了系统开发规范，并在以后的代码编写工作中严格执行。

本系统整个Demo包括大约50个页面，耗时月3周。

在后续的开发过程中，仍然要严格控制整个开发过程，保证整个系统界面的统一，并随时维护更新系统界面的设计。

8.结语

太长了……需要对以前很多东西进行回顾，实在很困难。很多细节，包括很多设计、技术上的东西，都已经记忆不清了，文章也显得有些紊乱。

因此，如果大家有什么疑问，或有意见、指正，请提出或来信与我交流。

5.典型界面

以下是系统中几个比较典型的界面模型。

在整个系统界面的设计过程中，需要注意整个系统的统一，设计风格要一致，界面中的交互元素，从色彩、样式到排版方式、具体位置都要具备延续性，这样才能使用户尽快习惯整个系统操作。

4.主界面设计

设计主界面，确定系统基本风格，是概要设计中的工作之一。首页主界面的主要实现功能是导航，它要达到的目的，是尽可能使用户仅通过首页面板就可以完成所有常规任务。

该主界面包含以下部分

用户信息区域 显示当前用户信息

用户导航区域 用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板

用户导航功能树 用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板

功能树隐藏 可水平扩展页面空间

2.需求分析

在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。

主要包括以下内容

早在中国IT业方兴未艾之时，计算机应用系统主要以功能实现为主，几乎没有界面设计这个概念。时至今日，随着计算机和网络的不断普及，社会信息化程度日益加深，用户和市场的不断成熟，人们已经不仅仅满足于“够用”，而是更加强调“好用”“易用”；因此，不论是普通最终用户的个人软件，还是企业应用的大型系统，界面设计在系统构建中都成为了一个非常重要的方面。

但是，（至少在中国）由于IT业发展滞后、市场还不够成熟等原因，在绝大多数企业中，界面设计在软件系统开发中还没有获得与之重要性相匹配的一席之地，并且在企业运作和协调中也没有形成成熟的模式和解决方案，如何做好界面设计和开发，仍然是大家不断研究探讨的一个问题。

我写这篇文章，主要内容是我参加一个面向质检行业的Web系统界面设计和开发工作的过程，包括其间的一些构思和想法；希望能和大家一起探讨一下这个问题，供大家参考。

另外，我同时承担了系统开发和界面设计工作，所以，虽然这是一篇讨论界面设计的文章，我会尽量把文章限制在界面设计范围内，但也有可能包含一些开发和系统设计的内容，请大家辨析清楚，欢迎指正。

1.工作流程

下图，是整个开发过程中与界面设计相关的主要流程工作。

从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。
在需求分析阶段，参与了对客户的访问和调研；
在概要设计阶段，参与了部分系统设计分析工作；
在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈；
在代码开发阶段，参与了系统表现层的设计开发。

界面交互

在XML中一共定义了 select/ input_ColorSelect / input_SizeSelect / input_BorderSelect（后3种为颜色/大小/边框输入模式）共4种输入模式，除select为直接选择外，其他在对应控件初始化的时候作为class属性赋值到控件中，类似class代码如下

/* 颜色输入模式input框的样式类 */
.input_ColorSelect
{
	width:100px;
	font-family:Tahoma;
	behavior:url(htc/effColorSelect.htc);
}

通过behavior属性，把该输入控件和相应的组件相关联，该组件effColorSelect.htc代码如下

<public:ATTACH EVENT="onfocus" ONEVENT="getShow()"/>
<public:METHOD NAME="getChange"/>

<script LANGUAGE="JScript">
function getShow()
{
element.blur();

//记录当前交互控件的ID 
effElement=element.id;

//在页面中加载输入控件
ShowControl ("SelectColor");
}

function getChange()
{
//当值发生变化时，对可视化样式元素赋值
SetAttribute(element.id,element.value);
}
</script>

其他

设计器中的值输入模式框只是页面中的几个层，通过上面的htc组件触发显示出来，输入后再把值传入到样式属性控件中，同时也会设置可视化样式元素。

另外还需要注意的是，XML文档是可以自行扩展或缩减的，但是在实际应用中，不能完全依据CSS标准来定义，因为可视化元素的style属性会自动格式化。例如如果你在XML中定义border-bottom-width属性，在将值取出时会自动格式化为border-bottom，这样会造成设计器中控件不能匹配。我在MSDN没有查到相关文档，所以只有经过实际测试来验证。

OK,比较关键的代码已经差不多了……希望能对大家有所帮助。
参考

另外再列出部分技术参考，如果大家对其中的技术细节如HTC和XmlDom等有所疑问，可以再详细研究一下，也欢迎大家来和我交流。

MSDN关于JS操作XmlDom的文档

这是英文文档,网上没有看到比较详细的中文文档,好在不复杂,大家将就一下吧

(最近MSDN不知道什么毛病，经常访问有问题，如果无法访问，请先登录msdn，再输入地址浏览)

蓝色理想的HTC教程

网上也没看见比较全面的讲述，这个简单易学,基本概念清楚了。

设计器初始化

Js脚本读取解析样式元素的style属性值，然后为设计器中构建的控件赋值

//设计器初始化
function Init()
{
   //获得由服务器端赋值的样式属性值
   var txt=document.all("DemoShow").style.cssText;

   if (txt.length>0)
   {
      var strClassName;

      //解析字符串
      var aryClass = txt.split(/[:;]/);

      for( i in aryClass)
      {
         var str = aryClass[i].replace(/(^s*)|(s*$)/g, "");
         if(!(i%2==1))
         {
            //当i为奇数时，解析的字符串应该为样式属性名称
            strClassName=str;
         }
         else
         {
            //当i为偶数时，获得属性值

              //属性名称即控件ID
            //判断该属性对应的控件是输入框还是选择列表
            if(document.all(strClassName).type=="select-one")
            {

               //如果是选择列表通过setIndexOfValue函数设定选择项
               setIndexOfValue(strClassName,str);

            }
            else
            {
               document.all(strClassName).value=str;
            }
         }
         i++;
      }
   }
}

这里对前面讲的CSS设计器系统关键代码作一些小结，如果没有看过前面文章请先参看前文
解析CSS样式文件

这段代码主要作用是把CSS文件分解为多个样式类，并按名称/文本属性生产ClassItem对象，并保存在一个ArrayList(cssList)中(C#代码)

//读取文件
 FileInfo theSource= new FileInfo (@m_filePath);
 StreamReader reader = theSource.OpenText();

 //将文件流转化为文本
 m_cssText = reader.ReadToEnd();
 reader.Close();

 //定义CSS文本分割符
 char[] delimiters = new char[] { '{','}'};
 int iCheck = 1;string className = null;

 //将文本转化为ArrayList
 foreach ( string substring in m_cssText.Split(delimiters))
 {
     if (iCheck%2==0)
         //当iCHeck为偶数时,字符串为样式属性内容 
         //将解析的样式名和属性作为ClassItem对象存入cssList        
         cssList.Add( new ClassItem ( className, substring.Trim() ) );

     else
         //当iCHeck为奇数时,字符串为样式名,暂存 
         className = substring.Trim(); iCheck++;
 }
 

交互界面构建

交互界面由Javascript通过XmlDocument读取Xml文件动态生成。

首先要读取XML文件，然后遍历整个XML文件，先遍历样式分类，再对每个分类遍历其下的所有样式属性。比较关键的代码是对XML的遍历，下面是对样式分类的遍历代码。

//LoadXML是XML文件读取函数
var dom = LoadXML("css.xml");

//通过XPath和selectNodes方法返回一个XMLDOMNodeList对象
var oNode = dom.selectNodes("//Category/Name");

//获取该对象长度，即XML文档中该路径节点的数量
var intCategory = oNodes.length;
for (i=0; i<intCategory; i++)
{
//获取集合中的节点
oNode = oNodes.nextNode;

if (oNode != null)
{
//样式分类界面构建代码-略 ……
}
}

样式输入控件构建函数，该函数作用是根据XPath路径查询XML定义，生成交互控件

function BuildInput ( path )
{
var str="";
var aNode=null;
var attValue=null;

//通过selectSingleNode返回符合条件的第一个节点 
var actNode = dom.selectSingleNode(path+"ActionType");
var nameNode = dom.selectSingleNode(path+"CssName");

//如果属性为选择输入，则读取SelectItems，并构建select控件 
if (actNode.text=="select")
{
str += "<select id='"+nameNode.text+"' name='"+nameNode.text+"'class='eSelect'>";

//查询该项的所有选择列表项 
var itemsNodes = dom.selectNodes (path+"SelectItems/Item");
str += "<option value='-1'>未设置</option>";
for (ii=0;ii<itemsNodes.length;ii++){
aNode = dom.selectSingleNode (path+"SelectItems/Item["+ii+"]");

//如果该项含有Name属性则在列表中显示Name属性值
attValue = aNode.getAttribute("Name")
var txtNode = dom.selectSingleNode (path+"SelectItems/Item["+ii+"]");
if (attValue==null)
str += "<option value='"+txtNode.text+"'>"+txtNode.text+"</option>";
else
str += "<option value='"+txtNode.text+"'>"+attValue+"</option>";
}
str += "</select>";
}
else
//如果属性为其他模式，则构建input输入，设置class属性为ActionType
{
str = "<input name='"+nameNode.text+"' id='"+nameNode.text+"' class='"+actNode.text+"'>";
}

return(str);
}

整个操作交互过程，除了最后保存文件外，其他都是由javascript完成。

首先DesignerBuild函数读取XML样式属性定义文件，构建整个设计器界面。然后Init函数读取服务器端赋给设计元素的Style属性，并把属性作为输入控件ID在设计器中查找并赋值，完成初始化。

在操作过程中，根据输入控件的样式类Class，触发绑定的HTC组件，做相应的客户端操作。

最后再读取设计元素的style属性，保存。

设计器界面

不同的设计元素

不同输入控件的不同class属性（根据XML中ActionType生成）触发不同HTC组件，实现不同输入模式。

由于商业原因，这里不便提供源代码；我将在后面提供部分关键代码供参考。

CSS样式中包含很多属性，设计器中当然要包含相应的属性类型；那么这些属性信息从哪里来呢？

采用XML定义是一种很自然就会想到的方式。

经常使用DW和VS.NET，所以在交互设计上采用了类似的模式；先将样式属性分类，再设置详细属性。

CSS属性是比较复杂的，如果要完全按照DW或VS.NET的模式，实现会比较复杂。为了简化，我把值的输入简化为两种形式，选择和文本输入。对于选择，直接在XML文件中定义；对于文本输入，抽象几种输入类型，在设计器生成时根据类型设定不同的HTC组件操作。这样就将一些复杂的属性输入封装到 HTC组件中，整个构架就简洁起来。

XML文件描述

首先是属性分类

<cssdesign>
<category>
<name>文字</name>
<style>
<name>字体</name>
......
</style>
<style>
<name>样式</name>
......
</style>
......
</category>
<category>
<name>背景</name>
<style>
<name>颜色</name>
......
</style>
......
</category>
</cssdesign>

系统分为文字、背景、文本、位置、布局、方框、边框和其他，每种类型有一个Name子元素和若干Style子元素。

每个Style子元素表示一个Style属性，结构如下

<style>
<name>字体</name>
<cssName>font-family</cssName>
<actionType>select</actionType>
<selectItems>
<item>verdana,arial</item>
<item Name="宋体">SimSun</item>
<item Name="黑体">SimHei</item>
</selectItems>
</style>
<style>
<name>大小</name>
<cssName>font-size</cssName>
<actionType>select</actionType>
<selectItems>
<item>12px</item>
<item>14px</item>
<item>9px</item>
</selectItems>
</style>
<style>
<name>颜色</name>
<cssName>background</cssName>
<actionType>input_ColorSelect</actionType>
</style>

Name为该属性的描述名称，在设计器中为文本描述；

CssName为属性名，在设计器中即输入字段的ID；

ActionType为属性设置方法，在设计器中为输入字段的样式类名，该样式中含有Behavior属性，制定HTC组件；

SelectItems为选择项，如果ActionType为Select，将会在此列出选择项；其子元素Item如果含有Name属性，将显示在设计器中，否则直接显示该元素的文本内容

框架图

XML源文件