这是两个现在网页设计领域使用频率非常高的词。在大多数情况下，它们被相互替代。这个领域内外的很多人都认为这是两个意义基本一样的词。但是它们真的可以互相混淆么？我并没有为一些名词而去纠结的习惯，比方说我不会在“美工”和“设计师”之间与别人争论。但是我想网页设计和用户界面设计这两个词包含了很多东西，这两个词的对比可以引申出一些设计领域的发展过程和思考。

注：这篇网志所指的用户界面设计在无特殊说明下特指网页中的用户界面设计。

回到用户界面设计的原点

这里不做考古，只是回想一下最初在互联网领域提到用户界面这个词的时候，是由工业设计领域的人机交互界面中引申过来的。因而谈到界面，则必然会有交互这个概念的存在。从人机界面本身的理解上来看，它是人和机器（本文特指电脑）交互的媒介。如果把机器看作是CPU、硬盘等硬件的话，那么界面就是各种各样的软件（包括操作系统）；如果人交互的对象是软件里的一些对象（有可能是数据啊媒体文件啊等等），那么界面（图形界面）就是我们很熟悉的软件界面了。在软件领域，界面设计的发展已经非常成熟了，在各种环境、各种系统下都有不同的GUI Builder，而之所以称其为界面，则必须是人会通过界面这个媒介来操作“数据”。这和网页设计是不一样的。

从用户的需求出发来看网页设计

用户浏览网页的需求是什么？抽象出来可以归纳为 1：浏览信息；2：操作数据。这里的数据是指在数据库中躺着的数据。用户在单纯浏览信息时，不会对页面背后的“数据”造成任何操作，但用户可以点击链接，跳转页面。这部分就是网页设计有别于用户界面设计的一个主要地方。前者会花相当多的精力在如何通过设计来准确地传达信息上，而后者虽然也涉及到信息的传达，但只占一小部分。这也是为什么做软件界面的设计师在做网页设计时会遇到比较大的挑战，也并不是很成功（尽管“像软件一样”的风格也正流行着）。

那是不是可以认为网页设计中包含一部分用户界面设计的职能，也就是操作数据的部分？事实上可以这么看，网页设计中的交互模式和用户界面设计的交互模式有很多都是想通的。但也需要注意这两者在交互模式上的差异性。目前由于网络速度、浏览器标准等原因的限制，能够完美应用到网页中的交互模式远少于用户界面设计中的交互模式，但这种差距正在逐步缩小（比如drag&drop，real time edit）；而在用户界面设计中，这些交互也显得更加流畅。

网页设计受平面设计及界面设计的影响

很难说网页设计是从平面设计或者界面设计之中派生出来的。在最早的年代，网页设计应该是由浏览器开发公司来做的，也就是网景。至于现在发展成如此蓬勃的一个领域，有望超过传统的平面设计和界面设计，中间的过程中我的脑海中是一团混沌。但无疑，现代的网页设计是受了很多平面设计以及界面设计的影响。其中我认为平面设计的影响尤甚。

前面有提到用户在网页上一个重要需求是浏览信息，而网页设计的一个职能便是有效地、准确地传达信息，并且同时保证美感。而这正是平面设计的一个重要职能。举个最普遍的例子，大家通常谈到的网页设计中的排版和布局（layout），实际上正是来源于广泛应用在平面设计中的格式塔心理学理论的完形法则：

1. 相近（Proximity）。 距离相近的各部分趋于组成整体。
2. 相似（Similarity）。 在某一方面相似的各部分趋于组成整体。
3. 封闭（Closure）。 彼此相属、构成封闭实体的各部分趋于组成整体。
4. 简单（Simplicity）。 具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。

而色彩理论、构图理论等等，很多也是直接基于平面设计发展多年积累下来的经验结果的。甚至现在很多设计师直接把平面设计中独特的风格引入到网页设计里：Print Design Influence。

而网页设计和平面设计最大的不同，也就是在“操作数据”上。事实上，网页设计的发展也一直受软件界面设计的影响，先前已经提到网页中的交互越来越“软件化”。而交互的发展必然会影响到网页设计中的“视觉”部分。事实上这两部分谁先影响谁很难说清楚，是一个鸡生蛋，蛋生鸡的问题。另外一个网页设计有别于平面设计和用户界面设计的地方，我认为是css, html, js三者身上。前端代码的发展对网页设计的影响非常大，甚至有段时间会主导网页设计的发展潮流，比如用jQuery轻松实现的one page style（本站首页就是如此）。而在平面设计领域，没有代码环节；在用户界面设计领域，GUI Builder的革新速度远远慢于前端代码。事实上，有点脱胎于平面设计和用户界面设计的网页设计，已经开始反向影响它的祖先了。

从美学上对比网页设计和用户界面设计的发展

在这个维度上来比较的话，影响网页设计的美学风格非常之多：国际主义（Swiss style），复古风格（Retro style），极简设计（Minimalist design），包豪斯主义（Bauhaus），垃圾风格（Grunge style），自然模拟风格（Organic style）等等等等。而用户界面设计的美学风格通常是在质感的摸索上，比如Windows Vista风格，苹果风格等等，比较受局限。这也是因为网页设计的美学风格通常从平面设计那派生而来（当然也有自己独特的比如Grunge style, Organic style等），而用户界面设计则很难从平面设计那里取经。

花了这么长篇幅来说自己对网页设计和用户界面设计的看法，其实更多地都是个人实践和思考的结果。在工作中这些称呼实际上无关痛痒，只是网页设计和用户界面设计这两者在本质上有着许多不同，而且在具体实践中感受也不一样。不过今后有可能这两个概念会最终变成一个，按现在的互联网发展速度，桌面软件以后会逐渐迁移到云端，到那时也许只有一个设计称谓了。类似的网志，挑你喜欢的看：

• 反思现在工业设计的教育
• 设记系列：Draware手机界面设计
• How Blackboard theme has been done – the original
• Draware概念手机界面的flash演示
• 网页设计师也该关注页面性能

之前有写过记录这个手机界面概念设计过程的系列网志（还没完成全部），已完成两篇：Draware手机界面设计和设计系列：Draware是怎么炼成的（1）。如果你感兴趣可以订阅我的博客，我会尽早完成这个系列网志，到时就能在RSS中看到。

界面演示一：idle
界面演示二：dile
界面演示三：call history
界面演示四：message center
界面演示五：webr

类似的网志，挑你喜欢的看：

• 设记系列：Draware手机界面设计
• 设计系列：Draware是怎么炼成的（1）
• 易用且轻量级的交互设计
• 从需求到功能再到实现
• 网页设计师也该关注页面性能

这一篇focus在前期的设计，包括icon，交互等等。

一：概念的产生。

概念是在一天晚上睡觉的时候产生的。当时想，像iphone那样那么多的应用放在一起，用户在操作的过程中会不会不太方便，一个页面上有十多个icon，寻找一个icon会花费一些时间，甚至用户所需要的应用会在下一页上（iphone换页的交互方式是拖拉页面边缘）。如果有一种交互方式能让用户不需要选择就直接到达应用，那会大大提高易用性和可用性。

这种交互方式未来会有多种解决方式，以现在的无线技术发展前沿来看，context-aware（基于上下文的感知）、gesture recognition（捕捉手势，葡萄牙学者研究的方向： The current feasibility of gesture recognition for a smartphone using JEME. New York）等，都能为这种交互方式提供可能性。而我在那天晚上想到的是用手指在屏幕上画，画那些经抽象icon后得到的图像，然后页面就跳转到用户想去的地方。

这实际上是关乎于信息显示的方式。现在大多数手机都是将所有应用的icon放在主页上，然后让用户来完成判断、选择的过程，从而过滤出用户想点击的图标。

直接把应用显示在主页上，让用户完成判断、选择的过程：

用户输入信息，系统来完成过滤和映射的过程：

如果能够让系统自己来完成判断、过滤的过程，用户只需要输入指令，就能到达相应的页面，这无疑就省去了很多步骤。要让系统具有这种特性，有两个关键元素，一个是过滤条件：用户画什么？一个是映射关系：用户画出的东西怎么应对手机应用。

二：icon的设计

前面的概念提到，这种新的交互是用户在屏幕上画出icon抽象后的图像。于是Draware的icon的设计就需要满足：

1. 线条化，很简单，容易抽象出来
2. 辨识度高，最好能用户一看就知道是什么
3. 容易记住或者学习，用户在使用过几次之后就能熟记icon抽象出的图像。

在满足这三点的情况下，设计了一组icon和它所对应的图像。

在项目后期，我还延伸了这种交互。手机上一个通话的icon是链到通话记录和拨号两个页面的，在用户画出图像之后，系统有一个缓冲时间（一秒左右），用户在这个时候可以进行第二次操作来选择具体要去哪个页面。同理应用于短信页面和写短信页面、拍照页面和相片库页面、摄像页面和视频库页面等。

其实Draware项目对于这种新交互方式的探索只是刚刚开始，抽象图标后的图像并不是用户在屏幕上去画的最佳方案，在我的预想中，一个语义强烈的动作会是很好的图像，比如说在日常生活中打开信件的动作，应用于短信的图像上。下面这个图大致的显示了图像演变的过程：

下一篇预告，具体页面的设计。包括视觉的细节和页面具体的交互。类似的网志，挑你喜欢的看：

• 设记系列：Draware手机界面设计
• Draware概念手机界面的flash演示
• 从需求到功能再到实现
• 网页设计师也该关注页面性能
• 易用且轻量级的交互设计

虽然有相当多的瑕疵，不过还算是比较完整。最大的收获应该是实现了自己的一些交互的想法，在视觉上也有了突破。

不过实际而言，研究并没有进行到很深的一个程度，限于精力和时间吧，对于draw这个动作的细化还只是在比较表面的阶段。

先给大家看看最后的poster和swf动画：

动画原来是几个swf串联起来的，虽然体积小，但是需要摆好几个swf在上面，所以录影了,画质有些下降- -大家将就点吧。记得戴上耳机，里面有音效的～

点击观看：

类似的网志，挑你喜欢的看：

• 设计系列：Draware是怎么炼成的（1）
• Draware概念手机界面的flash演示
• 易用且轻量级的交互设计
• 网页设计师也该关注页面性能
• 网页设计(web design)和用户界面设计(UI design)