曹琦
(中國國際廣播電臺,北京 100040)
網(wǎng)頁設計中平面視覺元素應用問題的探索與分析
曹琦
(中國國際廣播電臺,北京 100040)
本文研究的是網(wǎng)頁設計中平面視覺元素的應用問題。文章針對文字、圖像、色彩以及版式設計等平面視覺元素在網(wǎng)頁設計中的具體應用問題,分別從以上四個角度對與其相關的網(wǎng)頁設計中的一系列問題進行了探索與分析,希望能夠對網(wǎng)頁設計創(chuàng)新能夠有所啟發(fā)。
網(wǎng)頁設計;平面視覺元素;應用分析;文字;圖像;色彩;版式設計
隨著互聯(lián)網(wǎng)技術的普及和發(fā)展,網(wǎng)絡已經(jīng)成為了當代社會信息傳播的重要方式和人們?nèi)粘=涣鳒贤ǖ闹匾緩?,其已?jīng)逐步滲入了人們工作、生活的各個領域和各個層面。而網(wǎng)頁不僅僅是互聯(lián)網(wǎng)上信息傳遞的一個載體,也是構成互聯(lián)網(wǎng)的基本元素。因此,隨著網(wǎng)絡的普及和發(fā)展,網(wǎng)頁設計作為一個全新的設計領域,已經(jīng)成為了平面設計新的發(fā)展方向之一,如何讓所設計的網(wǎng)頁更具新穎性和可讀性,以獲得最大的視覺傳達功能也成為了設計者關注的一個重點問題。鑒于此,本文就從網(wǎng)頁設計的角度,針對設計過程中的文字、圖像、色彩以及版式設計等平面視覺元素的應用問題進行了簡要的探索與分析。
文字是一種用來記錄語言和事物,并進行思想和情感交流的一種視覺文化符號。在網(wǎng)頁設計的過程中,由于文字在信息傳達方面具有比其他的視覺符號更容易辨識的明確性,因此,文字不但是網(wǎng)頁設計過程中常用的構成元素之一,也是發(fā)揮作用最大的設計元素之一。在網(wǎng)頁設計的過程中,如何對文字進行編排和設計,對網(wǎng)頁的整體風格有著非常重要的影響。通常來說,設計科學、編排合理的網(wǎng)頁文字,能夠更好的傳達所要傳達的信息,而且還能夠通過文字的設計與編排給頁面增加美感,從而在實現(xiàn)信息傳達的滿足人們的審美需求,從而大大提高網(wǎng)頁信息傳達的效果。
概況來說,在網(wǎng)頁設計的過程中,文字的編排設計主要包括字體的選擇和編輯以及文字編排幾個方面。例如:在對文字進行編輯時,可以選擇圖形化的藝術處理方法,這樣不但能夠通過文字來傳達語言本身所包含的信息,還能夠借此以視覺形象的方式來傳遞語言之外的信息。
而具體到文字在網(wǎng)頁設計中的實際應用,則應注意如下幾點原則:一是,匹配性原則。匹配性原則實際上指的就是在進行網(wǎng)頁設計的過程中所選用的文字應與文字的內(nèi)容以及網(wǎng)頁的主題相匹配。也就是說,要根據(jù)網(wǎng)頁的主題內(nèi)容和所要傳達的信息內(nèi)容來科學的設計文字的字體、色彩以及形態(tài)和表現(xiàn)形式,以確保文字的設計與網(wǎng)頁設計的主題和整體風格相匹配。二是,明確性原則。在網(wǎng)頁設計的過程中,文字最為主要的功能在于確保信息的有效傳遞。因此,為了實現(xiàn)這一點,在進行網(wǎng)頁文字設計的過程中,應注意優(yōu)選選用容易識別的文字,而且在進行字體和字形的創(chuàng)意時,同時也應注意其辨識起來的明確性。三是,易讀性原則。因受人們的閱讀習慣及視覺能力的影響,人們在識別過粗、過細的文字形態(tài)時會較為費力,因此,在網(wǎng)頁設計的過程中,應注意避免這樣的情況,以確保文字的易讀性,從而讓瀏覽者閱讀起來輕松愉快。最后是,美觀性原則。進行文字的創(chuàng)意設計目的之一,是為了提高網(wǎng)頁的美觀程度,帶給瀏覽者美的感受。因此,在進行網(wǎng)頁文字的設計時,要始終注意文字編排的節(jié)奏感和韻律感,以及文字與網(wǎng)頁整體之間的對比與和諧,以確保文字設計的美觀性。
在網(wǎng)頁設計的過程中,圖像相較于文字而言更加直觀、形象,而且圖像在造型和色彩等方面均具有較強的注目性,因此,很容易形成視覺信息的中心。而在網(wǎng)頁設計的過程中,如果說文字所表達的信息是理性的,色彩所表達的信息是感性的,那么圖像所包含的則既有感性的形象又有理性的信息。由此可見,圖像在網(wǎng)頁設計的過程中,具有文字和色彩均無法取代的重要作用。
具體到網(wǎng)頁圖像來說,一般網(wǎng)頁圖像所使用的格式為GIF格式或是JPEG格式。其在網(wǎng)頁設計編排中的應用方式則通常有方形圖、退底圖、出血圖以及三種結合使用四種方式,其中:方形圖是網(wǎng)頁圖形最為常見、最為簡潔的一種。在將方形圖應用于網(wǎng)頁設計時,通常會給人以穩(wěn)重、理性和嚴謹?shù)母杏X,但如果過度使用,則會給人以平淡呆板的感覺,如下圖1所示,中國人民大學的網(wǎng)站就利用方形圖很好的突出了穩(wěn)重、理性、嚴謹?shù)奶攸c,而同時又利用大小不同、寬窄不同的方形圖避免了平淡呆板的問題;其次是退底圖。退底圖相較而言圖形更為自由,也更具個性,因此很容易帶給人深刻的印象。將這樣的圖形應用于網(wǎng)頁設計時,會讓網(wǎng)頁的整體風格閑的輕松而活潑,但是如果應用不合理的話,也很容易給人凌亂的感覺;再次是出血圖。出血圖指的是一邊或者幾個邊充滿頁面的圖像。出血圖具有強烈的向外擴張的態(tài)勢,容易給人舒展的感覺,將其應用于網(wǎng)頁設計時,非常有利于情感和動感內(nèi)容的表達。
圖1 中國人民大學官網(wǎng)
在網(wǎng)頁設計的過程中,彩色的頁面相較于單色的頁面來說往往能夠更好的引起瀏覽者的注意和興趣,由此就可以窺見在網(wǎng)頁設計中色彩應用的重要性。
俗話說“遠看顏色近看花”,這一點對于色彩在網(wǎng)頁設計中的應用來說同樣適用。在網(wǎng)頁上,網(wǎng)頁設計所采用的主色彩,往往具有先聲奪人的力量,其應用的科學與否、設計的合理與否,會直接影響到瀏覽者的瀏覽興趣,并能夠通過色彩所帶來的視覺沖擊傳達出相應的情緒力量。因此,在進行網(wǎng)頁設計時,設計者一定要時刻注意思考設計用色帶給人們的感受。
具體來說,在網(wǎng)頁設計過程中進行網(wǎng)頁色彩的搭配與應用時需要注意考慮的問題非常多,而以下兩點則尤為關鍵:首先,在進行色彩選擇和應用時,應注意不同的顏色所蘊含的不同喻意,以盡可能的避免出現(xiàn)顏色誤用的問題。其次,網(wǎng)頁色彩的搭配與應用,應根據(jù)網(wǎng)頁的性質和主題進行合理的選用。例如:暖色一般適用于購物類網(wǎng)站的網(wǎng)頁設計、電子商務網(wǎng)站的網(wǎng)頁設計以及兒童類網(wǎng)站的網(wǎng)頁設計等等,暖色的合理應用有助于突出這些網(wǎng)站商品的琳瑯滿目以及兒童網(wǎng)站的活潑、溫馨特性;而冷色則一般適用于高科技網(wǎng)站的網(wǎng)頁設計或者是學術類網(wǎng)站的網(wǎng)頁設計,能夠借此很好的突出網(wǎng)頁嚴肅、穩(wěn)重的風格和特點。
在進行網(wǎng)頁設計的過程中,版式設計實際上就是根據(jù)網(wǎng)頁的內(nèi)容而和主題,將網(wǎng)頁頁面上的諸多構成要素,進行關聯(lián)和配置,從而將網(wǎng)頁整體的設計意圖和設計風格表現(xiàn)出來的一種方式。科學的版式設計不但能夠讓網(wǎng)頁上的文字、圖像、色彩等元素實現(xiàn)有機的結合,以提升頁面的美觀度、凸顯網(wǎng)頁的風格特色,還能夠帶給網(wǎng)頁瀏覽者一個更為流暢的視覺體驗。
在網(wǎng)頁設計中,版式設計的常用類型主要有骨骼型版式設計、滿版型版式設計、分割型版式設計、中軸型版式設計、曲線型版式設計、傾斜型版式設計、對稱性版式設計、焦點型版式設計、三角型版式設計以及自由型版式設計等十種版式設計類型,這些版式設計類型各有特色。其中骨骼型的版式設計有助于網(wǎng)頁呈現(xiàn)和諧和理性的特點;滿版型版式設計則有助于凸顯網(wǎng)頁舒展大方的特征;分割型版式設計的網(wǎng)頁則較為自然;中軸型版式設計的網(wǎng)頁特點則較為穩(wěn)定和含蓄;曲線型版式設計的網(wǎng)頁常常帶有一定的韻律感與節(jié)奏感;傾斜型的網(wǎng)頁版式設計則帶有強烈的不穩(wěn)定感或是動感;焦點型版式設計的網(wǎng)頁則有助于凸顯強烈的視覺效果;三角型版式設計的網(wǎng)站則根據(jù)所采用的具體三角型有一定的不同:正三角有助于突出穩(wěn)定性、倒三角有助于突出動感、而側三角則是穩(wěn)定與動感兼具;最后采用自由型版式設計的網(wǎng)頁,則往往突出的是輕松活潑、輕快愉悅的特點。設計者在進行網(wǎng)頁的版式設計時可以根據(jù)這些網(wǎng)頁版式設計類型的特點,針對設計的內(nèi)容和主題進行合理的選擇。
[1]郭菲.網(wǎng)頁設計中的人性化設計[A].2006年中國機械工程學會年會暨中國工程院機械與運載工程學部首屆年會論文集[C].2006.
[2]孫利,吳儉濤.利用色彩營造網(wǎng)頁形象時需關注的幾點問題[A].色彩科學應用與發(fā)展——中國科協(xié)2005年學術年會論文集[C].2005.
[3]楊振華.網(wǎng)頁視覺設計的審美法則及其應用[J].太原城市職業(yè)技術學院學報.2007(01).
[4]孫夢燦.從《css禪意花園》談對于藝術設計學科中的網(wǎng)頁設計的一些思考[J].包裝世界.2011(03).
J05
A
1005-5312(2014)02-0052-01