略論如何在“網頁界面設計”教學中展開點線面的概念

姜希　姜金仲

摘 要：網頁界面設計是數字媒體專業《版式設計》課程的重要內容。點、線、面是網頁界面設計的基本要素，直接影響網頁界面的最終呈現效果。本文以筆者的切身感受闡述了在網頁界面設計課堂教學中如何向學生展開點、線、面的概念，并結合網頁界面設計實際案例，詳細分析了點、線、面在網頁界面設計中的作用及運用形式。

關鍵詞：版式設計；“網頁界面設計”；點、線、面

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

1 網頁設計的基本要素——點

點在幾何學意義上是以圓點為最基礎的形態，它是具象的點。在網頁界面設計中，點是以抽象形式存在的，它的效果取決于與之共存的其他元素相互之間的比例。網頁中的一個圖片、一個企業標志等以單獨姿態呈現的視覺元素，都給人以點視覺印象。點存在的形式很多，可以單獨存在點綴網頁版面，也可以組合形式進行密集、朝向排列形成較強視覺牽引力，還可以線化、面化使網頁版面更加靈活和凸顯凝聚力，最終起到突出網頁界面設計主題、平衡、填補空間、活躍網頁畫面的作用。

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

2 網頁設計的空間強手——線

線由無數點的運動匯集而成，在幾何學中，它只是長度的代表。在網頁界面設計中，線被賦予粗細、材質等特定的形態，以直線、曲線實際的線條；文字、圖片形成的虛線或者通過位置的編排引導形成的視覺流程線應用于網頁的編排設計中，在整個網頁中起到裝飾、分割、界定空間，并有效地組織好網頁中各種元素復雜關系的作用。

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

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

3 網頁設計的視覺呈現——面

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

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

4 結語

點、線、面作為網頁界面設計的基本元素，它們相互影響、相互協調，通過合理的搭配最終形成完整的網頁界面。點、線、面是相對而言的，由它們之間的比例關系而定，并且可以根據需要相互轉化，組合成各種形態的網頁版面。在設計時，應結合各個元素之間的特點，利用各元素之間的聯系，合理編排最終形成具有自己特點、美觀、信息傳達明確的網頁界面設計。因此，在網頁界面設計教學過程中，必須結合實際案例，透徹分析、闡述三者之間的關系，讓學生真正理解三者在網頁界面設計中所發揮的作用，才能夠收到理想的教學效果。

參考文獻：

[1] 張磊.版式設計——點線面的藝術[J].石家莊職業技術學院學報，2013（01）.

[2] 張晶.網頁設計中平面視覺元素的應用[J].中國管理信息化，2011（17）.

[3] SE編輯部.新版式設計原理[M].曹茜，譯.中國青年出版社，2013.

[4] 鄧勇.淺談網頁設計的布局及原理[J].渝西學院學報（自然科學版），2004（03）.

作者簡介：姜希（1990—），女，貴州師范大學大數據與計算機科學學院助教。

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