淺析平面設(shè)計(jì)元素在網(wǎng)頁布局中的應(yīng)用

馮志兵

摘 要：網(wǎng)頁布局設(shè)計(jì)有很多構(gòu)成要素，其中，點(diǎn)、線、面、體是構(gòu)成網(wǎng)頁頁面布局設(shè)計(jì)最基本的要素。點(diǎn)、線、面、體作為視覺語言中的基本元素，通過巧妙的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果，可以充分表達(dá)出完美的設(shè)計(jì)意境。

關(guān)鍵詞：平面設(shè)計(jì)元素；網(wǎng)頁設(shè)計(jì)；網(wǎng)頁布局

中圖分類號(hào)：TP393.092；J51 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1005-5312（2017）14-0066-01

網(wǎng)頁設(shè)計(jì)是以視覺傳達(dá)為基礎(chǔ)的，主要是傳達(dá)網(wǎng)站的各種信息，使網(wǎng)站的頁面設(shè)計(jì)更加符合人機(jī)交互和使頁面更加符合人們的視覺瀏覽習(xí)慣，感官上給人一種直接、美觀、合理的視覺感受，也是網(wǎng)站要表現(xiàn)的內(nèi)容之一。這就要求我們?cè)谶M(jìn)行網(wǎng)頁設(shè)計(jì)之前，應(yīng)該找到構(gòu)成網(wǎng)頁頁面的各種不同的空間效果，然后再合理安排那些視覺要素。點(diǎn)、線、面、體在網(wǎng)頁設(shè)計(jì)中扮演著至關(guān)重要的作用，不同的點(diǎn)、線、面、體組合會(huì)帶來不一樣的的心理感受，也可以體現(xiàn)不同的情感訴求。點(diǎn)、線、面、體的組合關(guān)系，影響著網(wǎng)頁頁面的設(shè)計(jì)風(fēng)格和網(wǎng)站的主題，它是網(wǎng)頁設(shè)計(jì)的基礎(chǔ)，也是構(gòu)成網(wǎng)頁布局的基本形態(tài)元素。

一、網(wǎng)頁布局中的點(diǎn)

在網(wǎng)頁設(shè)計(jì)中，點(diǎn)是在對(duì)比中存在的一個(gè)相對(duì)的概念，在網(wǎng)頁設(shè)計(jì)中，一個(gè)標(biāo)志、一張圖片、一個(gè)文字、一個(gè)按鈕都可以稱之為點(diǎn)。點(diǎn)的形狀也是改變的，不一定是圓的，現(xiàn)實(shí)中的點(diǎn)也是各式各樣的，有的點(diǎn)是規(guī)則的點(diǎn)，呈圓形、三角形或方形；有的點(diǎn)是不規(guī)則的，一般多為異形。自然界中的任何形態(tài)，只要縮小到一定的程度，都可以產(chǎn)生不同形態(tài)的點(diǎn)。點(diǎn)的外形不同，給人的視覺和心理反應(yīng)也不一樣。在實(shí)際應(yīng)用的點(diǎn)的時(shí)候，重點(diǎn)不僅在于點(diǎn)的外形，更在于點(diǎn)在整個(gè)空間中起的作用，在相同的視覺環(huán)境下，相對(duì)面積越小，點(diǎn)的視覺效果越強(qiáng)。當(dāng)畫面上只有一個(gè)點(diǎn)出現(xiàn)的時(shí)候，我們的視線會(huì)只集中在這一個(gè)點(diǎn)上，這個(gè)點(diǎn)就成了頁面中的視覺焦點(diǎn)。如果頁面有兩個(gè)點(diǎn)出現(xiàn)，我們可以觀察兩個(gè)點(diǎn)的位置和大小，如果兩個(gè)點(diǎn)大小相同，位置不同，頁面的注意力就會(huì)集中在連接這兩個(gè)點(diǎn)的連線上，在視覺上產(chǎn)生連續(xù)的效果；當(dāng)兩個(gè)點(diǎn)大小不同時(shí)，大的點(diǎn)會(huì)首先引起我們的注意，然后再移動(dòng)到小的點(diǎn)上。當(dāng)頁面有三個(gè)或者三個(gè)以上的點(diǎn)的話，我們就可能感覺到一個(gè)虛面，點(diǎn)越多，其“面”的感覺就會(huì)越強(qiáng)。

二、網(wǎng)頁布局中的線

線是由無數(shù)個(gè)點(diǎn)構(gòu)成的，具有長(zhǎng)度、寬度、方向等性質(zhì)。線的類型較多，常見的有直線、曲線、斜線等等，不同的線會(huì)帶給人不同的心理感受。一般來說，直線給人一種平穩(wěn)、挺拔的感覺；弧線給人感覺流暢、輕盈；曲線使人跳動(dòng)、不安。不同粗細(xì)的線給人的感覺也是不一樣的，粗線表現(xiàn)粗礦、陽剛之感，細(xì)線可以表達(dá)銳利、敏感、速度感等等，當(dāng)粗線和細(xì)線搭配的時(shí)候，粗線必定會(huì)首先進(jìn)入人們的視野。斜線給人移動(dòng)的錯(cuò)覺，一根斜線蘊(yùn)含著潛在的能量，把一組直線作為背景元素，它會(huì)給網(wǎng)頁設(shè)計(jì)帶來紋理的感覺，如果使用一組斜線代替直線，就會(huì)使設(shè)計(jì)有緊張感，會(huì)讓瀏覽者的眼睛不停的跟隨它移動(dòng)。

現(xiàn)在，許多設(shè)計(jì)師也會(huì)把線作為網(wǎng)頁空間分割的主要手段之一。線的空間分割會(huì)產(chǎn)生許多不同比例的面，所以線的分割也可以理解為面的分割，面分割后形成的邊緣就是線。因此，對(duì)網(wǎng)頁頁面進(jìn)行分割的時(shí)候，既要考慮各形態(tài)元素彼此之間的形狀，又要注意不同空間所具有的主次關(guān)系和空間關(guān)系，以保證良好的視覺秩序，并獲得視覺空間的整體感和和諧感。

三、網(wǎng)頁布局中的面

幾何學(xué)定義中，面是線的移動(dòng)軌跡。點(diǎn)和線的密集可形成面，面的分割、面與面的合成亦可形成新的面。面是構(gòu)成體的基本單位，面在網(wǎng)頁設(shè)計(jì)中也經(jīng)常出現(xiàn)，可以說，網(wǎng)頁設(shè)計(jì)的設(shè)計(jì)離不開面的組合，一段文字可以看做一個(gè)面，一張圖像可以看做一個(gè)面，頁面的留白也可以看做是一個(gè)面，“面”的概念是不固定的，面是網(wǎng)頁設(shè)計(jì)中常用的元素，它的大小、區(qū)直變化都會(huì)影響頁面的布局。面也有規(guī)則和不規(guī)則之分，一般認(rèn)為方形和圓形的面是規(guī)則的，這兩種面相加或者相減可以產(chǎn)生無數(shù)個(gè)多樣的面；不規(guī)則的面，沒有規(guī)律可以遵循，一般很難判斷屬于哪種面。不同的面在視覺上有不同的心理作用和情感的表達(dá)。在網(wǎng)頁設(shè)計(jì)中，規(guī)則的面給人一種簡(jiǎn)潔明了、規(guī)則有序的感覺；不規(guī)則的面給人一種輕松、活躍的感覺，但是這些面在設(shè)計(jì)和排版的時(shí)候要注重相關(guān)設(shè)計(jì)原則，有效合理地處理頁面版式設(shè)計(jì)中面的構(gòu)成關(guān)系，可以使整個(gè)頁面布局充滿美感，富有藝術(shù)感；反之可能給人一種無序混亂的感覺。

四、網(wǎng)頁布局中的體

網(wǎng)頁設(shè)計(jì)發(fā)展的另一個(gè)趨勢(shì)是二維朝著多維的方向發(fā)展，在網(wǎng)頁布局設(shè)計(jì)中，有時(shí)為了營(yíng)造一種立體的視覺效果，讓整個(gè)頁面在視覺上更加具有立體感，會(huì)采用立體幾何圖形中的基本形體的形式來表達(dá)，不同的立體幾何圖形會(huì)給頁面帶來不同的藝術(shù)效果。而我們常見的形體一般有球體、立方體和圓錐體三種。網(wǎng)頁頁面設(shè)計(jì)根據(jù)畫面中不同體的不同編排和布局，會(huì)給用戶營(yíng)造一種不同的心理感覺，例如，球體往往給人一種圓滑、柔和得心理感受；椎體則給人一種尖銳、刺激的感覺；立方體會(huì)給人一種平穩(wěn)、大氣、安全的心理感受。網(wǎng)頁設(shè)計(jì)中合理的“體”的應(yīng)用，極大的提高了頁面整體的藝術(shù)效果。

綜上所述，我們?cè)谶M(jìn)行網(wǎng)頁布局設(shè)計(jì)的時(shí)候，平面設(shè)計(jì)元素點(diǎn)、線、面、體是需要首先考慮的因素，我們只有掌握了它們之間的關(guān)系，并且了解了在使用它們的過程中，通過不同的表現(xiàn)形式帶給受眾的情感和心理感受是不同的，這樣才能設(shè)計(jì)出具有良好視覺效果的網(wǎng)頁布局頁面設(shè)計(jì)。

參考文獻(xiàn)：

[1]梁日升，楊杰.網(wǎng)頁藝術(shù)設(shè)計(jì)[M].北京：機(jī)械工業(yè)出版社，2011.

[2]倪洋.網(wǎng)頁設(shè)計(jì)[M].上海：上海人民美術(shù)出版社，2012.