談網(wǎng)頁設(shè)計中的視覺設(shè)計

張璇 魯迅美術(shù)學院

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

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

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

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

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

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

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

(一)版式設(shè)計綜述

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

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

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

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

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

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