當前位置:才華齋>設計>網頁設計>

網頁設計和使用者介面設計漫談

網頁設計 閱讀(2.68W)

導語:我想網頁設計和使用者介面設計這兩個詞包含了很多東西,這兩個詞的對比可以引申出一些設計領域的發展過程和思考。下面我們來詳細看看。

網頁設計和使用者介面設計漫談

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

這裡不做考古,只是回想一下最初在網際網路領域提到使用者介面這個詞的時候,是由工業設計領域的人機互動介面中引申過來的。因而談到介面,則必然會有互動這個概念的存在。從人機介面本身的理解上來看,它是人和機器(本文特指電腦)互動的媒介。如果把機器看作是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等),而使用者介面設計則很難從平面設計那裡取經。

花了這麼長篇幅來說自己對網頁設計和使用者介面設計的看法,其實更多地都是個人實踐和思考的結果。在工作中這些稱呼實際上無關痛癢,只是網頁設計和使用者介面設計這兩者在本質上有著許多不同,而且在具體實踐中感受也不一樣。不過今後有可能這兩個概念會最終變成一個,按現在的網際網路發展速度,桌面軟體以後會逐漸遷移到雲端,到那時也許只有一個設計稱謂了。