前言：本站為你精心整理了網(wǎng)頁設(shè)計秩序與靈動范文，希望能為你的創(chuàng)作提供參考價值，我們的客服老師可以幫助你提供個性化的參考范文，歡迎咨詢。

摘要近幾年，網(wǎng)頁設(shè)計已成為視覺傳達(dá)設(shè)計藝術(shù)的重要組成部分。而從設(shè)計方面上來說，人們往往忽視了對其美感創(chuàng)新及信息傳達(dá)速度，過分依賴于設(shè)計軟件，使得網(wǎng)頁設(shè)計存活于混沌之中。網(wǎng)頁網(wǎng)格設(shè)計提供了一種結(jié)構(gòu)建立起來的敘事關(guān)系，將頁面內(nèi)元素以一種合理的邏輯布局去引導(dǎo)瀏覽者的視線。但由于網(wǎng)頁后臺技術(shù)的限定，使得網(wǎng)頁的設(shè)計更加難以發(fā)展，文章中提到運(yùn)用網(wǎng)格系統(tǒng)的秩序性去美化網(wǎng)頁的設(shè)計，使網(wǎng)頁設(shè)計在理性的制約下更加生動。

關(guān)鍵詞:網(wǎng)頁設(shè)計；網(wǎng)格設(shè)計；秩序；靈動

近幾年來，隨著科技的進(jìn)步，互聯(lián)網(wǎng)的發(fā)展使得信息的傳播突破了傳統(tǒng)的政治、經(jīng)濟(jì)、地域及文化的阻隔，而網(wǎng)頁借由網(wǎng)絡(luò)的運(yùn)行，將所信息用最快、最方便的形式向網(wǎng)頁的瀏覽者傳達(dá)。因而網(wǎng)頁設(shè)計作逐漸被人們所認(rèn)可并認(rèn)識，但是現(xiàn)在由于設(shè)計軟件增多并過分依賴于它，致使網(wǎng)頁設(shè)計重視技術(shù)操作，使得網(wǎng)頁設(shè)計存活于混沌之中。而雅各布•尼爾森說：“網(wǎng)絡(luò)是最終授權(quán)于消費(fèi)者的環(huán)境，他（她）點(diǎn)擊鼠標(biāo)就能決定所有事。到達(dá)任何地方都如此簡單，世界上所有的競爭者都只是一次鼠標(biāo)點(diǎn)擊的差距?！惫示W(wǎng)頁設(shè)計的目標(biāo)是實(shí)現(xiàn)內(nèi)容的整合，兼顧信息量大且易于閱讀，能夠吸引瀏覽者停留在某個頁面上。而網(wǎng)格設(shè)計的本質(zhì)上來說是一件設(shè)計作品的骨骼，不僅僅能夠賦予設(shè)計以秩序感，幫助形成清楚且連貫的信息關(guān)系，還能給設(shè)計的表述和創(chuàng)造提供豐富的機(jī)會。這也能夠逐步使瀏覽者對網(wǎng)頁設(shè)計的視覺美感得到認(rèn)同。

一、網(wǎng)頁設(shè)計的溯源

上世紀(jì)60年代，借由戰(zhàn)爭的推動而形成最初的計算機(jī)網(wǎng)絡(luò)。而互聯(lián)網(wǎng)的前身起源于1969年，美國國防部的指示下由四臺計算機(jī)組成，名為阿帕網(wǎng)(ARPNET)。而在1974年提出的通訊協(xié)議和TCP/IP協(xié)議的應(yīng)用，才使同時互聯(lián)網(wǎng)成為一個開放系統(tǒng)。并在上世紀(jì)九十年代電腦技術(shù)的飛速發(fā)展，圖像、聲音、多媒體元素等新的數(shù)字媒介進(jìn)入到互聯(lián)網(wǎng)之中，進(jìn)而網(wǎng)頁的設(shè)計也由于一些新的技術(shù)的加入，網(wǎng)頁中有越來越多的因素能夠被規(guī)劃并進(jìn)行設(shè)計，這著實(shí)讓網(wǎng)頁設(shè)計成為一種全新的藝術(shù)設(shè)計形式。而網(wǎng)頁設(shè)計是基于互聯(lián)網(wǎng)為載體，以數(shù)字網(wǎng)絡(luò)技術(shù)為基礎(chǔ)，并依照、遵循設(shè)計的表現(xiàn)形式及其規(guī)律，以此來達(dá)到設(shè)計的目的與功能，并且網(wǎng)頁設(shè)計強(qiáng)調(diào)藝術(shù)與科學(xué)要建立一個密切的聯(lián)系與結(jié)合，形成一種新形式的視覺傳達(dá)活動，使平面設(shè)計在現(xiàn)代社會中得到發(fā)展與延伸。未來的網(wǎng)頁設(shè)計不但在依照設(shè)計的目的及要求的同時，更以所處的時代背景下獲取最好的技術(shù)，加以藝術(shù)的表達(dá)形式為基礎(chǔ)，有意識地對其進(jìn)行藝術(shù)的創(chuàng)造性規(guī)劃活動。不僅能帶給網(wǎng)頁瀏覽者美麗的視覺體驗(yàn)，同時更好的發(fā)揮了其信息傳達(dá)的作用。

二、網(wǎng)頁設(shè)計中秩序與靈動的起點(diǎn)

在網(wǎng)頁設(shè)計飛速發(fā)展的時代，人們在追求著網(wǎng)頁的強(qiáng)大信息量且易讀的同時，尋求網(wǎng)頁設(shè)計中的秩序與靈動的設(shè)計方法，這就可以滿足網(wǎng)頁的美感與實(shí)用性。通過多年來實(shí)踐，設(shè)計師發(fā)現(xiàn)這些都需要有網(wǎng)頁版式設(shè)計才能夠達(dá)到，它不但使了網(wǎng)頁富有自己獨(dú)特的藝術(shù)風(fēng)格及特征，還可以以此吸引瀏覽者的注意力，增強(qiáng)網(wǎng)頁內(nèi)容的秩序傳達(dá)性，這種秩序不是強(qiáng)加于瀏覽者的，而是為瀏覽者創(chuàng)造獨(dú)特的體驗(yàn)。因此，在網(wǎng)頁設(shè)計中網(wǎng)頁版式設(shè)計具有起點(diǎn)的作用，并且網(wǎng)頁版式設(shè)計是由網(wǎng)格系統(tǒng)組成，沒有網(wǎng)格系統(tǒng)的輔助，難以達(dá)到頁面清晰美觀，內(nèi)容組織合理，無法在網(wǎng)頁設(shè)計尋求到秩序與靈動。

（一）秩序的基本原則

自然秩序產(chǎn)生的前提是物理法則要能夠在沒有相互干擾的孤立的系統(tǒng)中起作用，而所有事物都是相互作用的，正是這種混亂與秩序之間的對照喚醒了我們的知覺。而秩序感通過各種工藝證明了人類喜歡節(jié)奏、秩序和事物的復(fù)雜性，設(shè)計師通過對對稱與均衡、單純與齊一、協(xié)調(diào)與對比、節(jié)奏與韻律、多樣與統(tǒng)一靈活的運(yùn)用，體現(xiàn)出一種帶有秩序感的靈動。而將元素的秩序化組構(gòu)，依照人所產(chǎn)生的視覺規(guī)律，主要體現(xiàn)在其排列的條理性，比例的合適性、節(jié)奏的合理性、以及漸變的嚴(yán)格性上，遵循著化繁為簡、化雜亂為條理、化模糊為鮮明的原則的秩序法則，從而協(xié)調(diào)重復(fù)、均衡、對稱等性質(zhì)，將畫面的展示增添秩序性、連續(xù)性和和諧性。

（二）網(wǎng)頁設(shè)計中的網(wǎng)格系統(tǒng)設(shè)計

網(wǎng)頁網(wǎng)格系統(tǒng)可以被定義為：通過對比例、秩序、連續(xù)感和現(xiàn)代感，將網(wǎng)頁里的元素進(jìn)行重新整合，將網(wǎng)頁中版面布局以規(guī)范的網(wǎng)格排版來指導(dǎo)信息的分布，實(shí)現(xiàn)保持平衡亦或者去打破平衡。從網(wǎng)頁設(shè)計上說起，網(wǎng)頁網(wǎng)格設(shè)計的應(yīng)用，不但能夠整合網(wǎng)頁的信息，方便閱讀，更可以增加網(wǎng)頁的美感，還可以有助于閱讀，更具有可用性。而且，對于前端開發(fā)來說，網(wǎng)頁將更加的有秩序和有靈活性。自網(wǎng)格系統(tǒng)應(yīng)用以來，經(jīng)過許多代設(shè)計師的努力，使其發(fā)展的更加精確與完善。現(xiàn)在的網(wǎng)頁設(shè)計中的網(wǎng)格不但繼承了傳統(tǒng)印刷網(wǎng)格，并以此為基礎(chǔ)，卻又不同于以往的傳統(tǒng)印刷網(wǎng)格，能以其的多選擇性突破傳統(tǒng)印刷媒體的限制，更具有自己特殊的特點(diǎn)和要求。不過傳統(tǒng)印刷媒介中所需要設(shè)計的界面是固定的，而網(wǎng)頁設(shè)計中有很多因素是超出設(shè)計師控制的，瀏覽者可以按照自己對網(wǎng)頁視覺效果的要求來進(jìn)行調(diào)整，至使顯示屏所呈現(xiàn)的畫面與最初的設(shè)計背道而馳，但是顯示器屏幕每英寸由72像素構(gòu)成，實(shí)際上是由數(shù)字創(chuàng)造的網(wǎng)格，這是一種區(qū)別于其他的傳統(tǒng)媒體形式，網(wǎng)頁設(shè)計者雖然對版面視覺效果喪失了一定控制力，但這也正是網(wǎng)頁設(shè)計的美麗所在，而我們需要做的是讓設(shè)計去適應(yīng)變化多端的網(wǎng)格系統(tǒng)。

（三）網(wǎng)頁設(shè)計中的誤區(qū)

當(dāng)新媒體設(shè)計與信息構(gòu)筑的時代來臨時，網(wǎng)頁媒體以全新且令人激動的方式展示信息，將其諸多特點(diǎn)展現(xiàn)出來，使其能從眾多的傳統(tǒng)媒體中突顯出來。與此同時，網(wǎng)頁制作技術(shù)也得到了前所未有的革新，涌現(xiàn)出一些列功能愈加強(qiáng)大的網(wǎng)頁制作軟件，網(wǎng)頁制作也由此變得輕松而容易起來，這種偏向性致使滋生出大量偏向重視技術(shù)操作而忽視網(wǎng)頁設(shè)計的視覺創(chuàng)意美感的網(wǎng)頁制作者，造成信息無法正確傳達(dá)出來。在這種現(xiàn)象的促使下，如何平衡在信息高度密集的網(wǎng)頁，不僅僅需要設(shè)計師具備審美的品質(zhì)，更需要為信息的展示增添秩序性，而無論在何種網(wǎng)頁上，網(wǎng)格可以向?yàn)g覽者預(yù)示出信息所在，這也算是看不見的秩序，也可以在保持展示內(nèi)容總體一致的前提下，為網(wǎng)頁添加靈動性，這也是在設(shè)計中所強(qiáng)調(diào)的視覺有序系統(tǒng)。

（四）網(wǎng)頁設(shè)計中存在的問題分析

現(xiàn)在有一大部分網(wǎng)站，不知道信息的所在，沒有規(guī)則可言。如果不能在混亂之中建立秩序，使瀏覽者對網(wǎng)頁設(shè)計者的意圖一無所知，更使信息易讀性和傳達(dá)性變成一個令人困惑的難題。并且網(wǎng)頁存在信息能容過滿的問題，就將各種信息諸如文字、圖片、動畫等不加思考的硬塞到頁面上，沒有任何規(guī)范、條理可言，也更談不上藝術(shù)處理了。此類問題導(dǎo)致瀏覽者在讀取信息時會遇到諸多不便，不助于信息的交流，使網(wǎng)頁上的設(shè)計做不到互相協(xié)作，反而相互消減。再加上頁面上五花八門、不分主次的內(nèi)容，網(wǎng)頁背景做的很花哨，過度的裝飾的頁面，混亂了瀏覽者的視線，嚴(yán)重干擾從網(wǎng)頁中信息的獲取，更無法提及其的秩序美感。相比之下，還有一類網(wǎng)頁我們打開，發(fā)現(xiàn)好像這個網(wǎng)頁與那個網(wǎng)頁都是一樣的。無論是標(biāo)題、文字及圖片的位置相同，更甚到動畫的效果都是如此。而這兩個網(wǎng)站對于頁面的用色秉承著隨心所欲原則，其目的只是為了區(qū)分開文本和背景，與此同時失去網(wǎng)頁的特色，使我們看網(wǎng)頁好像每一個都是相同的，缺乏靈動性。雖然不能片面地追求視覺美感沖擊力，但也不能不顧瀏覽者的使用性。

三．網(wǎng)頁設(shè)計中秩序與靈動的設(shè)計應(yīng)用

網(wǎng)頁設(shè)計是視覺傳達(dá)設(shè)計藝術(shù)的重要組成部分和重要分支，其未來趨勢將逐步走向簡單化、立體化和智能化。如何平衡網(wǎng)頁的秩序與靈動，使其展現(xiàn)形式會變得簡單，條理變得清晰，并做到用有秩序的形式顯示最全面的內(nèi)容，恰到好處地進(jìn)行調(diào)整、解構(gòu)，讓網(wǎng)頁設(shè)計更加有靈動性。

（一）網(wǎng)頁設(shè)計的秩序感

俗話說：沒有規(guī)矩，不成方圓。而設(shè)計也需要有一定的規(guī)矩，也可以說是一定的規(guī)則。而這種規(guī)則可以給設(shè)計帶來秩序感和結(jié)構(gòu)感，這種設(shè)計終將成為一件有血有肉的作品。而網(wǎng)頁設(shè)計也是如此，通過形式美的法則，將頁面中的各種視覺元素進(jìn)行有組織有規(guī)律的調(diào)整，大膽的取舍，使頁面獲得完整、有序的視覺效果，通過這種具有單純的秩序性，對各種凌亂的資料運(yùn)用理性和邏輯思維，產(chǎn)生具有強(qiáng)烈的視覺沖擊力，促進(jìn)瀏覽者加深印象，創(chuàng)造清晰有序的形式感。如網(wǎng)站設(shè)計者常運(yùn)用反復(fù)視覺流程，使網(wǎng)頁產(chǎn)生的視覺效果更富有韻律美和秩序美。同時可以發(fā)現(xiàn)整個網(wǎng)頁設(shè)計運(yùn)用了清晰的網(wǎng)格可以清楚地表現(xiàn)網(wǎng)頁的細(xì)節(jié)和引導(dǎo)瀏覽者進(jìn)行瀏覽。并通過改變圖像與文字的大小比例，從不同的視角展現(xiàn)主題，不同的比例和尺寸建立起一種敘事關(guān)系，通過用對稱式形成了一種平衡、協(xié)調(diào)的感覺，帶給瀏覽者一種條理清晰的印象。另外網(wǎng)頁設(shè)計時，通過對頁面適當(dāng)?shù)牧舭?，能夠制造處生動的進(jìn)入方式，并且對頁面或界面的各個元素與部分分割、區(qū)分和重組，并且留白區(qū)域可以用它來實(shí)現(xiàn)強(qiáng)調(diào)、比例、平衡和韻律。留白不會給人感覺頁面“空”，反而會形成一種視覺的空間感。

（二）網(wǎng)頁設(shè)計的靈動性

網(wǎng)頁的整體設(shè)計，通過以周密的組織和精確的定位來獲得頁面的秩序感。通過散點(diǎn)視覺流程，將網(wǎng)頁中的各個視覺元素進(jìn)行有節(jié)奏的組構(gòu)，或上、或下、或左、或右的自由移動，給人一種輕松隨意帶有韻律的視覺享受。并且通過對視線的引導(dǎo)，不但保持著網(wǎng)頁的整體流暢、和諧的瀏覽觀感，使瀏覽者更加輕松的找到所需要的內(nèi)容。

（三）秩序與靈動并存的網(wǎng)頁設(shè)計

網(wǎng)頁設(shè)計以一種穩(wěn)定、神秘的方式呈現(xiàn)出一下中相對靈活的創(chuàng)意活動。這種在有秩序的頁面下追求一定的自由度，使網(wǎng)頁設(shè)計能通過深思熟慮之后決定或特意的追求的“散”的解構(gòu)，在理性授意下其內(nèi)存在著一種帶有靈動的秩序。而優(yōu)秀的網(wǎng)頁設(shè)計就是應(yīng)該在多樣中求統(tǒng)一，在節(jié)奏中求韻律。如網(wǎng)站設(shè)計者運(yùn)用形式美法則，通過有序、具有美感、整體協(xié)調(diào)的手段，使瀏覽者能夠感受到愉悅感。同時，帶有韻律的平衡，可以突出網(wǎng)頁所強(qiáng)調(diào)的重點(diǎn)。

四、結(jié)語

設(shè)計上用四句的格言強(qiáng)調(diào)了設(shè)計的核心要求：根據(jù)受眾進(jìn)行設(shè)計、功能決定形式、保持簡潔、內(nèi)容決定一切。也就是說，設(shè)計就是要遵循內(nèi)容決定形式的原則。黑格爾也說過：“內(nèi)容和完全適合內(nèi)容的形式達(dá)到獨(dú)立完整的統(tǒng)一，因而形成一種自由整體，這就是藝術(shù)的中心。”故網(wǎng)頁在設(shè)計上，要在保證有秩序的形式顯示最全面的內(nèi)容，使瀏覽者更加輕松的獲取信息。并且在秩序感不斷滲入到人們的生活和藝術(shù)設(shè)計之中，人們的審美不斷提高，對于美的要求越來越高，設(shè)計者要通過對形式美法則的對稱與均衡、單純與齊一、協(xié)調(diào)與對比、節(jié)奏與韻律、多樣與統(tǒng)一的靈活運(yùn)用，尋求出一種帶有秩序感的靈動。將它們運(yùn)用到網(wǎng)頁藝術(shù)設(shè)計這種科學(xué)與藝術(shù)高度統(tǒng)一的產(chǎn)物上，創(chuàng)造出藝術(shù)化、人性化的網(wǎng)站頁面。

參考文獻(xiàn)：

[1]加文•安布羅斯、保羅•哈里斯編著．劉靜譯．網(wǎng)格設(shè)計[M]．北京：中國青年出版社，2008．

[2]威廉•瑞恩、西奧多•科諾瓦著．美國視覺傳達(dá)完全教程[M]．上海：上海人民美術(shù)出版社，2008．

[3]惠巖、顧群業(yè)編著．網(wǎng)頁藝術(shù)設(shè)計[M]．濟(jì)南：山東教育出版社，2012．

[4]KhoiVinh著．秩序之美—網(wǎng)頁中的網(wǎng)格設(shè)計[M]．北京：人民郵電出版社，2011．

[5]E.H.貢布里希著．秩序感—裝飾藝術(shù)的心理學(xué)研究[M]．長沙：湖南科學(xué)技術(shù)出版社，2006．

[6]胡爽.基于格式塔的網(wǎng)頁信息設(shè)計的美化研究[J].包裝工程，2010．

[7]周峰、彭沛.淺析網(wǎng)格系統(tǒng)在網(wǎng)頁設(shè)計中的重要性[J].科技信息，2009．

作者：王晴 單位：東北師范大學(xué)