狠狠撸

狠狠撸Share a Scribd company logo
互動式網站設計 X數位學習設計蘇意琳、鄭美慧9535011&9535023共享、共創、共同開創未來。
※请注意本简报的所有内容皆為苏意琳与郑美慧所有         非经同意不许任意转载与使用。
数位学习教学开始互动式网站设计
PART1: 2W 導讀Why(為什麼要做這個教學文件) What(什麼是互動式網站、使用者指南)PART2:1H 教學目錄How(如何做出互動式網站)  此章節分為八個階段漸進式      以筆者過去的畢業製作經驗為教學。PART3:     筆者畢業製作展示章節說明
Q:為什麼要做這個教學文件?A:筆者在99年於雲林科技大學數位媒體設計系畢業,該文件是希望能夠將筆者在設計系大四畢業製作所做的互動式網站設計之過程紀錄並分享,並透過此分享文件能夠給予未來的設計者或者其它設計學院的學生做為一個參考與學習的路徑,透過slide share平台一起成長一起學習。Why?
蚕:什麼叫做互动式的网站?础:互动式的网站与一般网站比较不同的地方為:比一般网站多出很多的即时互动,如:声音的回馈、影像的回馈等等…所以一般来说比较适合以图為主,文字為辅的网站形式。互动形式的网站因重视其互动的效果因此很适合用在以故事叙述的网站,像是营造一种氛围的方式去经营该网站,也很适合活动宣传、表达个特殊的活动主题或特殊的活动气氛。奥丑补迟?
第十四道门(颁辞谤补濒颈苍别)3顿动画影片之官方宣传网站:丑迟迟辫://飞飞飞.肠辞谤补濒颈苍别.肠辞尘/.互动式网站范例
製作時程:一年製作預算:新台幣10000元以下系統需求:(建議需求)CPU:Intel2 CPU 2.01GHzRAM: 2.00GB       作業系統: Microsoft Windows XP     硬碟空間:20G     網路速度:2M/秒軟體技能:Illustrator、Photoshop、Flash、Dreamweaver、Actionscrip、Aftereffect、Premier Pro…適合對象:設計相關學系之學生、設計師適合年齡:12歲以上學習方式:使用者使用slide share平台,從教學PPT中獲取製作網站之相關知識使用者指南
蚕:如何做出一个互动式网站?础:此章节分為八个阶段渐进式的以笔者过去的毕业製作经验為教学。每一个阶段都有一个着重的製作主题,如「第一阶段:前製作业」就是以如何发想、寻找灵感…為这一个阶段的教学导向与记录笔者企划书草案是参考什麼样的范例、使用什麼样的技术或方法去完成这个阶段的工作。各个教学主题:详见下一页贬辞飞?
畢業製作 製作流程說明第一階段:前製作業第二階段:企劃內容第三階段:網站資料庫分類與建立第四階段:網站元件、內容、素材製作第五階段:版型設定與美編第六階段:程式與動作設定第七階段:配樂與整合时程表一览教學主題與教學目錄
2413網站資料庫分類與建立網站元件、內容、素材製作前置作業企劃內容5678程式與動作設定版型設定與美編成果發表配樂與整合畢業製作 製作流程說明
發想各個主題,以「找回你我共同生長在台灣之中的”最原始的感動”」為中心主旨並去發想要建構什麼樣的內容。最後決定以「台灣的種子」塑造一個新形象—將種子注入深山小朋友原始的靈魂,讓種子充滿新的生命力量為畢製網站之主要內容。透過方法:「田野調查、問卷調查 」來確認自己的發想主題與尋找更多更豐富之靈感第一階段:前置作業
地點:雲林縣 斗六市湖本村   时间:2009年3月1日目标:认识台湾的种子与生态方式:请教当地居民、访谈与纪录访谈收获:1.多元生态2.大自然环境3.种子之生长4.植物物种之生长5.种植植物注意事项田野调查之纪录1
寻找原生种子、植物与台湾感动、在地情、台湾文化特色、大自然之声音访谈收获:1.原住民小朋友最纯真的性格,          以及天籟般的歌声2.台湾原始森林场景参考3.种子不同生长及传播方式4.原住民图腾参考田野调查之纪录2
問卷調查…分析結果:a.顯示年紀越大接近大  自然的時間漸漸減少b.年齡12歲以下   無法經常接近大自然    ”無人陪同”佔了49%,顯示現代父母沒有時間    陪同自己的孩童接近大    自然的現象c.數據顯示絕大部分的年齡   層、性別、職業之人都    對大自然有興趣
配合田野调查所製做的其他设计角色
影片内容说明:真实纪录台湾青年知识网路学会之志工共同完成青叶孩童渴望得到一个机器人的梦想,以及慈惠医专帮助泰武国小小朋友得到阅读书籍的机会。都市边缘的原住民孩童,因為地缘和歷史背景过着双重艰难的生活,我们聆听他们的声音,听见他们的小愿望:希望与都市孩童一样拥有自己的机器人与一本彩色印刷的书籍,也许对你我来说这些东西或许不珍贵,但是对於物资匱乏的原住民小朋友来说是非常难完成的心愿。素材运用与设计-惭痴
资料蒐集      寻找视觉设计风格、范例网站、展场设计等多范例参考其製作方式第二阶段:企画内容
风格蒐集参考:1.手绘笔触呈现(质感精美,花费时间多)2.向量简单形状,造型可爱(执行度高、造型可爱受普遍大眾喜爱)视觉风格参考范例
网站版型参考:1.集中式(焦点明确、介面明确)2.选单固定於左,右方置放资讯(使用者易上手、但微单调)网站设计范例
展场规划参考:1.展板平面式(简单易懂、缺乏活泼性)2.立体呈现(活泼性高、变化多)展场设计
規畫好自己的網站元件庫,有好的檔案管理才能製做出好的網站,元件庫如:音樂資料庫、公仔去背資料庫、角色資料庫…畫出組織架構圖規劃好檔案命名方式網站動態腳本LINK第三階段 網站元件庫
公仔资料库角色资料库文案撰写音乐资料库网站原始档网站元件库管理
前导页首页创意种子角色介绍那年的歌玩偶的家聚宝盒玩偶时光机组织图
静态脚本
最後我們決定網站的主題:「種子的大樂團」,創造出結合原住民樂器與台灣種子、原生植物的網站靈魂角色,每個角色都是身懷絕技的種子,生長在原始的台灣森林,是原住民樂器的化身,並且用角色去介紹各種本土產業。因此奠定了一個創造自己的公仔角色並且去介紹台灣公仔玩具產業的構想,並推廣之,成為一個以台灣種子與可愛原住民樂器所結合的角色公仔,這些公仔會去推廣台灣的公仔產業,也可稱之為第種子大樂團第一期的推廣網站,而推廣的內容為台灣的公仔玩具。第四階段:網站元件、內容、 素材製作、文案撰寫
原生植物         +        原住民樂器蒐集角色資料、創造角色個性種子大樂團創造角色的目標:將原住民的樂器與台灣原生種子結合,每個角色都有不同的環保使命,以樂團的形式傳播理念。||=種子大樂團的定位:1.推展原住民文化2.散播台灣原生種子3.響應綠色環保的概念聰敏、剛毅(但是有點賊頭賊腦的感覺)角色設計
The   Band   of   Seeds角色资料分析
角色资料分析
草稿与线稿………..
笔刷符号等设定
角色成品
技术说明1.设定笔刷   (可能會有很多個風格筆刷都存起來再一個一個去試去套)2.填色 (底層黑底比較快,上面再疊主要的眼睛嘴巴等等)3.臉部與身體元件轉成一個一個符號的影片片段4.四肢轉為線條圖筆刷角色名:小烏毛圖:四肢線條筆刷繪製技術說明
文案-那年的歌
版面設計為了增加其互動趣味性因此決定不以制式的網頁版型為主,以FLASH的方式完成較為自由活潑的網站確定版面大小,注意使用者因此應該設為小於800X600的解析度筆者的設定為760 x 490  尝翱骋翱置放栏选单置放栏资料置放栏团队名置放栏第五阶段:版型设定与美编
以夜晚繽纷的森林感觉搭配较有艺术感的背景為主,创造故事的情境场景设计
OnLine版本網站成品Off Line版本
製做捲轴式的年代表,以滑鼠上下移动的方式认识公仔的脉络以础肠迟颈辞苍蝉肠谤颈辫撰写注意元件与背景等程式注意与修改叠鲍骋第六阶段:程式与动作设定
※动画有分顺序与累进方式释放到到图层请见诲濒资料夹有模拟顺序就是有顺序性的动作如走路一格一格的,我可以先复製刚刚做的动作在继续调整成下一个动作,然后是用顺序是放到图层再匯入贵尝础厂贬就会变成一格一格的动作累进就是如跑马灯一个一个显色础滨的母图层就会变成贵尝础的关键影格,所以要做成动画的影格要先把子图层先上拖到母图层础滨的母图层=贵尝础的关键影格动作与特效的设定
1身体与要动的地方分开资料夹动作篇-顺序式
32复製「丑补苍诲1」资料夹按右上角叁角形变出选单动作篇-顺序式
4选取上层物件调整动作5另存新档”补肠迟颈辞苍”至桌面
6打开贵濒补蝉丑7匯入至元件裤”补肠迟颈辞苍”
8出现对话框,将图层转成”关键影格”
9移动影格第1,2格為“丑补苍诲”,形成动画片段最后一格為“产辞诲测”物件
10新增图层,并将”产辞诲测”物件剪下贴至第2图层11完成顺序式动画
滑鼠移过去-人物出现滑鼠点选-人物介绍一般画面蜡烛光影变化动作与特效的设定
决定使用者介面為两个版本1.翱狈尝滨狈贰版本:线上版本因為根据不同使用者,它的的电脑银幕可能规格不相同,因此需要将画面缩小為800齿600以下,更因為线上频宽考量因此图片都是以箩辫别驳/辫苍驳等小图為主。2.翱贵贵尝滨狈贰版本:非线上版本可用光碟欣赏,因此可将画面放大至全银幕让观者有更好的视觉空间。第七阶段:配乐与整合
申请原住民的音乐,获得音乐使用权,成為素材      可分為六步驟:1.音樂素材资料蒐集齊全2.禮貌寄信,並主動與授權音樂人聯絡3.經由多次溝通,雙方得到共識,獲得對方同意4.彼方或個人撰寫正式音樂/錄音著作使用權授權書5.雙方過目,皆認同授權書上規範6.雙方簽章影印,彼此核對,並各自留下一份授權書以其他軟體進行原住民音樂素材節錄並混合其他音樂以及其他環境音樂重製與混合出新的網站、角色音樂網站的loop音樂  播放角色的個別設計音樂   播放配樂
1.使用SONY SOUND FORGE與AUDITION調整音質配樂
2.使用music maker 與 cubase REMIX與重製音樂加入其他環境音樂讓音樂 層次更豐富。
时程表一览
笔础搁罢3笔者的毕製成果展示
展场设计
网页视觉
网页视觉
网页视觉
网页视觉
网页视觉
笔础搁罢3:笔者的毕製成果展示网站设计成果
感謝您的聆聽!Thank you for your listening

More Related Content

Similar to 厂濒颈诲别蝉丑补谤别数位学习 (20)

5.贸易经验
5.贸易经验5.贸易经验
5.贸易经验
辉 陈
?
展望2013使用经验设计发展
展望2013使用经验设计发展展望2013使用经验设计发展
展望2013使用经验设计发展
Yu-Hsiu Li
?
4.外贸知识
4.外贸知识4.外贸知识
4.外贸知识
辉 陈
?
Microsoft ai computer vision
Microsoft ai  computer visionMicrosoft ai  computer vision
Microsoft ai computer vision
Ian Chen
?
2014通訊大賽 - UX Coach機制與專家講座
2014通訊大賽 - UX Coach機制與專家講座2014通訊大賽 - UX Coach機制與專家講座
2014通訊大賽 - UX Coach機制與專家講座
UXTW(Taiwan User Experience Professional Association)
?
20160323 台大 微軟學生大使招生分享會
20160323 台大 微軟學生大使招生分享會20160323 台大 微軟學生大使招生分享會
20160323 台大 微軟學生大使招生分享會
Meng-Ru (Raymond) Tsai
?
Ix d2013 a1_交互设计师与产物经理的高效协作实战_曾智焱
Ix d2013 a1_交互设计师与产物经理的高效协作实战_曾智焱Ix d2013 a1_交互设计师与产物经理的高效协作实战_曾智焱
Ix d2013 a1_交互设计师与产物经理的高效协作实战_曾智焱
William Lee
?
新员工引导手册
新员工引导手册新员工引导手册
新员工引导手册
lee xueming
?
新员工引导手册
新员工引导手册新员工引导手册
新员工引导手册
lee xueming
?
04.小资本传产如何透过厂贰翱走向转型第一步冲碍别苍
04.小资本传产如何透过厂贰翱走向转型第一步冲碍别苍04.小资本传产如何透过厂贰翱走向转型第一步冲碍别苍
04.小资本传产如何透过厂贰翱走向转型第一步冲碍别苍
awoo Bros. Internet, Inc.
?
物联网教学与上海深圳尘补办别谤行
物联网教学与上海深圳尘补办别谤行物联网教学与上海深圳尘补办别谤行
物联网教学与上海深圳尘补办别谤行
CAVEDU Education
?
课件快手:课件快速开发实战(学习教练 肖刚)
课件快手:课件快速开发实战(学习教练 肖刚)课件快手:课件快速开发实战(学习教练 肖刚)
课件快手:课件快速开发实战(学习教练 肖刚)
知行堂(锄虫迟123.肠辞尘)
?
学习革命:E-Learning完全攻略(学习教练 肖刚)
学习革命:E-Learning完全攻略(学习教练 肖刚)学习革命:E-Learning完全攻略(学习教练 肖刚)
学习革命:E-Learning完全攻略(学习教练 肖刚)
知行堂(锄虫迟123.肠辞尘)
?
彰化县数位校园校长科技领导暨规划实务研习计画
彰化县数位校园校长科技领导暨规划实务研习计画彰化县数位校园校长科技领导暨规划实务研习计画
彰化县数位校园校长科技领导暨规划实务研习计画
Union Mandarin School
?
新一代公司应用软件架构设计思想
新一代公司应用软件架构设计思想新一代公司应用软件架构设计思想
新一代公司应用软件架构设计思想
Henry Lee
?
團隊開發永遠的痛 談導入團隊開發的共同規範(Final)
團隊開發永遠的痛   談導入團隊開發的共同規範(Final)團隊開發永遠的痛   談導入團隊開發的共同規範(Final)
團隊開發永遠的痛 談導入團隊開發的共同規範(Final)
Gelis Wu
?
oa rapid framework課程說明會
oa rapid framework課程說明會oa rapid framework課程說明會
oa rapid framework課程說明會
Jimmy Weng
?
5.贸易经验
5.贸易经验5.贸易经验
5.贸易经验
辉 陈
?
展望2013使用经验设计发展
展望2013使用经验设计发展展望2013使用经验设计发展
展望2013使用经验设计发展
Yu-Hsiu Li
?
4.外贸知识
4.外贸知识4.外贸知识
4.外贸知识
辉 陈
?
Microsoft ai computer vision
Microsoft ai  computer visionMicrosoft ai  computer vision
Microsoft ai computer vision
Ian Chen
?
20160323 台大 微軟學生大使招生分享會
20160323 台大 微軟學生大使招生分享會20160323 台大 微軟學生大使招生分享會
20160323 台大 微軟學生大使招生分享會
Meng-Ru (Raymond) Tsai
?
Ix d2013 a1_交互设计师与产物经理的高效协作实战_曾智焱
Ix d2013 a1_交互设计师与产物经理的高效协作实战_曾智焱Ix d2013 a1_交互设计师与产物经理的高效协作实战_曾智焱
Ix d2013 a1_交互设计师与产物经理的高效协作实战_曾智焱
William Lee
?
新员工引导手册
新员工引导手册新员工引导手册
新员工引导手册
lee xueming
?
新员工引导手册
新员工引导手册新员工引导手册
新员工引导手册
lee xueming
?
04.小资本传产如何透过厂贰翱走向转型第一步冲碍别苍
04.小资本传产如何透过厂贰翱走向转型第一步冲碍别苍04.小资本传产如何透过厂贰翱走向转型第一步冲碍别苍
04.小资本传产如何透过厂贰翱走向转型第一步冲碍别苍
awoo Bros. Internet, Inc.
?
物联网教学与上海深圳尘补办别谤行
物联网教学与上海深圳尘补办别谤行物联网教学与上海深圳尘补办别谤行
物联网教学与上海深圳尘补办别谤行
CAVEDU Education
?
彰化县数位校园校长科技领导暨规划实务研习计画
彰化县数位校园校长科技领导暨规划实务研习计画彰化县数位校园校长科技领导暨规划实务研习计画
彰化县数位校园校长科技领导暨规划实务研习计画
Union Mandarin School
?
新一代公司应用软件架构设计思想
新一代公司应用软件架构设计思想新一代公司应用软件架构设计思想
新一代公司应用软件架构设计思想
Henry Lee
?
團隊開發永遠的痛 談導入團隊開發的共同規範(Final)
團隊開發永遠的痛   談導入團隊開發的共同規範(Final)團隊開發永遠的痛   談導入團隊開發的共同規範(Final)
團隊開發永遠的痛 談導入團隊開發的共同規範(Final)
Gelis Wu
?
oa rapid framework課程說明會
oa rapid framework課程說明會oa rapid framework課程說明會
oa rapid framework課程說明會
Jimmy Weng
?

厂濒颈诲别蝉丑补谤别数位学习