這是兩個(gè)現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域使用頻率非常高的詞。在大多數(shù)情況下，它們被相互替代。這個(gè)領(lǐng)域內(nèi)外的很多人都認(rèn)為這是兩個(gè)意義基本一樣的詞。但是它們真的可以互相混淆么？我并沒(méi)有為一些名詞而去糾結(jié)的習(xí)慣，比方說(shuō)我不會(huì)在“美工”和“設(shè)計(jì)師”之間與別人爭(zhēng)論。但是我想網(wǎng)頁(yè)設(shè)計(jì)和用戶界面設(shè)計(jì)這兩個(gè)詞包含了很多東西，這兩個(gè)詞的對(duì)比可以引申出一些設(shè)計(jì)領(lǐng)域的發(fā)展過(guò)程和思考。

注：這篇網(wǎng)志所指的用戶界面設(shè)計(jì)在無(wú)特殊說(shuō)明下特指網(wǎng)頁(yè)中的用戶界面設(shè)計(jì)。

回到用戶界面設(shè)計(jì)的原點(diǎn)

這里不做考古，只是回想一下最初在互聯(lián)網(wǎng)領(lǐng)域提到用戶界面這個(gè)詞的時(shí)候，是由工業(yè)設(shè)計(jì)領(lǐng)域的人機(jī)交互界面中引申過(guò)來(lái)的。因而談到界面，則必然會(huì)有交互這個(gè)概念的存在。從人機(jī)界面本身的理解上來(lái)看，它是人和機(jī)器（本文特指電腦）交互的媒介。如果把機(jī)器看作是CPU、硬盤等硬件的話，那么界面就是各種各樣的軟件（包括操作系統(tǒng)）；如果人交互的對(duì)象是軟件里的一些對(duì)象（有可能是數(shù)據(jù)啊媒體文件啊等等），那么界面（圖形界面）就是我們很熟悉的軟件界面了。在軟件領(lǐng)域，界面設(shè)計(jì)的發(fā)展已經(jīng)非常成熟了，在各種環(huán)境、各種系統(tǒng)下都有不同的GUI Builder，而之所以稱其為界面，則必須是人會(huì)通過(guò)界面這個(gè)媒介來(lái)操作“數(shù)據(jù)”。這和網(wǎng)頁(yè)設(shè)計(jì)是不一樣的。

從用戶的需求出發(fā)來(lái)看網(wǎng)頁(yè)設(shè)計(jì)

用戶瀏覽網(wǎng)頁(yè)的需求是什么？抽象出來(lái)可以歸納為 1：瀏覽信息；2：操作數(shù)據(jù)。這里的數(shù)據(jù)是指在數(shù)據(jù)庫(kù)中躺著的數(shù)據(jù)。用戶在單純?yōu)g覽信息時(shí)，不會(huì)對(duì)頁(yè)面背后的“數(shù)據(jù)”造成任何操作，但用戶可以點(diǎn)擊鏈接，跳轉(zhuǎn)頁(yè)面。這部分就是網(wǎng)頁(yè)設(shè)計(jì)有別于用戶界面設(shè)計(jì)的一個(gè)主要地方。前者會(huì)花相當(dāng)多的精力在如何通過(guò)設(shè)計(jì)來(lái)準(zhǔn)確地傳達(dá)信息上，而后者雖然也涉及到信息的傳達(dá)，但只占一小部分。這也是為什么做軟件界面的設(shè)計(jì)師在做網(wǎng)頁(yè)設(shè)計(jì)時(shí)會(huì)遇到比較大的挑戰(zhàn)，也并不是很成功（盡管“像軟件一樣”的風(fēng)格也正流行著）。

那是不是可以認(rèn)為網(wǎng)頁(yè)設(shè)計(jì)中包含一部分用戶界面設(shè)計(jì)的職能，也就是操作數(shù)據(jù)的部分？事實(shí)上可以這么看，網(wǎng)頁(yè)設(shè)計(jì)中的交互模式和用戶界面設(shè)計(jì)的交互模式有很多都是想通的。但也需要注意這兩者在交互模式上的差異性。目前由于網(wǎng)絡(luò)速度、瀏覽器標(biāo)準(zhǔn)等原因的限制，能夠完美應(yīng)用到網(wǎng)頁(yè)中的交互模式遠(yuǎn)少于用戶界面設(shè)計(jì)中的交互模式，但這種差距正在逐步縮?。ū热鏳rag&drop，real time edit）；而在用戶界面設(shè)計(jì)中，這些交互也顯得更加流暢。

網(wǎng)頁(yè)設(shè)計(jì)受平面設(shè)計(jì)及界面設(shè)計(jì)的影響

很難說(shuō)網(wǎng)頁(yè)設(shè)計(jì)是從平面設(shè)計(jì)或者界面設(shè)計(jì)之中派生出來(lái)的。在最早的年代，網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該是由瀏覽器開(kāi)發(fā)公司來(lái)做的，也就是網(wǎng)景。至于現(xiàn)在發(fā)展成如此蓬勃的一個(gè)領(lǐng)域，有望超過(guò)傳統(tǒng)的平面設(shè)計(jì)和界面設(shè)計(jì)，中間的過(guò)程中我的腦海中是一團(tuán)混沌。但無(wú)疑，現(xiàn)代的網(wǎng)頁(yè)設(shè)計(jì)是受了很多平面設(shè)計(jì)以及界面設(shè)計(jì)的影響。其中我認(rèn)為平面設(shè)計(jì)的影響尤甚。

前面有提到用戶在網(wǎng)頁(yè)上一個(gè)重要需求是瀏覽信息，而網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)職能便是有效地、準(zhǔn)確地傳達(dá)信息，并且同時(shí)保證美感。而這正是平面設(shè)計(jì)的一個(gè)重要職能。舉個(gè)最普遍的例子，大家通常談到的網(wǎng)頁(yè)設(shè)計(jì)中的排版和布局（layout），實(shí)際上正是來(lái)源于廣泛應(yīng)用在平面設(shè)計(jì)中的格式塔心理學(xué)理論的完形法則：

相近（Proximity）。 距離相近的各部分趨于組成整體。
相似（Similarity）。 在某一方面相似的各部分趨于組成整體。
封閉（Closure）。 彼此相屬、構(gòu)成封閉實(shí)體的各部分趨于組成整體。
簡(jiǎn)單（Simplicity）。 具有對(duì)稱、規(guī)則、平滑的簡(jiǎn)單圖形特征的各部分趨于組成整體。
而色彩理論、構(gòu)圖理論等等，很多也是直接基于平面設(shè)計(jì)發(fā)展多年積累下來(lái)的經(jīng)驗(yàn)結(jié)果的。甚至現(xiàn)在很多設(shè)計(jì)師直接把平面設(shè)計(jì)中獨(dú)特的風(fēng)格引入到網(wǎng)頁(yè)設(shè)計(jì)里：Print Design Influence。

而網(wǎng)頁(yè)設(shè)計(jì)和平面設(shè)計(jì)最大的不同，也就是在“操作數(shù)據(jù)”上。事實(shí)上，網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展也一直受軟件界面設(shè)計(jì)的影響，先前已經(jīng)提到網(wǎng)頁(yè)中的交互越來(lái)越“軟件化”。而交互的發(fā)展必然會(huì)影響到網(wǎng)頁(yè)設(shè)計(jì)中的“視覺(jué)”部分。事實(shí)上這兩部分誰(shuí)先影響誰(shuí)很難說(shuō)清楚，是一個(gè)雞生蛋，蛋生雞的問(wèn)題。另外一個(gè)網(wǎng)頁(yè)設(shè)計(jì)有別于平面設(shè)計(jì)和用戶界面設(shè)計(jì)的地方，我認(rèn)為是css, html, js三者身上。前端代碼的發(fā)展對(duì)網(wǎng)頁(yè)設(shè)計(jì)的影響非常大，甚至有段時(shí)間會(huì)主導(dǎo)網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展潮流，比如用jQuery輕松實(shí)現(xiàn)的one page style（本站首頁(yè)就是如此）。而在平面設(shè)計(jì)領(lǐng)域，沒(méi)有代碼環(huán)節(jié)；在用戶界面設(shè)計(jì)領(lǐng)域，GUI Builder的革新速度遠(yuǎn)遠(yuǎn)慢于前端代碼。事實(shí)上，有點(diǎn)脫胎于平面設(shè)計(jì)和用戶界面設(shè)計(jì)的網(wǎng)頁(yè)設(shè)計(jì)，已經(jīng)開(kāi)始反向影響它的祖先了。

從美學(xué)上對(duì)比網(wǎng)頁(yè)設(shè)計(jì)和用戶界面設(shè)計(jì)的發(fā)展

在這個(gè)維度上來(lái)比較的話，影響網(wǎng)頁(yè)設(shè)計(jì)的美學(xué)風(fēng)格非常之多：國(guó)際主義（Swiss style），復(fù)古風(fēng)格（Retro style），極簡(jiǎn)設(shè)計(jì)（Minimalist design），包豪斯主義（Bauhaus），垃圾風(fēng)格（Grunge style），自然模擬風(fēng)格（Organic style）等等等等。而用戶界面設(shè)計(jì)的美學(xué)風(fēng)格通常是在質(zhì)感的摸索上，比如Windows Vista風(fēng)格，蘋果風(fēng)格等等，比較受局限。這也是因?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)的美學(xué)風(fēng)格通常從平面設(shè)計(jì)那派生而來(lái)（當(dāng)然也有自己獨(dú)特的比如Grunge style, Organic style等），而用戶界面設(shè)計(jì)則很難從平面設(shè)計(jì)那里取經(jīng)。

花了這么長(zhǎng)篇幅來(lái)說(shuō)自己對(duì)網(wǎng)頁(yè)設(shè)計(jì)和用戶界面設(shè)計(jì)的看法，其實(shí)更多地都是個(gè)人實(shí)踐和思考的結(jié)果。在工作中這些稱呼實(shí)際上無(wú)關(guān)痛癢，只是網(wǎng)頁(yè)設(shè)計(jì)和用戶界面設(shè)計(jì)這兩者在本質(zhì)上有著許多不同，而且在具體實(shí)踐中感受也不一樣。不過(guò)今后有可能這兩個(gè)概念會(huì)最終變成一個(gè)，按現(xiàn)在的互聯(lián)網(wǎng)發(fā)展速度，桌面軟件以后會(huì)逐漸遷移到云端，到那時(shí)也許只有一個(gè)設(shè)計(jì)稱謂了。

原文：http://www.shimuuu.com/blog/web-design-and-ui-design