互動式網站設計 X數位學習設計<br />蘇意琳、鄭美慧<br />9535011&9535023<br />共享、共創、共同開創未來。<br />
※請注意<br />本簡報的所有內容皆為蘇意琳與鄭美慧所有<br />         非經同意不許任意轉載與使用。<br />
數位學習教學開始<br />互動式網站設計<br />
PART1: 2W 導讀<br />Why(為什麼要做這個教學文件) <br />What(什麼是互動式網站、使用者指南)<br />PART2:1H 教學目錄<br />How(如何做出互動式網站)<br />  此章節分為八個階段漸進式<b...
Q:為什麼要做這個教學文件?<br />A:筆者在99年於雲林科技大學數位媒體設計系畢業,該文件是希望能夠將筆者在設計系大四畢業製作所做的互動式網站設計之過程紀錄並分享,並透過此分享文件能夠給予未來的設計者或者其它設計學院的學生做為一個參考與學...
Q:什麼叫做互動式的網站?<br />A:互動式的網站與一般網站比較不同的地方為:比一般網站多<br />出很多的即時互動,如:聲音的回饋、影像的回饋等等…所<br />以一般來說比較適合以圖為主,文字為輔的網站形式。<br />互動形式的網站...
第十四道門(Coraline)3D動畫影片之官方宣傳網站:<br />http://www.coraline.com/.<br />互動式網站範例<br />
製作時程:一年<br />製作預算:新台幣10000元以下<br />系統需求:(建議需求)<br />CPU:Intel2 CPU 2.01GHz<br />RAM: 2.00GB <br />      作業系統: Microsoft Wi...
Q:如何做出一個互動式網站?<br />A:此章節分為八個階段漸進式的以筆者過去的畢業製<br />作經驗為教學。每一個階段都有一個著重的製作主<br />題,如「第一階段:前製作業」就是以如何發想、<br />尋找靈感…為這一個階段的教學導向...
畢業製作 製作流程說明<br />第一階段:前製作業<br />第二階段:企劃內容<br />第三階段:網站資料庫分類與建立<br />第四階段:網站元件、內容、素材製作<br />第五階段:版型設定與美編<br />第六階段:程式與動作設定<...
2<br />4<br />1<br />3<br />網站資料庫<br />分類與建立<br />網站元件、<br />內容、素材製作<br />前置作業<br />企劃內容<br />5<br />6<br />7<br />8<br />...
發想各個主題,以「找回你我共同生長在台灣之中的”最原始的感動”」為中心主旨並去發想要建構什麼樣的內容。<br />最後決定以「台灣的種子」塑造一個新形象—將種子注入深山小朋友原始的靈魂,讓種子充滿新的生命力量為畢製網站之主要內容。<br />透...
地點:雲林縣 斗六市湖本村   <br />時間:2009年3月1日<br />目標:認識台灣的種子與生態<br />方式:請教當地居民、訪談與紀錄<br />訪談收獲:<br />1.多元生態<br />2.大自然環境<br />3.種子之生...
尋找原生種子、植物與台灣感動、在地情、台灣文化特色、大自然之聲音<br />訪談收獲:<br />1.原住民小朋友最純真的性格,<br />          以及天籟般的歌聲<br />2.台灣原始森林場景參考<br />3.種子不同生長及傳...
問卷調查<br />…<br />分析結果:<br />a.顯示年紀越大接近大<br />  自然的時間漸漸減少<br />b.年齡12歲以下<br />   無法經常接近大自然<br />    ”無人陪同”佔了49%<br />,顯示現代父...
配合田野調查所製做的其他設計<br />角色<br />
影片內容說明:<br />真實紀錄台灣青年知識網路學會之志工共同完成青葉孩童渴望得到一個機器人的夢想,以及慈惠醫專幫助泰武國小小朋友得到閱讀書籍的機會。<br />都市邊緣的原住民孩童,因為地緣和歷史背景過著雙重艱難的生活,我們聆聽他們的聲音,...
資料蒐集<br />      尋找視覺設計風格、範例網站、展場設計等多範例參考其製作方式<br />第二階段:企畫內容<br />
風格蒐集參考:<br />1.手繪筆觸呈現<br />(質感精美,花費時間多)<br />2.向量簡單形狀,造型可愛<br />(執行度高、造型可愛受普遍大眾喜愛)<br />視覺風格參考範例<br />
網站版型參考:<br />1.集中式<br />(焦點明確、介面明確)<br />2.選單固定於左,右方置放資訊<br />(使用者易上手、但微單調)<br />網站設計範例<br />
展場規劃參考:<br />1.展板平面式<br />(簡單易懂、缺乏活潑性)<br />2.立體呈現<br />(活潑性高、變化多)<br />展場設計<br />
規畫好自己的網站元件庫,有好的檔案管理才能製做出好的網站,元件庫如:音樂資料庫、公仔去背資料庫、角色資料庫…<br />畫出組織架構圖<br />規劃好檔案命名方式<br />網站動態腳本LINK<br />第三階段 網站元件庫<br />
公仔資料庫<br />角色資料庫<br />文案撰寫<br />音樂資料庫<br />網站原始檔<br />網站元件庫管理<br />
前導頁<br />首頁<br />創意種子<br />角色介紹<br />那年的歌<br />玩偶的家<br />聚寶盒<br />玩偶時光機<br />組織圖<br />
靜態腳本<br />
最後我們決定網站的主題:「種子的大樂團」,創造出結合原住民樂器與台灣種子、原生植物的網站靈魂角色,每個角色都是身懷絕技的種子,生長在原始的台灣森林,是原住民樂器的化身,並且用角色去介紹各種本土產業。<br />因此奠定了一個創造自己的公仔角色並...
原生植物         +        原住民樂器<br />蒐集角色資料、創造角色個性<br />種子大樂團創造角色的目標:<br />將原住民的樂器與台灣原生種子結合,每個角色都有不同的環保使命,以樂團的形式傳播理念。<br />||<...
The   Band   of   Seeds<br />角色資料分析<br />
角色資料分析<br />
草稿與線稿<br />………..<br />
筆刷符號等設定<br />
角色成品<br />
技術說明<br />1.設定筆刷   (可能會有很多個風格筆刷都存起來再一個一個去試去套)<br />2.填色 (底層黑底比較快,上面再疊主要的眼睛嘴巴等等)<br />3.臉部與身體元件轉成一個一個符號的影片片段<br />4.四肢轉為線條圖...
文案-那年的歌<br />
版面設計為了增加其互動趣味性因此決定不以制式的網頁版型為主,以FLASH的方式完成較為自由活潑的網站<br />確定版面大小,注意使用者因此應該設為小於800X600的解析度<br />筆者的設定為760 x 490  <br />LOGO置放...
以夜晚繽紛的森林感覺搭配較有藝術感的背景為主,創造故事的情境<br />場景設計<br />
OnLine版本<br />網站成品<br />Off Line版本<br />
製做捲軸式的年代表,以滑鼠上下移動的方式認識公仔的脈絡<br />以Actionscrip撰寫<br />注意元件與背景等程式<br />注意與修改BUG<br />第六階段:程式與動作設定<br />
※動畫有分順序與累進方式釋放到到圖層<br />請見dl資料夾有模擬<br />順序就是有順序性的動作如走路一格一格的,我可以先複製剛剛做的動作在繼續調整成下一個動作,然後是用順序是放到圖層再匯入FLASH就會變成一格一格的動作<br />累進...
1<br />身體與要動的地方分開資料夾<br />動作篇-順序式<br />
3<br />2<br />複製「hand1」資料夾<br />按右上角三角形變出選單<br />動作篇-順序式<br />
4<br />選取上層物件調整動作<br />5<br />另存新檔”action”至桌面<br />
6<br />打開Flash<br />7<br />匯入至元件褲”action”<br />
8<br />出現對話框,將圖層轉成”關鍵影格”<br />
9<br />移動影格第1,2格為“hand”,形成動畫片段<br />最後一格為“body”物件<br />
10<br />新增圖層,並將”body”物件剪下貼至第2圖層<br />11<br />完成順序式動畫<br />
滑鼠移過去-人物出現<br />滑鼠點選-人物介紹<br />一般畫面<br />蠟燭光影變化<br />動作與特效的設定<br />
決定使用者介面為兩個版本<br />1.ONLINE版本:線上版本因為根據不同使用者,它的的電腦銀幕可能規格不相同,因此需要將畫面縮小為800X600以下,更因為線上頻寬考量因此圖片都是以jpeg/png等小圖為主。<br />2.OFFLIN...
申請原住民的音樂,獲得音樂使用權,成為素材<br />      可分為六步驟:<br />1.音樂素材資料蒐集齊全<br />2.禮貌寄信,並主動與授權音樂人聯絡<br />3.經由多次溝通,雙方得到共識,獲得對方同意<br />4.彼方或個...
1.使用SONY SOUND FORGE與AUDITION調整音質<br />配樂<br />
2.使用music maker 與 cubase REMIX與重製音樂加入其他環境音樂讓音樂 <br />層次更豐富。<br />
時程表一覽<br />
PART3<br />筆者的畢製成果展示<br />
展場設計<br />
網頁視覺<br />
網頁視覺<br />
網頁視覺<br />
網頁視覺<br />
網頁視覺<br />
PART3:<br />筆者的畢製成果展示<br />網站設計成果<br />
感謝您的聆聽!<br />Thank you for your listening<br />
Upcoming SlideShare
Loading in …5
×

Slideshare數位學習

986 views

Published on

互動式網站設計教學

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
986
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Slideshare數位學習

  1. 1. 互動式網站設計 X數位學習設計<br />蘇意琳、鄭美慧<br />9535011&9535023<br />共享、共創、共同開創未來。<br />
  2. 2. ※請注意<br />本簡報的所有內容皆為蘇意琳與鄭美慧所有<br /> 非經同意不許任意轉載與使用。<br />
  3. 3. 數位學習教學開始<br />互動式網站設計<br />
  4. 4. PART1: 2W 導讀<br />Why(為什麼要做這個教學文件) <br />What(什麼是互動式網站、使用者指南)<br />PART2:1H 教學目錄<br />How(如何做出互動式網站)<br /> 此章節分為八個階段漸進式<br /> 以筆者過去的畢業製作經驗為教學。<br />PART3:<br /> 筆者畢業製作展示<br />章節說明<br />
  5. 5. Q:為什麼要做這個教學文件?<br />A:筆者在99年於雲林科技大學數位媒體設計系畢業,該文件是希望能夠將筆者在設計系大四畢業製作所做的互動式網站設計之過程紀錄並分享,並透過此分享文件能夠給予未來的設計者或者其它設計學院的學生做為一個參考與學習的路徑,透過slide share平台一起成長一起學習。<br />Why?<br />
  6. 6. Q:什麼叫做互動式的網站?<br />A:互動式的網站與一般網站比較不同的地方為:比一般網站多<br />出很多的即時互動,如:聲音的回饋、影像的回饋等等…所<br />以一般來說比較適合以圖為主,文字為輔的網站形式。<br />互動形式的網站因重視其互動的效果因此很適合用在以故事<br />敘述的網站,像是營造一種氛圍的方式去經營該網站,也很<br />適合活動宣傳、表達個特殊的活動主題或特殊的活動氣氛。<br />What?<br />
  7. 7. 第十四道門(Coraline)3D動畫影片之官方宣傳網站:<br />http://www.coraline.com/.<br />互動式網站範例<br />
  8. 8. 製作時程:一年<br />製作預算:新台幣10000元以下<br />系統需求:(建議需求)<br />CPU:Intel2 CPU 2.01GHz<br />RAM: 2.00GB <br /> 作業系統: Microsoft Windows XP<br /> 硬碟空間:20G<br /> 網路速度:2M/秒<br />軟體技能:Illustrator、Photoshop、Flash、Dreamweaver、<br />Actionscrip、Aftereffect、Premier Pro…<br />適合對象:設計相關學系之學生、設計師<br />適合年齡:12歲以上<br />學習方式:使用者使用slide share平台,從教學PPT中獲取製作<br />網站之相關知識<br />使用者指南<br />
  9. 9. Q:如何做出一個互動式網站?<br />A:此章節分為八個階段漸進式的以筆者過去的畢業製<br />作經驗為教學。每一個階段都有一個著重的製作主<br />題,如「第一階段:前製作業」就是以如何發想、<br />尋找靈感…為這一個階段的教學導向與記錄筆者企劃<br />書草案是參考什麼樣的範例、使用什麼樣的技術或<br />方法去完成這個階段的工作。<br />各個教學主題:詳見下一頁<br />How?<br />
  10. 10. 畢業製作 製作流程說明<br />第一階段:前製作業<br />第二階段:企劃內容<br />第三階段:網站資料庫分類與建立<br />第四階段:網站元件、內容、素材製作<br />第五階段:版型設定與美編<br />第六階段:程式與動作設定<br />第七階段:配樂與整合<br />時程表一覽<br />教學主題與教學目錄<br />
  11. 11. 2<br />4<br />1<br />3<br />網站資料庫<br />分類與建立<br />網站元件、<br />內容、素材製作<br />前置作業<br />企劃內容<br />5<br />6<br />7<br />8<br />程式與<br />動作設定<br />版型設定<br />與美編<br />成果發表<br />配樂與整合<br />畢業製作 製作流程說明<br />
  12. 12. 發想各個主題,以「找回你我共同生長在台灣之中的”最原始的感動”」為中心主旨並去發想要建構什麼樣的內容。<br />最後決定以「台灣的種子」塑造一個新形象—將種子注入深山小朋友原始的靈魂,讓種子充滿新的生命力量為畢製網站之主要內容。<br />透過方法:「田野調查、問卷調查 」來確認自己的發想主題與尋找更多更豐富之靈感<br />第一階段:前置作業<br />
  13. 13. 地點:雲林縣 斗六市湖本村 <br />時間:2009年3月1日<br />目標:認識台灣的種子與生態<br />方式:請教當地居民、訪談與紀錄<br />訪談收獲:<br />1.多元生態<br />2.大自然環境<br />3.種子之生長<br />4.植物物種之生長<br />5.種植植物注意事項<br />田野調查之紀錄1<br />
  14. 14. 尋找原生種子、植物與台灣感動、在地情、台灣文化特色、大自然之聲音<br />訪談收獲:<br />1.原住民小朋友最純真的性格,<br /> 以及天籟般的歌聲<br />2.台灣原始森林場景參考<br />3.種子不同生長及傳播方式<br />4.原住民圖騰參考<br />田野調查之紀錄2<br />
  15. 15. 問卷調查<br />…<br />分析結果:<br />a.顯示年紀越大接近大<br /> 自然的時間漸漸減少<br />b.年齡12歲以下<br /> 無法經常接近大自然<br /> ”無人陪同”佔了49%<br />,顯示現代父母沒有時間<br /> 陪同自己的孩童接近大<br /> 自然的現象<br />c.數據顯示絕大部分的年齡<br /> 層、性別、職業之人都<br /> 對大自然有興趣<br />
  16. 16. 配合田野調查所製做的其他設計<br />角色<br />
  17. 17. 影片內容說明:<br />真實紀錄台灣青年知識網路學會之志工共同完成青葉孩童渴望得到一個機器人的夢想,以及慈惠醫專幫助泰武國小小朋友得到閱讀書籍的機會。<br />都市邊緣的原住民孩童,因為地緣和歷史背景過著雙重艱難的生活,我們聆聽他們的聲音,聽見他們的小願望:希望與都市孩童一樣擁有自己的機器人與一本彩色印刷的書籍,也許對你我來說這些東西或許不珍貴,但是對於物資匱乏的原住民小朋友來說是非常難完成的心願。<br />素材運用與設計-MV<br />
  18. 18. 資料蒐集<br /> 尋找視覺設計風格、範例網站、展場設計等多範例參考其製作方式<br />第二階段:企畫內容<br />
  19. 19. 風格蒐集參考:<br />1.手繪筆觸呈現<br />(質感精美,花費時間多)<br />2.向量簡單形狀,造型可愛<br />(執行度高、造型可愛受普遍大眾喜愛)<br />視覺風格參考範例<br />
  20. 20. 網站版型參考:<br />1.集中式<br />(焦點明確、介面明確)<br />2.選單固定於左,右方置放資訊<br />(使用者易上手、但微單調)<br />網站設計範例<br />
  21. 21. 展場規劃參考:<br />1.展板平面式<br />(簡單易懂、缺乏活潑性)<br />2.立體呈現<br />(活潑性高、變化多)<br />展場設計<br />
  22. 22. 規畫好自己的網站元件庫,有好的檔案管理才能製做出好的網站,元件庫如:音樂資料庫、公仔去背資料庫、角色資料庫…<br />畫出組織架構圖<br />規劃好檔案命名方式<br />網站動態腳本LINK<br />第三階段 網站元件庫<br />
  23. 23. 公仔資料庫<br />角色資料庫<br />文案撰寫<br />音樂資料庫<br />網站原始檔<br />網站元件庫管理<br />
  24. 24. 前導頁<br />首頁<br />創意種子<br />角色介紹<br />那年的歌<br />玩偶的家<br />聚寶盒<br />玩偶時光機<br />組織圖<br />
  25. 25. 靜態腳本<br />
  26. 26. 最後我們決定網站的主題:「種子的大樂團」,創造出結合原住民樂器與台灣種子、原生植物的網站靈魂角色,每個角色都是身懷絕技的種子,生長在原始的台灣森林,是原住民樂器的化身,並且用角色去介紹各種本土產業。<br />因此奠定了一個創造自己的公仔角色並且去介紹台灣公仔玩具產業的構想,並推廣之,成為一個以台灣種子與可愛原住民樂器所結合的角色公仔,這些公仔會去推廣台灣的公仔產業,也可稱之為第種子大樂團第一期的推廣網站,而推廣的內容為台灣的公仔玩具。<br />第四階段:網站元件、內容、 素材製作、文案撰寫<br />
  27. 27. 原生植物 + 原住民樂器<br />蒐集角色資料、創造角色個性<br />種子大樂團創造角色的目標:<br />將原住民的樂器與台灣原生種子結合,每個角色都有不同的環保使命,以樂團的形式傳播理念。<br />||<br />=<br />種子大樂團的定位:<br />1.推展原住民文化<br />2.散播台灣原生種子<br />3.響應綠色環保的概念<br />聰敏、剛毅<br />(但是有點賊頭賊腦的感覺)<br />角色設計<br />
  28. 28. The Band of Seeds<br />角色資料分析<br />
  29. 29. 角色資料分析<br />
  30. 30. 草稿與線稿<br />………..<br />
  31. 31. 筆刷符號等設定<br />
  32. 32. 角色成品<br />
  33. 33. 技術說明<br />1.設定筆刷 (可能會有很多個風格筆刷都存起來再一個一個去試去套)<br />2.填色 (底層黑底比較快,上面再疊主要的眼睛嘴巴等等)<br />3.臉部與身體元件轉成一個一個符號的影片片段<br />4.四肢轉為線條圖筆刷<br />角色名:小烏毛<br />圖:四肢線條筆刷繪製<br />技術說明<br />
  34. 34. 文案-那年的歌<br />
  35. 35. 版面設計為了增加其互動趣味性因此決定不以制式的網頁版型為主,以FLASH的方式完成較為自由活潑的網站<br />確定版面大小,注意使用者因此應該設為小於800X600的解析度<br />筆者的設定為760 x 490 <br />LOGO置放欄<br />選單置放欄<br />資料置放欄<br />團隊名置放欄<br />第五階段:版型設定與美編<br />
  36. 36. 以夜晚繽紛的森林感覺搭配較有藝術感的背景為主,創造故事的情境<br />場景設計<br />
  37. 37. OnLine版本<br />網站成品<br />Off Line版本<br />
  38. 38. 製做捲軸式的年代表,以滑鼠上下移動的方式認識公仔的脈絡<br />以Actionscrip撰寫<br />注意元件與背景等程式<br />注意與修改BUG<br />第六階段:程式與動作設定<br />
  39. 39. ※動畫有分順序與累進方式釋放到到圖層<br />請見dl資料夾有模擬<br />順序就是有順序性的動作如走路一格一格的,我可以先複製剛剛做的動作在繼續調整成下一個動作,然後是用順序是放到圖層再匯入FLASH就會變成一格一格的動作<br />累進就是如跑馬燈一個一個顯色<br />AI的母圖層就會變成FLA的關鍵影格,所以要做成動畫的影格要先把子圖層先上拖到母圖層<br />AI的母圖層=FLA的關鍵影格<br />動作與特效的設定<br />
  40. 40. 1<br />身體與要動的地方分開資料夾<br />動作篇-順序式<br />
  41. 41. 3<br />2<br />複製「hand1」資料夾<br />按右上角三角形變出選單<br />動作篇-順序式<br />
  42. 42. 4<br />選取上層物件調整動作<br />5<br />另存新檔”action”至桌面<br />
  43. 43. 6<br />打開Flash<br />7<br />匯入至元件褲”action”<br />
  44. 44. 8<br />出現對話框,將圖層轉成”關鍵影格”<br />
  45. 45. 9<br />移動影格第1,2格為“hand”,形成動畫片段<br />最後一格為“body”物件<br />
  46. 46. 10<br />新增圖層,並將”body”物件剪下貼至第2圖層<br />11<br />完成順序式動畫<br />
  47. 47. 滑鼠移過去-人物出現<br />滑鼠點選-人物介紹<br />一般畫面<br />蠟燭光影變化<br />動作與特效的設定<br />
  48. 48. 決定使用者介面為兩個版本<br />1.ONLINE版本:線上版本因為根據不同使用者,它的的電腦銀幕可能規格不相同,因此需要將畫面縮小為800X600以下,更因為線上頻寬考量因此圖片都是以jpeg/png等小圖為主。<br />2.OFFLINE版本:非線上版本可用光碟欣賞,因此可將畫面放大至全銀幕讓觀者有更好的視覺空間。<br />第七階段:配樂與整合<br />
  49. 49. 申請原住民的音樂,獲得音樂使用權,成為素材<br /> 可分為六步驟:<br />1.音樂素材資料蒐集齊全<br />2.禮貌寄信,並主動與授權音樂人聯絡<br />3.經由多次溝通,雙方得到共識,獲得對方同意<br />4.彼方或個人撰寫正式音樂/錄音著作使用權授權書<br />5.雙方過目,皆認同授權書上規範<br />6.雙方簽章影印,彼此核對,並各自留下一份授權書<br />以其他軟體進行原住民音樂素材節錄並混合其他音樂以及其他環境音樂重製與混合出新的網站、角色音樂<br />網站的loop音樂 播放<br />角色的個別設計音樂 播放<br />配樂<br />
  50. 50. 1.使用SONY SOUND FORGE與AUDITION調整音質<br />配樂<br />
  51. 51. 2.使用music maker 與 cubase REMIX與重製音樂加入其他環境音樂讓音樂 <br />層次更豐富。<br />
  52. 52. 時程表一覽<br />
  53. 53. PART3<br />筆者的畢製成果展示<br />
  54. 54. 展場設計<br />
  55. 55. 網頁視覺<br />
  56. 56. 網頁視覺<br />
  57. 57. 網頁視覺<br />
  58. 58. 網頁視覺<br />
  59. 59. 網頁視覺<br />
  60. 60. PART3:<br />筆者的畢製成果展示<br />網站設計成果<br />
  61. 61. 感謝您的聆聽!<br />Thank you for your listening<br />

×