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