探究網(wǎng)頁(yè)界面設(shè)計(jì)與平面設(shè)計(jì)之間的區(qū)別

王萬瓊

摘 要：隨著信息技術(shù)的不斷發(fā)展，網(wǎng)頁(yè)界面設(shè)計(jì)需要更多地互聯(lián)網(wǎng)人才，這就使得大部分的平面設(shè)計(jì)人員轉(zhuǎn)向?qū)W習(xí)網(wǎng)頁(yè)界面設(shè)計(jì)，但是網(wǎng)頁(yè)界面設(shè)計(jì)與平面設(shè)計(jì)之間也有所不同，本文重點(diǎn)分析其差異。

關(guān)鍵詞：網(wǎng)頁(yè)界面設(shè)計(jì)；平面設(shè)計(jì)；區(qū)別

0 前言

一般會(huì)對(duì)網(wǎng)頁(yè)界面設(shè)計(jì)與平面設(shè)計(jì)是不是同一個(gè)概念感到迷惑，但其實(shí)是有區(qū)別的，但是區(qū)別包括有哪些，沒有系統(tǒng)的總結(jié)，現(xiàn)為更加深入的研究其差異，幫助新手更好的理解有關(guān)網(wǎng)頁(yè)界面設(shè)計(jì)與平面設(shè)計(jì)的知識(shí)，現(xiàn)就要兩者的差異開展討論。

從設(shè)計(jì)層面分析，網(wǎng)頁(yè)界面設(shè)計(jì)與平面設(shè)計(jì)均屬于設(shè)計(jì)范圍，但同時(shí)他們也有所差異，從其發(fā)起時(shí)間分析，網(wǎng)頁(yè)設(shè)計(jì)具有一定的功能性質(zhì)，并將功能性作為最主要的指導(dǎo)原則，以字符組成的界面達(dá)到傳達(dá)基本信息的作用，需要經(jīng)過較長(zhǎng)時(shí)間的人機(jī)交流。隨著信息技術(shù)的不斷發(fā)展，網(wǎng)頁(yè)界面設(shè)計(jì)是將藝術(shù)與技術(shù)進(jìn)行融合的活動(dòng)，包括有網(wǎng)頁(yè)視覺設(shè)計(jì)還有交互設(shè)計(jì)兩種。而平面設(shè)計(jì)的過程中，主要是設(shè)計(jì)者通過具體的視覺符號(hào)，將之轉(zhuǎn)變?yōu)榫哂懈拍钚缘拇怼，F(xiàn)就從其視覺傳達(dá)設(shè)計(jì)方面開展討論，分析網(wǎng)頁(yè)界面設(shè)計(jì)與平面設(shè)計(jì)之的差異。

1 網(wǎng)頁(yè)界面設(shè)計(jì)與平面設(shè)計(jì)之間的區(qū)別分析

分析兩者間的差異，重點(diǎn)分析其視覺傳達(dá)設(shè)計(jì)方面的區(qū)別，其中包括有色彩模式、板式設(shè)計(jì)、字體應(yīng)用還有圖形的使用、瀏覽方式及信息傳播。現(xiàn)將幾點(diǎn)展開分析，討論網(wǎng)頁(yè)界面設(shè)計(jì)與平面設(shè)計(jì)之間的區(qū)別，如下所示。

1.1 色彩模式差異分析

色彩模式方面的差異，網(wǎng)頁(yè)界面設(shè)計(jì)與平面設(shè)計(jì)，兩者采用的色彩模式使完全沒不一樣的，平面設(shè)計(jì)重視后期的印刷工作，主要是為了能達(dá)到理想效果，少不了這一流程，一般是將CMYK色彩模式應(yīng)用于平面設(shè)計(jì)中。但是網(wǎng)頁(yè)界面設(shè)計(jì)主要是將顯現(xiàn)方式作為依據(jù)，一般將RGB作為其色彩模式。平面設(shè)計(jì)針對(duì)色彩利用這一塊重點(diǎn)突出視覺的沖擊力還有對(duì)視覺流的指引，關(guān)于這一點(diǎn)和網(wǎng)頁(yè)設(shè)計(jì)上面的BANNER設(shè)計(jì)是有類似之處的。網(wǎng)頁(yè)設(shè)計(jì)，特別是產(chǎn)品類設(shè)計(jì)，重點(diǎn)要突出信息之間的鏈接，如果色彩過于注重，容易出現(xiàn)視覺疲勞，這就是在色彩模式應(yīng)用的區(qū)別。

1.2 板式設(shè)計(jì)差異分析

首先，網(wǎng)頁(yè)界面板式設(shè)計(jì)中，針對(duì)其比例關(guān)系的要求一般是：頁(yè)面中所規(guī)定的空間長(zhǎng)寬比、實(shí)體內(nèi)容和空白的面積比例還有網(wǎng)頁(yè)被分割時(shí)的比例、圖文間的關(guān)系、各造型元素間的比例等。其次，且平面設(shè)計(jì)的節(jié)奏以及韻律主要是通國(guó)音樂啟發(fā)，富有節(jié)奏感，一般強(qiáng)調(diào)“節(jié)拍”，如果是韻律比較多側(cè)重點(diǎn)又在于“變化”方面，通常，如果說韻律感不足，一般指的是缺少變化；而描述其過于呆板，意在說明節(jié)奏感不足，變化沒有條理。

1.3 字體應(yīng)用方面的差異分析

在整個(gè)設(shè)計(jì)過程中，平面設(shè)計(jì)采用的字體更為自由，并且不需要擔(dān)憂后期的處理工作，全部的文字與圖形的輸出是同時(shí)印刷的，但是網(wǎng)頁(yè)設(shè)計(jì)就需要從整體分析，一般其文字的使用范圍也會(huì)比較小，主要是因?yàn)橐獪p少在輸出作品的時(shí)候?qū)Ψ?wù)器的壓力，有html的特性，使用的字體是由設(shè)計(jì)者在操作時(shí)進(jìn)行設(shè)置的，隨著技術(shù)日益發(fā)展，現(xiàn)要將此差異拉近，現(xiàn)可以使用html5中國(guó)API運(yùn)用個(gè)性化的字體設(shè)計(jì)，這樣就不會(huì)將個(gè)性化的字體的輸出為圖形，在不會(huì)給后端帶來太大壓力的狀態(tài)下，一般是可以用戶具有可以享受到很好的視覺效果，得到較為滿意的成品。[1]

1.4 圖形的使用差異分析

分析兩者圖形的使用差異，網(wǎng)頁(yè)設(shè)計(jì)功能沒有平面設(shè)計(jì)的齊全，表現(xiàn)的形式也少一點(diǎn)，尤其是針對(duì)產(chǎn)品方面的設(shè)計(jì)，進(jìn)行模塊化的設(shè)計(jì)思路起到關(guān)鍵作用，將之放在視覺表現(xiàn)方面也有同樣的意義。網(wǎng)頁(yè)界面設(shè)計(jì)有關(guān)圖形的表現(xiàn)主要是重點(diǎn)處理后期工作，平面設(shè)計(jì)中將會(huì)利用到的尺寸單位，比如常見的英寸、厘米還有毫米等，但是網(wǎng)頁(yè)一般采用的是像素作為單位。[2]

1.5 瀏覽方式差異分析

網(wǎng)頁(yè)界面設(shè)計(jì)與平面設(shè)計(jì)的瀏覽方式差異，其中平面設(shè)計(jì)開展的是漸進(jìn)形式作作為瀏覽方式，沒有辦法做到瀏覽整個(gè)過程，無法實(shí)現(xiàn)多樣化串聯(lián)，而網(wǎng)頁(yè)設(shè)計(jì)則是向下滑動(dòng)即可，有一個(gè)滾動(dòng)條功能，下拉即可，其中按鈕之間的鏈接，可以實(shí)現(xiàn)多樣化串聯(lián)，實(shí)現(xiàn)瀏覽。將兩者放置在同一個(gè)信息框架狀態(tài)下，信息間的連接更為便利，增加用戶間對(duì)信息選擇的自由度，但平面設(shè)計(jì)也不缺乏其優(yōu)點(diǎn)，舉例相冊(cè)，通過對(duì)比，一般這一類型的產(chǎn)品使用電腦翻閱，其實(shí)將之印刷成為一本實(shí)物進(jìn)行翻閱，這樣給用戶的感覺更加好，實(shí)現(xiàn)相冊(cè)收藏的意義。網(wǎng)頁(yè)設(shè)計(jì)結(jié)果具有不可預(yù)測(cè)性，主要是受到交互性質(zhì)的影響，一般網(wǎng)頁(yè)設(shè)計(jì)將技術(shù)和藝術(shù)相互結(jié)合運(yùn)用，網(wǎng)頁(yè)版面與印刷品瀏覽的方式有所差異，不會(huì)采取單線性的閱讀內(nèi)容。比如，還有許多隱藏的信息會(huì)被遺漏，指的是及時(shí)同一位網(wǎng)頁(yè)設(shè)計(jì)師沒針對(duì)不同的用戶也會(huì)產(chǎn)生不一樣的機(jī)結(jié)果，使用超鏈接實(shí)現(xiàn)用戶可以在網(wǎng)頁(yè)文本中自由的操作，實(shí)現(xiàn)圖片之間的跳轉(zhuǎn)等，同時(shí)，還可以對(duì)針對(duì)某一個(gè)網(wǎng)站做插入鏈接，用戶可以進(jìn)行搜索、討論、留言等操作。[3]將網(wǎng)頁(yè)的交互性實(shí)現(xiàn)到最大化，有被動(dòng)交互轉(zhuǎn)變?yōu)橹鲃?dòng)交互，這一過程中也是網(wǎng)頁(yè)設(shè)計(jì)的以部分，直接影響最終的設(shè)計(jì)結(jié)果。

1.6 信息傳播差異分析

平面設(shè)計(jì)偏向于傳統(tǒng)信息媒介設(shè)計(jì)，比如張貼、銷售還有郵寄等形式展開傳播操作，傳播的范圍比較小，但是成本有比較高，將之與網(wǎng)頁(yè)界面設(shè)計(jì)相對(duì)比，網(wǎng)頁(yè)界面設(shè)計(jì)具有很強(qiáng)的傳播能力，主要通過第三方媒介進(jìn)行傳播操作，通常使用電腦屏幕、鼠標(biāo)、鍵盤等即可完成傳播操作。將之和過去的紙質(zhì)傳播方式，其主要的表現(xiàn)形式是經(jīng)過紙張與圖文信息，現(xiàn)忽略其網(wǎng)頁(yè)中的互動(dòng)環(huán)節(jié)以及 多媒體元素，其實(shí)網(wǎng)頁(yè)界面呈現(xiàn)在人用戶面前的就是經(jīng)物化的界面，即是紙張、圖文還有電腦顯示屏三組組成的內(nèi)容，以數(shù)字化形式表達(dá)。一般包括有圖文信息、色彩還有版面等，這些元素構(gòu)成了平面設(shè)計(jì)中的視覺構(gòu)成元素，而網(wǎng)頁(yè)設(shè)計(jì)同樣也是將平面設(shè)計(jì)中包含的基本視覺元素以此傳達(dá)信息以及開展審美活動(dòng)。網(wǎng)頁(yè)設(shè)計(jì)操作中，要將發(fā)送者和接受者形成一個(gè)連接平臺(tái)，以便達(dá)到信息、資源共享的目的，如果沒有此操作，兩者這之間就需要設(shè)定的一個(gè)翻譯或者是解說系統(tǒng)，幫助他們實(shí)現(xiàn)溝通，這樣不利于提升工作效率，容易出現(xiàn)失誤。[4]平面設(shè)計(jì)具有良好的群眾基礎(chǔ)，不管哪個(gè)年齡層針對(duì)紙質(zhì)的學(xué)習(xí)一般具有較好的接受能力，網(wǎng)絡(luò)媒介還有部分群眾不熟練運(yùn)用，同時(shí)通過網(wǎng)絡(luò)獲取信息也會(huì)帶來一定的學(xué)習(xí)成本，但隨著網(wǎng)絡(luò)信息技術(shù)的不斷改進(jìn)，與平面設(shè)計(jì)在群眾基礎(chǔ)方面的差異會(huì)越來越小。同時(shí)，平面設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)形式有不同的用戶體驗(yàn)，其中，網(wǎng)頁(yè)界面設(shè)計(jì)重視與用戶之間實(shí)現(xiàn)互動(dòng)。網(wǎng)頁(yè)界面設(shè)計(jì)還可以將絢麗的動(dòng)畫效果融入設(shè)計(jì)中，導(dǎo)入視頻，上述功能在平面設(shè)計(jì)中是無法實(shí)現(xiàn)的。

2 結(jié)語

網(wǎng)頁(yè)設(shè)計(jì)和平面設(shè)計(jì)之間的不同，主要是由于信息技術(shù)帶來的革新。網(wǎng)頁(yè)技術(shù)可以將藝術(shù)和技術(shù)實(shí)現(xiàn)完美的融合，平面設(shè)計(jì)在信息網(wǎng)絡(luò)技術(shù)發(fā)展的背景下也得到有效的發(fā)展，并朝著多元化方向發(fā)展，繼承傳統(tǒng)平面設(shè)計(jì)技術(shù)同時(shí)又可開展革操作。

參考文獻(xiàn)：

[1] 姚國(guó)熳，王海潮.網(wǎng)頁(yè)界面設(shè)計(jì)中平面視覺元素的應(yīng)用探析[J].大觀，2016（9）.

[2] 張彤.網(wǎng)頁(yè)界面設(shè)計(jì)的整體性研究[D].北方工業(yè)大學(xué)，2011.

[3] 那日?qǐng)D.中國(guó)傳統(tǒng)視覺元素在網(wǎng)頁(yè)界面設(shè)計(jì)中的研究[J].美苑，2011，7（06）：63-65.

[4] 林勐.交易型網(wǎng)頁(yè)界面的編排設(shè)計(jì)研究[D].山東輕工業(yè)學(xué)院，2012.