资源描述
,Click to edit Master title style,Click to edit Master text styles,Second Level,Third Level,Fourth Level,Fifth Level,*,各類別網頁設計的概念及趨勢,指導老師：吳有龍教授,各類別網頁設計的概念及趨勢指導老師：吳有龍教授,1,一、前言,網頁介面設計的構成要素,版面設計,色彩運用,內容,網頁介面設計的特性,使用的便利性,一貫性,創意性,一、前言網頁介面設計的構成要素,2,二、各類別網頁設計的概念,傳媒,以文字為主，豐富而即時的訊息,版面依訊息主題分類，主頁顯眼處提供即時訊息,廣告與主要內容分離，以不影響可讀性,白色背景、深色文字，減少色彩數量,使用重點色彩強調重要部分,二、各類別網頁設計的概念傳媒,3,二、各類別網頁設計的概念,兒童、遊戲、動漫,繽紛、活潑的色彩、字體、圖片、動畫，喚起人們興趣和好奇心,版面編排禁忌較少，增加創意空間,黑色、白色背景增加插圖效果,符合兒童跳躍式的思維模式,遊戲化、故事化的內容編排,鍵結層級不宜過深、過廣,二、各類別網頁設計的概念兒童、遊戲、動漫,4,二、各類別網頁設計的概念,飛機、汽車,展示寬廣、安全、便利、活力、自由,橫向版面讓視覺更寬闊,黑色、深藍色、深灰色強調工業色彩,暖色系、優雅圖像、柔和音樂增加親和力及感染力。,二、各類別網頁設計的概念飛機、汽車,5,二、各類別網頁設計的概念,電腦、通信,清新、別致的色彩搭配，簡潔、素雅的文字組合。,鮮明圖片、動畫展現有關產品性能及優點,硬體網站強調硬體的精密性、準確性,軟體網站強調軟體使用的便利性,二、各類別網頁設計的概念電腦、通信,6,二、各類別網頁設計的概念,家居、生活,主要以溫馨、幸福、明朗、舒適的氣氛為主,大面積的色塊比流動的線條佳,簡潔的版面、間距較大的文字排列,浪漫氣息的圖片、裝飾圖案,節奏柔和輕音樂,二、各類別網頁設計的概念家居、生活,7,二、各類別網頁設計的概念,建築、室內設計,建築類表現強大、堅固及空間秩序為要點,需表現實際建築材料的質感、力學,強調版面整齊及平衡,室內設計更重視視覺元素，主要運用乾淨、溫暖的配色，表現優雅、都市風格。,二、各類別網頁設計的概念建築、室內設計,8,二、各類別網頁設計的概念,社會、法律,應強調專業、嚴謹、公正、信任,配色以彩度、亮度較低者為主,版面以縱向分割為主,如要擺脫權威形象，應設計溫和、親切頁面，使用曲線和圓形的圖像等。,二、各類別網頁設計的概念社會、法律,9,二、各類別網頁設計的概念,時尚、購物,時尚網站應善用高品質照片,白色背景，可凸顯照片，黑灰色則顯高雅,依標識特性融入畫面設計及配色,購物網站應展示商品圖像及名稱，並製作方便明確的導覽列。,二、各類別網頁設計的概念時尚、購物,10,二、各類別網頁設計的概念,體育,強調健康、速度、高度、充滿朝氣及活力,版面安排較自由、以流暢、動感為主軸,運用生動的圖片及色彩對比以增添活力,可依球隊或運動員設計個性網站,如需提供大量即時資訊，應避免過於雜亂,二、各類別網頁設計的概念體育,11,二、各類別網頁設計的概念,文化、教育,表現富有知識的專業性、開放性及朝氣,色彩以白色為主，搭配黃、藍、草綠色,放置校園風光及活動場景圖片,版面安排應以簡單、整齊為主,二、各類別網頁設計的概念文化、教育,12,二、各類別網頁設計的概念,醫藥、健康,強調信任、親切、清新、溫和,以淡綠、淡紫色為主要配色，搭配暖色系以調和,使用大面積的白色區域，或透明的圖片、色塊,避免使用黑色、深灰色或彩度較低之色彩為背景,二、各類別網頁設計的概念醫藥、健康,13,二、各類別網頁設計的概念,藝術、歷史,依照藝術屬性由強調浪漫及創意，到傳承、懷舊等不同類型,文字資訊較少，提供高品質圖片,展示作品應提供小圖，點選後看到大圖,背景以白色為佳，方便欣賞作品,二、各類別網頁設計的概念藝術、歷史,14,二、各類別網頁設計的概念,影視、娛樂,強調視覺性及自由性,版面、色彩等設計較無禁忌,放置相關主題圖片，以利宣傳,依頻寬置入動畫,二、各類別網頁設計的概念影視、娛樂,15,三、網頁設計的趨勢,from：,Smashing Magazine,凸版印刷風格,三、網頁設計的趨勢 from：Smash,16,三、網頁設計的趨勢,豐富的使用者介面,三、網頁設計的趨勢豐富的使用者介面,17,三、網頁設計的趨勢,PNG透明效果,三、網頁設計的趨勢PNG透明效果,18,三、網頁設計的趨勢,大字體,三、網頁設計的趨勢大字體,19,三、網頁設計的趨勢,替代字體,三、網頁設計的趨勢替代字體,20,三、網頁設計的趨勢,燈箱效果,三、網頁設計的趨勢燈箱效果,21,三、網頁設計的趨勢,多媒體影音,三、網頁設計的趨勢多媒體影音,22,三、網頁設計的趨勢,雜誌化的版面設計,三、網頁設計的趨勢雜誌化的版面設計,23,三、網頁設計的趨勢,幻燈片導航,三、網頁設計的趨勢幻燈片導航,24,三、網頁設計的趨勢,在重點位置做形象展示,三、網頁設計的趨勢在重點位置做形象展示,25,三、網頁設計的趨勢,反 Box 佈局,三、網頁設計的趨勢反 Box 佈局,26,三、網頁設計的趨勢,單頁佈局,三、網頁設計的趨勢單頁佈局,27,三、網頁設計的趨勢,多欄佈局,三、網頁設計的趨勢多欄佈局,28,三、網頁設計的趨勢,巨型插圖式與多變背景設計,三、網頁設計的趨勢巨型插圖式與多變背景設計,29,三、網頁設計的趨勢,更多留白,三、網頁設計的趨勢更多留白,30,三、網頁設計的趨勢,”社會”網路元素,三、網頁設計的趨勢”社會”網路元素,31,三、網頁設計的趨勢,解釋風格的導覽,三、網頁設計的趨勢解釋風格的導覽,32,三、網頁設計的趨勢,動態 Tabs,三、網頁設計的趨勢動態 Tabs,33,四、參考資料,周虹、王咏剛(2006)。出色網頁大賞。電腦人文化。,黃在賢(2006)。Web better design 設計師談精采網頁設計。文魁資訊股份有限公司。,smashing magazine：,http:/
展开阅读全文