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