การออกแบบและพฒนาสอประสม

โดย

ศภกฤษฏ นวฒนากล

สาขาวชาเทคโนโลย สารสนเทศ

สานกวชาเทคโนโลยสงคม มหาวทยาลยเทคโนโลยสรนาร

1

วตถประสงควตถประสงค

เมอจบบทเรยนน นกศกษาสามารถ

เขาใจขนตอนการวางแผนและออกแบบสอประสม

สามารถออกแบบสอประสมไดอยางถกตองและเหมาะสม

2

เนอหาเนอหา

การวางแผนและการออกแบบสอประสม

วธการออกแบบ

การออกแบบสวนตดตอกบผใชการออกแบบสวนตดตอกบผใช

การออกแบบสอตาง ๆ

การทดสอบสอประสม

การสงมอบสอประสมการสงมอบสอประสม

ลขสทธ

3

ปการวางแผนและการออกแบบสอประสม

หลกในการออกแบบสอประสม

มการออกแบบกราฟกทด ออกแบบภาพ จดวางองคประกอบให

สวยงาม และสอความหมาย

มเนอหาและโครงสรางงานทด (คลายการออกแบบ Site map)ใชงานงายสะดวก มระบบ Navigator หรอระบบนาทางในการใช a gatoงานทด

มการใชเสยงอยางเหมาะสมมการใชเสยงอยางเหมาะสม

ในกรณทมภาพเคลอนไหว จะตองมการออกแบบภาพใหเขากบเรองราว

ไ

4

ไดด

กระบวนการวางแผนและการจดทาเอกสารตาง ๆ เปนสวนสาคญ

ปของขนตอนการออกแบบสอประสม

เอกสารทไดจากการออกแบบ

StoryboardFlowchartFlowchartScripts

5

StoryboardStoryboard

Storyboard คอ การสรางภาพใหเหนลาดบขนตอนตามเนอเรองทตองการ โดยเฉพาะการสรางภาพเคลอนไหว

รายละเอยดทควรมใน Storyboardภาพราง

คาอธบายแตละสอทใช (ขอความ รปภาพ ภาพเคลอนไหว เสยง วดโอ)

เวลาทใช

หลายเลขหนาจอ

การเปลยนภาพ (Transition)เครองมอหรอโปรแกรมทใช

งบประมาณ

6ระบบนาทาง (Navigation)คาอธบายเพมเตม (Comments)

ตวอยาง Storyboardตวอยาง Storyboard

Project Name : Page Number of

Multimedia StoryboardProject Name :............................................ Page Number............... of ..........Prepared by :............................................... Scene Number............................

Desc of Text : Transition :Desc.of Text :.............................................. Transition :...................................Desc.of Graphic :......................................... Transition :...................................Desc.of Animation :...................................... Transition :...................................Desc.of Audio :............................................. Transition :...................................Desc.of Video :............................................. Transition :...................................

Time Required :............................................qNotes :.....................................................................................................................................................................................................................

7

......................................................................................................

......................................................................................................

ตวอยาง Storyboardตวอยาง Storyboard

ภาพภาพ

คาอธบายภาพคาอธบายภาพ

เนอหา ขอความ

ป

8เสยงประกอบ

FlowchartsFlowcharts

ใชในการอธบายกระบวนการทตองมการตดสนใจ หรอมทางเลอก

ตวอยาง Flowcharts

M i MMain Menu

Training module 3Training module 2Training module 1

Flash movie 3Flash movie 2Flash movie 1

9

Flash movie 3Flash movie 2Flash movie 1

ScriptsScripts

เปนสวนหนงทสาคญของกระบวนการวางแผนการพฒนาสอประสม

เปนแบบราง (blueprints) ทสมบรณทสดของกระบวนการพฒนาสอประสม

ประกอบดวยขอความและคาบรรยาย

S i t ใ ไ ใScripts จะชวยใหทมพฒนาสอประสมไดเขาใจตรงกน และพฒนา

สอประสมไปในทศทางเดยวกน

10

วธการออกแบบวธการออกแบบ

การกาหนดวตถประสงค

Ho ใ ใ ป ไHow : ผใชใชสอประสมอยางไรWhy : ทาไมผใชถงตองใชสอประสมนWhat : ผใชใชอะไรจากสอประสมWhat medium and platform : อะไรทผใชใชในการWhat medium and platform : อะไรทผใชใชในการเขาถงสอประสม

What types of features : คณลกษณะประเภทใดทใหWhat types of features : คณลกษณะประเภทใดทใหประโยชนแกผใชสงสด

11

กลมผใช (Audience)

Who : ใครคอกลมผฟงAge : ชวงอายของกลมผฟงWhat gender : เพศของกลมผฟงHow computer literate : ความชานาญในการใชHow computer literate : ความชานาญในการใชคอมพวเตอร

interests : ไ ใ โ ไปใ ใ ป interests : อะไรทกลมผใชโดยทวไปใหความสนใจเปนพเศษbeliefs : อะไรทกลมผใชโดยทวไปใหความเชอถอ

12values : อะไรทคณคาทกลมผใชโดยทวไปจะไดรบ

วธการนาเสนอสอ

รปแบบคอมพวเตอรของกลมผใช

หนวยประมวลผล (Processor)

Bandwidthหนวยความจา (Memory)หนวยความจา (Memory)

สอทใชเกบ (Storage)

13

ใ การออกแบบสวนตดตอกบผใช

ConsistencyC l S h M h ti lColor Scheme : Monochromatic color schemeLayoutNavigationNavigationTransitionsU itUnityTiming

14

g

การออกแบบสอตาง ๆการออกแบบสอตาง ๆ

TextGraphicsAnimationAnimationSoundVideo

15

Tตวอยางการใช Text

Serif Fonts Sans Serif Fonts

Times New Roman Monotype CorsivaBookman Old StyleGaramond

Arial NarrowArial BlackGaramond

Tahomai

Arial BlackImpactC i S MSGeorgia

VerdanaComic Sans MSHaettenschweiler

16

ตวอยางการใชสขอความกบพนหลง

◌Black text on a White background

ff th t t t toffers the greatest contrast.

It is easy to read If there is enough It is easy to read

dark text on a light

If there is enough contrast,

light te t on a darkbackground light text on a dark

background will work.There is not enough contrast between

the text color and the background color.

17This text is difficult to read.

การทดสอบสอประสมการทดสอบสอประสม

DesignC t tContentMultimedia elementsMultimedia elementsProgramming codeUser interfaceMethod of navigationMethod of navigationInteractivity

18

การสงมอบสอประสมการสงมอบสอประสม

• Storage and distribution media : magnetic tape, magnetic disks, magneto-optical disks, CD-ROM, DVD, laser disk, Web server

• Packaging and delivery

19

ลขสทธลขสทธ

• Copyright laws : Art forms and electronic art f T b t d th tforms To be sure to read the agreement carefullyC l t lt f• Can use some elements royalty-free

20