淺析網(wǎng)頁(yè)設計中的文字編排與版式設計發(fā)布者：本站     時(shí)間：2020-05-02 14:05:20

本文主要圍繞網(wǎng)頁(yè)設計中的視覺(jué)設計談對網(wǎng)頁(yè)設計的設計理念和方法。通過(guò)對網(wǎng)頁(yè)設計的中的視聽(tīng)元素和版式設計的分析，找到網(wǎng)頁(yè)設計的特點(diǎn)、布局的設計理念和設計風(fēng)格。

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

一、網(wǎng)頁(yè)設計中的文字編排

(一)文字段落編排——網(wǎng)頁(yè)中的字體

網(wǎng)頁(yè)中行距、字距的合理安排可以使用戶(hù)在瀏覽時(shí)更為清晰迅速的查找信息，文字字體、字號所形成的節奏和美感也是設計時(shí)要考慮的因素。因為屏幕瀏覽的特性，正文的中文字體一般最常選用宋體和黑體，也可選用等線(xiàn)體、細圓體等清秀端莊的字體。選擇有襯線(xiàn)體要比較慎重，字號較小的情況下會(huì )產(chǎn)生視覺(jué)錯視，就好像字體周?chē)心：南袼攸c(diǎn)，影響用戶(hù)閱讀。襯線(xiàn)字體因為在筆畫(huà)的起落處具有裝飾線(xiàn)腳，在屏幕端顯示效果不是那么的好。在網(wǎng)頁(yè)界面設計中，襯線(xiàn)字體可以適當的應用在標題字的設計中，讓標題更具有美感。

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

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

二、網(wǎng)頁(yè)中的版式設計

(一)版式設計綜述

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

(二)網(wǎng)頁(yè)色彩的搭配

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

(三)網(wǎng)頁(yè)中的布局理念——功能優(yōu)先原則

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

對用戶(hù)來(lái)說(shuō)，網(wǎng)頁(yè)設計的目標是帶來(lái)“成功且令人滿(mǎn)意的體驗”，成功就是指用戶(hù)能高效的完成任務(wù)，令人滿(mǎn)意是指這一過(guò)程是愉快的，而不僅僅是滿(mǎn)足功能性需求，這種愉快可以表現為視覺(jué)上的愉悅，審美的享受。