論視覺元素在網(wǎng)站界面設(shè)計(jì)中的構(gòu)成方法

1、論視覺元素在網(wǎng)站界面設(shè)計(jì)中的構(gòu)成方法摘要：關(guān)鍵詞：中圖分類號(hào)：TP393文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：網(wǎng)站界面設(shè)計(jì)指的是對網(wǎng)站中的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)；其中的視覺元素指的是圖片、文字、色彩以及動(dòng)態(tài)視頻等可以被視覺觀察的對象。好的網(wǎng)站界面設(shè)計(jì)不僅是讓軟件變得美觀、操作舒適，更重要的，是要把功能等信息快速、有效的傳達(dá)給受眾。因此，各種視覺元素作為這個(gè)舞臺(tái)上的角色，對網(wǎng)站效果起到關(guān)鍵作用。界面的組織不等于各個(gè)元素簡單拼湊在一起。正如心理學(xué)家、美學(xué)家魯?shù)婪虬⒍骱Ｄ吩谄鋾姓f到的，“凡是格式塔，雖說都是由各種要素成分組成，但不等于各成份之和。 ”研究視覺元素在網(wǎng)站界面設(shè)計(jì)中協(xié)同合作的方法，關(guān)

2、鍵是要從整體角度審視和理解網(wǎng)站的結(jié)構(gòu)，在理解的基礎(chǔ)上讓網(wǎng)頁變得美觀、操作舒適，突出信息傳遞的快速有效性。1.理解網(wǎng)站的結(jié)構(gòu)網(wǎng)站是由彼此獨(dú)立又互相聯(lián)系的網(wǎng)頁組成的。如果把網(wǎng)站比作一本書，每張網(wǎng)頁就如同書中的一頁，兩者在結(jié)構(gòu)上存在一定相似性。但從信息提供的方式看，兩者又是截然不同的，書和雜志的信息為“順序排列”，網(wǎng)站則不然，它允許讀者通過搜索主動(dòng)獲取信息，并可以通過輸入和提交數(shù)據(jù)進(jìn)行反饋，突出互動(dòng)性，這種現(xiàn)象也使網(wǎng)絡(luò)“網(wǎng)”的概念更加名副其實(shí)。認(rèn)識(shí)網(wǎng)絡(luò)媒體的網(wǎng)狀結(jié)構(gòu)可以從兩個(gè)角度入手：1.1 平面的網(wǎng)框架與構(gòu)圖分割網(wǎng)頁需要根據(jù)內(nèi)容進(jìn)行圖文編排和區(qū)域分割，這些分割線有規(guī)律的排布、構(gòu)成網(wǎng)格，就像一張平面

3、的網(wǎng)隱藏于頁面結(jié)構(gòu)之中。分割、疏密、韻律、圖底關(guān)系等適用于印刷媒體的視覺審美原則，在網(wǎng)絡(luò)媒體中也同樣適用。1.2縱深的網(wǎng)網(wǎng)站樹狀結(jié)構(gòu) 網(wǎng)站通過鏈接將頁面和頁面之間的信息相連，構(gòu)成一個(gè)有層級(jí)關(guān)系的網(wǎng)。在這里，頁面層級(jí)有高低，網(wǎng)站的首頁如同大樹的樹干，導(dǎo)航菜單上的每一個(gè)子項(xiàng)就像分出去的枝干一樣向下一級(jí)延伸。結(jié)構(gòu)規(guī)劃直接影響到整個(gè)網(wǎng)站的運(yùn)作效率，網(wǎng)站越大，信息量越多，結(jié)構(gòu)就越復(fù)雜。因此，視覺信息如何組織成為研究的重點(diǎn)對象。既然信息交流是網(wǎng)站設(shè)計(jì)的根本目的，那么信息傳達(dá)的有效性如何實(shí)現(xiàn)？筆者嘗試從視知覺相關(guān)理論中汲取營養(yǎng)，尋找問題的答案。2.視知覺原理的運(yùn)用2.1共同命運(yùn)原則控制頁面風(fēng)格統(tǒng)一好的網(wǎng)站界

4、面設(shè)計(jì)要做到視覺風(fēng)格統(tǒng)一、各個(gè)頁面間關(guān)系清晰，視知覺理論中的“共同命運(yùn)原則”可以指導(dǎo)設(shè)計(jì)者更好的實(shí)現(xiàn)該目標(biāo)。該原則指出，人們對于復(fù)雜信息具有一種認(rèn)知習(xí)慣，即眼睛會(huì)自動(dòng)把相似的圖形劃歸為同一類。色彩、圖形、布局都是控制頁面風(fēng)格統(tǒng)一的重要元素，根據(jù)視知覺原理，各頁面中的視覺元素相似可以表示關(guān)系相近，差異大則表示關(guān)系疏遠(yuǎn)，這種視覺暗示可以幫助瀏覽者更好的了解網(wǎng)站整體脈絡(luò)。以網(wǎng)站The art of sustainable business（）為例 ,同類頁面在導(dǎo)航欄等關(guān)鍵位置使用了同類色，瀏覽者在不查詢網(wǎng)站地圖的情況下，也能隨時(shí)了解自己在網(wǎng)站中所處的位置

5、。2.2主次關(guān)系信息為先，避免喧賓奪主視知覺原理中的“主次關(guān)系”理論表明，假設(shè)人類的視覺系統(tǒng)把視覺刺激分為圖形元素或背景元素，那么前者是中心事物，后者就組成了統(tǒng)一的背景。在海報(bào)設(shè)計(jì)界，日本設(shè)計(jì)師福田繁雄利用這種將圖底主次關(guān)系模糊化而形成的關(guān)系，賦予畫面更大的空間感，形成獨(dú)特的設(shè)計(jì)語言。網(wǎng)站界面設(shè)計(jì)中，主次關(guān)系理論體現(xiàn)在圖、文關(guān)系的處理上。網(wǎng)站不是一幅畫，圖形設(shè)計(jì)再精美也不能夠忽略信息的傳達(dá)，設(shè)計(jì)師需要讓承載信息的文字具備可閱讀性，同時(shí)創(chuàng)造有益于閱讀的視覺條件。這就要求做到以下幾點(diǎn)：（1）背景色與文字顏色拉開距離，背景圖形簡潔，避免文字“隱沒”到背景中；（2）屏幕不方便旋轉(zhuǎn)，非裝飾性文字不要傾斜

6、、倒置；（3）色彩搭配柔和、協(xié)調(diào)，使閱讀時(shí)舒適、不刺眼。以某運(yùn)動(dòng)品牌的網(wǎng)站為例，畫面主體是華麗繁復(fù)的裝飾性插圖，但設(shè)計(jì)師將它們隱藏在深色背景中、只顯示剪影，避免了喧賓奪主，而頁面由此產(chǎn)生巧妙的區(qū)域分割，更將文字內(nèi)容顯得集中，信息傳達(dá)清晰、有效。2.3 格式塔知覺原則“格式塔心理學(xué)”大約發(fā)軔于1921年的德國，主要研究如何將視覺信息組織成為有意義的整體。它在網(wǎng)站界面中的作用是幫助設(shè)計(jì)者實(shí)現(xiàn)圖形、文字等視覺元素更好的交融。(1)閉合原則： 該原則認(rèn)為，人們的眼睛總是傾向于把一組個(gè)體要素感知成為一個(gè)可辨認(rèn)的、整體性的圖案。換言之，人們具有“追求形象完整性”的視覺欲望，給看到的圖形加上本來沒有的信息。

7、比如當(dāng)一根線條或者曲線不完整、不閉合的時(shí)候，人們會(huì)用眼睛使它完整化，成為自己心目中熟悉的樣子。例如一些logo設(shè)計(jì)中沒有勾勒出圖形全部的線條和特征，而是刻意減少線條數(shù)量，讓觀看者參與圖案的完成，加強(qiáng)了設(shè)計(jì)趣味性。這一原則在網(wǎng)站界面設(shè)計(jì)中也可得到應(yīng)用。荷蘭一個(gè)介紹設(shè)計(jì)師及其作品的網(wǎng)站dutch designers（http:/ ）的首頁設(shè)計(jì)就成功利用了該原理導(dǎo)航欄上的深灰色按鈕像百葉窗般上下依次排列，按鈕全部收起、緊密排列時(shí)拼合成一個(gè)大大的數(shù)字“2702”，按鈕被點(diǎn)擊時(shí)下級(jí)菜單會(huì)展開，將這個(gè)拼合的數(shù)字圖案橫向分割開。但即使被分 割，數(shù)字2702仍然可以被瀏覽者辨認(rèn)，它代表的正是該網(wǎng)站下所有設(shè)計(jì)師

8、的人數(shù)。相比直白的寫出“我們規(guī)模龐大”、“已經(jīng)擁有2702位”之類的標(biāo)語，這種有趣且具有互動(dòng)性的編排方式產(chǎn)生了更為醒目、有效的廣告效應(yīng)。(2)對齊原則：對齊原則指出，設(shè)計(jì)中的組成部分應(yīng)該同一個(gè)或者多個(gè)其它組成部分呈直線排列。對齊可以使頁面中的元素產(chǎn)生整齊、互相銜接的感覺，有利于傳達(dá)設(shè)計(jì)美感。排列整齊的文字在視覺上產(chǎn)生區(qū)域分割線，又能成為視覺的導(dǎo)引。網(wǎng)站界面設(shè)計(jì)中，文字對齊可以產(chǎn)生隱形的外框，使得內(nèi)容區(qū)塊化、整體感強(qiáng)烈。(3)黃金比例：黃金比例指的是某一形式中各元素之間的比率，如高比寬的比率，近似于0.618。它在自然界、藝術(shù)和建筑中被廣泛運(yùn)用，如帕特農(nóng)神廟、巴黎圣母院、鸚鵡螺的殼，以及現(xiàn)今蘋果

9、ipod MP3播放器的屏幕和按鍵所占比例等等。它作為一種技巧和規(guī)則，被傳統(tǒng)設(shè)計(jì)領(lǐng)域重視并遵循已久，對設(shè)計(jì)的持久影響力顯而易見。(4)閱讀重心與順序模式： 顯示媒體應(yīng)該分為四個(gè)四分之一：左上角是主視區(qū)，右上角是強(qiáng)潛伏區(qū)，左下角是弱潛伏區(qū)。也就是說，閱讀重心是從左上角引到右下角，右上角其次，左下角最弱。它解釋了為什么網(wǎng)站界面大多采用同一種布局模式：LOGO、導(dǎo)航條放置左上角，常用的搜索功能條放置右上角，最次要的信息則放在頁面底部。因此，當(dāng)設(shè)計(jì)包含大量文本或大量同類型視覺元素時(shí)，可以利用閱讀重心與順序模式這一原理進(jìn)行布局，使版面信息層次清晰、主次分明。3.總結(jié)界面設(shè)計(jì)是一個(gè)多學(xué)科交叉的媒體，研究網(wǎng)

10、站界面設(shè)計(jì)中視覺元素的構(gòu)成方法，可以借鑒視覺心理學(xué)、視覺傳達(dá)設(shè)計(jì)等多領(lǐng)域的研究成果。事實(shí)證明，這種借鑒可以為網(wǎng)絡(luò)界面設(shè)計(jì)在信息傳達(dá)、視覺美化方面添磚加瓦、錦上添花。參考文獻(xiàn)：【1】（美）唐納德A諾曼：設(shè)計(jì)心理學(xué)中信出版社，2003年10月，北京；以及記憶和注意力、使我們變聰明的事物、隱形計(jì)算機(jī)等【2】 （韓）IRI色彩研究所 著，李強(qiáng)華 譯：Web Color Design設(shè)計(jì)師談網(wǎng)頁設(shè)計(jì)配色電子工業(yè)出版社2002年9月，北京【3】 丹涅爾多累斯 著：視覺傳播時(shí)代www網(wǎng)頁的視覺藝術(shù)表現(xiàn)研究中國輕工業(yè)出版社，北京【4】 威廉利德威爾 克里斯蒂娜霍爾登 吉爾巴特勒 著，劉宏照等 譯：最佳設(shè)計(jì)一百細(xì)則（Universal Principles of Design）上海人民美術(shù)出版社，2005年7月第1版，上海