網頁設計思維與 網站導覽列設計.ppt

義守大學98-1學期資訊管理碩士在職專班 人因與資管期末報告 網頁設計思維與 網站導覽列設計 提報大綱 前言 在多姿多彩的網際網路世界中，什麼樣的網頁才能迅速獲得訪問者的青睞？如何才能設計出與眾不同的漂亮網頁? 透過觀察比較可發現，一個優秀的網頁，通常具備豐富的內容、合理的版型、獨特的風格和悅目的色彩。 掌握有關版型風格設計及色彩搭配等方面的知識與方法，透過實踐累積經驗，成為優秀網頁設計師。 網頁版型和風格設計尤其需要設計者具備一定的平面設計知識與審美能力。 網頁設計思維 網頁設計思維 網頁設計思維 網頁設計思維 網頁設計思維 網頁設計思維 網頁設計思維 網頁設計思維 網頁設計思維 網頁設計思維 網頁設計思維 網頁設計思維 網站導覽列設計 結論 版面配置的成功與否，關係網站是否 能夠凝聚人氣，藉由網頁設計思維及 網站導覽列設計的分析，吸引使用者 點擊。 報告擷取各種經典網頁版型格局，提 供從事網頁設計人員掌握網頁版型與 風格技巧，提高創意和審美能力。 Click to edit company slogan . LOGO 指導教授：吳有龍博士 提報學生：碩專一 羅明蘭 學 號：isu9822021g 前言 1 網頁設計思維 2 網站導覽列設計 3 結論 4 Section1 網站的設計流程 1.網站需求分析： (1)一個網站專案的確立是建立在各式各樣 的需求之上，而需求來自用戶實際需求 (2)用戶範圍遍及各領域，必須了解其習慣 技能、知識和經驗，以預測需求 (3)用戶不同的特點使分析複雜化，但初始 計畫不加入工作過程，會遭遇巨大麻煩 2.網站整體風格定位： (1)了解網站類型，確定網站大致風格走向 不同類型網站，風格肯定不盡相同 (2)花時間調查學習各行業之風格，以營造 適合的網站氣氛 (3)用戶能很輕易辨別出何種類型網頁，則 需求分析及風格及成功。 3.網頁的創意設計： (1)電腦繪圖技巧必須爐火純青，某些特定 特定藝術效果必須手繪或掃描始達到 (2)不要熱衷於花樣日益翻新之技術而忘記 優秀設計和清晰表達之重要性 (3)優秀網頁係創意和技術完美結合；有創 意無技術或有技術無創意，作品易空洞 3.網頁的創意設計： (4)不斷探索技術與藝術之間的平衡與結合 是通向成功設計之門唯一捷徑 Section2 網站的內容(視覺及聽覺) 視覺元素 包含文字、字體、圖像、動畫等 不同字體傳達不同 印象： 宋体工整、雋永悅目 黑體肅穆、莊重嚴肅 圓體豐滿、藝術性強 1.文字的字體 字型大小控制頁面形象 略大文字→有力自信 略小文字→纖密緊湊 如： 標題變大→畫面活耀 標題變小→更顯穩重 2.文字的字形 文字變細顯得十分優美 文字變粗顯的很有力量 視覺聯想→細字冷靜 粗字熱情 細字標題→女性風格 粗字標題→男性風格 正文盡量使用標準文字 以提升可讀性 3.文字的粗細 行距本身是具有很強表現 力的設計語言 加寬行距可體現輕鬆情緒 適用娛樂及抒情內容 精心安排行距並存可增強 版面空間層次感及彈性 ThemeGallery is a Design Digital Content Contents mall developed by Guild Design Inc. 4 文 字 行 距 5.文字圖形化 把記號性文字 作為圖形元素 可強化原有效 果 圖像元素 一般指透過攝影獲得的照片 特點是真實直觀，可直接說明事物特徵 圖像佔據面積顯示重要程度 大圖像容易形成視覺焦點，感染力強，常用作突出表現之內容；小圖像則常用來穿插字群中，點綴呼應主題 提高網頁的說服力 增強故事性及提高造型的緊張感；故事性即插圖照片的資訊性，而強烈感可增強說服力 圖片是表達資訊的重要手段 用圖片表示歡迎式網頁中常見的手段，而笑臉是最能表現歡迎情緒的。 動畫元素 網頁中最活耀之元素，對訪問者的吸引力通常勝過純文字內容 不要使用顏色過於鮮豔、變化過於強烈之動畫，以免干擾使用者對資訊獲取效果 考慮網路傳輸情況，控制動畫檔案大小，避免載入時間過久 動畫表現之主題應該貼合網頁的主要內容 Section2 網站的內容(視覺及聽覺) 聽覺元素 包含背景音樂及音效 網頁中適當嵌入音訊能夠充分顯示網頁 的多媒體特性 背景音樂 常用檔案格式為.mid，是一種樂器數位 化格式檔，存儲量很小，適合網路使用 載入音樂是為了觸動使用者神經使其加 深印象，而非為播放音樂而播放 音效 淡入效果和微妙的音效變化可以很容易 引起聽眾興趣