网页设计和用户界面设计漫谈 发展过程和思考

时间：2022-07-02 12:03:01 | 来源：建站知识

时间：2022-07-02 12:03:01 来源：建站知识

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

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

回到用户界面设计的原点

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

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

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

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

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

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

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

相近(Proximity)。 距离相近的各部分趋于组成整体。

相似(Similarity)。 在某一方面相似的各部分趋于组成整体。

封闭(Closure)。 彼此相属、构成封闭实体的各部分趋于组成整体。

简单(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等)，而用户界面设计则很难从平面设计那里取经。

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