人機交互實驗報告

實驗三Web界面設(shè)計一實驗目的和要求1） 熟悉Web站點的信息交互模型和結(jié)構(gòu)2） 熟悉Web界面設(shè)計的基本思想和原則3） 掌握Web界面設(shè)計的工具和技術(shù)二預備知識Web界面設(shè)計是人機交互界面設(shè)計的一個延伸，是人與計算機交互的演變。Web界面設(shè)計與站點外觀直接相關(guān)，站點的界面外觀是否友好直接關(guān)系到是否能吸引人的關(guān)注。人性化的設(shè)計是Web界面設(shè)計的核心，如何根據(jù)人的心理、生理特征，運用技術(shù)手段，創(chuàng)造簡單、友好的界面，是Web界面設(shè)計的重點。（1）Web信息交互模型用來解釋Web的人機界面性質(zhì)的一個模型，它提出網(wǎng)頁是用戶和知識之間的界面。對于信息提供者來說包括信息的表達，對于使用者來說則是信息的獲取。信息的表達與獲取分別受到兩者認知結(jié)構(gòu)的制約。模型涉及到信息的三種類型1） 數(shù)據(jù)：當一條信息被反復、簡單的提供時稱為數(shù)據(jù)，比如機票價格。2） 復雜信息：而用來敘述事件時稱為復雜信息，如多媒體信息。3） 過程性信息：在信息有明確目標，并相互作用時稱為過程性信息，如在線練習、在線測試等。模型涉及到信息的兩種特性：1）動態(tài)性：信息在不斷的變化，具有動態(tài)性；2）一致性：信息元素的組織方式具有一致性（2） Web信息設(shè)計模型是解釋Web人機界面性質(zhì)的另一個模型，是一種研究網(wǎng)頁的信息設(shè)計模型設(shè)計模型中要考慮到信息的兩個方面：1）第一是應該呈現(xiàn)或略去什么信息。2）第二個方面指的是信息該如何被表現(xiàn)。（3） Web界面設(shè)計基本原則了解瀏覽者的心理狀態(tài)內(nèi)容與形式的統(tǒng)一減少瀏覽層次?特點明確?統(tǒng)一整體的形象?Web界面設(shè)計的3C原則Web界面概要設(shè)計Web界面框架設(shè)計：Web網(wǎng)站規(guī)劃、建立原型系統(tǒng)、詳細設(shè)計、正式實施Web界面的內(nèi)容與風格的設(shè)計:網(wǎng)站內(nèi)容設(shè)計的原則、Web界面的風格Web界面設(shè)計的語言與文化：網(wǎng)站應設(shè)置多語言選擇，在網(wǎng)站設(shè)計和建設(shè)中進行跨文化研究Web界面設(shè)計要素Web界面布局Web界面的色彩Web界面的字體Web界面的動畫與多媒體Web界面的導航Web界面設(shè)計技術(shù)與工具要設(shè)計好的Web界面，需要有良好的設(shè)計工具，隨著Internet網(wǎng)絡(luò)的發(fā)展,國際組織和許多互聯(lián)網(wǎng)軟件開發(fā)商制訂了若干標準，開發(fā)了不同的Web界面設(shè)計工具。主要的技術(shù)包括超文本標記語言HTML、客戶端腳本語言JavaScript、JavaApplet、服務器端腳本語言。頁面編輯器主要包括：1)MicroSoft公司的Frontpage；2)Macromedia公司的Dreamweaver，Dreamweaver對于動態(tài)網(wǎng)頁的支持特別好，可以輕而易舉地做出很多眩目的互動頁面特效，Dreamweaver與Flash、Firework并稱為Macromedia的網(wǎng)頁制作三劍客。輔助工具主要包括：1)AceHTMLPro6.0一全功能的HTML&JavaScript編輯器；2)AntennaWebDesignStudio—強大的可視化網(wǎng)頁設(shè)計軟件；3)EasyHTML—簡單的所見即所得的HTML編輯器，有固定、類似瀏覽器的界面；4)EasyWebEditor一是一個Web發(fā)布工具，允許不了解HTML而在所見即所得環(huán)境中編輯Web網(wǎng)頁。三實驗內(nèi)容與步驟（一） 實驗內(nèi)容：要求根據(jù)Web界面設(shè)計的原則（簡潔、一致性、對比度），進行Web界面規(guī)劃、概要設(shè)計和設(shè)計要素的選擇，利用一種界面設(shè)計工具 （Dreamweaver/Frontpage）完成網(wǎng)頁設(shè)計。（二） 實驗步驟：1） 選擇一種界面設(shè)計工具，并熟悉它；2） 針對一個具體的網(wǎng)站（學校、個人、公司）設(shè)計應用，進行Web界面規(guī)劃和概要設(shè)計；3） 選擇WEB界面設(shè)計要素，設(shè)計出網(wǎng)頁實驗結(jié)果：下面是我使用Axure制作的一個購物網(wǎng)站的web界面1.主界面界面包含頂部菜單欄、網(wǎng)站logo、左側(cè)商品導航欄、快捷搜索框、商品圖片展示區(qū)、下部商品廣告輪播區(qū)1.購物車界面包含頂部菜單欄、搜索框、購物車詳情頁、結(jié)算按鈕等逅HDMOM益i+l子書宜B6益i+l子書宜B6門=￥157-00?W€'M畚荷開拶衛(wèi)衣-1X?■豐蓋、ip加應喚臧手機売￥&V29.M-i+￥23.00X?…■雜說卿物去鷲風1.商品購買頁面界面包含頂部導航欄、商品圖片展示、商品簡介、價格、商品參數(shù)、購買數(shù)里寺首妄*再蛙》TtiaAlonWslkerAlanWalker^FadedT愉短袖電音AlanWalkerT-Shirt清選剛時懷考也總磐尺寸妄或咨is客眼諂考0?｝輛i述中的身髙桂重和夜衣IMS購實山?左店衣眼均前先相甲JS印?小倔后不支特了天瓷IS由丑換非曙帶i暉的検蛍和趕炭也不軸斶片后再卩單，罠趙咸不競的質(zhì)腋生口怖￥128.00尺碼 XS1&D-1.65S165-17GHL7D-L75L175-163XL1S2-15D曲蚩 1 +申庫存3UO3M)卞一頁1.支付頁面界面包含頂部導航欄,待支付商品詳情、支付步驟提示等U丙