Web界面設(shè)計.doc

1100310120 潘飛達(dá) Web界面設(shè)計 一 實(shí)驗(yàn)?zāi)康暮鸵?) 熟悉Web站點(diǎn)的信息交互模型和結(jié)構(gòu) 2)熟悉Web界面設(shè)計的基本思想和原則 3)掌握Web界面設(shè)計的工具和技術(shù) 二 預(yù)備知識Web界面設(shè)計是人機(jī)交互界面設(shè)計的一個延伸，是人與計算機(jī)交互的演變。Web界面設(shè)計與站點(diǎn)外觀直接相關(guān)，站點(diǎn)的界面外觀是否友好直接關(guān)系到是否能吸引人的關(guān)注。人性化的設(shè)計是Web界面設(shè)計的核心，如何根據(jù)人的心理、生理特征，運(yùn)用技術(shù)手段，創(chuàng)造簡單、友好的界面，是Web界面設(shè)計的重點(diǎn)。 (1) Web信息交互模型 模型涉及到信息的三種類型1)數(shù)據(jù)：當(dāng)一條信息被反復(fù)、簡單的提供時稱為數(shù)據(jù)，比如機(jī)票價格。2)復(fù)雜信息：而用來敘述事件時稱為復(fù)雜信息，如多媒體信息。3)過程性信息：在信息有明確目標(biāo)，并相互作用時稱為過程性信息，如在線練習(xí)、在線測試等。 模型涉及到信息的兩種特性：1)動態(tài)性：信息在不斷的變化，具有動態(tài)性；2)一致性：信息元素的組織方式具有一致性 (2)Web信息設(shè)計模型 設(shè)計模型中要考慮到信息的兩個方面：1)第一是應(yīng)該呈現(xiàn)或略去什么信息。2)第二個方面指的是信息該如何被表現(xiàn)。 (3)Web界面設(shè)計基本原則 1) 了解瀏覽者的心理狀態(tài) 2) 內(nèi)容與形式的統(tǒng)一 3) 減少瀏覽層次 4) 特點(diǎn)明確 5) 統(tǒng)一整體的形象 6) Web界面設(shè)計的3C原則 (4)Web界面概要設(shè)計 1)Web界面框架設(shè)計：Web網(wǎng)站規(guī)劃 、建立原型系統(tǒng)、詳細(xì)設(shè)計、正式實(shí)施2)Web界面的內(nèi)容與風(fēng)格的設(shè)計:網(wǎng)站內(nèi)容設(shè)計的原則、Web界面的風(fēng)格3)Web界面設(shè)計的語言與文化：網(wǎng)站應(yīng)設(shè)置多語言選擇，在網(wǎng)站設(shè)計和建設(shè)中進(jìn)行跨文化研究 (5)Web界面設(shè)計要素 n Web界面布局n Web界面的色彩 n Web界面的字體 n Web界面的動畫與多媒體 n Web界面的導(dǎo)航 (6)Web界面設(shè)計技術(shù)與工具 主要的技術(shù)包括超文本標(biāo)記語言HTML、客戶端腳本語言JavaScript、JavaApplet、服務(wù)器端腳本語言。 3、 實(shí)驗(yàn)內(nèi)容1、選擇界面設(shè)計工具：Dreamweaver ，輔助工具Photoshop 2、設(shè)計內(nèi)容：糗事百科網(wǎng)頁本網(wǎng)站內(nèi)容充實(shí)，在主頁的設(shè)計上運(yùn)用了模板，框架等。分頁面上運(yùn)用了導(dǎo)航條。專業(yè)機(jī)構(gòu)的研究表明，彩色的記憶效果是黑白的3.5倍，所以網(wǎng)站要色彩豐富。本網(wǎng)站的底色為淺棕色，配以白色和棕色的文字，色彩搭配非常適宜。 在導(dǎo)航條中，鏈接處顯得簡單明確，分類合理，讓人一目了然。整個界面簡單大氣，毫無冗余和凌亂之感，十分賞心悅目。3、Web網(wǎng)站設(shè)計的原則：（1）簡潔。因?yàn)樽龅氖且孕υ挒橹黝}的網(wǎng)站，所以特點(diǎn)鮮明，導(dǎo)航放在網(wǎng)頁的最上方，版本及設(shè)計者信息放在網(wǎng)站最下方，所用的字體為微軟雅黑，整體的顏色淺棕色，頁面上所有的元素都有明確的含義和用途。（2）一致性。各個頁面都使用相同的頁邊距、文本，圖形之間使用相同的間距；主要圖形、標(biāo)題和符號旁邊留下相同的空白，在每頁都放有導(dǎo)航圖標(biāo)。頁面中的每個元素與整個頁面以及網(wǎng)站的色彩和風(fēng)格上保持了一致，圖標(biāo)都采用了相同的設(shè)計風(fēng)格。文字的顏色同圖像保持了一致。 此網(wǎng)站的目的是建立一個笑話網(wǎng)站主頁，主要目的是進(jìn)行發(fā)帖，讓用戶瀏覽信息，所以網(wǎng)