電子設計工程有關網頁界面的視覺導向設計 推薦本站核心電子雜志：《電子設計工程》是1993年創(chuàng)刊，原名《國外電子元器件》，主要介紹具有較高學術水平的、電子領域相關的理論、技術、方法的專業(yè)性技術期刊。國內刊號CN：61-1477/TN，國際刊號ISSN：1674-6236。主要介紹當前比較先進的國內外電子技術、元器件技術及其應用的科學技術類期刊，主要囊括電源技術應用、工業(yè)自動化、網絡與通信工程、測控與儀器儀表、圖像與多媒體技術、汽車電子、消費類電子、嵌入式系統(tǒng)、信息安全以及計算機應用等領域。

　　摘 要:界面設計是一個復雜的有不同學科參與的工程｡網頁界面的設計當中應該注重的視覺導向設計,其中要使瀏覽該網頁的用戶在該網站中的任何位置,都能夠清楚的找到指引方向的標識物,并通過頁面上的圖形､符號､顏色､多媒體､文字標識物等元素所承載的信息,準確､順利抵達目的地,并使各頁面之間的相互跳轉的通過導向系統(tǒng)變得合理有序｡��

　　關鍵詞:電子設計工程,網頁界面,視覺導向,界面設計

　　用戶界面設計是屏幕產品的重要組成部分｡界面設計是一個復雜的有不同學科參與的工程,認知心理學､設計學､語言學等在此都扮演著重要的角色｡界面設計有以下幾個基本的準則:保持界面的一致性､滿足不同目標用戶的創(chuàng)意需求､用戶界面友好性､圖標識別平衡性､圖標功能的一致性､建立界面與用戶的互動交流｡這些原則放在網頁界面設計中來看,其實是一個解決如何引導用戶如何去瀏覽網頁的問題,它就是對于用戶的視覺導向的一種設計｡ 導向設計這個概念常見于環(huán)境藝術設計當中,做為一種環(huán)境的指引和導向的設計,如城市導向設計､放在軟件設計當中常見名稱為目標導向設計｡導向設計可從兩個領域來劃分:一是從視覺傳達角度來研究,關注的是如何有簡潔而醒目的圖形符號來表達準確的含義,這種視覺語言是不分國界的;二是從環(huán)境藝術設計角度來研究,主要包括材質､外觀､位置､藝術表現(xiàn)等因素,而且使圖形符號融入整個環(huán)境的氛圍中去｡這里我們所說到的是指在網頁界面的設計當中應該注重的視覺導向設計,其中要使瀏覽該網頁的用戶在該網站中的任何位置,都能夠清楚的找到指引方向的標識物,并通過頁面上的圖形､符號､顏色､多媒體､文字標識物等元素所承載的信息,準確､順利抵達目的地,并使各頁面之間的相互跳轉的通過導向系統(tǒng)變得合理有序｡在網頁當中,視覺導向設計的目的在于準確把握用戶的心理活動及一般視覺轉向,一定要明確用戶“從那里來,到那里去”｡對于網頁界面設計中的視覺導向設計出發(fā)點是基于用戶的需求導向出發(fā)的,怎么樣才算是從用戶的需求出發(fā)呢?在這里從以下幾點來看:

　　1 頁面布局的合理與統(tǒng)一��

　　需要考慮網頁布局的框架的合理與統(tǒng)一｡一般網頁的布局設計方法是一種上下框架結構式,通常上方為導航條,或者動態(tài)的公司企業(yè)形象､廣告區(qū)域｡下方為正文､內容部分(也有在下方為導航,上方為內容等)｡還有企業(yè)網站較喜歡采用的二分欄式布局,或叫作左右結構式｡這是一種清晰的分列兩旁的框架結構,一般左側是導航條,有時最上方會有一個小的標題或標志,右側是正文､內容部分或者公司企業(yè)形象展示｡而大中型企業(yè)比較喜歡的一般是上左右布局式的框架式樣｡這種類型框架特征是通常在網頁界面的上方設置為主要的菜單導航條,左側為點擊出現(xiàn)的細分欄目導航條,下方為較主要的欄目及小廣告等,右側為內容區(qū)域｡對于較為大型的企業(yè)､電子商務､政府網站､教育機構上左中右結構式又稱為3分欄布局式,,也是較常見的結構式｡同上左右框架式稍有區(qū)別的是中間部分為內容區(qū)域,右側則是該網站較重要的內容導航區(qū)域,或是登錄､搜索區(qū)域､小廣告等｡網頁界面的布局設計沒有一定的絕對的結構框架形式,可以說都是根據(jù)網站性質的開發(fā)需要､根據(jù)網站所表現(xiàn)的內容以及想要傳達的信息考慮,然后選擇適合表現(xiàn)､適合傳播､適合開發(fā)等這些因素條件的能夠體現(xiàn)網站內容及主題的這樣一種布局形式,并在整個設計中主要是一個——從用戶出發(fā)､考慮界面與用戶交互角度出發(fā),引導用戶的視覺重要因素｡��

　　要考慮到頁面尺寸的大小對用戶瀏覽的影響｡影響網頁頁面尺寸的因素有2個,一個主要的是顯示器大小及分辨率,另一個是用戶使用的瀏覽器｡網頁是通過計算機的顯示器來實現(xiàn)最終顯示的,不同的人群又是使用著不同的顯示器的｡目前我們在對網頁界面進行設計的時候的頁面尺寸基本上能夠適合1024×768及1440×900這兩個分辨率就可以了,另外,關注和研究顯示器的發(fā)展方向也必然是做好網頁界面的必修課之一｡��

　　用戶使用的瀏覽器也是影響頁面尺寸的因素之-｡因為不同的瀏覽器會有不同的界面設計,而其中的工具條基本上都要占部分屏幕空間,有的瀏覽器占據(jù)的空間要大,有的要小,所剩余的空間才是網頁的展示面積｡目前一般常用的尺寸是:分辨率在800×600的情況下,頁面寬度應保持在778以內,就不會出現(xiàn)水平滾動條,高度視版面內容決定,全屏在778×432｡分辨率在1024×768的情況下,頁面寬度應保持在1002以內,就不會出現(xiàn)水平滾動條,高度視版面內容決定,全屏在1002×600｡由于以上尺寸是在常規(guī)使用的瀏覽器與工具欄的適合尺寸,考慮去掉滾動條及瀏覽器的其他必須面板｡所以如大家在制作中最好恢復默認的瀏覽器工具欄,這樣與網頁最終設計的作品的差別就不會太大｡��

　　如上所述,頁面尺寸是不是就只能控制在一定的范圍之內呢?不是,我們可以通過兩種增加頁面內容和尺寸的辦法,一個是向下拖動頁面,一個是左右拖動頁面｡但是這種辦法有一定的限制性,從用戶使用的角度出發(fā)的話,在一般的情況之下,除非你的頁面內容安排絕對能夠吸引用戶能夠引導用戶去瀏覽,否則請不要讓頁面的拖動超過三屏(一屏為顯示器屏幕的顯示范圍)｡但是如果內容實在是非常多,最好能夠在頁面上做一定的方便視覺導向的頁面內部鏈接,充分考慮及把握用戶期望､需要以及動機,做到方便瀏覽｡��

　　考慮頁面的整體設計對用戶的心理影響｡我們常說,對于事物的第一印象是非常重要的,網頁的界面整體造型是就是給予瀏覽者的第一印象｡在這里說到的網頁的界面整體造型指的是界面上出現(xiàn)的視覺元素所組成的一個主體的單形形態(tài),如幾何形體､有機形體､無規(guī)則形體等｡不同的形態(tài)會帶給人們不同的視覺感受､心理感受,這也是我們在構成學上常常提到形態(tài)本身具有的性格特征,如幾何形體具有規(guī)整､秩序､嚴肅､穩(wěn)定､單純等性格特征,有機形體有著勃勃生機､膨脹､優(yōu)美､彈性等性格特征,而無規(guī)則形體則會有著具有人情味､溫暖感､情趣性等性格特征｡在網頁的界面整體設計中,必然要考慮的不同視覺元素所組成的一個主題的單形形態(tài)所具備的性格特征｡在已有的網頁設計實踐中統(tǒng)計我們可以看到,矩形給瀏覽者的感受是中規(guī)中矩,有規(guī)則,穩(wěn)定,所以絕大部分的政府網頁及教育機構的整體造型都是矩形;圓形帶表著柔和,團結,溫暖,安全等,許多時尚站點喜歡以圓形為頁面整體造型;三角形代表著力量,權威,牢固,侵略等,許多大型的商業(yè)站點為顯示它的權威性常以三角形為頁面整體造型;一些交友類競賽類站點常運用菱形作為頁面整體造型,因為采用菱形代表著平衡､協(xié)調､公平,一些有機形往往常見于一些個人站點中,以彰表個性､突出自我｡

　　2 界面元素的統(tǒng)一��

　　網頁界面中文字是較為主要的元素,各級界面的文字必須要對字體､字號､色彩､行距､字間距､排列方式､強調､狀態(tài)等的統(tǒng)一,如主要標題文字､二級標題文字､需要提醒的文字､具有超鏈接的文字､正文､標注文字､段落文字､公告文字等｡其中必須重視的是文字必須是準確的,千萬不能出現(xiàn)錯字別字,否則出現(xiàn)的引導錯誤是可怕的,甚至導致不良的后續(xù)效果｡另外,考慮文字的導向還必須要考慮文字在不同的狀態(tài)下出現(xiàn)的不同要求,前面我們提到具有超鏈接的文字,這種類型的字最起碼都具備正常､鼠標經過､鼠標點擊的3個基本狀態(tài),另外還要考慮到動態(tài)的文字和靜態(tài)的文字要求絕對不同,如果文字是靜止不動的,那么文字的字體就可以相對復雜､顏色可以多變､字號可以相對較小等;反之如果是動態(tài)的文字,如在動畫或在多媒體中出現(xiàn)或文字本身具有動態(tài)的效果,那么文字字體必然不能夠太復雜要簡潔醒目,文字必要要偏大,包括文字內容都要盡可能言簡意賅｡為此我們在網頁的界面設計當中必須要對承載導向的文字進行良好的､謹慎的､多角度的設計｡

　　各級頁面的色調統(tǒng)一,如背景色､主體色､文字色､圖片色､按鈕色等｡人的活動受著思想､心理活動的支配,網頁界面做好的視覺導向,色彩的絕對不容忽視｡例如考慮色彩的情感特征,色彩能夠給人們帶來各種想象､聯(lián)想､印象與會議,使人產生喜怒､哀､樂各種情緒､感情與心境｡從色調的功能上來看其有不同的感情效應,如黃色調光明､充滿希望;紅色調,熱烈且刺激;藍色調,冷靜,崇高與理智｡又如:春､夏､秋､冬季分別可以以嫩綠色､翠綠色､金黃色､灰褐色來象征｡另外有一些已經成為職業(yè)或行業(yè)的標志色,如:軍警的橄欖綠､醫(yī)療衛(wèi)生的白色､高科技的藍色等｡��

　　另外還需統(tǒng)一的提示用詞､統(tǒng)一各級界面位置､按鈕也在窗口的相同的位置｡如你可以在一個列表的項目上雙擊后能夠彈出對話框,那么應該在任何列表中雙擊都能彈出對話框｡還包括圖表的統(tǒng)一､素材的統(tǒng)一等｡

　　3 元素功能性的統(tǒng)一��

　　在網頁界面設計中,各種元素所承載的這些功能都必須有相同的操作方法｡通過對這些元素的功能性的統(tǒng)一,使用戶在瀏覽起網頁來能夠建立起一種的心智模型,讓他們在使用熟練了一個網頁界面后,切換到另外一個網頁界面就能夠很輕松的推測出各種功能,語句理解也不需要費神理解｡這樣可以給瀏覽用戶統(tǒng)一感覺,不覺得混亂,讓整個的瀏覽過程變得輕松自然,方便易用｡我們主要可以從圖標､文字兩個元素來看｡圖形大致可分為具象圖形和抽象圖形兩種類型,具象圖形通過具體的形象來表達和傳達事物信息,它的特點是直接與明了,在網頁界面中常見用于傳達特定與既定的事物｡而抽象圖形則用概括的手法升華圖形,這類圖形具有視覺沖擊效果強､容易識別的特點,常見用于表達注意､警告等含義時,通常是把強烈的色彩和簡潔易懂的抽象圖形結合起來達到最佳傳達效果｡在網頁界面的設計當中,我們往往不是做一個兩個的界面,而是有幾十個甚至上百個的不同層級的界面,在這里我們就必須要把握住圖形功能性表達統(tǒng)一｡但在圖形標志的功能性定義中,也要特別注意避免與已經既有的､既定概念的圖形標志混淆使用｡如已經行業(yè)標準化､國家標準化､國際標準化的圖標符號,向公共信息圖形符號､交通標志､安全標志､ 包裝標志､環(huán)境保護標志､ 家用電器及辦公設備､危險品等級圖形標志､殘疾人用圖形符號｡��

　　網頁界面中另外一個承載功能較多的就是文字元素了｡文字除了本身具有的絕對的說明功能表達功能之外,它還常常在網頁中承載著其他的功能,在界面設計中,必須要考慮讓同個詞語或同個字､同個句子所具備的功能是相同的｡另外還有比較重要的一點的是必須要把點擊過或正在瀏覽的超鏈接具有與未點擊過和未瀏覽過的超鏈接區(qū)分開來,如是文字鏈接,可考慮不同的字體､字號及顏色等;圖形鏈接可考慮采取不同的圖形或者變?yōu)椴豢捎脿顟B(tài)､添加相關的提示等,這樣才有助于瀏覽用戶理解整個的網頁｡��

　　最后,設計一個易于識別的網站導航也是做好視覺導向的一個重點｡到底怎么樣的網頁界面設計可以稱為具有良好的視覺導向設計呢? 優(yōu)秀的網頁界面設計除能夠傳達既定的信息外､美化網頁頁面外,如何讓瀏覽用戶的瀏覽變的更加的便利,如何讓用戶產生信任感, 如何讓用戶覺得完全可以控制, 如何讓網頁界面中的各種元素能夠恰當?shù)嘏c瀏覽用戶產生互動, 使他們能順利地獲取自己需要的部分,那么,我們就可以說這就是優(yōu)秀的網頁界面的視覺導向設計了｡