網頁設計中的版式設計

劉石　李婷婷

摘 要：版式設計可以說是界面設計的基礎部分，網頁界面中的版式設計只是其發展應用中的一個方向。如何設計完美有魅力的網頁界面，版式設計扮演十分重要的角色，優秀的版式設計可以給瀏覽者留下深刻的印象，提高頁面的訪問量。因此，本文將向諸位讀者介紹在CDIO工程教育模式下，網頁設計課程中采用項目為指導的教學實踐過程中注意的事項。

關鍵詞：網頁設計；版式設計 CDIO教育模式；項目教學

近年來隨著經濟的高速發展，科技的日新月異，教育領域同樣面臨革新。引進新的教育理念和教學模式成為教育工作者的關注重心，此時，歐美成熟的工程教育理念慢慢地進入我們的視野之中，CDIO的教學模式（Conceive構思、Design設計、Implement實施、Operate運行），符合工程人才的培養，提高學生的實踐能力、組織能力、創新能力。這一模式更適應當下的教育環境需求。

網頁設計這門課程屬于交叉學科范疇，兼顧藝術設計、計算機技術及交互設計等多門學科。另外，這門課程作為藝術與技術的結合體，要求學生具備較強實踐動手能力與綜合運用能力，因而在教學過程中我們依據CDIO的工程教育理念開展教學。

本文重點談到的是網頁設計中的版式設計過程，網頁中的版式設計起到信息統一、分割區域和交互導引的作用，是在有限的空間界面內將文字、圖形、背景色彩或圖案及交互功能集成在方圓之間，根據設計的形式法則，利用藝術美學與科學技術相結合的方式來實現效果展示。下面以教學過程中的“xx藝術系網站”項目為例，以網頁設計中的版式設計為內容，展示教學過程中的各個設計階段。

1 構思階段

（1）確立目標。

網頁設計不是盲目的行為，不是簡單使用軟件的行為，它是構思由確立到實現的過程，是一種展示到體會的過程。因此，在設計之初，教師需要引導學生了解當前的課題，明確網站要做什么，網站的外觀布局是什么樣子，網站需要營造何種氛圍。我們常見的網站根據用途分類為企業網站、電子商務網站、電子政務網站、文體娛樂網站、教育科學網站等，每種類型的網站都有自己需要傳播的信息，根據所需文字與圖片選擇適合的排版方式，進而營造恰當的氛圍。在“xx藝術系網站”項目中，學生會根據實際項目類型，理解項目設計目標為，該學院所屬系部信息服務類網站，界面版式方面要求簡潔大方，色彩明快，塑造清新、愉悅的氛圍，學生可以根據以上內容展開進一步的設計工作。

（2）信息整理。

項目開展前期根據對項目的簡單分析，要求學生對客戶或相關人士展開訪談，對行業同類網站的資訊開展收集與調研。這一階段學生會接觸網頁設計的需求方，在本項目中可以設定為系內行政人員、教師及系內學生，根據訪談或調研可以得到網站相關設計信息，如對整體風格的需求，導航的設計需求，網站類型為靜態網站或動態網站，根據需求結果，要求學生設計多樣的版式效果，以供客戶參考。

（3）交互設計。

我們將網頁中的交互分為視覺上的交互和行為功能上的交互設計。在這里我們更側重說明交互在視覺上的應用。網頁中我們常見的交互形態有按鈕、導航條、搜索欄和表單等。這些交互形態都會出現在版式的突出及顯著位置，這樣更引發人們的視覺關注中心，因而，在進行版式設計時，需要考慮這些交互元素的設置，友好的版式也是一種界面與人的情感交互。在我們的項目中學生應該考慮交互按鈕的外觀設計，排放位置等因素；導航條的設置應在醒目位置，清晰明確發揮導引作用；搜索欄幫助瀏覽者快捷搜索，放置在易發現的位置，搜索一般出現在網頁右上角；表單設計是學生所忽略的環節，因為可以使用插件添加，導致學生認為無須設計，在此建議信息表單設計時可考慮細節設計，提高友好度與舒適度等交互設計。

2 設計階段

版式設計是網頁設計中重要的設計引導規劃環節，在這個過程中學生可以根據自己的項目主題展開藝術美感的設計。一般進行頁面版式設計我們從以下幾個方面入手。

（1）版式結構設計。

網頁設計中的版式設計與傳統媒介中的版式設計略有不同，前提是他們都遵循版式設計五原則，[1]內容與形式，簡潔與簡約，設計與藝術，趣味與獨特，局部與整體。為了設計富有形式法則和藝術美感的網頁作品，版式設計方面通常會采用黃金比例和三分法排列原則。黃金比例法是初學者易于掌控的方法，將視窗可用區域分成兩個部分，也可以根據設計比例需求，將數字錄入到相關計算網站，得出合適的黃金比例分配方案。三分法構圖排版方式，是將排版界面分成三份，根據內容的不同，選擇不同的三分法排列位置。

網頁設計中由于要考慮顯示器視窗顯示水平不同，我們的總體版式設計會采用固定格式或非固定格式兩種形式。固定格式的版面是固定的界面版式，而非固定格式的版面設計是變化的，這種變化的版式很難把握的，變化的視窗將改變既定的字體形式和圖形排列位置，這個課題也是我們今后要深入探討的方向。

（2）字體、圖像、色彩設計。

版式設計是界面設計的骨架，字體設計是界面設計的血肉，富媒體技術的全面發展，網站這一綜合載體也得到了極大的發展，版式與字體的結合構成了網頁的不同風貌。在網頁中常見字體分為中英文兩類和圖形化的藝術字體，字號一般選用12pt。在中文網頁常常出現的字體為宋體或黑體，字號為12pt/14pt的文字展示，另外也會有些超大字體以圖像的形態出現，并通過視覺效果的調整，創建三維空間的視覺展示效果。圖形化的藝術字體，在諸多網站中得到應用。在設計中我們題材保有傳統的文化性，中國元素的運用，如書法、圖騰、建筑等富有中國色彩的藝術形態都應得到我們的思考與關注，中西文化的比較與融合也是我們要探索的方向。圖形與色彩部分在排版中應適合主題，響應設計氛圍，為整體版式服務。

（3）視頻展示設計。

網頁界面排版中還需考慮一種新興的展示手段，視頻信息展示，頁面中利用大量的視頻信息排版，減少文字、圖片信息的輸入，信息傳達方式由靜態轉換為動態，提供有趣而新穎的排版展示方式。

3 技術實施

（1）界面版式視覺設計。

網頁設計中對靜態界面的布局，我們通常會使用Photoshop和Illustrator圖像處理軟件開展設計，首先我們會根據思維導圖繪制基礎模板，然后根據設計需求在模板中添加設計好的文字、圖形、視頻、聲音等設計元素。

（2）交互功能視覺設計。

在網頁設計中我們會考慮將靜態樣稿轉換為簡單的靜態網頁，這種轉換我們會使用Dreamweaver軟件進行操作，由于網頁展示設備的不同我們也會考慮采用一些相關的模型制作軟件來處理交互設計部分。

4 運行階段

將確定好的靜態草稿通過切圖生成為靜態網站，測試效果及功能，當運行時根據需要和視覺效果進行調整直到理想狀態。

5 小結

網頁設計課程將實際項目導入課堂，根據CDIO工程教育模式教學，打造有效、有趣、實用的教學方式，使學生在學習操作中鍛煉宏觀思考的能力，獲得團隊合作的能力，養成終身學習的能力。學生對設計流程的掌握就是對知識體系的掌握和運用，達到理論與實踐相結合，通過對版面的全面掌控，更好地為靜態網頁設計打下堅實的基礎。

參考文獻：

[1] 沈卓婭，王汀.字體與版式設計實訓[M].中國出版集團東方出版中心，2011：74.

作者簡介：〖HT6SS〗劉石（1980—），女，遼寧鳳城人，碩士，大連東軟信息學院講師，研究方向：網頁設計、交互設計及Flash動畫。