- 相關(guān)推薦
淺論視覺(jué)元素在網(wǎng)頁(yè)設(shè)計(jì)中的表達(dá)與運(yùn)用
隨著科學(xué)與技術(shù)的發(fā)展，信息傳播的方式也越來(lái)越多樣化，除了傳統(tǒng)的紙質(zhì)媒介，互聯(lián)網(wǎng)和移動(dòng)設(shè)備越來(lái)越成為人們生活與工作不可或缺的部分。界面設(shè)計(jì)，UI設(shè)計(jì)這些新興名詞漸漸進(jìn)入大家的視野，成為互聯(lián)網(wǎng)時(shí)代的調(diào)味劑。90年代中后期出現(xiàn)了許多新技術(shù)，如java語(yǔ)言，動(dòng)態(tài)HTML，F(xiàn)LASH以及虛擬現(xiàn)實(shí)造型語(yǔ)言等技術(shù)，使網(wǎng)頁(yè)設(shè)計(jì)變得更為生動(dòng)和精彩。網(wǎng)頁(yè)的版面布局可以說(shuō)是網(wǎng)頁(yè)設(shè)計(jì)中的一個(gè)關(guān)鍵環(huán)節(jié)，與網(wǎng)站性質(zhì)貼切吻合的版面布局，不但會(huì)給初次瀏覽者良好的第一印象，同時(shí)還能最大程度地宣傳網(wǎng)站自身形象，明確網(wǎng)站運(yùn)營(yíng)宗旨。網(wǎng)頁(yè)設(shè)計(jì)中包含了文字、圖片與圖形、色彩這三大塊視覺(jué)元素，它們之間的組合與變化形成了豐富多彩的頁(yè)面效果。任何視覺(jué)圖形或文字信息，都可以簡(jiǎn)化或趨近于點(diǎn)、線、面的視覺(jué)元素.文字作為頁(yè)面設(shè)計(jì)中的點(diǎn)，圖片和圖形作為線，色彩作為面，三者相輔相成。
網(wǎng)頁(yè)設(shè)計(jì)中的文字主要分為標(biāo)題文、正文、輔助文字這三大類(lèi)，優(yōu)秀的文字排版適合于各種情境下的設(shè)計(jì)，能夠保持良好的可讀性與識(shí)別性。
圖片圖形在網(wǎng)頁(yè)設(shè)計(jì)中占有很大的比例，視覺(jué)沖擊力相對(duì)同等面積的文字強(qiáng).但這并非表明語(yǔ)言或文字表現(xiàn)力可以忽略，而是應(yīng)使圖片在視覺(jué)信息傳達(dá)上能輔助文字，幫助理解.因?yàn)閳D片能具體而直接地把信息內(nèi)容高素質(zhì)、高境界地表現(xiàn)出來(lái)，使本來(lái)平淡的事物變成強(qiáng)而有力的訴求性畫(huà)面，體現(xiàn)出更強(qiáng)烈的創(chuàng)造性.圖片在版面構(gòu)成要素中，充當(dāng)著形成獨(dú)特畫(huà)面風(fēng)格和吸引視覺(jué)關(guān)注的重要角色，具有烘托視覺(jué)效果和引導(dǎo)閱讀兩大功能。隨著科技的進(jìn)步，圖片的呈現(xiàn)方式由原來(lái)靜態(tài)的，幻燈片式的演變到了動(dòng)態(tài)圖形的插入;視頻類(lèi)的版塊，從聽(tīng)覺(jué)，視覺(jué)上刺激體驗(yàn)者，而不再是千篇一律的框架式布局，有效地防止用戶出現(xiàn)審美疲勞。色彩元素在網(wǎng)頁(yè)設(shè)計(jì)中同樣占據(jù)著非常重要的地位，是最先也是最持久地反映和代表網(wǎng)站風(fēng)格的視覺(jué)元素.它是調(diào)適瀏覽者視覺(jué)心理、引起受眾注意的重要手段之一。不同色調(diào)的網(wǎng)頁(yè)設(shè)計(jì)給觀者帶來(lái)的視覺(jué)感受也不同，色彩的表達(dá)使整體設(shè)計(jì)變得更加的生動(dòng)和有趣，能很好地烘托氣氛，給觀者強(qiáng)烈視覺(jué)上的刺激。
下面我從四大類(lèi)型的網(wǎng)站來(lái)分析視覺(jué)元素在網(wǎng)頁(yè)設(shè)計(jì)中的表達(dá)方式與特征。
一、兒童游戲類(lèi)
這一類(lèi)的網(wǎng)站在視覺(jué)風(fēng)格上比較輕松活潑，具有趣味性。擺脫了網(wǎng)站固有的框架模式，除了動(dòng)畫(huà)和涂鴉，設(shè)計(jì)師采用了視差滾動(dòng)的手法，所謂視差滾動(dòng)，是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，從而帶來(lái)出色的視覺(jué)體驗(yàn)。作為當(dāng)下網(wǎng)頁(yè)設(shè)計(jì)的熱點(diǎn)趨勢(shì)，越來(lái)越多的網(wǎng)站應(yīng)用了這項(xiàng)技術(shù)。尤其是在以插畫(huà)為主的頁(yè)面設(shè)計(jì)中體現(xiàn)突出，經(jīng)�？吹皆O(shè)計(jì)師運(yùn)用這種鼠標(biāo)滾動(dòng)式的效果來(lái)增加網(wǎng)頁(yè)與讀者的互動(dòng)和趣味性，較適合大畫(huà)幅的背景墻與大場(chǎng)景的表達(dá)。
關(guān)于游戲設(shè)計(jì)的網(wǎng)站，大膽的撞色和明亮的色塊是這款設(shè)計(jì)比較突出的表達(dá)方式，營(yíng)造出活潑生動(dòng)的氛圍。網(wǎng)頁(yè)使用了視差滾動(dòng)的方式，從上到下依次展現(xiàn)畫(huà)面。導(dǎo)航的呈現(xiàn)方式采用了地圖式的轉(zhuǎn)換，這種導(dǎo)航方式稱(chēng)之為路線引導(dǎo)，就像故事中的線索一樣，給讀者引出一條瀏覽路線。這種瀏覽方式與網(wǎng)站的主題十分契合，好像讓體驗(yàn)者身臨其境，已經(jīng)融入在游戲當(dāng)中了。文字方面，設(shè)計(jì)師采用了自己獨(dú)特設(shè)計(jì)的字體代替標(biāo)準(zhǔn)印刷體，讓設(shè)計(jì)更加獨(dú)特耐看。整體上看設(shè)計(jì)以圖為主，文字內(nèi)容并不多，設(shè)計(jì)師主要從審美性和趣味性著手進(jìn)行創(chuàng)作。
二、商業(yè)類(lèi)網(wǎng)站
商業(yè)網(wǎng)站以展示產(chǎn)品為主，大多采用圖片輪播的形式， 會(huì)省略掉一些繁瑣的裝飾，用極簡(jiǎn)主義的形式突出產(chǎn)品，使讀者在最短的時(shí)間了解產(chǎn)品的屬性，圖片的質(zhì)量在此類(lèi)型的網(wǎng)站就尤為重要。在網(wǎng)頁(yè)的視覺(jué)元素中，圖片占據(jù)了大部分空間，對(duì)圖片的處理能力也是設(shè)計(jì)師能力的檢驗(yàn)。圖片的大小對(duì)比，疏密對(duì)比，以及色調(diào)是否匹配整體網(wǎng)站風(fēng)格等，這些都是不可忽略的視覺(jué)元素。關(guān)于首飾展示的網(wǎng)站，整體的畫(huà)面元素并不多，除了醒目的大標(biāo)題，就是產(chǎn)品的展示區(qū)域。在導(dǎo)航的形式上也采用最基本的全站式導(dǎo)航和輔助式導(dǎo)航。該導(dǎo)航系統(tǒng)設(shè)計(jì)簡(jiǎn)潔明了，布局清晰。整體框架結(jié)構(gòu)采用的網(wǎng)格式結(jié)構(gòu)，將產(chǎn)品進(jìn)行了有效的分類(lèi)。
三、電子商務(wù)類(lèi)
這類(lèi)網(wǎng)站最顯著的視覺(jué)特征是信息量大，內(nèi)容繁雜。最突出的視覺(jué)元素是文字和文本，大的標(biāo)題和小的副標(biāo)題。內(nèi)容排的比較滿，圖形比較繁雜，大的廣告語(yǔ)是吸引用戶的主要手段。在視覺(jué)元素中色彩采用統(tǒng)一的色調(diào)，很好地保持了視覺(jué)一致性。對(duì)于商務(wù)類(lèi)網(wǎng)站來(lái)說(shuō)，保持品牌的一致性能更好地讓客戶有信任感，統(tǒng)一的設(shè)計(jì)和統(tǒng)一的主題能夠增強(qiáng)網(wǎng)站的品牌識(shí)別性，這樣更容易讓用戶記住和方便使用，讓用戶產(chǎn)生強(qiáng)烈的印象并且有舒適感。這類(lèi)網(wǎng)站在審美性上相對(duì)弱一些，主要是功能性主導(dǎo)。
淘寶網(wǎng)的主頁(yè)，整體基調(diào)采用暖紅，這也是近年來(lái)商業(yè)用色的主流趨勢(shì)。排版整體感覺(jué)分類(lèi)清晰、易于操作。導(dǎo)航的方式采用了水平式和垂直式，水平式為主導(dǎo)航，垂直式為副導(dǎo)航�？傮w框架結(jié)構(gòu)分類(lèi)清晰，適應(yīng)于大眾消費(fèi)人群。文字元素方面也是采用的基本字體，沒(méi)有太多花哨的裝飾字體，讓消費(fèi)者在最短的時(shí)間內(nèi)檢索到需要的產(chǎn)品。
四、個(gè)人品牌類(lèi)
這類(lèi)網(wǎng)站的特點(diǎn)就是設(shè)計(jì)師發(fā)揮的空間比較大，內(nèi)容形式多種多樣。個(gè)人類(lèi)網(wǎng)站往往向個(gè)性化的方向打造，引入多媒體技術(shù)，從視覺(jué)、聽(tīng)覺(jué)上給用戶留下深刻印象，比較突出個(gè)性化設(shè)計(jì)，強(qiáng)調(diào)與眾不同。從靜態(tài)的表現(xiàn)方式到動(dòng)態(tài)的視覺(jué)傳達(dá)，從二維的圖形到三維的動(dòng)畫(huà)效果，從具象的圖片到抽象的概念表達(dá)，科學(xué)和技術(shù)的進(jìn)步給了設(shè)計(jì)師更大的發(fā)揮空間和想象力。
一個(gè)創(chuàng)意工作室的網(wǎng)站，設(shè)計(jì)師大膽的將主界面設(shè)計(jì)成一個(gè)向中心集中心式的抽象圖形，8個(gè)小的圖形組成了導(dǎo)航，鼠標(biāo)滑過(guò)各個(gè)不同板塊的內(nèi)容依次出現(xiàn)。主頁(yè)的風(fēng)格呈現(xiàn)出簡(jiǎn)潔時(shí)尚的動(dòng)感，整體色調(diào)以淡藍(lán)色為主色調(diào)，沒(méi)有太多繁雜的細(xì)節(jié)，簡(jiǎn)潔明了，迎合了當(dāng)下扁平化的設(shè)計(jì)風(fēng)格，圖標(biāo)先行。畫(huà)面整體的視覺(jué)元素比較統(tǒng)一，以圓形圖案為主，將圖形做了視覺(jué)上的效果，用了漸變的方式使主體立體化。
不同類(lèi)型的網(wǎng)站都有其自身不同的表達(dá)方式，有些偏重功能，有些偏向?qū)徝廊の缎裕行﹦t突出個(gè)人風(fēng)格，總而言之，只有將網(wǎng)頁(yè)中的視覺(jué)元素合按照設(shè)計(jì)法則合理的運(yùn)用才能事半功倍。
1.突出頁(yè)面主要元素
第一時(shí)間抓住觀者的眼球，用最簡(jiǎn)練的話說(shuō)清楚。網(wǎng)站設(shè)計(jì)師要怎樣進(jìn)行協(xié)調(diào)平衡，使那些創(chuàng)新網(wǎng)絡(luò)開(kāi)發(fā)者和保守的終端用戶都能感到滿意呢?一個(gè)較好的辦法是，在任何一個(gè)網(wǎng)站只做一個(gè)新嘗試，這樣用戶就可以集中精力理解這唯一的新想法，而網(wǎng)站中的其余部分都應(yīng)是他們平常十分熟悉的。找出一個(gè)亮點(diǎn)的地方做足文章，吸引到讀者。
2.塑造鮮明的視覺(jué)風(fēng)格
根據(jù)網(wǎng)頁(yè)設(shè)計(jì)不同的分類(lèi)可總結(jié)其多方面的特點(diǎn)，從心理學(xué)的角度來(lái)看，界面可分為感覺(jué)、視覺(jué)、觸覺(jué)、聽(tīng)覺(jué)等感覺(jué)和情感兩個(gè)層次;從技術(shù)方面來(lái)說(shuō)網(wǎng)絡(luò)界面具有數(shù)字化，多媒體的技術(shù)特征;從傳播方面來(lái)說(shuō)，網(wǎng)絡(luò)界面具有多元化、個(gè)性化、交互性、快捷性、廣泛性的傳播特征。塑造鮮明的風(fēng)格是網(wǎng)頁(yè)設(shè)計(jì)中設(shè)計(jì)師在設(shè)計(jì)時(shí)很重要的表現(xiàn)手法，往往那些特色主題鮮明的網(wǎng)站更容易被用戶記住。各個(gè)類(lèi)型的網(wǎng)站有其不同的功能和想展示給觀眾的地方，一件東西越具有吸引力，人們看它的時(shí)間就越長(zhǎng)。視覺(jué)效果作為整個(gè)網(wǎng)站的門(mén)面，在設(shè)計(jì)過(guò)程中當(dāng)然應(yīng)該遵守這種法則。要根據(jù)目標(biāo)人群的不同而進(jìn)行有針對(duì)性的設(shè)計(jì)，創(chuàng)建不同的風(fēng)格。例如，比較輕松活潑的網(wǎng)站所吸引的大部分年輕的用戶群，網(wǎng)站在設(shè)計(jì)中大多選用幽默的手法，對(duì)于網(wǎng)站界面的設(shè)計(jì)來(lái)說(shuō)，幽默的畫(huà)面和操作形式能給用戶帶來(lái)瀏覽的樂(lè)趣。相比較而言，對(duì)于一些商務(wù)類(lèi)網(wǎng)站，則界面的結(jié)構(gòu)用色方面就略顯嚴(yán)謹(jǐn)一些，這類(lèi)網(wǎng)站更多的是偏向功能性一些。
3.注重視覺(jué)傳達(dá)的有效性和情感性
好的網(wǎng)頁(yè)設(shè)計(jì)能讓瀏覽者迅速抓住網(wǎng)頁(yè)的重點(diǎn)訴求對(duì)象，對(duì)網(wǎng)頁(yè)的主要內(nèi)容有所了解，提高信息傳達(dá)的效率。在進(jìn)行設(shè)計(jì)的時(shí)候要突出重點(diǎn)，主次分明，明確自己的主頁(yè)要說(shuō)明些什么。在網(wǎng)頁(yè)設(shè)計(jì)中，導(dǎo)航?jīng)Q定著瀏覽者能否順利地使用該網(wǎng)站。一般來(lái)說(shuō)，導(dǎo)航要素應(yīng)直觀明確，符合網(wǎng)站整體風(fēng)格。版式設(shè)計(jì)讓網(wǎng)頁(yè)頁(yè)面中各視覺(jué)信息合理，有序的排列。在與瀏覽者的認(rèn)識(shí)過(guò)程的心理順序和思維發(fā)展的邏輯一致的基礎(chǔ)上，根據(jù)信息的主次(即傳達(dá)的重點(diǎn))合理布局，確定各元素的順序，設(shè)計(jì)出合理準(zhǔn)確的視覺(jué)流程。注意到這幾點(diǎn)，則能讓網(wǎng)頁(yè)在傳達(dá)信息的過(guò)程中更加有效和快捷。
對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，界面的色彩，板式和風(fēng)格都可以稱(chēng)作藝術(shù)中的形式，如何將這些形式創(chuàng)作成有意味的形式，從而激發(fā)瀏覽者的審美情感，這也是設(shè)計(jì)師當(dāng)下思考比較多的方面。帶有情感化的網(wǎng)頁(yè)設(shè)計(jì)更能拉近設(shè)計(jì)師與體驗(yàn)者的距離，讓用戶會(huì)心一笑，產(chǎn)生共鳴，而并不是僅僅追求視覺(jué)上的華麗與美觀。不管是擬物化的表達(dá)，還是抽象簡(jiǎn)潔的呈現(xiàn)方式，設(shè)計(jì)師都在尋求一個(gè)更能拉近與用戶距離的表達(dá)方式。通過(guò)視覺(jué)元素的不同排列組合，賦予一定的情感在其中，營(yíng)造一個(gè)獨(dú)特的傳媒世界，創(chuàng)造一種愉悅的視覺(jué)環(huán)境，使瀏覽者獲得一種全身心的享受與共鳴。
【淺論視覺(jué)元素在網(wǎng)頁(yè)設(shè)計(jì)中的表達(dá)與運(yùn)用】相關(guān)文章：
關(guān)于傳統(tǒng)文化元素在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用與思考01-26
網(wǎng)頁(yè)設(shè)計(jì)中色彩的運(yùn)用07-10
網(wǎng)頁(yè)設(shè)計(jì)中的文字運(yùn)用07-09
網(wǎng)頁(yè)設(shè)計(jì)中色彩搭配的運(yùn)用03-12
圓形在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用07-21
網(wǎng)頁(yè)設(shè)計(jì)中插畫(huà)的運(yùn)用及風(fēng)格07-14
14例運(yùn)用復(fù)古元素的網(wǎng)頁(yè)設(shè)計(jì)的案例賞析01-15