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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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