淺析網頁設計中的文字編排與版式設計發布者：本站     時間：2020-05-02 14:05:20

本文主要圍繞網頁設計中的視覺設計談對網頁設計的設計理念和方法。通過對網頁設計的中的視聽元素和版式設計的分析，找到網頁設計的特點、布局的設計理念和設計風格。

網頁設計，以圖形用戶界面設計和交互設計為特點的設計系統，網頁的輸出端主要是電腦端和移動終端。網頁的藝術設計內容，可以劃分為兩大類：多媒體設計元素及版式設計。在分析研究這兩向內容的基礎上探索網頁設計的方法和規律。網頁設計中的多媒體設計元素主要包括：圖標、圖像、表格、色彩、導航、音樂、視頻影像、背景、交互按鈕、文本信息、鏈接等。所謂網頁的版式設計，是在有限的屏幕空間上將視聽多媒體元素進行有機的排列組合，它在傳達信息的同時，也產生感官上的美感和精神上的享受。

一、網頁設計中的文字編排

(一)文字段落編排——網頁中的字體

網頁中行距、字距的合理安排可以使用戶在瀏覽時更為清晰迅速的查找信息，文字字體、字號所形成的節奏和美感也是設計時要考慮的因素。因為屏幕瀏覽的特性，正文的中文字體一般最常選用宋體和黑體，也可選用等線體、細圓體等清秀端莊的字體。選擇有襯線體要比較慎重，字號較小的情況下會產生視覺錯視，就好像字體周圍有模糊的像素點，影響用戶閱讀。襯線字體因為在筆畫的起落處具有裝飾線腳，在屏幕端顯示效果不是那么的好。在網頁界面設計中，襯線字體可以適當的應用在標題字的設計中，讓標題更具有美感。

(二)文字段落編排——CSS樣式設計

篇、章頁字體注意變化，按照章節層次字號大小按一定的順序選定。使讀者閱讀起來感到結構分明、條理清楚。每個層次不同的字體在統一中不乏變化，豐富視覺意味。在網頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。

二、網頁中的版式設計

(一)版式設計綜述

第一頁(首頁)的版式以及下級頁面的安排上基本上是從一而終，統一在一種格調中，這樣才能構成閱讀時的順暢，形成界面整體的風格。層級頁面，統一并不代表一成不變，統一中尋求變化，如果一個網站有較為復雜的層級頁面，怎樣拓展設計是關鍵。還要注意的是要根據站點地圖規劃好不同內容頁面的區分。(比如用顏色區分，用文字版面的不同區分，用動靜區分等等)。 

(二)網頁色彩的搭配

色彩代表了不同的情感，有著不同的象征含義。網頁配色中，忌諱的是：(1)一個網站中的色彩不要過于混亂，根據網站的主題內容定義色彩體系，在統一中找對比。(體系化)。(2)背景和文本信息的對比盡量要大，不要用繁復的圖案圖形作背景，以免影響到文字的識別性。

(三)網頁中的布局理念——功能優先原則

網頁布局大致可分為國字型、左右布局及上下布局型、大背景封面型等。國字型是一些門戶類網站常見的布局方式，上面是網站的主導航及搜索區塊，通欄的滾動廣告欄，中部是網站當前頁面的主要內容，左側通常會放置二級導航欄，右側會放一些超鏈接或者其他功能模塊，最下面是網站的一些基本信息、聯系方式、版權聲明等，這種結構是我們在網上見到的差不多最多的一種結構類型。左右布局及上下布局：左右布局是以左右為分別兩頁的框架結構，一般左面是導航鏈接，右面是當前頁面內容區。有一些企業網站喜歡用這種布局設計，我們見到的大部分的大型論壇都是這種結構的。這種類型結構非常清晰，檢索方便，層級結構清晰有條理。上下布局是以左右為分別兩頁的框架結構，一般上面是導航鏈接，下面是當前頁面內容區。大背景封面型：這種類型基本上是出現在一些網站的首頁，大背景能夠更好地渲染餓網站的氣氛，具有很好地沉浸感，這種類型的首頁使用的比較多，適合首頁內容容量較少的頁面。那么什么樣的布局是最好的，要具體情況具體分析：(1)國字型適合網站信息比較多，頁面容量較大的門戶類網站。(2)左右布局及上下布局型是比較常見的網站布局模式，但容量相對于國字形要少一些，但布局合理便于瀏覽。(3)大背景封面型比較適合展示企業形象或這信息較少的極具個性化的個人主頁。在這種類型中合理的加入交互動態型可以達到很好的用戶體驗，好的交互大大豐富了網頁，但是它不能表達過多的文字信息。但動態及視頻較多的網站也有更新比較麻煩，加載比較慢也的缺點，我覺得可以在頁面中局部使用交互動畫增加界面的沉浸感。

對用戶來說，網頁設計的目標是帶來“成功且令人滿意的體驗”，成功就是指用戶能高效的完成任務，令人滿意是指這一過程是愉快的，而不僅僅是滿足功能性需求，這種愉快可以表現為視覺上的愉悅，審美的享受。