人機(jī)交互實(shí)驗(yàn)報(bào)告Web界面設(shè)計(jì)

1、實(shí)驗(yàn)三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)造簡單、友好的界面，是Web界面設(shè)計(jì)的重點(diǎn)。（1）Web信息交互模型用來解釋W(xué)eb的人機(jī)界面性質(zhì)的一個(gè)模型，它提出網(wǎng)頁是用戶和知識(shí)之間的界面。對(duì)于信息提供者來說包括信息的表達(dá)，對(duì)于使用者來說則是信息的獲取。信息的表達(dá)

2、與獲取分別受到兩者認(rèn)知結(jié)構(gòu)的制約。模型涉及到信息的三種類型1）數(shù)據(jù)：當(dāng)一條信息被反復(fù)、簡單的提供時(shí)稱為數(shù)據(jù)，比如機(jī)票價(jià)格。2）復(fù)雜信息：而用來敘述事件時(shí)稱為復(fù)雜信息，如多媒體信息。3）過程性信息：在信息有明確目標(biāo)，并相互作用時(shí)稱為過程性信息，如在線練習(xí)、在線測試等。模型涉及到信息的兩種特性：1）動(dòng)態(tài)性：信息在不斷的變化，具有動(dòng)態(tài)性2）一致性：信息元素的組織方式具有一致性（2）Web信息設(shè)計(jì)模型是解釋W(xué)eb人機(jī)界面性質(zhì)的另一個(gè)模型，是一種研究網(wǎng)頁的信息設(shè)計(jì)模型。設(shè)計(jì)模型中要考慮到信息的兩個(gè)方面：1）第一是應(yīng)該呈現(xiàn)或略去什么信息2）第二個(gè)方面指的是信息該如何被表現(xiàn)。（3）Web界面設(shè)計(jì)基本原則了解

3、瀏覽者的心理狀態(tài)內(nèi)容與形式的統(tǒng)一減少瀏覽層次特點(diǎn)明確統(tǒng)一整體的形象Web界面設(shè)計(jì)的3C原則(4)Web界面概要設(shè)計(jì)Web界面框架設(shè)計(jì)：Web網(wǎng)站規(guī)劃、建立原型系統(tǒng)、詳細(xì)設(shè)計(jì)、正式實(shí)施Web界面的內(nèi)容與風(fēng)格的設(shè)計(jì):網(wǎng)站內(nèi)容設(shè)計(jì)的原則、Web界面的風(fēng)格Web界面設(shè)計(jì)的語言與文化：網(wǎng)站應(yīng)設(shè)置多語言選擇，在網(wǎng)站設(shè)計(jì)和建設(shè)中進(jìn)行跨文化研究Web界面設(shè)計(jì)要素Web界面布局Web界面的色彩Web界面的字體Web界面的動(dòng)畫與多媒體Web界面的導(dǎo)航Web界面設(shè)計(jì)技術(shù)與工具要設(shè)計(jì)好的Web界面，需要有良好的設(shè)計(jì)工具，隨著Internet網(wǎng)絡(luò)的發(fā)展國際組織和許多互聯(lián)網(wǎng)軟件開發(fā)商制訂了若干標(biāo)準(zhǔn)，開發(fā)了不同的Web界面

4、設(shè)計(jì)工具。主要的技術(shù)包括超文本標(biāo)記語言HTML、客戶端腳本語言JavaScript、JavaApplet、服務(wù)器端腳本語言。頁面編輯器主要包括：1)MicroSoft公司的Frontpage；2)Macromedia公司的Dreamweaver，Dreamweaver對(duì)于動(dòng)態(tài)網(wǎng)頁的支持特別好，可以輕而易舉地做出很多眩目的互動(dòng)頁面特效，Dreamweaver與Flash、Firework并稱為Macromedia的網(wǎng)頁制作三劍客。輔助工具主要包括：1)AceHTMLPro6.0全功能的HTML&JavaScript編輯器；2)AntennaWebDesignStudio強(qiáng)大的可視化網(wǎng)頁設(shè)計(jì)軟件；

5、3)EasyHTML簡單的所見即所得的HTML編輯器，有固定、類似瀏覽器的界面；4)EasyWebEditor是一個(gè)Web發(fā)布工具，允許不了解HTML而在所見即所得環(huán)境中編輯Web網(wǎng)頁。三實(shí)驗(yàn)內(nèi)容與步驟（一）實(shí)驗(yàn)內(nèi)容：要求根據(jù)Web界面設(shè)計(jì)的原則（簡潔、一致性、對(duì)比度），進(jìn)行Web界面規(guī)劃、概要設(shè)計(jì)和設(shè)計(jì)要素的選擇，利用一種界面設(shè)計(jì)工具（Dreamweaver/Frontpage）完成網(wǎng)頁設(shè)計(jì)。（二）實(shí)驗(yàn)步驟：1）選擇一種界面設(shè)計(jì)工具，并熟悉它；2）針對(duì)一個(gè)具體的網(wǎng)站（學(xué)校、個(gè)人、公司）設(shè)計(jì)應(yīng)用，進(jìn)行Web界面規(guī)劃和概要設(shè)計(jì)；3）選擇WEB界面設(shè)計(jì)要素，設(shè)計(jì)出網(wǎng)頁實(shí)驗(yàn)結(jié)果：下面是我使用Axure制作的一個(gè)購物網(wǎng)站的web界面1.主界面界面包含頂部菜單欄、網(wǎng)站logo、左側(cè)商品導(dǎo)航欄、快捷搜索框、商品圖片展示區(qū)、下部商品廣告輪播區(qū)Xhiduom苗入關(guān)時(shí)相甫1.購物車界面包含頂部菜單欄、搜索框、購物車詳情頁、結(jié)算按鈕等北的亡呈*關(guān)徇車羽品呂空益計(jì)U&Hffi.：=157JO1.商品購買頁面界面