Web界面設(shè)計(jì).doc

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