งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

Interactive Design Modified from Krich Sintanakul’s Department of Computer Education KMUTNB.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "Interactive Design Modified from Krich Sintanakul’s Department of Computer Education KMUTNB."— ใบสำเนางานนำเสนอ:

1 Interactive Design Modified from Krich Sintanakul’s Department of Computer Education KMUTNB

2 7244012 บรรทัดฐานในการออกแบบ ตอบสนองประโยชน์ใช้สอย ความสวยงามพึงพอใจ (Aesthetic) การสื่อความหมาย (Memory Unit)

3 7244013 Graphic Design Workflow วิเคราะห์โจทย์ (Program Analysis) –What Where Who How สร้างแนวความคิดในการออกแบบ (Conceptual Design) –ต้องคำนึงถึง Design Criteria ศึกษางานหรือกรณีตัวอย่างที่มีอยู่ (Case Study) ออกแบบร่าง (Perliminary Design) ออกแบบจริง (Design)

4 7244014 การพิจารณาภาพของมนุษย์ การมองภาพของมนุษย์มีเรื่องหลักคือ การมองเพื่อหาความหมายของภาพ เพื่อหาสารในสื่อภาพ (Meaning) การมองลึกเข้าไปเพื่อพิจารณา รายละเอียดขององค์ประกอบของภาพ (Elements)

5 7244015 Basic Elements of Picture จุด (Dot) เส้น (Line) ระนาบ (Plane) –วงกลม (Circle) –สี่เหลี่ยม (Square) –สามเหลี่ยม (Triangle) –หกเหลี่ยม (Hexagon) –รูปร่างธรรมชาติ (Organic)

6 7244016 Dot เป็นองค์ประกอบที่มีขนาดเล็ก มีความกว้างและ ยาวใกล้เคียงกัน คุณสมบัติเด่นในการจัดวางทำให้เกิดการ เรียกร้องความสนใจ บอกและกำหนดตำแหน่งของภาพ การวางจุด 2 จุด ทำให้ได้พื้นที่ระหว่างจุดที่ให้ ความรู้สึกดึงดูดระหว่างกัน ขนาดของจุดต้องพิจารณาร่วมกับองค์ประกอบ แวดล้อม

7 7244017 Dot

8 7244018 Line เป็นองค์ประกอบที่มีขนาดยาว เกิดจาก การนำจุดมาเคลื่อนที่ หรือนำมาวางเรียง ต่อกัน คุณสมบัติเด่นในการนำสายตา เป็นแนว แบ่งภาพ กำหนดทิศทาง และความต่อเนื่อง

9 7244019 Line ความรู้สึก อารมณ์ของเส้นต่างๆ ในภาพ เส้นตรง ให้ความรู้สึกมั่นคงเป็นระเบียบ เส้นนอน ให้ความสงบ นิ่ง เรียบร้อย เส้นเฉียง ให้ความรู้สึกถึงการเคลื่อนใหว ความไม่หยุดนิ่ง พลังขับเคลื่อน เส้นโค้ง ให้ความรู้สึกนิ่มนวล พลิ้วไหว เส้นหยัก ให้ความรู้สึกถึงความไม่เป็นระเบียบ การไม่อยู่ใน กรอบ ความอิสระ หรือความสับสนวุ่นวาย ขึ้นอยู่กับความ หยักมากหรือน้อย เส้นเล็กและบาง ให้ความรู้สึก เบาและเฉียบคม ในขณะที่ เส้นหนาให้ความหนักแน่นในการนำสายตา

10 72440110 Line

11 72440111 Plane ระนาบเป็นองค์ประกอบที่เกิดจากเส้นที่ ขยายตัว หรือกลุ่มของจุดที่เกิดความกว้าง และความยาว เป็นองค์ประกอบที่เป็น 2 มิติ แสดงขอบเขตของพื้นที่ในภาพ ระนาบมีหลายรูปร่าง Shape แตกต่างกัน ซึ่ง ให้ความรู้สึกที่แตกต่างกัน

12 72440112 Circle ให้ความรู้สึกเป็นศุนย์กลาง เป็นที่รวมความสนใจ หรือการปกป้องคุ้มครอง เมื่อมองไปยังเส้นขอบแล้วมีความคาดหวังว่าจะ บรรจบที่เดิม มีความคงเส้นคงวาในการดำเนินเส้นขอบ

13 72440113 Square ให้ความรู้สึกสงบ มั่นคง เป็นระเบียบ เมื่อวางในแนวตั้งฉากให้ความรู้สึก เคลื่อนไหว เมื่อวางแนวทแยงสร้างจุดสนใจได้ดี จัดวางง่าย เป็นกลุ่มก้อน

14 72440114 Triangle ให้ความรู้สึกหยุดนิ่ง มั่นคง ส่วนปลายของมุม ให้ความรู้สึกทิศทาง ความเฉียบ คม มีแรงผลักดัน

15 72440115 Hexagon ให้ความรู้สึกถึงการเชื่อมโยง การเป็นหน่วย Modular อย่างไม่มีขอบเขตสิ้นสุด ความเข้ากันได้อย่างลงตัว สร้างทิศทางการมองให้แตกต่างจากปกติที่มีระดับ และดิ่งเท่านั้น

16 72440116 Organic ให้ความรู้สึกถึงความอิสระ การเลื่อนไหล การไม่มีกฎเกณฑ์ที่แน่นอนตายตัว

17 72440117 Colour เป็นองค์ประกอบที่สำคัญในการ ออกแบบ มีอิทธิพลในเรื่องอารมณ์ การสื่อ ความหมายที่เด่นชัด การกระตุ้นการรับรู้ของมนุษย์ ให้เกิดความสวยงาม การสื่อความหมายทางอ้อม

18 72440118 คุณสมบัติ 3 ประการ Colour เนื้อสี สี (Hue) –ความแตกต่างของสีบริสุทธิ์แต่ละสี โดยแบ่งเป็น สีของแสง Coloured Light (Additive Color Mixing) RGB สีของสาร Coloured Pigment (Subtractive Color Mixing) CMYK น้ำหนักสี (Value Brightness) ความสดของสี (Intensity Saturation)

19 72440119 Colour Wheel สีปฐมภูมิ Primary Colours – คือสีที่ไม่สามารถสร้างขึ้นด้วยการผสมสีอื่นใด –Red, yellow, blue สีทุติยภูมิ Secondary Colours – คือสีที่เกิดจากการผสมสีปฐมภูมิเข้าด้วยกัน –Green, orangle, purple สีตติยภูมิ Tertiary Colours – คือสีที่เกิดจากการผสมสีปฐมภูมิเข้ากับสีทุติยภูมิ –Yellow-orange, red-orange, red-purple, –blue-purple, blue-green & yellow-green

20 72440120 สีโทนร้อน สีโทนเย็น สีถูกแบ่งออกเป็นสองกลุ่มตามอุณหภูมิสี สีโทนร้อน ให้ความรู้สึกมีพลัง อบอุ่น สนุกสนาน ดึงดูด มีความน่าสนใจดี สีโทนเย็น ให้ความรู้สึกเรียบ สงบ เยือกเย็น ลึกลับ มีระดับ Warm colors are often said to be hues from red through yellow, browns and tans included; Cool colors are often said to be the hues from blue green through blue violet, most grays included.

21 72440121 น้ำหนักของสี (Value) ความสว่างของสี Brightness หรือการเพิ่มขาว เติมดำ ให้กับสี เพิ่มมิติ มีความลึก มีโทน สร้างความสมจริง Low ValueHigh Value Low Brightness High Brightness

22 72440122 ความสดของสี (Intensity) คือการเพิ่มลดปริมาณสีให้กับภาพ หากปรับลดมาก ๆ จะเป็นภาพขาวดำ หากเพิ่มมาก ๆ เป็นภาพสีฉูดฉาด

23 72440123 การเลือกเนื้อสีจากความหมาย สีแดง อ้างอิงมาจากดวงอาทิตย์และไฟ ซึ่งให้ความ สว่าง ความร้อน พลัง พลังงาน ความแรง ชาวจีน ถึงว่าสีแดงเป็นสีมงคล ความเป็นผู้นำ

24 72440124 การเลือกเนื้อสีจากความหมาย สีเหลือง ให้อารมณ์ของความสดใส ปลอดโปร่ง ดึงดูดสายตา มองเห็นได้แต่ไกล

25 72440125 การเลือกเนื้อสีจากความหมาย สีน้ำเงิน ให้ความหมายของความสงบเรียบ ความสุขุม ความมีราคา ให้อารมณ์หรูหรามีระดับ มีความสุภาพ หนักแน่น สีของผู้ชาย

26 72440126 การเลือกเนื้อสีจากความหมาย สีส้ม ให้ความรู้สึก ดึงดูด ทันสมัย สดใส กระฉับกระเฉง มีพลัง

27 72440127 การเลือกเนื้อสีจากความหมาย สีเขียว มาจากสีของต้นไม้ ให้ความหมายเป็นสีที่มาจากธรรมชาติ ให้ความรู้สึก เย็นสบาย ชุ่มชื่น สบายตา

28 72440128 การเลือกเนื้อสีจากความหมาย สีม่วง ให้ความรู้สึก อารมณ์หนักแน่น มีเสน่ห์ ความลับ สิ่งที่ปกปิด

29 72440129 การเลือกเนื้อสีจากความหมาย สีชมพู ให้ความรู้สึก ความอ่อนหวาน นุ่มนวล ความรัก วัยรุ่น ผู้หญิง

30 72440130 การเลือกเนื้อสีจากความหมาย สีน้ำตาล ให้ความรู้สึก ความสงบ ความเรียบ ความเป็น ผู้ใหญ่ ความเก่าแก่ โบราณ บางครั้งก็สื่อถึง ไม้ แผ่นไม้ อิฐ

31 72440131 การเลือกเนื้อสีจากความหมาย สีฟ้า ให้ความรู้สึก โปร่งโล่งสบายตา สืบ เนื่องมาจากท้องฟ้าที่เราเห็น ความนุ่มนวล ความสุขสบาย

32 72440132 การเลือกเนื้อสีจากความหมาย สีเงิน ได้จากวัสดุมันวาว เช่น อลูมิเนียม เป็นวัสดุที่มียุค หลัง ไม่ได้มีตั้งแต่โบราณ ราคาแพง ให้ความรู้สึกสิ่งใหม่ ๆ ทันสมัย มีคุณค่า มีราคา ดู แข็งแกร่ง

33 72440133 การเลือกเนื้อสีจากความหมาย สีทอง ได้จากแร่ทองคำ จะต้องมีประกาย ทองเป็นตัวแทนของความมีคุณค่า ให้ความรู้สึกความมีราคา หรูหรา แพง

34 72440134 การเลือกเนื้อสีจากความหมาย สีขาว สื่อถึงความบริสุทธิ์ ให้ความรู้สึกความสะอาด เรียบง่าย ความโล่ง ความไม่มี

35 72440135 การเลือกเนื้อสีจากความหมาย สีเทา ให้ความเศร้า หม่นหมอง ไร้ชีวิตชีวา บางครั้ง สื่อถึงความเป็นกลาง

36 72440136 การเลือกเนื้อสีจากความหมาย สีดำ ให้ความมืด ความไม่เห็น ซ่อนความไม่รู้ ความน่า กลัว การออกแบบสีดำเป็นพื้น หรือสีเข้ม เพื่อใช้ขับสิ่งที่ อยู่ภายในให้เด่นชัดขึ้น

37 72440137 การเลือกน้ำหนักสี จากสีแท้ให้ความสดใสมากที่สุด เมื่อผสมขาว ทำให้ได้สีอ่อน เมื่อผสมสีดำทำให้ลดความสดใส

38 72440138 การเลือกจากความสดของสี สีที่มีความสดสูง ให้ความรู้สึกรุนแรง ตื่นตัว สะดุดตา สีที่มีความสดปานกลาง ให้ความรู้สึก ผ่อนคลาย สบายตา สีที่มีความสดน้อย ให้ความรู้สึกหม่น ความสงบ ไม่โดดเด่น เศร้า

39 72440139 การวางโครงสี การใช้วงจรสี โดยการเลือก 3 คู่สี มุมละ 120 องศา เป็นสามเหลี่ยมด้านเท่า สามารถเลือกแบบ สามเหลี่ยมหน้าจั่วได้ด้วย ควรให้มีสีใดสีหนึ่งเป็นพระเอกเสมอ

40 72440140 การวางโครงสี การใช้สีเดียว โดยการเลือก ใช้เพียงสี เดียว (Monochrome) ที่เหลือโดยการ เปลี่ยน Value และ Brightness

41 72440141 การวางโครงสี การใช้สีข้างเคียง (Analogous) โดยการ หยิบสีที่อยู่ข้างเคียงกันในวงจรสี 2 3 4 สี

42 72440142 การวางโครงสี การใช้สีคู่ตรงข้าม Complementary Colour ช่วยกันเกิดการกระตุ้นสะดุดตาได้ดี กระตุ้นการรับรู้ ขัดแย้งได้ดี ควรมีการเลือกใช้ปริมาณสี 70:30 เพื่อให้มีสีใด สีหนึ่งเด่นสะดุดตา

43 72440143 การวางโครงสี การใช้สี 4 สีในวงจรสี ในรูป สี่เหลี่ยมด้านเท่า หรือจตุรัส และแบบ สี่เหลี่ยมผื่นผ้า

44 72440144 Color Context Red appears more brilliant against a black background and somewhat duller against the white background. In contrast with orange, the red appears lifeless; in contrast with blue-green, it exhibits brilliance. Notice that the red square appears larger on black than on other background colors. Color Voodoo Publications

45 72440145 Color Context Small purple rectangle on the left appears to have a red-purple tinge when compared to the small purple rectangle on the right. Both are the same color. So, this demonstrates how three colors can be perceived as four colors. Color Voodoo Publications

46 72440146 การจัดองค์ประกอบภาพ มีหลักในการจัดองค์ประกอบใหญ่ 2 ประการคือ การสร้างเอกภาพ (Unity) การสร้างจุดเด่น เน้นจุดสำคัญ (Emphasize)

47 72440147 เอกภาพ 1. การสร้างความใกล้ชิดให้กับองค์ประกอบ (Proximity) โดยการใช้ระยะห่างระหว่าง วัตถุ ให้มีความรู้สึกการเป็นกลุ่มก้อน พวก พ้องเดียวกัน

48 72440148 เอกภาพ 2. การสร้างความซ้ำกันของ องค์ประกอบภาพ (Repetition)

49 72440149 เอกภาพ 3. การสร้างความต่อเนื่องขององค์ประกอบ (Continuation) ความต่อเนื่องที่มาจาก เส้น ทิศทางของ องค์ประกอบที่อยู่ในภาพ ซึ่งนำสายตาไป ในทางที่ผู้ออกแบบนำไป ให้เป็นเอกภาพ

50 72440150 เสริมจุดเด่น เน้นจุดสำคัญ หลักในการสร้างสุดสนใจมี 3 วิธีคือ การวางตำแหน่งจุดสนใจในงาน (Focus Point) การสร้างความแตกต่างในงาน (Contrast) การวางแยกองค์ประกอบให้โดดเด่น (Isolation)

51 72440151 Focus Point ต้องทราบว่า ในหน้าจอนั้น ๆ เน้นอะไร ตามลำดับ มองงานเป็นตาราง 9 ช่อง 0-4 แสดงลำดับ ความสำคัญของพฤติกรรมของคนส่วนใหญ่ 4 0 0 0 1 2 0 2 3

52 72440152 Focus Point ตำแหน่งหมายเลข 0 เป็นตำแหน่งที่มีควรวางองค์ประกอบที่ไม่ต้องการ เน้น เพราะเป็นตำแหน่งที่สายตาคนส่วนใหญ่ไม่ให้ ความสำคัญ 4 0 0 0 1 2 0 2 3

53 72440153 Focus Point ตำแหน่งหมายเลข 1 มนุษย์ส่วนใหญ่อ่านหนังสือจากมุมบนซ้ายลง ขวาล่าง จึงเป็นจุดอันดับแรกในภาพ 4 0 0 0 1 2 0 2 3

54 72440154 Focus Point ตำแหน่งหมายเลข 2 เป็นตำแหน่งที่มีพลังในการดึงดูดสายตา มี ความเฉียบ เนื่องจากเรียกร้องความสนใจได้ดี 4 0 0 0 1 2 0 2 3

55 72440155 Focus Point ตำแหน่งหมายเลข 3 เป็นตำแหน่งที่สำคัญที่สืบเนื่องมาจากตำแหน่ง ที่ 1 เพราะเป็นแหน่งสุดท้ายที่คนส่วนใหญ่ กวาดสายตามอง 4 0 0 0 1 2 0 2 3

56 72440156 Focus Point ตำแหน่งหมายเลข 4 เป็นตำแหน่งที่สำคัญที่คนส่วนใหญ่มองก่อน กำหนดอื่น ๆ และเป็นจุดรวมสายตาจากจุดอื่น ๆ 4 0 0 0 1 2 0 2 3

57 72440157 Contrast การสร้างความน่าสนใจให้กับภาพด้วยการเพิ่มความ แตกต่างสามารถใช้ได้หลายวิธี การสร้างขนาดที่แตกต่างขององค์ประกอบ รุปร่างที่แตกต่างกันขององค์ประกอบ รุปลักษณ์หรือลักษณ์ที่แตกต่างกัน

58 72440158 Isolation การวางแยกองค์ประกอบให้โดดเด่น โดยใช้หลัก ขนาดและสัดส่วนในการจัดองค์ประกอบ ที่ว่างในเพื่อที่แสดงการแบ่งแยก ความสมดุลในงาน สมดุล 2 ข้างเหมือนกัน สมดุล 2 ข้างไม่เหมือนกัน จังหวะของภาพ เทคนิคในการออกแบบ


ดาวน์โหลด ppt Interactive Design Modified from Krich Sintanakul’s Department of Computer Education KMUTNB.

งานนำเสนอที่คล้ายกัน


Ads by Google