網頁設計和使用者界面設計

摘要：這是兩個現在網頁設計領域使用頻率非常高的詞。在大多數情況下，它們被互相替代。這個領域内外的很多人都認為這是兩個意義基本一樣的詞。但是它們真的可以互相混淆麼？

　　這是兩個現在網頁設計領域使用頻率非常高的詞。在大多數情況下，它們被互相替代。這個領域内外的很多人都認為這是兩個意義基本一樣的詞。但是它們真的可以互相混淆麼？我并沒有為一些名詞而去糾結的習慣，比方說我不會在美工和設計師之間與别人争論。但是我想網頁設計和使用者界面設計這兩個詞包含了很多東西，這兩個詞的對比可以引申出一些設計領域的發展過程和思考。

　　注：這篇網志所指的使用者界面設計在無特殊說明下特指網頁中的使用者界面設計。

　　回到使用者界面設計的原點

　　這裡不做考古，隻是回想一下最初在網際網路領域提到使用者界面這個詞的時候，是由工業設計領域的人機互動界面中引申過來的。因而談到界面，則必然會有互動這個概念的存在。從人機界面本身的了解上來看，它是人和機器（本文特指電腦）互動的媒介。

　　如果把機器看作是CPU、硬碟等硬體的話，那麼界面就是各種各樣的軟體（包括作業系統）；如果人互動的對象是軟體裡的一些對象（有可能是資料啊媒體檔案啊等等），那麼界面（圖形界面）就是我們很熟悉的軟體界面了。在軟體領域，界面設計的發展已經非常成熟了，在各種環境、各種系統下都有不同的GUI Builder，而之是以稱其為界面，則必須是人會通過界面這個媒介來操作資料。這和網頁設計是不一樣的。

　　從使用者的需求出發來看網頁設計

　　使用者浏覽網頁的需求是什麼？抽象出來可以歸納為 1：浏覽資訊；2：操作資料。這裡的資料是指在資料庫中躺着的資料。使用者在單純浏覽資訊時，不會對頁面背後的資料造成任何操作，但使用者可以點選連結，跳轉頁面。這部分就是網頁設計有别于使用者界面設計的一個主要地方。

　　前者會花相當多的精力在如何通過設計來準确地傳達資訊上，而後者雖然也涉及到資訊的傳達，但隻占一小部分。這也是為什麼做軟體界面的設計師在做網頁設計時會遇到比較大的挑戰，也并不是很成功（盡管像軟體一樣的風格也正流行着）。

　　那是不是可以認為網頁設計中包含一部分使用者界面設計的職能，也就是操作資料的部分？事實上可以這麼看，網頁設計中的互動模式和使用者界面設計的互動模式有很多都是想通的。但也需要注意這兩者在互動模式上的差異性。目前由于網絡速度、浏覽器标準等原因的限制，能夠完美應用到網頁中的互動模式遠少于使用者界面設計中的互動模式，但這種差距正在逐漸縮小（比如dragdrop，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等），而使用者界面設計則很難從平面設計那裡取經。