略論如何在“網(wǎng)頁(yè)界面設(shè)計(jì)”教學(xué)中展開(kāi)點(diǎn)線面的概念

姜希　姜金仲

摘 要：網(wǎng)頁(yè)界面設(shè)計(jì)是數(shù)字媒體專業(yè)《版式設(shè)計(jì)》課程的重要內(nèi)容。點(diǎn)、線、面是網(wǎng)頁(yè)界面設(shè)計(jì)的基本要素，直接影響網(wǎng)頁(yè)界面的最終呈現(xiàn)效果。本文以筆者的切身感受闡述了在網(wǎng)頁(yè)界面設(shè)計(jì)課堂教學(xué)中如何向?qū)W生展開(kāi)點(diǎn)、線、面的概念，并結(jié)合網(wǎng)頁(yè)界面設(shè)計(jì)實(shí)際案例，詳細(xì)分析了點(diǎn)、線、面在網(wǎng)頁(yè)界面設(shè)計(jì)中的作用及運(yùn)用形式。

關(guān)鍵詞：版式設(shè)計(jì)；“網(wǎng)頁(yè)界面設(shè)計(jì)”；點(diǎn)、線、面

我們處在快速發(fā)展的信息化時(shí)代，網(wǎng)絡(luò)已經(jīng)滲透到世界的各個(gè)角落。網(wǎng)頁(yè)作為網(wǎng)絡(luò)信息的強(qiáng)大載體，以文字、圖片、視頻的形式集中展示給大眾并得到迅速的發(fā)展。人們已經(jīng)不再僅僅滿足對(duì)網(wǎng)頁(yè)的技術(shù)追求，網(wǎng)頁(yè)的外觀設(shè)計(jì)、排版形式越來(lái)越受到重視。因此，網(wǎng)頁(yè)界面設(shè)計(jì)也就成了《版式設(shè)計(jì)》課程的必講內(nèi)容。網(wǎng)頁(yè)界面設(shè)計(jì)是在屏幕的有限空間內(nèi)進(jìn)行各種視覺(jué)元素的有序排列組合，它決定了網(wǎng)頁(yè)設(shè)計(jì)的整體風(fēng)格、色彩傾向以及視覺(jué)傳達(dá)效果，因此版式設(shè)計(jì)是網(wǎng)頁(yè)界面設(shè)計(jì)的根本。在網(wǎng)頁(yè)中，無(wú)論怎樣的版面，最終可以簡(jiǎn)化概括成點(diǎn)、線、面。研究版式設(shè)計(jì)基本構(gòu)成元素的點(diǎn)、線、面可以更好地體現(xiàn)設(shè)計(jì)主題、突出網(wǎng)頁(yè)中圖片、文字、影音等元素之間的主次關(guān)系，最終呈現(xiàn)較好的版面視覺(jué)效果。由此可見(jiàn)，點(diǎn)、線、面在網(wǎng)頁(yè)界面設(shè)計(jì)中有著重要的作用，同時(shí)也是網(wǎng)頁(yè)界面設(shè)計(jì)的教學(xué)難點(diǎn)。

1 網(wǎng)頁(yè)設(shè)計(jì)的基本要素——點(diǎn)

點(diǎn)在幾何學(xué)意義上是以圓點(diǎn)為最基礎(chǔ)的形態(tài)，它是具象的點(diǎn)。在網(wǎng)頁(yè)界面設(shè)計(jì)中，點(diǎn)是以抽象形式存在的，它的效果取決于與之共存的其他元素相互之間的比例。網(wǎng)頁(yè)中的一個(gè)圖片、一個(gè)企業(yè)標(biāo)志等以單獨(dú)姿態(tài)呈現(xiàn)的視覺(jué)元素，都給人以點(diǎn)視覺(jué)印象。點(diǎn)存在的形式很多，可以單獨(dú)存在點(diǎn)綴網(wǎng)頁(yè)版面，也可以組合形式進(jìn)行密集、朝向排列形成較強(qiáng)視覺(jué)牽引力，還可以線化、面化使網(wǎng)頁(yè)版面更加靈活和凸顯凝聚力，最終起到突出網(wǎng)頁(yè)界面設(shè)計(jì)主題、平衡、填補(bǔ)空間、活躍網(wǎng)頁(yè)畫(huà)面的作用。

網(wǎng)頁(yè)界面設(shè)計(jì)中點(diǎn)單獨(dú)存在，往往以突出某個(gè)產(chǎn)品或者突出企業(yè)形象等形式出現(xiàn)。這種情況下，該元素往往會(huì)成為整個(gè)網(wǎng)頁(yè)的主體物，通過(guò)這種形式達(dá)到加強(qiáng)人們視覺(jué)印象的目的。例如，蘋果官方網(wǎng)頁(yè)，主界面有四個(gè)滾動(dòng)畫(huà)面，每個(gè)畫(huà)面都在中間位置放置主要內(nèi)容或者是產(chǎn)品，搭配純色簡(jiǎn)單背景，很好地襯托出以點(diǎn)元素形式存在的主體物。而多點(diǎn)形態(tài)存在時(shí)，可以進(jìn)行疏密混合排列或者以聚集分散的形式進(jìn)行組合。以密集形式組合排列網(wǎng)頁(yè)中的點(diǎn)元素，可以給人以充滿緊湊的膨脹感，進(jìn)而集中對(duì)人進(jìn)行視覺(jué)沖擊，形成強(qiáng)烈的印象感。以分散形式組合排列的網(wǎng)頁(yè)中的點(diǎn)元素，存在于網(wǎng)頁(yè)的各個(gè)位置，使整個(gè)網(wǎng)頁(yè)畫(huà)面飽滿感更強(qiáng)烈，如國(guó)外很多服裝類網(wǎng)頁(yè)，各個(gè)模特的不同服裝展示或者不同的服裝類型，會(huì)以多個(gè)點(diǎn)元素的形式分散排列在網(wǎng)頁(yè)主界面，讓人對(duì)該品牌的當(dāng)季熱銷類型一目了然。

2 網(wǎng)頁(yè)設(shè)計(jì)的空間強(qiáng)手——線

線由無(wú)數(shù)點(diǎn)的運(yùn)動(dòng)匯集而成，在幾何學(xué)中，它只是長(zhǎng)度的代表。在網(wǎng)頁(yè)界面設(shè)計(jì)中，線被賦予粗細(xì)、材質(zhì)等特定的形態(tài)，以直線、曲線實(shí)際的線條；文字、圖片形成的虛線或者通過(guò)位置的編排引導(dǎo)形成的視覺(jué)流程線應(yīng)用于網(wǎng)頁(yè)的編排設(shè)計(jì)中，在整個(gè)網(wǎng)頁(yè)中起到裝飾、分割、界定空間，并有效地組織好網(wǎng)頁(yè)中各種元素復(fù)雜關(guān)系的作用。

不同線的形態(tài)和類型可以帶給人們不同的心理情感。例如，水平垂直線會(huì)給人一種穩(wěn)定、嚴(yán)肅的感覺(jué)，比較適用于體現(xiàn)嚴(yán)謹(jǐn)、認(rèn)真主題的網(wǎng)頁(yè)界面設(shè)計(jì)；斜線則會(huì)給人帶來(lái)很強(qiáng)烈的失衡感，比較適用于個(gè)性或者想要突出某樣主體內(nèi)容的網(wǎng)頁(yè)界面設(shè)計(jì)，通過(guò)較強(qiáng)的視覺(jué)沖擊力加深人們的印象；曲線常見(jiàn)的類型有弧線、圓形等幾何曲線和自由曲線，給人柔和、舒緩、流暢等心理感受，能使散亂的版面變得集中，較適用于給人柔軟口感的飲品、食物類的網(wǎng)頁(yè)設(shè)計(jì)。尤其是自由曲線，可以形成引導(dǎo)瀏覽者的視覺(jué)流程線，使讀者能按照設(shè)計(jì)師的設(shè)計(jì)意圖去瀏覽網(wǎng)頁(yè)，加強(qiáng)版面的可視性。

在網(wǎng)頁(yè)界面設(shè)計(jì)中，通過(guò)不同類型線對(duì)網(wǎng)頁(yè)版面空間的有效組織和劃分，可以使整個(gè)網(wǎng)頁(yè)保持良好的視覺(jué)秩序，形成統(tǒng)一和諧的視覺(jué)效果，同時(shí)帶來(lái)豐富的層次空間感。對(duì)網(wǎng)頁(yè)空間劃分可以采用等量分割或者圖文的直接分割：等量分割的網(wǎng)頁(yè)秩序感強(qiáng)，但也會(huì)有呆板、形式單一的感受。因此，要注意主體對(duì)象是否合適，或者使用等量不等形的分割形式來(lái)打破單一感。圖文分割可直接采用線條切割的方式，使圖片和文字以獨(dú)立形象存在以提升辨識(shí)度。但是用線進(jìn)行空間劃分要注意劃分的比例及被劃分元素之間的主次關(guān)系，以保證整個(gè)網(wǎng)頁(yè)版面具有一個(gè)良好的秩序感。

3 網(wǎng)頁(yè)設(shè)計(jì)的視覺(jué)呈現(xiàn)——面

面作為點(diǎn)或線的延續(xù)，在網(wǎng)頁(yè)界面設(shè)計(jì)中占據(jù)最大的空間面積。相對(duì)于點(diǎn)和線來(lái)說(shuō)，它具有更實(shí)在的質(zhì)感和更形象的視覺(jué)表現(xiàn)力。面的形態(tài)多種多樣，具體可以劃分為規(guī)則形體的面和不規(guī)則形體的面。規(guī)則形體的面如幾何形體、有機(jī)物體形成的面，樣式簡(jiǎn)單且與我們的生活較為接近，容易與其他元素相協(xié)調(diào)，具有簡(jiǎn)潔、直觀的表現(xiàn)效果。在進(jìn)行網(wǎng)頁(yè)界面設(shè)計(jì)時(shí)，可用幾何形體的面體現(xiàn)嚴(yán)謹(jǐn)、規(guī)整的主題，提升網(wǎng)頁(yè)版面的專業(yè)感；用有機(jī)形體的面增強(qiáng)網(wǎng)頁(yè)的親和力，拉近與瀏覽者的距離。不規(guī)則形體的面沒(méi)有固定的形態(tài)，可以是生活偶然發(fā)生事件得到偶然形體的面，如物體掉落形成的噴濺形態(tài)等，也可以是對(duì)圖像的復(fù)制或者手繪得到的自由形態(tài)的面。人們把這些形態(tài)運(yùn)用到網(wǎng)頁(yè)界面設(shè)計(jì)中，以自由、隨性的形態(tài)呈獻(xiàn)給瀏覽者，打破規(guī)整、單一的版面形式，加深瀏覽者的視覺(jué)印象。

網(wǎng)頁(yè)中面的表達(dá)形式很多，可以把某個(gè)圖片、字母進(jìn)行放大處理，來(lái)形成突出顯示面的效果；可以通過(guò)不同線的空間劃分，以形成不同規(guī)格形狀的面來(lái)強(qiáng)調(diào)各個(gè)板塊的內(nèi)容；可以根據(jù)主題風(fēng)格通過(guò)顏色變化形成主次分明的版面結(jié)構(gòu)，豐富視覺(jué)與網(wǎng)頁(yè)本身的需求；也可以通過(guò)背景的面或留白處理襯托網(wǎng)頁(yè)中的各個(gè)元素，以突出網(wǎng)頁(yè)的信息，增加空間想象感。除此之外，網(wǎng)頁(yè)的設(shè)計(jì)對(duì)象各不相同，有企事業(yè)單位、產(chǎn)品娛樂(lè)等，應(yīng)有針對(duì)性地對(duì)面的形態(tài)類型進(jìn)行調(diào)整。例如，一些企事業(yè)單位要呈現(xiàn)的是嚴(yán)謹(jǐn)、專業(yè)，應(yīng)盡量減少網(wǎng)頁(yè)中的面形態(tài)類型，以塑造出符合對(duì)象的務(wù)實(shí)感，增強(qiáng)網(wǎng)頁(yè)內(nèi)容的真實(shí)性。

4 結(jié)語(yǔ)

點(diǎn)、線、面作為網(wǎng)頁(yè)界面設(shè)計(jì)的基本元素，它們相互影響、相互協(xié)調(diào)，通過(guò)合理的搭配最終形成完整的網(wǎng)頁(yè)界面。點(diǎn)、線、面是相對(duì)而言的，由它們之間的比例關(guān)系而定，并且可以根據(jù)需要相互轉(zhuǎn)化，組合成各種形態(tài)的網(wǎng)頁(yè)版面。在設(shè)計(jì)時(shí)，應(yīng)結(jié)合各個(gè)元素之間的特點(diǎn)，利用各元素之間的聯(lián)系，合理編排最終形成具有自己特點(diǎn)、美觀、信息傳達(dá)明確的網(wǎng)頁(yè)界面設(shè)計(jì)。因此，在網(wǎng)頁(yè)界面設(shè)計(jì)教學(xué)過(guò)程中，必須結(jié)合實(shí)際案例，透徹分析、闡述三者之間的關(guān)系，讓學(xué)生真正理解三者在網(wǎng)頁(yè)界面設(shè)計(jì)中所發(fā)揮的作用，才能夠收到理想的教學(xué)效果。

參考文獻(xiàn)：

[1] 張磊.版式設(shè)計(jì)——點(diǎn)線面的藝術(shù)[J].石家莊職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2013（01）.

[2] 張晶.網(wǎng)頁(yè)設(shè)計(jì)中平面視覺(jué)元素的應(yīng)用[J].中國(guó)管理信息化，2011（17）.

[3] SE編輯部.新版式設(shè)計(jì)原理[M].曹茜，譯.中國(guó)青年出版社，2013.

[4] 鄧勇.淺談網(wǎng)頁(yè)設(shè)計(jì)的布局及原理[J].渝西學(xué)院學(xué)報(bào)（自然科學(xué)版），2004（03）.

作者簡(jiǎn)介：姜希（1990—），女，貴州師范大學(xué)大數(shù)據(jù)與計(jì)算機(jī)科學(xué)學(xué)院助教。

姜金仲（1958—），男，貴州師范學(xué)院化學(xué)與生命科學(xué)學(xué)院教授。