專業(yè)文學(xué)網(wǎng)站設(shè)計(jì)原則與趨勢

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了專業(yè)文學(xué)網(wǎng)站設(shè)計(jì)原則與趨勢范文，希望能給你帶來靈感和參考，敬請閱讀。

摘要:

現(xiàn)在互聯(lián)網(wǎng)用戶對網(wǎng)頁設(shè)計(jì)的質(zhì)量要求越來越高，沒有內(nèi)涵的華麗設(shè)計(jì)很快就會被遺棄。所以現(xiàn)今的設(shè)計(jì)趨勢已經(jīng)越來越重視網(wǎng)站的響應(yīng)設(shè)計(jì)、持續(xù)聯(lián)系以及虛擬現(xiàn)實(shí)。在一個注重用戶體驗(yàn)的時代，一個好的文學(xué)網(wǎng)站，不是只有華麗的界面或者良好的交互設(shè)計(jì)就可以，而是要在藝術(shù)和功能上做到兩全其美。

關(guān)鍵詞:網(wǎng)頁設(shè)計(jì);色彩;圖片優(yōu)化;用戶體驗(yàn)

現(xiàn)代設(shè)計(jì)在中國的發(fā)展大概有二十多年的時間了，以前中國很少有人會注意網(wǎng)頁界面的用戶體驗(yàn)，而且國內(nèi)寬帶水平有限，所以那時候我國的網(wǎng)頁界面基本上都是框架式，創(chuàng)新的頁面很少。隨著我國各方面的發(fā)展，我們的設(shè)計(jì)也越來越有創(chuàng)新意識，我們也越來越注重用戶的體驗(yàn)。尤其是在文學(xué)網(wǎng)站設(shè)計(jì)方面，以前很多網(wǎng)站的設(shè)計(jì)大部分都是大的框架加上鏈接構(gòu)成，沒有下多少功夫在外觀設(shè)計(jì)和用戶體驗(yàn)方面，而現(xiàn)在隨著文學(xué)網(wǎng)的發(fā)展，僅僅是靠老一套的理論來做的設(shè)計(jì)已經(jīng)不能滿足現(xiàn)在用戶的審美需求了。

1文學(xué)類網(wǎng)站設(shè)計(jì)原則

1．1色彩設(shè)計(jì)原則

眾所周知，不管是做招貼、包裝或者是VI，給人的第一印象往往是這個作品的色彩設(shè)計(jì)，它的色彩運(yùn)用的好與壞，將直接影響到閱讀者的興趣。同樣，在網(wǎng)頁設(shè)計(jì)中，色彩也是居于十分重要的地位?，F(xiàn)在的文學(xué)類網(wǎng)站的網(wǎng)頁設(shè)計(jì)，大部分以比較淺的顏色為網(wǎng)頁的背景色，如淺黃色、淺藍(lán)色、淺綠色或者直接就是白色背景，再加上較深顏色的文字來做的配色。一般來說網(wǎng)頁中所出現(xiàn)的字體顏色都是黑色，因?yàn)闇\色背景中黑色字體的視認(rèn)度最高，但是這種強(qiáng)對比，屏幕刺激較大，也更容易讓瀏覽者產(chǎn)生視覺疲勞。在文學(xué)類網(wǎng)頁設(shè)計(jì)中，這種對比過于強(qiáng)烈的配色會使用戶長時間在線瀏覽的時候有不適，但是緩和的色彩搭配視認(rèn)度不高，也不利于用戶閱讀。所以筆者認(rèn)為在網(wǎng)頁中出現(xiàn)大面積文字以及考慮到用戶會長時間停留在一個頁面的時候，比如文學(xué)網(wǎng)站的在線閱讀界面，我們可以給用戶一個選擇，讓用戶自己來挑選網(wǎng)頁的背景色以及字體顏色，讓用戶自己來選擇適合自己的顏色搭配。

1．2文字和排版設(shè)計(jì)原則

在做網(wǎng)頁設(shè)計(jì)的過程中，無論選擇什么字體，都要基于網(wǎng)頁的總體設(shè)想和瀏覽者的需要來使用。而且瀏覽器使用的是本地字庫顯示的頁面內(nèi)容，作為一個網(wǎng)頁設(shè)計(jì)者，不得不考慮到用戶電腦中是否有你選用的字體，所以說網(wǎng)頁中的文字最好使用缺省字體，在必須使用特殊字體的地方，可以先把文字做成圖像，然后再插入到網(wǎng)頁頁面中去。再者就是文字行距的問題，一般的行距比例為10:12，因?yàn)楹线m的行距可以很好引導(dǎo)瀏覽者的視線，如果行距過寬會影響行與行之間的文字延續(xù)性，影響閱讀。而且在視覺傳達(dá)中文字作為網(wǎng)頁頁面的要素之一，除了表達(dá)文字本身的意義以外，還有傳達(dá)感情的作用，所以文字設(shè)計(jì)在視覺上要給人以美好的印象，讓瀏覽者可以獲得良好的閱讀感受。而且網(wǎng)頁設(shè)計(jì)作為一種視覺語言，特別講究編排和布局，雖然主頁的設(shè)計(jì)不等同于平面設(shè)計(jì)，但它們有許多相近之處，都是通過文字圖形的空間組合，表達(dá)出和諧與美。在網(wǎng)頁文字設(shè)計(jì)編排中最重要的一點(diǎn)，就是要與網(wǎng)頁內(nèi)容的性質(zhì)和特點(diǎn)相和諧，其設(shè)計(jì)風(fēng)格要與內(nèi)容特性相一致，而不是相分離沖突，所以在我們把大量的信息整合到一個頁面上去的時候，首先要考慮的是怎樣把它們以合理統(tǒng)一的排布，達(dá)到變化與統(tǒng)一并存的和諧效果。在排版這方面，網(wǎng)頁的版式設(shè)計(jì)同報刊雜志的版式設(shè)計(jì)有不少共同之處，基本上都是把頁面中的文字字體、圖形圖像、色塊線條等要素按照一定的節(jié)奏進(jìn)行編排，同時注意其結(jié)構(gòu)的大小、輕重、虛實(shí)等對比因素，并通過對這些要素的編排，使瀏覽者直觀地感受到該頁面要傳遞的信息。

1．3網(wǎng)頁圖形的優(yōu)化和應(yīng)用原則

對于一個網(wǎng)站來說，網(wǎng)頁的下載速度是非常重要的，但是影響網(wǎng)頁的下載速度的因素除了網(wǎng)速以外，網(wǎng)頁中所包含的圖像圖形對網(wǎng)頁的下載速度也有很大的影響。因此，對網(wǎng)頁圖形進(jìn)行優(yōu)化，使網(wǎng)頁能夠快速下載是網(wǎng)站設(shè)計(jì)制作中考慮的首要問題。所以，接下來就來探討一下圖片優(yōu)化的基本方法。首先是圖片的裁切，裁切時應(yīng)盡量沿所需圖像邊緣裁切，避免不必要區(qū)域占用文件大小。如果在頁面中有一張過大的圖片，也可以先把它裁成小塊，然后再使用Table語法所提供的Border=0、Cell-spacing=0、Cellpadding=0的無縫功能，將它們組合起來，這樣也會提高圖片的加載速度。再者就是圖片的輸出，一般情況下，色彩少的圖片使用GIF或者PNG格式，色彩豐富的的圖片使用JPG格式。如果是一些攝影網(wǎng)站，圖片要求都是高清圖片，那就可以用JPG格式做小圖預(yù)覽，然后鏈接到TIF格式(無損)的原圖，這對沒興趣看這張大圖片的瀏覽者而言，不但可快速下載該網(wǎng)頁，而且也是一種體貼的選擇。還有些圖片，因?yàn)橐诓煌谋尘爸惺褂?，需要輸出為透明的效果，這時，就可以選用GIF格式，因?yàn)閷τ贕IF圖像來說，色彩越少，文件就越小。所以說在看起來可以接受的范圍內(nèi)，盡可能地將色彩數(shù)量減少，就能夠?qū)IF圖像進(jìn)行不錯的優(yōu)化。而且對于網(wǎng)頁中所采用的圖檔，通常會加入Width、Height這兩個屬性，這樣就可以在加載網(wǎng)頁的過程中為圖像預(yù)留空間，在加載圖片時，用戶就可以先瀏覽其他已加載項(xiàng)目。如果沒有這些屬性，瀏覽器就不能了解圖像的大小，也就不能為圖像預(yù)留下合適的空間，這可能會給網(wǎng)頁中其他元素的顯示帶來很大的延遲，從而影響用戶的閱讀。

2現(xiàn)今專業(yè)文學(xué)網(wǎng)站設(shè)計(jì)趨勢

以前，做網(wǎng)頁設(shè)計(jì)基本上都是用PS設(shè)計(jì)網(wǎng)頁版面，僅僅是PS就可以滿足用戶的需求，但是現(xiàn)在互聯(lián)網(wǎng)用戶對網(wǎng)頁設(shè)計(jì)的質(zhì)量要求越來越高，沒有內(nèi)涵華麗的設(shè)計(jì)很快就會被遺棄。所以現(xiàn)今的設(shè)計(jì)趨勢已經(jīng)越來越重視網(wǎng)站的響應(yīng)設(shè)計(jì)、持續(xù)聯(lián)系以及虛擬現(xiàn)實(shí)。另外在版式設(shè)計(jì)方面也逐漸加入了一些“留白”的理念，“留白”發(fā)源于中國傳統(tǒng)的虛實(shí)相生、陰陽辯證的哲學(xué)思想，發(fā)展于傳統(tǒng)的繪畫行業(yè)，表達(dá)一種“以無勝有，以簡勝繁”的思想，這種設(shè)計(jì)理念與西方20世紀(jì)興起的一些現(xiàn)代設(shè)計(jì)理念如出一轍?！傲舭住辈皇且粋€色彩的概念，而是一種形式的概念，通過欣賞者的審美聯(lián)想和想象獲得的一種“秒與生意，能不失真”的意想空間，從而使設(shè)計(jì)者能夠更好地表達(dá)出設(shè)計(jì)的意圖，將作品的視覺感染力加強(qiáng)?？傊粋€好的文學(xué)網(wǎng)站的網(wǎng)頁設(shè)計(jì)，不是只要有華麗的界面就可以，而是要在藝術(shù)和功能上做到兩全其美。

2．1大背景圖的網(wǎng)頁設(shè)計(jì)

高清圖片是一種可以產(chǎn)生極具視覺沖擊力并迅速抓住讀者視線的好方式，而且這些圖片一般都是高質(zhì)量寫實(shí)的或者是抽象的精美照片，這些圖片的用色和表現(xiàn)的內(nèi)容都十分考究，并且趨向于一些比較柔和，比較透明的圖片，不會影響到文字的閱讀。不然再漂亮的圖片，看起來和網(wǎng)站整體效果不協(xié)調(diào)，影響用戶體驗(yàn)，也是白白浪費(fèi)資源。除此之外，大背景圖的運(yùn)用還有一種方式，叫做擬真設(shè)計(jì)，聽起來可能有點(diǎn)陌生，但是擬真設(shè)計(jì)就是和大背景圖的運(yùn)用相似的一種設(shè)計(jì)，它是指將界面元素設(shè)計(jì)成用戶容易理解的，存在于現(xiàn)實(shí)世界中的實(shí)體。就文學(xué)網(wǎng)站，在書籍閱讀的界面平臺上，不單單是書籍內(nèi)容完整無誤的呈現(xiàn)，它的呈現(xiàn)方式可以像常見的平面媒體帶給讀者的愉悅體驗(yàn)一樣。可以在書籍閱讀的起始部分與結(jié)束部分分別放置圖書原有的封面與封底;可以模仿紙張的材質(zhì)，靈活設(shè)置;可以在文章的正文界面中配合插圖，插圖同文字共同營造書中的獨(dú)特氛圍，插圖的類型可以配合文章的敘述情境進(jìn)行繪制;可以與插畫師合作，共同創(chuàng)造出良好的閱讀環(huán)境，從而提高閱讀質(zhì)量和閱讀效益。

2．2移動互聯(lián)網(wǎng)時代

現(xiàn)在這個時代，智能手機(jī)幾乎是人手一部，而且平板電腦、小型上網(wǎng)本隨處可見。所以說，如今的網(wǎng)頁設(shè)計(jì)已經(jīng)不能只局限在普通電腦的顯示效果上，還要考慮到更多的移動設(shè)備。但是，設(shè)計(jì)適合移動設(shè)備的網(wǎng)站不是去掉大量裝飾，做得簡單易于下載就可以，因?yàn)樗粌H僅是變得簡單，更是要表現(xiàn)出原網(wǎng)站的精華。另外，現(xiàn)在很多網(wǎng)站都推出了屬于自己的方形的條形碼，這種條形碼被稱為QR，全稱就是QuickResponse。這個條形碼就相當(dāng)于一個快捷方式，讓用戶可以方便迅速地打開自己的移動網(wǎng)頁。近幾年來，移動媒體的優(yōu)勢越來越明顯，利用這個優(yōu)勢所做的網(wǎng)頁設(shè)計(jì)也是現(xiàn)在的熱門。

2．3頁面布局設(shè)計(jì)及特效設(shè)計(jì)

以前的網(wǎng)頁設(shè)計(jì)，大部分都類似于書籍和雜志的版面設(shè)計(jì)。而隨著互聯(lián)網(wǎng)等各方面的發(fā)展，現(xiàn)在的設(shè)計(jì)更接近于影片的效果，更注重空間藝術(shù)，現(xiàn)在的網(wǎng)頁設(shè)計(jì)已經(jīng)不再是單純的平面設(shè)計(jì)，而是立體設(shè)計(jì)、空間設(shè)計(jì)，致力于把瀏覽者帶進(jìn)一個現(xiàn)實(shí)的虛擬世界。我們都知道構(gòu)成網(wǎng)站的是網(wǎng)頁，網(wǎng)頁本身也是很多個頁面的總平面，所以說平面設(shè)計(jì)原則同樣也適用于網(wǎng)頁設(shè)計(jì)。但是網(wǎng)頁設(shè)計(jì)的排版又是對平面設(shè)計(jì)的延伸，單獨(dú)考慮平面設(shè)計(jì)原則的話，這樣的網(wǎng)頁設(shè)計(jì)是不能滿足現(xiàn)在瀏覽者的需求的。在網(wǎng)頁特效方面，文學(xué)類網(wǎng)站運(yùn)用的不是很多?，F(xiàn)在是一個注重用戶體驗(yàn)的時代，適當(dāng)?shù)夭捎靡恍┚W(wǎng)頁特效會給網(wǎng)站加分不少。比如說，視差滾動設(shè)計(jì)，讓多層背景以不同的速度移動，形成一種類似于3D的視覺效果，吸引瀏覽者。但是值得注意的是，這種效果不適于導(dǎo)航。

2．4極簡主義的運(yùn)用

極簡主義在早幾年就流行起來了，但是在網(wǎng)頁設(shè)計(jì)方面極簡主義的影響力在近幾年才逐漸大了起來。極簡主義風(fēng)格的網(wǎng)站設(shè)計(jì)，運(yùn)行速度快，用戶體驗(yàn)效果更好，接入也更加容易，所以無論哪一類型的網(wǎng)頁設(shè)計(jì)都可以運(yùn)用，文學(xué)類網(wǎng)站也不例外。但是就目前來說，還沒有哪個國內(nèi)文學(xué)網(wǎng)站嘗試這種極簡主義設(shè)計(jì)，因?yàn)榻酉聛硖岬降奈膶W(xué)類網(wǎng)站設(shè)計(jì)的一大要點(diǎn)，就是豐富的內(nèi)容。但是，極簡主義并不是把內(nèi)容也變得極簡。要知道極簡主義有一個理念，少就是多，簡潔就是豐富。所以說極簡主義只是把不必要的東西去掉，使頁面的每一個元素都和主題統(tǒng)一，用最簡單的元素來傳達(dá)更豐富的信息。

2．5豐富的內(nèi)容

內(nèi)容是一個網(wǎng)站的最有價值的部分，而對于文學(xué)網(wǎng)站來說，豐富的有價值的內(nèi)容比起網(wǎng)站外觀來要重要得多。但是做內(nèi)容的建設(shè)時也要注意幾點(diǎn)，首先，網(wǎng)站的內(nèi)容要和網(wǎng)站的主題一致，不可偏離主題。其次，就是網(wǎng)站內(nèi)容最好是原創(chuàng)內(nèi)容。作為一個文學(xué)網(wǎng)站，不是說拿那些已經(jīng)現(xiàn)有的作品就可以，還要有新的原創(chuàng)文學(xué)，大家沒有看過的文學(xué)作品，這樣才能讓用戶時刻保持對網(wǎng)站的新鮮感。最后，網(wǎng)站的內(nèi)容要定時更新，并不是說有豐富的文學(xué)作品就萬事大吉了，不然一個再好的網(wǎng)站不去更新內(nèi)容，它也是一個死站。而且一般經(jīng)常瀏覽文學(xué)網(wǎng)站的互聯(lián)網(wǎng)用戶對文學(xué)都是很有見解的，所以說作為一個專業(yè)的文學(xué)網(wǎng)站，為他們提供的不僅僅是一個文學(xué)資源庫，更應(yīng)是一個交流平臺，讓他們發(fā)表自己的原創(chuàng)文學(xué)及見解。

3文學(xué)網(wǎng)站中多媒體技術(shù)的運(yùn)用

無論是圖形文字，還是聲音視頻，設(shè)計(jì)者所要考慮的就是怎樣才能使它們以最和諧的方式融合到網(wǎng)頁這面大屏幕里。所以，多媒體技術(shù)的運(yùn)用在這里必不可少?，F(xiàn)在大部分的瀏覽器本身都可以支持在線播放或收聽，比如GIF、JPEG圖形和GIF89a動畫。另外還有一些比較常見的插件，比如ActiveX，它可以播放更多種類的多媒體文件?？傊?，多媒體技術(shù)隨著互聯(lián)網(wǎng)的發(fā)展在網(wǎng)頁設(shè)計(jì)中的運(yùn)用也越來越多，也使瀏覽者能夠體驗(yàn)到更加完美的瀏覽效果。在現(xiàn)今有很多網(wǎng)站設(shè)計(jì)都采用了flash軟件來制作，用flash制作導(dǎo)航界面，隨著鼠標(biāo)的動作可以產(chǎn)生動畫或者聲音，讓網(wǎng)頁更有吸引力。而且制作flash時用的是矢量圖形，它需要的內(nèi)存和存儲空間要比位圖小很多。在網(wǎng)頁設(shè)計(jì)中flash還具有一定的交互性，比如說網(wǎng)站導(dǎo)航欄動畫、圖片展示動畫以及網(wǎng)站注冊和登陸系統(tǒng)等等。在靜態(tài)頁面中，如果用到這些動畫，一定能與瀏覽者有一個很好的互動，也能使網(wǎng)站看起來更加生動有趣。但是整體不可以太花哨，太雜亂，不然會使瀏覽者對該網(wǎng)頁缺乏信任感。當(dāng)然也有一些網(wǎng)站，為了表現(xiàn)自己的與眾不同，使用flash來制作整個網(wǎng)站。而且設(shè)計(jì)制作flash時就已經(jīng)包括網(wǎng)頁內(nèi)所有視聽元素和版式的設(shè)計(jì)，并不會給人眼花繚亂的感覺。這樣的flash網(wǎng)站，給人感覺都十分酷，給瀏覽者一種很特別的感覺，基本上可以完全調(diào)動瀏覽者瀏覽的積極性，同時給瀏覽者一種活躍的心理感受?？傊?，不只是文學(xué)網(wǎng)站的設(shè)計(jì)，所有的的網(wǎng)頁藝術(shù)設(shè)計(jì)都需要大膽創(chuàng)新，需要不斷地完善和突破，從而達(dá)到網(wǎng)絡(luò)技術(shù)與藝術(shù)設(shè)計(jì)的完美結(jié)合，讓瀏覽者獲得最佳的閱讀體驗(yàn)。

參考文獻(xiàn):

［1］王曉峰，焦燕．網(wǎng)頁美術(shù)設(shè)計(jì)原理及實(shí)戰(zhàn)策略［M］．北京:清華大學(xué)出版社，2009:8．

［2］張新偉．網(wǎng)頁經(jīng)典配色藝術(shù)［M］．北京:電子工業(yè)出版社，2009:6．

［3］鄭國強(qiáng)．網(wǎng)頁設(shè)計(jì)與配色實(shí)例解析［M］．北京:清華大學(xué)出版社，2012:6．

［4］張磊．專業(yè)色彩搭配手冊:網(wǎng)頁配色［M］．北京:北京希望電子出版社，2011:11．

［5］劉鵬．淺談網(wǎng)頁色彩的編排設(shè)計(jì)［J］．科技創(chuàng)新與應(yīng)用，2012，(1)．

［6］李立偉．淺談網(wǎng)頁色彩設(shè)計(jì)［J］．鄭州輕工業(yè)學(xué)院學(xué)報，2007，(2)．

［7］衛(wèi)捷．“留白”理念在現(xiàn)代網(wǎng)頁設(shè)計(jì)中的映射［D］．河南大學(xué)碩士學(xué)位論文，2011．

作者：曹晏禎 單位：鄭州工業(yè)應(yīng)用技術(shù)學(xué)院