Web界面設計.doc

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