杭州有一个D2前端技术论坛，英文是Designer & Developer Frontend Technology Forum，这里的designer主要是指Web设计师，developer主要是指Web前端开发工程师。

D2对于我的生活来说是一种状态，对于生活我既是一个设计师也是一个程序员，前者以直觉感性来体验、觉察并反照这个世界，后者通过理性、逻辑来认识并构建这个世界，两者道不同，但殊途同归。

因此我把D2作为了我职业生涯的主体，web设计和web程序是我一直所钟的工作。也许得归结于性别文化，我要更加趋向于理性、逻辑的程序构建，但是我从来也不曾想要放弃designer。或者对于我来说，这两者从来没有分离过。

设计一个web界面时，我常常沉迷于视觉上的愉悦和这种愉悦的创造快感，但我同时还会考虑设计如何实现、平面如何合理切割、代码如何组织构建，种种思绪交织，令这种快感加倍。

同时当我构建一个程序时，漂亮的代码、优美的语法语义、优雅而严密的逻辑结构是我所追求的目标，我不能容忍粗制滥造的代码，我常常为此花很多时间去修改一些交到我手中实现服务器端程序的html代码，修正结构改良代码，或者花上半天时间去修改重构一个已经完成的应用程序，我的偏执让我很乐于做这样的事情，看见漂亮的干净的代码我会感到无比舒畅，并且到最后总会证明这些付出是值得的。

不论是做design还做develop，我总在这些过程中觉察到美的存在，这种觉察给我带来很多美妙的体验，这些体验加强了我在这个世界中的存在。

这个世界之所以这样是因为如果他不是这样那么我们就无法生存在这个世界，不记得这是谁说的了，但是这话也同样适用于美的体验。为什么我们觉查这个世界的美？因为如果他不美我们就不会存在于这个世界。

我曾经对美的认知做过很长的思考，因其源于人的某种主观，或者其直觉的感性的特征，人们总是喜欢把她和理性的逻辑的规律的世界对立起来。然而事实上，美是人类对这个严密逻辑的规律的冷酷的世界的法则的最高认知的结果，她是人类百万年来进化历程中对这个世界认知的最高抽象。人类对这个世界理性认知的不断积累和抽象，产生了一个能超越理性来认知这个世界的主体意识，这就是人类的审美意识。

所以说对于程序，这种企图以严密的逻辑、完美的规则和超大量的运算来重构这个世界的小东西，美是创造的最高追求。

一个执著于美的程序员，嗯，这就是我的D2生活。

1995~2004

6.典型交互模式

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

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

单项选择

多项选择

项目分解（GIF动画 4桢）

7.Demo开发

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

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

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

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

8.结语

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

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

5.典型界面

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

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

4.主界面设计

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

该主界面包含以下部分

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

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

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

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

2.需求分析

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

主要包括以下内容

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

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

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

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

1.工作流程

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

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

整个操作交互过程，除了最后保存文件外，其他都是由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源文件