WEBVTT 1 00:00:00.000 --> 00:00:04.000 (อาจารย์) 2 00:00:04.013 --> 00:00:08.013 ขึ้นมาค่ะ เพราะว่าในนี้ 3 00:00:08.015 --> 00:00:12.015 มีงานให้เราด้วย 2 งานนะคะ ท้าย ๆ คาบ 4 00:00:12.018 --> 00:00:16.018 ดูสไลด์ตามไป 5 00:00:16.020 --> 00:00:20.020 สวัสดีค่ะ 6 00:00:20.021 --> 00:00:24.021 ได้ยินนะคะ 7 00:00:24.022 --> 00:00:28.022 8 00:00:28.023 --> 00:00:32.023 9 00:00:32.024 --> 00:00:36.024 มีใครเข้า Ca 10 00:00:36.027 --> 00:00:40.027 class 11 00:00:40.028 --> 00:00:44.028 ครูสอนวิชานี้หลายห้องนะคะ ก็จะมี 12 00:00:44.029 --> 00:00:48.029 ตั้งชื่อชั้นเรียนแยกกันไปนะคะ 13 00:00:48.030 --> 00:00:52.030 วันนี้เราพูดถึงเรื่อง Interaction 14 00:00:52.031 --> 00:00:56.031 นะคะ ภาษาไทย ก็คือการ 15 00:00:56.032 --> 00:01:00.032 สัมพันธ์นะคะ ตามชื่อวิชาของเรานะคะ การปฏิสัมพันธ์กัน 16 00:01:00.032 --> 00:01:04.032 ระหว่างมนุษย์กับคอมพิวเตอร์นะคะ เราพูดถึง 17 00:01:04.033 --> 00:01:08.033 มนุษย์ พูดถค 18 00:01:08.034 --> 00:01:12.034 สภาพแวดล้อมในการทำงาน 19 00:01:12.034 --> 00:01:16.034 ที่มนุษย์ที่มีคอมพิวเตอร์ในการดำเนินการ 20 00:01:16.034 --> 00:01:20.034 ไปแล้วนะคะ พูดถึงกระบวนการ 21 00:01:20.035 --> 00:01:24.035 เรียนรู้ รับรู้นะคะ การถ่ายทอดนะคะ 22 00:01:24.036 --> 00:01:28.036 นะคะ การประมวลผลนี่ไปแล้ว 23 00:01:28.038 --> 00:01:32.038 เราพูดถึงเทคโนโลยีไปแล้วด้วย 24 00:01:32.039 --> 00:01:36.039 ในคราวที่แล้ว ในคราวนี้ยังอยู่ในเฟส 25 00:01:36.039 --> 00:01:40.039 ของมนุษย์กับคอมพิวเตอร์อยู่นะคะ ก็คืออยู่ในส่วน 26 00:01:40.039 --> 00:01:44.039 ตามตัว dia 27 00:01:44.041 --> 00:01:48.041 ของ SCRI ในภาพนี้ 28 00:01:48.043 --> 00:01:52.043 วันนี้จะพูดถึงส่วนของการออกแบบ Input Output 29 00:01:52.044 --> 00:01:56.044 โดยใช้หลักการ 30 00:01:56.045 --> 00:02:00.045 นี่เราจะเรียกว่า "ส่วนต่อประสาน" 31 00:02:00.046 --> 00:02:04.046 นะคะ ถือเป็น 1 ในกระบวนการ 32 00:02:04.046 --> 00:02:08.046 กระบวนการคอมพิวเตอร์กราฟฟิกเหมือนกันนะคะ 33 00:02:08.048 --> 00:02:12.048 อยู่นะ ใน 34 00:02:12.049 --> 00:02:16.049 คราวนี้นะคะ ตัวคอนเท้น 35 00:02:16.052 --> 00:02:20.052 ที่จะพูดถึงวันนี้ ก็จะมีทั้ง 36 00:02:20.053 --> 00:02:24.053 นิยามนะคะ ของการปฏิสัมพันธ์ ก็คือความหมายนั่นล่ะ 37 00:02:24.053 --> 00:02:28.053 ปฏิสัมพันธ์คืออะไรบ้าง มีแบบจำลอง 38 00:02:28.055 --> 00:02:32.055 เป็นตัวหลักนะคะ ของ 39 00:02:32.056 --> 00:02:36.056 งานปฏิสัมพันธ์นะคะ มี Module 40 00:02:36.057 --> 00:02:40.057 มีแบบจำลองของใครบ้างนะคะ หลักของการยศาสตร์ 41 00:02:40.058 --> 00:02:44.058 หรือ Intention 42 00:02:44.059 --> 00:02:48.059 ก็คือกระบวนแบบ 43 00:02:48.060 --> 00:02:52.060 ที่เราจะใช้ในส่วนของ Interaction นะคะ หรือส่วนต่อประสาท 44 00:02:52.062 --> 00:02:56.062 Interaction ส่วนต่อประสานนะคะ 45 00:02:56.064 --> 00:03:00.064 ครูก็จะสรุปให้ว่าเราเรียนอะไรไปบ้าง 46 00:03:00.065 --> 00:03:04.065 ให้ทำมีงานให้ 47 00:03:04.066 --> 00:03:08.066 อันนี้มาดูนิยามของปฏิสัมพันธ์ก่อน 48 00:03:08.067 --> 00:03:12.067 นะคะ การปฏิสัมพันธ์คืออะไรนะคะ 49 00:03:12.068 --> 00:03:16.068 ก็คือการติดต่อสื่อสารระหว่าง uUser 50 00:03:16.070 --> 00:03:20.070 ระบบนะคะ ผู้ใช้กับระบบ 51 00:03:20.071 --> 00:03:24.071 โดยติดต่อผ่านส่วนที่เราเรียกว่า " 52 00:03:24.073 --> 00:03:28.073 ส่วนต่อประสานนะคะ ซึ่งถ้าเป็น 53 00:03:28.074 --> 00:03:32.074 มนุษย์กับมนุษย์นี่ เราจะเรียก 54 00:03:32.075 --> 00:03:36.075 ระบบนี่เราไม่สามารถคุยกับ 55 00:03:36.075 --> 00:03:40.075 คอมพิวเตอร์ได้โดยตรง เราจะติดต่อกับคอมพิวเตอร์นี่ 56 00:03:40.075 --> 00:03:44.075 ผ่านส่วนที่เรียกว่า "ส่วนต่อประสาน" นะคะ 57 00:03:44.078 --> 00:03:48.078 หรือเราอาจจะเรียกว่าผ่านตัวกลางนะคะ ส่วนต่อประส 58 00:03:48.079 --> 00:03:52.079 ผู้ใช้กับตัวระบบเองนะคะ ส่วน 59 00:03:52.081 --> 00:03:56.081 ต่อประสานเราจะใช้เมื่อไร เราจะใช้เมื่อผู้ใช้เริ่มป้อนคำสั่ง 60 00:03:56.081 --> 00:04:00.081 นะคะ หรือการออกคำสั่งนั่นล่ะ 61 00:04:00.083 --> 00:04:04.083 ให้ส่วนต่อประสานนะคะ แล้วหน้าที่ หลังจากนั้น ก็จะเป็ฯ 62 00:04:04.084 --> 00:04:08.084 ที่ต้องดำเนินตามคำสั่งของผู้ใช้ไป 63 00:04:08.084 --> 00:04:12.084 นะคะ ดังนั้น นะคะ จึงสรุปได้ว่า 64 00:04:12.086 --> 00:04:16.086 การสื่อสารระหว่างคนนี่ ระหว่างมนุษย์ 65 00:04:16.087 --> 00:04:20.087 หรือผู้ใช้กับระบบนี่ เป็นรูปแบบการสื่อที่เรียกส 66 00:04:20.087 --> 00:04:24.087 lagure เป็นภาษาทางอ้อม 67 00:04:24.089 --> 00:04:28.089 เพราะเราไม่ได้คุยกับคอมพิวเตอร์ทางตรง 68 00:04:28.090 --> 00:04:32.090 อันนี้คือการสื่อสารแบบ direct action คือ สื่อสารโดยตรง 69 00:04:32.091 --> 00:04:36.091 แต่ของเรานะคะ สื่อสารผ่าน 70 00:04:36.093 --> 00:04:40.093 71 00:04:40.094 --> 00:04:44.094 คราวนี้แบบจำลองการปฏิสัมพันธ์ 72 00:04:44.094 --> 00:04:48.094 นะคะ ใน SCI มีแบบจำลองหลัก ๆ อยู่ 2 ตัวนะคะ 73 00:04:48.096 --> 00:04:52.096 อันแรกเลย ก็คือแบบจำลองที่เราจะพูดถึง 74 00:04:52.097 --> 00:04:56.097 เป็นต้นกำเนินของ 75 00:04:56.098 --> 00:05:00.098 คนที่คิดเกี่ยวกับทฤษฎีการปฏิสัมพันธ์นะคะ 76 00:05:00.099 --> 00:05:04.099 โดยก่อนที่เราจะพูดถึงแบบจำลองนะคะ เราจะต้องรู้จัก 77 00:05:04.100 --> 00:05:08.100 ใน 3 ส่วนนี้ก่อน ก็คือ 1. คำศัทพ์ 78 00:05:08.102 --> 00:05:12.102 นะคะ หรือสร้างปฎิสัมพันธ์ 79 00:05:12.102 --> 00:05:16.102 เราจะต้องรู้คำศัพท์ก่อนนะคะ 80 00:05:16.104 --> 00:05:20.104 เราค่อยเรียนรู้แบบจำลองว่ามีกระบวนการอะไรบ้างนะคะ แล้วก็กรอบ 81 00:05:20.105 --> 00:05:24.105 นะคะ ของการปฏิสัมพันธ์มพันธ์มีอะไรบ้าง 82 00:05:24.106 --> 00:05:28.106 ศัพท์ที่เกี่ยวข้องกับ 83 00:05:28.107 --> 00:05:32.107 อันนี้เราต้องมีความเข้าใจในคำศัพท์ตรงนี้ก่อน 84 00:05:32.108 --> 00:05:36.108 นะคะ ก่อนที่เราจะไปสร้างส่วนต่อประสาน 85 00:05:36.110 --> 00:05:40.110 ในการปฏิสัมพันธ์ คำแรก ก็คือ Domain 86 00:05:40.110 --> 00:05:44.110 นะคะ Key word ที่ 87 00:05:44.112 --> 00:05:48.112 สำคัญของ Content นะคะ อาจารย์จะ Hiligh ไว้ให้ 88 00:05:48.114 --> 00:05:52.114 เผื่อนักศึกษาไปอ่านสอบ จับประเด็น 89 00:05:52.115 --> 00:05:56.115 ไปสรุปเนื้อหาอีกทีนะคะ เราสังเกต 90 00:05:56.117 --> 00:06:00.117 เป็นตัวหนังสือสีเหลืองให้ เป็น 91 00:06:00.117 --> 00:06:04.117 คีย์เวิร์ดที่สำคัญของ Paragraph 92 00:06:04.119 --> 00:06:08.119 นะคะ เป็นคีย์เวิร์ดที่สำคัญของเรื่องนั้น ๆ นะคะ อย่าง domain นี่ 93 00:06:08.120 --> 00:06:12.120 มันก็คือขอบเขตของการทำงาน 94 00:06:12.121 --> 00:06:16.121 นะคะ ซึ่ง 95 00:06:16.122 --> 00:06:20.122 เวลาเราศึกษาเรื่องใดเรื่องหนึ่งนี่ 96 00:06:20.123 --> 00:06:24.123 หรือขอบเขตของงานให้ชัดเจนนะคะ เช่น domain 97 00:06:24.123 --> 00:06:28.123 ของกราฟิกดีไซน์ Domain ของกราฟฟิก 98 00:06:28.125 --> 00:06:32.125 ศึกษาของเขตของการศึกษาออกแบบงานกราฟิก 99 00:06:32.125 --> 00:06:36.125 นะคะ ยกตัวอย่าง คือ 100 00:06:36.127 --> 00:06:40.127 งานกราฟฟิกก็เช่น การศึกษารูปทรงต่าง ๆ 101 00:06:40.129 --> 00:06:44.129 การวาดพื้นผิวให้กับวัตถุ 102 00:06:44.129 --> 00:06:48.129 ดีไซน์นะคะ ส่วนผลลัพธ์ 103 00:06:48.130 --> 00:06:52.130 นะคะ หรือเป้าหมายหรือ Goal ก็คือสิ่งที่นักศึกษา 104 00:06:52.130 --> 00:06:56.130 ต้องการทำให้เสร็จ ทำให้สำเร็จนะคะ 105 00:06:56.132 --> 00:07:00.132 อย่างเช่น ถ้าเป็นกราฟิก 106 00:07:00.133 --> 00:07:04.133 ที่เราต้องการจัดการ 107 00:07:04.133 --> 00:07:08.133 รูปทรงต่าง ๆ ก็คือการสร้าง กำหนดเป้าหมายไว้ก่อน 108 00:07:08.134 --> 00:07:12.134 ในเรื่องของการดีไซน์นะคะ 109 00:07:12.135 --> 00:07:16.135 เราก็กำหนดเป้าหมายไว้ว่า เราต้องการสร้าง 110 00:07:16.137 --> 00:07:20.137 นะเป็นสีแดงล้วน เป็นผืน 111 00:07:20.137 --> 00:07:24.137 ผ้าใบ อันนี้คือเป้าหมาย เป้าหมาย 112 00:07:24.138 --> 00:07:28.138 ปลายทางหรือผลลัพธ์ที่เราต้องการ ต้องการได้นะคะ 113 00:07:28.138 --> 00:07:32.138 แล้วงานที่ต้องทำมีอะไรบ้างนะคะ 114 00:07:32.139 --> 00:07:36.139 งานหรือการปฏิบัติเพื่อทำ 115 00:07:36.140 --> 00:07:40.140 ให้ภารกิจของเราสำเร็จนะคะ ตอนนี้ 116 00:07:40.141 --> 00:07:44.141 ผลลัพธ์ที่เราต้องการ ก็คือการสร้างรูปทรงสามเหลี่ยมสีแดง 117 00:07:44.141 --> 00:07:48.141 สีแดงล้วนนะคะ ไม่มีสีอื่นมาพาดนะ 118 00:07:48.143 --> 00:07:52.143 งานที่ต้องทำ ก็คือเลือกเครื่องมือ 119 00:07:52.143 --> 00:07:56.143 สำหรับเติมนะคะ เติมสี พอเลือกได้แล้ว 120 00:07:56.144 --> 00:08:00.144 เราก็คลิกตรงรูปทรงสามเหลี่ยมนะคะ แล้วก็เอาไปเติมสี 121 00:08:00.145 --> 00:08:04.145 อันนี้คืองานที่ต้องทำนะคะ สุดท้ายสิ่งสำคัญนะคะ 122 00:08:04.146 --> 00:08:08.146 นะคะ อีกศัพท์หนึ่งที่สำคัญลืม 123 00:08:08.146 --> 00:08:12.146 ไม่ได้เลย ก็คือ Intention Intention 124 00:08:12.146 --> 00:08:16.146 หมายถึง เจตนาในการสร้างงาน 125 00:08:16.147 --> 00:08:20.147 หรือความตั้งใจจริงที่เราจะทำงาน 126 00:08:20.149 --> 00:08:24.149 ศัพท์ 4 คำศัพท์นี้ 127 00:08:24.149 --> 00:08:28.149 เกี่ยวข้องกับการปฏิสัมพันธ์นะคะ 128 00:08:28.150 --> 00:08:32.150 เราต้องรู้ทั้ง 4 เรื่องนี้นะคะ เวลาที่เรา 129 00:08:32.152 --> 00:08:36.152 สร้างงานปฏิสัมพันธ์นะคะ คราวนี้เรา 130 00:08:36.153 --> 00:08:40.153 มาดูแบบจำลองของ norman บ้างนะคะ 131 00:08:40.153 --> 00:08:44.153 แบบจำลองของนอแมนมีอยู่ 132 00:08:44.156 --> 00:08:48.156 การทำงานนะคะ เราเรียกว่าวงจรปฏิสัมพันธ์ 133 00:08:48.156 --> 00:08:52.156 Interactive cycle นะคะ แบ่งเป็น 2 ขั้นตอนใหญ่ ๆ ก็คือ 134 00:08:52.157 --> 00:08:56.157 เราเรียกว่า Execution หมายถึงขั้นตอน 135 00:08:56.158 --> 00:09:00.158 การดำเนินการนะคะ กับขั้นตอนการประเมิน 136 00:09:00.160 --> 00:09:04.160 evaluation นะคะ ทำแล้วก็ประเมินนะคะ มี 2 ขั้นตอนใหญ่ 137 00:09:04.161 --> 00:09:08.161 โดยนะคะ การนำแบบจำลอง Norman 138 00:09:08.162 --> 00:09:12.162 อธิบายว่าทำไมบางระบบถึง 139 00:09:12.163 --> 00:09:16.163 ใช้งานยากกว่าบางระบบ ทำไมบางระบบ 140 00:09:16.164 --> 00:09:20.164 มันถึงมีความซับซ้อนนะคะ ทั้ง ๆ ที่ 141 00:09:20.165 --> 00:09:24.165 การทำงานมันก็มีแค่ 2 ส่วน ก็คือ ถ้าเ 142 00:09:24.167 --> 00:09:28.167 ของการประเมินนะคะ แต่ 143 00:09:28.167 --> 00:09:32.167 แบบจำลองนอแมนนี่จะมาอธิบายการ 144 00:09:32.168 --> 00:09:36.168 ทำงานของระบบงานบางส่วนนี่ 145 00:09:36.169 --> 00:09:40.169 บางงานนี่มันถึงยาก มันถึงมีขั้นตอนซับซ้อน 146 00:09:40.170 --> 00:09:44.170 บางงานทำไมมันง่ายนะคะ 147 00:09:44.171 --> 00:09:48.171 ซึ่ง Scout of Exclution 148 00:09:48.171 --> 00:09:52.171 ก็คือการกำหนดรูปแบบนะคะ ให้กับผู้ใช้น่ะค่ะ 149 00:09:52.173 --> 00:09:56.173 งานบางงานนี่ ผู้ใช้มีความต้องการ 150 00:09:56.174 --> 00:10:00.174 ที่จะทำแต่ก็ต้องการที่จะใส่ได 151 00:10:00.174 --> 00:10:04.174 นะคะ แต่อีกงานหนึ่งนะคะ 152 00:10:04.176 --> 00:10:08.176 ผู้ใช้คาดหวังว่าจะเห็นสิ่งนี้นะคะ 153 00:10:08.177 --> 00:10:12.177 หรือความต้องการที่แท้จริงของผู้ใช้ 154 00:10:12.179 --> 00:10:16.179 ตัวระบบไม่สามารถตอบสนองผู้ใช้ได้ 155 00:10:16.180 --> 00:10:20.180 นักศึกษาเคยเห็นงานที่... 156 00:10:20.181 --> 00:10:24.181 เอาเราก็ได้ นักศึกษาเป็นผู้ใช้อยู่แล้ว เป็น 157 00:10:24.181 --> 00:10:28.181 ผู้ใช้ระบบ มีไหมคะ ที่เราต้องการเห็นระบบ 158 00:10:28.181 --> 00:10:32.181 แบบนี้หรือ 159 00:10:32.184 --> 00:10:36.184 ต้องการเห็น View ของระบบ 160 00:10:36.185 --> 00:10:40.185 รูปแบบหนึ่ง แต่สิ่งที่เราเห็นเป็นอีกแบบหนึ่ง 161 00:10:40.186 --> 00:10:44.186 อันนี้เราเรียกความคาดหวัง เคยมีระบบที่เรา 162 00:10:44.186 --> 00:10:48.186 หรือเข้าไปจัดการได้มากกว่านี้ 163 00:10:48.187 --> 00:10:52.187 โดยสิทธิ์ที่เราได้นี่ คือ ทำได้แค่นี้ 164 00:10:52.189 --> 00:10:56.189 มีระบบแบบนี้บ้างไหมคะ ในชีวิตเรา 165 00:10:56.189 --> 00:11:00.189 เคยใช้งานระบบไหนที่เราคาดหวังน่ะค่ะ ว่า 166 00:11:00.189 --> 00:11:04.189 เราคาดหวังน่ะค่ะ ว่า 167 00:11:04.190 --> 00:11:08.190 ใช้ระบบนี้ 1, 2, 3 168 00:11:08.191 --> 00:11:12.191 แต่พอไปใช้งานจริง ๆ มันทำงานได้แค่ 1 หรือเรามีสิทธิ์เข้าข้อมูล 169 00:11:12.192 --> 00:11:16.192 ได้แค่ 1 อย่าง เอาอย่างนี้ 170 00:11:16.193 --> 00:11:20.193 ระบบของมหาวิทยาลัยเคยเข้าไปดูเกรด 171 00:11:20.193 --> 00:11:24.193 ผ่านระบบไหมคะ เคย ในระบบนั้น 172 00:11:24.195 --> 00:11:28.195 เราทำอะไรได้บ้าง ระบบบริหารการสื่อสารน่ะค่ะ นักศึกษา 173 00:11:28.196 --> 00:11:32.196 ก็จะเข้าไปใน Viwe ของนักศึกษานะคะ 174 00:11:32.197 --> 00:11:36.197 ข้อมูลส่วนตัวของตัวเองได้ไหมคะ 175 00:11:36.198 --> 00:11:40.198 ได้ไม่เอ่ย ข้อมูลส่วนตัว 176 00:11:40.199 --> 00:11:44.199 ของเราเอง เช่น ชื่อผิด นามสกุลผิด ที่อยู่ 177 00:11:44.200 --> 00:11:48.200 เบอร์โทร. ได้ไหมคะ ไม่ได้ แล้วเราอยากแก้เองได้ไมหคะ 178 00:11:48.201 --> 00:11:52.201 คือ มันข้อมูลนะ เราอยากกรอกเอ 179 00:11:52.202 --> 00:11:56.202 เราอยากก่อเอง แต่เขาให้สิทธิ์เรา 180 00:11:56.203 --> 00:12:00.203 แค่เรียกดู อันนี้คือความคาดหวังของเรา 181 00:12:00.206 --> 00:12:04.206 ก็คือเข้าไปแล้ว ก็ข้อมูลเรา เราเปลี่ยนเบอร์ 182 00:12:04.207 --> 00:12:08.207 เราก็จะเห็นว่ามันเป็นเบอร์เก่า เป็นข้อมูล 183 00:12:08.208 --> 00:12:12.208 เก่า เราอยากแก้ใหม่ทำไม่ได้ เราต้องไปติดต่อ 184 00:12:12.217 --> 00:12:16.217 เจ้าหน้าที่ที่อยู่ในฝ่ายแก้ไขน่ะค่ะ 185 00:12:16.218 --> 00:12:20.218 พอเราเข้าไปดูเห็นประวัติตัวเองแล้ว 186 00:12:20.219 --> 00:12:24.219 ดูเกรดตัวเองได้ไหมคะ 187 00:12:24.220 --> 00:12:28.220 ดูเกรดเพื่อนได้ไหมคะ 188 00:12:28.221 --> 00:12:32.221 ไม่ได้ อยากดูเกรดเพื่อนได้ไหมคะ 189 00:12:32.221 --> 00:12:36.221 อยากเห็นเกรดเพื่อนไหม อยากเห็นเกรดเพือ่น 190 00:12:36.223 --> 00:12:40.223 ถามว่าแล้วเพื่อนอยากให้เราให้เกรดเราไหม 191 00:12:40.224 --> 00:12:44.224 เราไหม คำตอบเดียวกัน 192 00:12:44.225 --> 00:12:48.225 นะคะ เราอยากไปเห็นเกรดหรือข้อมูลคนอื่น แต่เราไม่อยากให้คนอื่น 193 00:12:48.226 --> 00:12:52.226 เห็นข้อมูลเรา ผลมันก็ออกมาแค่ เห็นข้อมูลเรา 194 00:12:52.227 --> 00:12:56.227 พอดูได้แล้วนะ ดได้แค่ข้อมูล 195 00:12:56.228 --> 00:13:00.228 ตัวเอง แก้เกรดได้ไหม 196 00:13:00.228 --> 00:13:04.228 วิชานี้ตั้งใจมากเลย ทำไมถึงได้แค่ B 197 00:13:04.230 --> 00:13:08.230 ทำไมไม่ได้ A อย่างนี้ค่ะ แก้ไม่ได้ค่ะ เพราะสิทธิ์ 198 00:13:08.231 --> 00:13:12.231 แค่เรียกดูนะคะ อันนี้ คือ 199 00:13:12.232 --> 00:13:16.232 แบบจำลองนอแมนจะมาอธิบายส่วนนี้ 200 00:13:16.233 --> 00:13:20.233 ระบบเหมือนง่าย ๆ นะ 201 00:13:20.233 --> 00:13:24.233 เห็นแล้ว แต่แก้ไม่ได้ หรือเราอยากเห็นสโคบ 202 00:13:24.234 --> 00:13:28.234 แต่เราก็ดูได้แค่นี้นะคะ 203 00:13:28.235 --> 00:13:32.235 จะอธิบายนะคะ อธิบายระบบว่าทำไมบางระบบมันถึง 204 00:13:32.236 --> 00:13:36.236 เป็น View แบบนี้ มันแต่ละสาย 205 00:13:36.237 --> 00:13:40.237 ก็จะต่างกันออกไปอีกนะคะ 206 00:13:40.237 --> 00:13:44.237 เพิ่มนะคะ ในกรอบการลงมือทำ 207 00:13:44.238 --> 00:13:48.238 จริง ๆ เราเรียกระบอบการทำงานของเอบาวกับวีว 208 00:13:48.239 --> 00:13:52.239 นะคะ ก็คือมาขยาย 209 00:13:52.241 --> 00:13:56.241 แบบจำลองของ Norman ว่า ในความเป็นจริงแล้ว 210 00:13:56.243 --> 00:14:00.243 การสร้างปฏิสัมพันธ์กับระบบนี่ เร 211 00:14:00.244 --> 00:14:04.244 ลงไปได้เป็น 4 ส่วนหลัก ๆ นะคะ 212 00:14:04.245 --> 00:14:08.245 ส่วนแรก ก็คือผู้ใช้ 213 00:14:08.247 --> 00:14:12.247 ส่วนที่ 2 คือ Input ส่วนที่ 3 คือ ตัวระบบ 214 00:14:12.247 --> 00:14:16.247 เองนะคะ และส่วนที่ 4 เป็นส่วน output 215 00:14:16.248 --> 00:14:20.248 นะคะ ซึ่งสิ่งที่นักศึกษาจะต้องทำความเข้าใจ 216 00:14:20.249 --> 00:14:24.249 ก็คือใน 4 ส่วนนี้นะคะ จะมีภาษา 217 00:14:24.250 --> 00:14:28.250 นะคะที่ใช้ในการปฏิสัมพันธ์นะคะ 218 00:14:28.251 --> 00:14:32.251 ถ้าเป็นตัวระบบเอง ตัวระบบ 219 00:14:32.252 --> 00:14:36.252 หลักนี่เราจะใช้ Core Language 220 00:14:36.253 --> 00:14:40.253 ระบบจะใช้ภาษาแกนนะคะ 221 00:14:40.254 --> 00:14:44.254 ส่วนของการปฏิบัติ การทำงานของระบบ 222 00:14:44.255 --> 00:14:48.255 อันนี้ผู้ใช้จะสามารถใช้ 223 00:14:48.256 --> 00:14:52.256 ภาษาที่เรียกว่า ภาษาภารกิจ หรือ ภาษา 224 00:14:52.257 --> 00:14:56.257 ในการทำงาน เราเรียกว่า task 225 00:14:56.257 --> 00:15:00.257 ในการรับข้อมูล และแสดงผลนะคะ Input 226 00:15:00.259 --> 00:15:04.259 interface เป็นส่วนข 227 00:15:04.259 --> 00:15:08.259 ซึ่งเป็นส่วนปฏิสัมพันธ์ที่เราจะต้อง Design 228 00:15:08.260 --> 00:15:12.260 เราเป็นเอกเทคโนโลยีสารสนเทศนะคะ ไม่ใช่ใช้งานระบบ 229 00:15:12.261 --> 00:15:16.261 นักศึกษาต้องสามารถดีไซน์ 230 00:15:16.261 --> 00:15:20.261 231 00:15:20.263 --> 00:15:24.263 อีกหัวข้อหนึ่งนะคะ เรารู้แล้ว ส่วนที่เราต้องทำ 232 00:15:24.264 --> 00:15:28.264 ก็คือส่วน interface หรือส่วน 233 00:15:28.265 --> 00:15:32.265 การสร้างส่วนต่อประสานนะคะ เราจะสร้างแบบไหนนะคะ 234 00:15:32.265 --> 00:15:36.265 นี้ได้ไหมเอ่ย การยศาสตร์ หรือ โอโคโดมิ 235 00:15:36.267 --> 00:15:40.267 เคยได้ยินไหมคะ 236 00:15:40.268 --> 00:15:44.268 เคยพูดไปตอนบทที่ 1 237 00:15:44.269 --> 00:15:48.269 ใน 238 00:15:48.270 --> 00:15:52.270 นะคะ มี เออโคโนมิก 239 00:15:52.271 --> 00:15:56.271 นะคะ ภาษาไทยแปลว่า การยศาสตร์ 240 00:15:56.272 --> 00:16:00.272 นะคะ หมายถึงการศึกษาถึงลักษณะทางกายภาพ 241 00:16:00.274 --> 00:16:04.274 ของคนนะคะ บางทีเราจะศึกษา 242 00:16:04.275 --> 00:16:08.275 ในสโคปของ hum 243 00:16:08.276 --> 00:16:12.276 ที่เกี่ยวข้องกับมนุษย์ ปัจจัยที่เกี่ยวข้องกับระบบนี่ล่ะ 244 00:16:12.277 --> 00:16:16.277 ก็เลยมีตัวอย่างนะคะ นอกจาก 245 00:16:16.277 --> 00:16:20.277 เราจะศึกษามนุษย์แล้วนะคะ เราก็จะ 246 00:16:20.278 --> 00:16:24.278 ที่เอามาอำนวนความสะดวกในการ 247 00:16:24.279 --> 00:16:28.279 ทำงานนะคะ ในที่นี้นะคะ 248 00:16:28.279 --> 00:16:32.279 เราเป็นเอกทางด้านคอมพิวเตอร์นะคะ เอกเทคโนโลยีสารสนเทศนี่ 249 00:16:32.280 --> 00:16:36.280 อยู่ในฟิลล์ของคอมพิวเตอร์นะคะ ครูก็เลยเรียก 250 00:16:36.281 --> 00:16:40.281 ที่เป็นเกี่ยวข้องกับพวกเรา 251 00:16:40.283 --> 00:16:44.283 อย่างเช่น การใช้งาน การนั่ง การยืนนะคะ 252 00:16:44.286 --> 00:16:48.286 อันนี้คือลักษณะทางกายภาพที่เห็นได้นะคะ ควรนั่งแบบไหน 253 00:16:48.287 --> 00:16:52.287 ควรยืนแบบไหน มือต้องวางแบบไหน 254 00:16:52.288 --> 00:16:56.288 สายตานี่ค่ะ จะอยู่ประมาณไหนห่างกันเท่าไร 255 00:16:56.289 --> 00:17:00.289 รวมไปถึงการออกแบบเก้าอี้ 256 00:17:00.290 --> 00:17:04.290 อันนี้เป็นตัวอย่างนะคะ การออกแบบเมาส์ 257 00:17:04.291 --> 00:17:08.291 ออกแบบคีย์บอร์ด 258 00:17:08.292 --> 00:17:12.292 หลายอุปกรณ์เหมือนกันในการ 259 00:17:12.292 --> 00:17:16.292 ออกแบบนะคะ เพื่อให้เหมาะสมกับ 260 00:17:16.294 --> 00:17:20.294 สรีระหรือกายภาพของคนแต่ละคนนะคะ 261 00:17:20.295 --> 00:17:24.295 คราวนี้นะคะ หัวใจสำคัญของบทนี้ ก็คือ 262 00:17:24.296 --> 00:17:28.296 Interaction st 263 00:17:28.297 --> 00:17:32.297 ไทยใช้คำว่า "กระบวนแบบ 264 00:17:32.298 --> 00:17:36.298 การปฏิสัมพันธ์นะคะ หมายถึงอะไรเอ่ย 265 00:17:36.299 --> 00:17:40.299 กระบวนแบบ พูดถึงที่ไปที่มา 266 00:17:40.300 --> 00:17:44.300 ที่มาก่อน ถ้าพูดถึงปฏิสัมพันธ์ 267 00:17:44.301 --> 00:17:48.301 นะคะ ภาษาง่าย ๆ ที่ 268 00:17:48.302 --> 00:17:52.302 เราใช้ ก็คือคำสนทนา การพูดคุยกัน 269 00:17:52.302 --> 00:17:56.302 ถ้าเป็นการปฏิสัมพันธ์แบบมนุษย์ 1 ง 270 00:17:56.302 --> 00:18:00.302 ต่ออีกคน 2 คน 271 00:18:00.304 --> 00:18:04.304 นะคะ แต่ละคนเวลาติดต่อสื่อสารกัน ก็คือ 272 00:18:04.305 --> 00:18:08.305 การสนทนากัน แต่เวลามนุษย์คนหนึ่งสื่อสาร 273 00:18:08.305 --> 00:18:12.305 กับระบบคอมพิวเตอร์นี่ จะผ่านส่วนที่เรียกว่า 274 00:18:12.305 --> 00:18:16.305 หรือส่วนต่อประสารหรือที่เราเรียกว่า 275 00:18:16.306 --> 00:18:20.306 Dialog น่ะค่ะ ซึ่ง 276 00:18:20.307 --> 00:18:24.307 dialogue จะมี 277 00:18:24.309 --> 00:18:28.309 หลากหลายรูปแบบมาก เราสามารถใช้ 278 00:18:28.310 --> 00:18:32.310 เพราะตัวนี้นะคะ เน้นสอน 279 00:18:32.312 --> 00:18:36.312 ตอน ปี 3 เทอม 2 น่ 280 00:18:36.313 --> 00:18:40.313 เพื่อให้นักศึกษาเอาตัวความรู้ที่ได้ในวิชานี้ 281 00:18:40.313 --> 00:18:44.313 ในวิชานี้ในเรื่องนี้ไปปรประยุกต์ใช้ในวิชา 282 00:18:44.313 --> 00:18:48.313 นะคะ ไปใช้ในการ 283 00:18:48.315 --> 00:18:52.315 ออกแบบนะคะ เรามาดูกระบวนแบบกัน 284 00:18:52.316 --> 00:18:56.316 อันนี้เป็นตัวอย่าง 285 00:18:56.317 --> 00:19:00.317 จะมีตั้งแต่กระบวนแบบเก่า ๆ เลย 286 00:19:00.318 --> 00:19:04.318 ใช้อยู่ในปัจจุบัน 287 00:19:04.319 --> 00:19:08.319 แต่จริง ๆ มีเยอะกว่านี้อีก ครูทำสัญลักษณ์ 288 00:19:08.319 --> 00:19:12.319 เยอะนะคะ ที่ยกตัวอย่างมานะคะ 289 00:19:12.321 --> 00:19:16.321 เช่น Command line interface 290 00:19:16.321 --> 00:19:20.321 หนึ่งนะคะ 291 00:19:20.321 --> 00:19:24.321 ในการสร้างส่วนต่อประสาน ภาษาไทยใช้คำว่า 292 00:19:24.323 --> 00:19:28.323 "ส่วนต่อประสานที่เป็นแบบบรรทัดคำสั่ง" 293 00:19:28.324 --> 00:19:32.324 หรือส่วนต่อประสานที่เป็นเมนูนะคะ เราเรียก 294 00:19:32.324 --> 00:19:36.324 natural language หรือจะเป็น 295 00:19:36.325 --> 00:19:40.325 แบบ Query interface 296 00:19:40.327 --> 00:19:44.327 WIMP Point and click interfaces 297 00:19:44.328 --> 00:19:48.328 Query interface 298 00:19:48.328 --> 00:19:52.328 navigation 299 00:19:52.330 --> 00:19:56.330 และอื่น ๆ เราสามารถ 300 00:19:56.332 --> 00:20:00.332 เลือกนะคะ รูปแบบส่วนต่อประสานต่อไปนี้ 301 00:20:00.333 --> 00:20:04.333 ที่กล่าวมานี่ไปใช้ในงานเราได้ อันนี้ยังไม่หมดนะคะ 302 00:20:04.335 --> 00:20:08.335 ครูยกตัวอย่างให้ดู ให้เราพอนึกภาพ 303 00:20:08.336 --> 00:20:12.336 ออกว่าถ้าเราจะสร้างระบบขึ้นมานี่ 304 00:20:12.337 --> 00:20:16.337 นักศึกษาจะต้องมีความรู้ทางด้านดีไซน์ 305 00:20:16.337 --> 00:20:20.337 พวกส่วนต่อประสานนี้ด้วยนะคะ มีอธิบายให้บางส่วน 306 00:20:20.338 --> 00:20:24.338 นะคะ ให้บางส่วน เช่น ส่วน 307 00:20:24.338 --> 00:20:28.338 ต่อประสานที่เป็นแบบบรรทัดคำสั่ง 308 00:20:28.340 --> 00:20:32.340 เราเรียกว่า "Command Line Interface" 309 00:20:32.341 --> 00:20:36.341 เป็นอย่างไร ก็คือการสร้าง Interv 310 00:20:36.341 --> 00:20:40.341 เราสามารถบอก 311 00:20:40.344 --> 00:20:44.344 หรือแสดงคำสั่งให้คอมพิวเตอร์ทราบได้โดยตรง 312 00:20:44.345 --> 00:20:48.345 นะคะ โดยการ 313 00:20:48.346 --> 00:20:52.346 ป้อนคำสั่ง หรือ Function keys 314 00:20:52.346 --> 00:20:56.346 คือ การป้อนนี่เราอาจจะป้อนเป็นตัวอักษร 315 00:20:56.347 --> 00:21:00.347 เดี่ยว ๆ น่ะค่ะ หรือเป็นตัวย่อนะคะ 316 00:21:00.347 --> 00:21:04.347 หรือเป็นข้อความ เป็นคำยาว ๆ เป็นประโยคยาว ๆ นะคะ 317 00:21:04.350 --> 00:21:08.350 แต่มันจะต้องถูกรูปแบบของคำสั่ง 318 00:21:08.350 --> 00:21:12.350 เขาเรียก "syntax" น่ะ จะไม่สามา 319 00:21:12.352 --> 00:21:16.352 สามารถพิมพ์คำที่เราคิดได้ทั้งหมด 320 00:21:16.352 --> 00:21:20.352 มันจะมีคำบังคับว่าให้ใช้คำไหนสื่อสารกับคอมพิวเตอร์ 321 00:21:20.354 --> 00:21:24.354 ได้บ้างนะคะ ข้อดีของ Command line ก็คือ 322 00:21:24.355 --> 00:21:28.355 คำสั่งที่เราป้อนเข้าไปน่ะ 323 00:21:28.356 --> 00:21:32.356 มันจะเข้าถึงตัวระบบได้โดยตรง 324 00:21:32.357 --> 00:21:36.357 ไม่ต้องผ่านการแปลงนะคะ คอมพิวเตอร์รับรู้ได้เลย 325 00:21:36.359 --> 00:21:40.359 ทำงานได้เร็วนะคะ เพราะว่าคำสั่งโดยตรง 326 00:21:40.360 --> 00:21:44.360 อยาก 327 00:21:44.361 --> 00:21:48.361 ฝากหรืออยากคุยกับเพื่อน เราก็คุยกับเพื่อน 328 00:21:48.361 --> 00:21:52.361 โดยตรงเลย อันนี้คือรับรู้กัน แต่ถ้าเกิด 329 00:21:52.363 --> 00:21:56.363 เราคุยกับเพื่อนคนนี้ แต่ฝากไปกับเพื่อนอีกคนหนึ่ง 330 00:21:56.365 --> 00:22:00.365 ออกไปโดยกระบวกการของสาร 331 00:22:00.366 --> 00:22:04.366 ที่รับไปนะคะ อันนี้เหมือนกัน ถ้าเราใช้ 332 00:22:04.367 --> 00:22:08.367 Command Line เราสามารถสั่งงานคอมพิวเตอร์ภายใต้คำสั่ง 333 00:22:08.369 --> 00:22:12.369 ได้โดยตรง แต่ข้อเสียของมัน คือ เราจะต้องมีความ 334 00:22:12.369 --> 00:22:16.369 รู้เกี่ยวกับคำสั่งที่เราจะป้อนให้ระบบ 335 00:22:16.369 --> 00:22:20.369 นะคะ ว่าคำไหนบ้างที่สามารถสั่งได้และคอมพิวเตอร์ 336 00:22:20.371 --> 00:22:24.371 เข้าใจนะคะ ยกตัวอย่างระบบที่ใช้ Command Line 337 00:22:24.372 --> 00:22:28.372 เช่น พวก... 338 00:22:28.373 --> 00:22:32.373 แต่เป็นโหมดของ 339 00:22:32.374 --> 00:22:36.374 Command นะ ที่เป็นหน้าจอสีดำและคำสั่ง 340 00:22:36.375 --> 00:22:40.375 เป็นคำน่ะนะคะ UNIX นี่ UNIX ไม่มี i 341 00:22:40.375 --> 00:22:44.375 ไม่มี Interface เลย 342 00:22:44.377 --> 00:22:48.377 ระบบปฏิบัติการ doS ก็จะเป็น 343 00:22:48.378 --> 00:22:52.378 หน้าตาของ Command Line ก็จะเป็นแบบนี้ 344 00:22:52.379 --> 00:22:56.379 เป็นหน้าจอสีดำ สีน้ำเงินก็แล้วแต่ แต่ตัวหนังสือ 345 00:22:56.381 --> 00:23:00.381 นะคะ คำสั่งก็จะเป็นตัวหนังสือภาษาอังกฤษ 346 00:23:00.382 --> 00:23:04.382 นะคะ เราสามารถโต้ตอบกับระบบได้ 347 00:23:04.383 --> 00:23:08.383 เราก็พิมพ์คำสั่งเข้าไปนะคะ อย่างเมื่อก่อนที่ครูใช้งาน 348 00:23:08.385 --> 00:23:12.385 ระบบ DOS น่ะค่ะ อย่างเช่น ครูอยากรู้ว่า Drive C 349 00:23:12.385 --> 00:23:16.385 มีข้อมูลอะไรเก็บอยู่บ้าง มันก็จะมีคำบังคับ 350 00:23:16.388 --> 00:23:20.388 C;\ เป็น 351 00:23:20.389 --> 00:23:24.389 การขอดูไดรฟ์ C หน่อยว่ามีอะไรบ้าง 352 00:23:24.389 --> 00:23:28.389 อันนี้คือการใช้คำสั่งแบบ Command line นะคะ 353 00:23:28.390 --> 00:23:32.390 ในทาง SCI นี่ เรามองว่า 354 00:23:32.391 --> 00:23:36.391 ด้อยของการ 355 00:23:36.393 --> 00:23:40.393 ปฏิสัมพันธ์ที่ใช้หลักการของ HCI 356 00:23:40.394 --> 00:23:44.394 ทำไมถึงเรียกว่า Command line 357 00:23:44.395 --> 00:23:48.395 เป็นข้อด้อยคะ เราคิดว่า เพราะ 358 00:23:48.396 --> 00:23:52.396 เหตุใดในการออกแบบระบบ 359 00:23:52.396 --> 00:23:56.396 โดยใช้หลักการ HCI นี่ Command Line 360 00:23:56.398 --> 00:24:00.398 จุดอ่อน หรือเป็นรูปแบบ 361 00:24:00.399 --> 00:24:04.399 โบราณเป็นวิธีเก่าที่ไม่นิยมใช้ 362 00:24:04.400 --> 00:24:08.400 HCI ในการออกแบบ 363 00:24:08.402 --> 00:24:12.402 นักศึกษาคิดว่าเป็นเพราะอะไรเอ่ย 364 00:24:12.403 --> 00:24:16.403 ถ้าเราออกแบบ 365 00:24:16.403 --> 00:24:20.403 ระบบมา 1 ระบบให้ผู้ใช้นี่ เราจะเรียก 366 00:24:20.404 --> 00:24:24.404 คำสั่งแบบนี้ไหม 367 00:24:24.404 --> 00:24:28.404 ให้พิมพ์คำสั่ง 368 00:24:28.406 --> 00:24:32.406 ถ้าพิมพ์ผิดระบบก็จะตอบกลับมาว่า Back command 369 00:24:32.407 --> 00:24:36.407 แปลว่าคุณพิมพ์คำสั่งผิด 370 00:24:36.408 --> 00:24:40.408 นะคะ จะผิดในตั่วคำสั่ง 371 00:24:40.410 --> 00:24:44.410 เองหรือผิดรูปแบบ ก็ต้องพิมพ์ให้ถูกต้อง 372 00:24:44.411 --> 00:24:48.411 ทั้งเว้นวรรค ทั้งพิมพ์ตัวใหญ่ตัวเล็ก 373 00:24:48.412 --> 00:24:52.412 เหมือนกันเขียนโค้ดที่เป็นแบบ 374 00:24:52.414 --> 00:24:56.414 เขียนถ้ามันผิดมันก็ Run ไม่ได้ 375 00:24:56.414 --> 00:25:00.414 เหมือนกันนะคะ อันนี้ถือเป็นข้อด้อย 376 00:25:00.415 --> 00:25:04.415 ของ HCI เพราะอะไร เพราะมันใช้งานยากไง 377 00:25:04.417 --> 00:25:08.417 ระบบของเราที่ใช้หลักการ HCI นี้คือ 378 00:25:08.419 --> 00:25:12.419 ผู้ใช้สามารถ ไม่ต้องจดจำ 379 00:25:12.420 --> 00:25:16.420 สามารถใช้งานได้ง่าย ๆ สวยงาม แต่พอ Command Line คือ 380 00:25:16.421 --> 00:25:20.421 เป็น command line เป็นหน้าจอแบบนี้ สวยงามไหม 381 00:25:20.422 --> 00:25:24.422 ยุ่งยากในการจดจำคำสั่ง ก็เลยมองว่ามันใช้งา่น 382 00:25:24.423 --> 00:25:28.423 คราวนี้ก็จะมีรูปแบบของ 383 00:25:28.424 --> 00:25:32.424 เมนู Driven เมนู Interface 384 00:25:32.425 --> 00:25:36.425 ถ้าพูดถึง Menu ก็คือกลุ่มของทางเลือก 385 00:25:36.427 --> 00:25:40.427 นะคะ มันจะปรากฏบนหน้าจอ Window 386 00:25:40.427 --> 00:25:44.427 นะ หน้าต่างหน้าจอเรา เวลา 387 00:25:44.429 --> 00:25:48.429 ที่เราเข้าระบบไป ตัวเลือก 388 00:25:48.430 --> 00:25:52.430 จะต้องสามารถมองเห็นได้ทั้งหมด ไม่ซ้อนทับกัน เวลาออกแบบ Menu นะคะ 389 00:25:52.430 --> 00:25:56.430 แล้วการใช้คำเมนูมันจะเป็นข้อความน่ะค่ะ 390 00:25:56.431 --> 00:26:00.431 คำจะต้องสื่อความหมายด้วย 391 00:26:00.433 --> 00:26:04.433 โดยหลักการของการใช้เมนู 392 00:26:04.433 --> 00:26:08.433 นะคะ จะใช้หลักการจำนี่น้อย 393 00:26:08.433 --> 00:26:12.433 แต่ใช้หลักการรู้จำ เขาเรียก 394 00:26:12.434 --> 00:26:16.434 เราไม่จำเป็นต้องท่องจำ 395 00:26:16.435 --> 00:26:20.435 น่ะค่ะ ว่าเมนูคำนี้ 396 00:26:20.437 --> 00:26:24.437 คืออะไร แปลว่าอะไรนะคะ Menu File 397 00:26:24.438 --> 00:26:28.438 อย่างนี้ค่ะ หรือเมนูออกแบบ เมนูมม 398 00:26:28.439 --> 00:26:32.439 เราไม่ต้องท่องจำ แต่เราจะ 399 00:26:32.440 --> 00:26:36.440 เรียนรู้ ก็คือการรู้จำได้เอง 400 00:26:36.441 --> 00:26:40.441 อ่านคำเมนูสั้น ๆ เราจะรู้ว่า 401 00:26:40.441 --> 00:26:44.441 คลิกตรงนี้แล้วมันจะมีอะไรออกมา อย่างนี้ค่ะ ซึ่งการ 402 00:26:44.443 --> 00:26:48.443 ใช้งานเมนู คือ การใช้เมาส์คลิ๊ก 403 00:26:48.443 --> 00:26:52.443 หรือเลื่อนลูกศรนะคะ 404 00:26:52.445 --> 00:26:56.445 ในคีย์บอร์ดในหน้าจอน่ะ เลื่อนแล้วก็ 405 00:26:56.446 --> 00:27:00.446 คลิกนะคะ อันนี้คือการใช้งานเมนู เมนู 406 00:27:00.448 --> 00:27:04.448 มี 2 แบบนะคะ ในการสร้าง interface ขขอ 407 00:27:04.450 --> 00:27:08.450 ก็คือเมนูที่เป็นแบบ Pull-Doiwn 408 00:27:08.451 --> 00:27:12.451 pull-down แปลว่าอะไรเอ่ย 409 00:27:12.452 --> 00:27:16.452 ขึ้นหรือลง 410 00:27:16.453 --> 00:27:20.453 Down คือ ลง เวลาเราพิมพ์ข้อมูล 411 00:27:20.453 --> 00:27:24.453 นะคะ เช่น คลิกเมนู Tools 412 00:27:24.455 --> 00:27:28.455 มันก็จะมีคำสั่งเมนูย่อยลงมา 413 00:27:28.455 --> 00:27:32.455 อันนี้คnv 414 00:27:32.456 --> 00:27:36.456 งานเราได้นะคะ อีกแบบหนึ่ง คือ 415 00:27:36.458 --> 00:27:40.458 Pop-up Pop-up เมนูู คือ คลิกขว 416 00:27:40.459 --> 00:27:44.459 น่ะค่ะ คลิกขวาใน 417 00:27:44.460 --> 00:27:48.460 โปรแกรมไหนก็ได้ แล้วมันจะมีคำสั่งลัดขึ้นมา 418 00:27:48.461 --> 00:27:52.461 นะคะ ใน 419 00:27:52.463 --> 00:27:56.463 ที่ไหนก็ได้ค่ะ 420 00:27:56.463 --> 00:28:00.463 ใน Word Excel PowerPoint หรือโปรแกรมอื่น 421 00:28:00.464 --> 00:28:04.464 เรียกว่า "เมนูแบบ Popup 422 00:28:04.464 --> 00:28:08.464 thush 423 00:28:08.465 --> 00:28:12.465 นะคะ มันก็จะขึ้นเด้งขึ้นมา 424 00:28:12.467 --> 00:28:16.467 ไม่มีหัวมีท้ายอะไรน่ะ คือ เด้งขึ้นมาเลยนะคะ 425 00:28:16.469 --> 00:28:20.469 อันนี้เราเรียกเมนูที่เป็นแบบ 426 00:28:20.469 --> 00:28:24.469 ต่อไปนะคะ 427 00:28:24.471 --> 00:28:28.471 กระบวนแบบที่เรียกว่า Natural langu 428 00:28:28.472 --> 00:28:32.472 นะคะ Interface ก็คือภาษาธรรมชาตินะคะ 429 00:28:32.473 --> 00:28:36.473 ภาษาธรรมชาตินี่ เป็นภาษาที่ใช้ติดต่อกับคอม 430 00:28:36.474 --> 00:28:40.474 นะคะ ซึ่งถ้าพูดถึงภาษาธรรมชาติ 431 00:28:40.474 --> 00:28:44.474 ผู้ใช้จะคุ้นเคยนะคะ 432 00:28:44.475 --> 00:28:48.475 เราสามารถใช้ภาษาธรรมชาติในการสั่งงานระบบได้ 433 00:28:48.476 --> 00:28:52.476 เรียกว่า "ถ้าเราพัฒนาระบบW 434 00:28:52.476 --> 00:28:56.476 เรียนรู้การ speech recognition คือ การให้ 435 00:28:56.477 --> 00:29:00.477 ให้ระบบเรียนรู้การรู้จำ 436 00:29:00.478 --> 00:29:04.478 เสียงพูด แล้วระบบก็จะโต้ตอบกับเราได้ อันนี้เราเรียก "ภาษาธรรมชาติ 437 00:29:04.479 --> 00:29:08.479 นะคะ บางทีเราจะเรียกการพิมพ์ด้วยภาษาธรรมชาติ 438 00:29:08.481 --> 00:29:12.481 ด้วยภาษาธรรมชาติ คือ การพิมพ์ด้วยภาษาพูดน่ะค่ะ 439 00:29:12.482 --> 00:29:16.482 แล้วคอมพิวเตอร์ก็เข้าใจ 440 00:29:16.482 --> 00:29:20.482 หรือบางทีเราจะเรียกว่าภาษาที่มนุษย์ใช้ในการโต้ตอบ 441 00:29:20.482 --> 00:29:24.482 นะคะ แต่ความยากของการสร้างภาษาธรรมชาติในการสร้่วระบ 442 00:29:24.483 --> 00:29:28.483 ก็คือมันจะมีปัญหา 443 00:29:28.484 --> 00:29:32.484 เรื่องความคลุมครือของเสียง 444 00:29:32.485 --> 00:29:36.485 น่ะค่ะ ถ้ามันไม่ชัดระบบจะไม่เข้าใจ จะ 445 00:29:36.486 --> 00:29:40.486 ไม่สามารถดทำงานได้ ตามคำสั่งเสียงเราออกไปนะคะ 446 00:29:40.487 --> 00:29:44.487 เหมือนเราออก 447 00:29:44.488 --> 00:29:48.488 เสียงไม่ชัดคุยกันนี่ เพื่อนก็จะงง ว่าเรา 448 00:29:48.489 --> 00:29:52.489 พูดอะไร เคยใช้คำสั่ง 449 00:29:52.490 --> 00:29:56.490 ในการสั่งงานคอมพิวเตอร์ไหมคะ สมาร์ตโฟน 450 00:29:56.490 --> 00:30:00.490 เป็นคอมพิวเตอร์ประเภทหนึ่ง เรา 451 00:30:00.492 --> 00:30:04.492 เคยสั่งเครื่องโทรศัพท์มือถือเราทำอะไรบ้าง 452 00:30:04.492 --> 00:30:08.492 สั่งงานด้วยเสียง คุยกับ Siri 453 00:30:08.493 --> 00:30:12.493 สิริ เป็นระบบไหมคะ มีไหมคะ 454 00:30:12.494 --> 00:30:16.494 ศิริตอบไม่ได้ 455 00:30:16.495 --> 00:30:20.495 แต่อาจจะตอบไม่ตรง 456 00:30:20.495 --> 00:30:24.495 เพราะ Siri ไม่เข้าใจว่าเราถามอะไร มีไหมคะ 457 00:30:24.503 --> 00:30:28.503 แต่ระบบตัวรู้จำเสียงพูดนี่ 458 00:30:28.503 --> 00:30:32.503 นอกจากศิริมีอย่างอื่นไหม 459 00:30:32.505 --> 00:30:36.505 Google สั่งงานด้วยเสียงได้ เช่น 460 00:30:36.505 --> 00:30:40.505 ต้องการค้นคำ แต่บางทีเราไม่สะดวกหรือเราขี้เกียจพิมพ์นะ 461 00:30:40.506 --> 00:30:44.506 เราก็จะพูด แต่เราต้องไปกดตรงไมค์ก่อน 462 00:30:44.507 --> 00:30:48.507 เปิดให้เรากรอกข้อมูลที่เป็นเสียงได้ 463 00:30:48.508 --> 00:30:52.508 อันนี้ คือ ภาษาธรรมชาตินะคะ เราเคย 464 00:30:52.509 --> 00:30:56.509 คิดที่จะพัฒนาระบบที่สั่งงานด้วยภาษาธรรมชาติไหมคะ 465 00:30:56.510 --> 00:31:00.510 โครงงานเรามีไหม ไม่ต้องพิมพ์ สั่งงาน 466 00:31:00.510 --> 00:31:04.510 มีไหมคะ 467 00:31:04.512 --> 00:31:08.512 ทฤษฎีบอกไว้ว่า 468 00:31:08.512 --> 00:31:12.512 ถ้าเรามีความสนใจในการพัฒนาระบบที่สั่งงานด้วยเสียงนี่ 469 00:31:12.513 --> 00:31:16.513 เราจะต้องทำความเข้าใจกลุ่มผู้ใช้ด้วยนะคะ ว่าผู้ใช้เป็นอย่างไร 470 00:31:16.513 --> 00:31:20.513 และกลุ่มคำที่จะ 471 00:31:20.515 --> 00:31:24.515 เลือกใช้ในการโต้ตอบนะคะ 472 00:31:24.515 --> 00:31:28.515 พยายามเลือกเฉพาะ เราเรียก "คีย์เวิร์ด" คีย์เวิร์ดสำคัญ 473 00:31:28.516 --> 00:31:32.516 คือคำสำคัญมาใช้งาน 474 00:31:32.517 --> 00:31:36.517 มาอย่างนี้ค่ะ โหลดมาใน 475 00:31:36.518 --> 00:31:40.518 Smartphone 476 00:31:40.519 --> 00:31:44.519 คลิกที่จอมือถือน่ะ 477 00:31:44.520 --> 00:31:48.520 ไม่ต้องคลิกที่สมาร์ตโฟน 478 00:31:48.520 --> 00:31:52.520 เคยสั่งงานด้วยเสียงไหมคะ ถ่ายรูป 479 00:31:52.521 --> 00:31:56.521 มีคีย์เวิร์ดอะไรบ้าง Capture 480 00:31:56.522 --> 00:32:00.522 Capture ถ่ายไหม 481 00:32:00.522 --> 00:32:04.522 บางที คือ Acset 482 00:32:04.524 --> 00:32:08.524 ก็ต้องได้นะ หมายถึงการออกเสียงมันต้องชัด 483 00:32:08.524 --> 00:32:12.524 มีคำอื่นอีกไหมคะ นอกจากคีย์เวิร์ดว่า Capture 484 00:32:12.526 --> 00:32:16.526 มีชิส 485 00:32:16.526 --> 00:32:20.526 ทำไมถึงพูดคำนี้ 486 00:32:20.527 --> 00:32:24.527 ยิ้มนึกออกไหมคะ 487 00:32:24.528 --> 00:32:28.528 เราจะยิ้มจริงไหม พลอยทำหน้า 488 00:32:28.528 --> 00:32:32.528 ชีส คือ เสียงไม่ได้ระบบก็จะไม่รับรู้ 489 00:32:32.529 --> 00:32:36.529 กล้องก็จะไม่ถ่ายนะคะ ฉะนั้น ถ้านักศึกษา 490 00:32:36.529 --> 00:32:40.529 ที่จะใช้การออกแบบส่วนต่อประสานที่เป็น 491 00:32:40.530 --> 00:32:44.530 ภาษาธรรมชาตินี่ เราดูด้วยว่าเราจะใช้ภาษาระบบนี้กับใคร 492 00:32:44.530 --> 00:32:48.530 เราก็เลือกกลุ่มคำนะคะ คีย์เวิร์ด 493 00:32:48.531 --> 00:32:52.531 มาใช้นะคะ เพราะว่าการพูดประโยคยาว ๆ โดยเฉพาะภาษาไทย 494 00:32:52.532 --> 00:32:56.532 นี่นะคะ มันจะยาก 495 00:32:56.533 --> 00:33:00.533 ในการแปลนะคะ เพราะว่าการใช้ภาษาธรรมชาติ 496 00:33:00.533 --> 00:33:04.533 มันจะมีกระบวนการนะคะ กระบวนการในการแปล 497 00:33:04.533 --> 00:33:08.533 หลายสเต็ปนะคะ การทำงานก็จะยุ่งยากกว่า 498 00:33:08.535 --> 00:33:12.535 จะมีทั้ง Nori 499 00:33:12.536 --> 00:33:16.536 เพราะว่ามันเป็น Speed Recognition 500 00:33:16.538 --> 00:33:20.538 รู้จำ เสียงแบบไหน เสียงแบบไหน 501 00:33:20.539 --> 00:33:24.539 ออกเสียงอย่างไร ถึงจะสั่งงานได้อย่างนี้ค่ะ 502 00:33:24.540 --> 00:33:28.540 ต่อไปนะคะ inter 503 00:33:28.540 --> 00:33:32.540 Interaction Style ส่วนต่อไป ก็คือส่วนต่อประสาน 504 00:33:32.542 --> 00:33:36.542 ที่เป็นแบบ query interface นะคะ 505 00:33:36.542 --> 00:33:40.542 Query interface ภาษาไทยใช้คำว่า ส่วนต่อ 506 00:33:40.543 --> 00:33:44.543 หมายถึงอะไร ก็คือ 507 00:33:44.545 --> 00:33:48.545 ผู้ใช้นี่จะถูกถามผ่านระบบน่ะค่ะ 508 00:33:48.546 --> 00:33:52.546 ผ่านระบบน่ะค่ะ คำถามเป็นชุด ผู้ใช้อาจจะต้อบ Yes 509 00:33:52.547 --> 00:33:56.547 กับ No อ่านไปแล้ว ชอบเรียน 510 00:33:56.548 --> 00:34:00.548 คอมพิวเตอร์ไหม ก็จะมี Yes กับ No 511 00:34:00.548 --> 00:34:04.548 ต่อไปนะคะ หรือเป็นแบบ Multiple Choice 512 00:34:04.549 --> 00:34:08.549 maltipal choose 513 00:34:08.550 --> 00:34:12.550 หรือ 514 00:34:12.551 --> 00:34:16.551 เราอาจจะอยากตอบมากกว่า 1 งานนะคะ 515 00:34:16.552 --> 00:34:20.552 คือ Multiple Choice อันนี้คือลักษณะส่วนต่อประสาน 516 00:34:20.553 --> 00:34:24.553 ที่เป็นแบบ query interface นะคะ ซึ่งการสร้างส่วนต่อประสาน 517 00:34:24.553 --> 00:34:28.553 ตัวนี้นะคะ เราจะใช้ภาษา Q 518 00:34:28.554 --> 00:34:32.554 ในการสร้างนะคะ พวกภาษา HQL 519 00:34:32.554 --> 00:34:36.554 ภาษาทาง Data base น่ะค่ะ 520 00:34:36.556 --> 00:34:40.556 ในการ query ขึ้นมา ก็จะสร้างเป็นรูปแบบโครงสร้างฐานข้อมูล 521 00:34:40.557 --> 00:34:44.557 นะคะ ผู้ใช้จะต้องมีความรู้ทางเรื่อง 522 00:34:44.558 --> 00:34:48.558 โครงสร้างของฐานข้อมูลหรือ si 523 00:34:48.558 --> 00:34:52.558 ภาษาไทยใช้คำว่า "วากยสำคัญ 524 00:34:52.560 --> 00:34:56.560 ของภาษา ก็คือ syntax ที่ 525 00:34:56.561 --> 00:35:00.561 ผู้ใช้ในการ Query นะคะ 526 00:35:00.562 --> 00:35:04.562 ในการสร้าง interface แบบ Query 527 00:35:04.564 --> 00:35:08.564 ก็เลยมีตัวอย่างมาให้ดู เหมือนเราตอบ 528 00:35:08.565 --> 00:35:12.565 แบบสอบถามออนไลน์น่ะค่ะ อันนี้เป็นส่วน i 529 00:35:12.568 --> 00:35:16.568 เราต้องการสอบถามความพึงพอใจ 530 00:35:16.568 --> 00:35:20.568 ขึ้นมานะคะ แต่เราไม่สะดวก 531 00:35:20.570 --> 00:35:24.570 ที่จะไปแจกแบบสอบถามเป็นกระดาษ 532 00:35:24.571 --> 00:35:28.571 ก็เลยสร้างขึ้นมาผ่าน ตอนนี้ที่นิยมใช้กัน 533 00:35:28.572 --> 00:35:32.572 ก็คือ Google 534 00:35:32.574 --> 00:35:36.574 ผู้ใช้คลิกเข้าไปแล้วตอบ 535 00:35:36.575 --> 00:35:40.575 ให้เลยนะคะ ไม่ต้องเสียเวลาไปคีย์อีก 536 00:35:40.575 --> 00:35:44.575 ต่อไปนะคะ form-fills in 537 00:35:44.576 --> 00:35:48.576 เป็นรูปแบบปฏิสัมพันธ์อีกรูปแบบหนึ่ว 538 00:35:48.577 --> 00:35:52.577 ซึ่งลักษณะของ form-fills นี่ 539 00:35:52.578 --> 00:35:56.578 ก็เหมือนกับเรากรอกเอกสารในกระดาษนะคะ 540 00:35:56.580 --> 00:36:00.580 แต่ form-fills จะแสดงบล็อก 541 00:36:00.581 --> 00:36:04.581 ให้เราตอบนะคะ หรือแสดงฟอร์มนี่อยู่ใน 542 00:36:04.581 --> 00:36:08.581 จอภาพนะคะ เราก็ 543 00:36:08.583 --> 00:36:12.583 กรอกหรือป้อนข้อมูลเข้าไปนะคะ ระบุความต้องการ 544 00:36:12.584 --> 00:36:16.584 เข้าไป ซึ่งการสร้างนะคะ เขาบอกว่า 545 00:36:16.584 --> 00:36:20.584 การออกแบบฟอร์มฟิลล์นี่ จะต้องออกแบบ 546 00:36:20.585 --> 00:36:24.585 ให้ดีให้ 547 00:36:24.587 --> 00:36:28.587 ผู้ใช้กรอกข้อมูลได้ง่าย 548 00:36:28.588 --> 00:36:32.588 ให้จัดกรุ๊ปข้อมูลที่ต้องกรากต่อเนื่องกัน 549 00:36:32.588 --> 00:36:36.588 เอาไว้ด้วยกัน หลักการสร้างฟอร์มฟิลล์ 550 00:36:36.590 --> 00:36:40.590 ข้อมูลจากบนลงล่าง กรอกจาก 551 00:36:40.591 --> 00:36:44.591 ซ้ายไปขวา หรือเรากรอกข้อมูลในกระดาษ 552 00:36:44.592 --> 00:36:48.592 แต่ในที่นี้เราจะกรอกลงไปในคอมพิวเตอร์นะคะ 553 00:36:48.594 --> 00:36:52.594 ควรแบ่ง Grop 554 00:36:52.594 --> 00:36:56.594 กรุ๊ปนี้เป็นข้อมูลของประวัติส่วนตัว 555 00:36:56.596 --> 00:37:00.596 อย่างนี้ค่ะ ก็ควรจะอยู่ด้วยกัน เรื่องที่ 2 เป็นเรื่อง 556 00:37:00.596 --> 00:37:04.596 ของประวัติการศึกษาอย่างนี้น่ะค่ะ ควรแบ่งเป็นกรุ๊ป ๆ ไปนะคะ 557 00:37:04.597 --> 00:37:08.597 ให้ผู้ใช้กรอกข้อมูลไปอย่าง 558 00:37:08.598 --> 00:37:12.598 แล้วก็กระโดดไปถามอีกเรื่องหนึ่ง จะทำให้ผู้ใช้รู้สึก 559 00:37:12.598 --> 00:37:16.598 หงุดหงิดเวลาใช้ระบบนะคะ เวลากรอกข้อมูลให้เรานะคะ 560 00:37:16.599 --> 00:37:20.599 อันนี้คือตัวอย่างของ form-fills นะคะ 561 00:37:20.600 --> 00:37:24.600 ก็คือมีชื่อ ก็คือมีโจทย์ให้ถามนะคะ 562 00:37:24.601 --> 00:37:28.601 นะคะ มีโจทย์ถามแล้วก็มีช่อง 563 00:37:28.602 --> 00:37:32.602 นะคะ Text box ให้เราตอบ เราก็ 564 00:37:32.603 --> 00:37:36.603 ตอบลงไปนะคะ คราวนี้ลักษณะ 565 00:37:36.606 --> 00:37:40.606 การออกแบบที่ดีนะคะ เราอยากบอกผู้ใช้ว่าฟอร์มไหน 566 00:37:40.607 --> 00:37:44.607 ที่ต้องกรอก เราก็ใส่ ฏ 567 00:37:44.607 --> 00:37:48.607 รู้จัก Drop-down ไหมคะ 568 00:37:48.609 --> 00:37:52.609 ในตัวอย่างนี้ 569 00:37:52.610 --> 00:37:56.610 ฟิลด์ไหนบ้างที่มี 570 00:37:56.611 --> 00:38:00.611 Drop down คือ 571 00:38:00.613 --> 00:38:04.613 ดอกจันท 572 00:38:04.613 --> 00:38:08.613 สีแดง ใส่สีแดงด้วยนะคะ 573 00:38:08.615 --> 00:38:12.615 บอกว่าฟิลด์นี้ หรือข้อมูลตัวนี้ 574 00:38:12.617 --> 00:38:16.617 จำเป็นต้องกรอก ภาษาไทยใช้คำว่า 575 00:38:16.618 --> 00:38:20.618 จำเป็นต้องกรอกข้อมูลนี้ ดังนั้น 576 00:38:20.619 --> 00:38:24.619 ไม่ใช่ทุกฟิลล์ที่ผู้ใช้ต้องกรอก แต่ฟิลล์ที่เราบังคับน่ะ 577 00:38:24.619 --> 00:38:28.619 เอาอย่างนี้ แล้วเราต้องวิเคราะห์ด้วยนะคะ 578 00:38:28.620 --> 00:38:32.620 ต้องมีนะคะ เขาถึงจะมีข้อมูล 579 00:38:32.620 --> 00:38:36.620 มากรอกให้เรานะคะ ไม่ใช่ไปบังคับ 580 00:38:36.622 --> 00:38:40.622 ให้กรอกชื่อสามีหรือภรรยา ซึ่งเราไม่มีไง 581 00:38:40.623 --> 00:38:44.623 เราก็จะตอบอะไรล่ะ อันนี้ฟิลด์นี้จะไม่บังคับ 582 00:38:44.624 --> 00:38:48.624 แต่เราจะไปบังคับอะไรที่ทุกคนมี 583 00:38:48.624 --> 00:38:52.624 ข้อมูลอะไรบ้างที่นักศึกษาทุกคนต้องมี 584 00:38:52.625 --> 00:38:56.625 รหัสนักศึกษา ชื่อ-นามสกุล 585 00:38:56.627 --> 00:39:00.627 โทรศัพท์ทุกคนต้องมีไหม 586 00:39:00.628 --> 00:39:04.628 ก็น่าจะมีนะ ไม่ก็เรา 587 00:39:04.629 --> 00:39:08.629 ให้เลือกน่ะค่ะ ว่าช่องทางติดต่อเอาที่สะดวก บางทีเขาอาจ 588 00:39:08.630 --> 00:39:12.630 ไม่อยากบอกเบอร์ แต่เขายินดีที่จะบอกเมล บอกเฟซฯ 589 00:39:12.631 --> 00:39:16.631 LINE IG อย่างนี้ค่ะ 590 00:39:16.632 --> 00:39:20.632 ติดต่อกับเขาได้น่ะ เราก็ให้เขาตอบ 591 00:39:20.633 --> 00:39:24.633 อย่างนี้ค่ะ แต่ชื่อนี่ทุกคนต้องมีอยู่แล้ว เราก็ใส่ Drop-down 592 00:39:24.635 --> 00:39:28.635 สีแดงไว้ ช่องไหนที่... อันนี้คือการออกแบบฟอร 593 00:39:28.637 --> 00:39:32.637 ที่เป็นแบบฟอร์มฟิลด์นะคะ 594 00:39:32.638 --> 00:39:36.638 นะคะ ส่วนต่อ 595 00:39:36.638 --> 00:39:40.638 ประสานที่เรียกว่า WIMP 596 00:39:40.640 --> 00:39:44.640 Interface ย่อมากจาก WIMP 597 00:39:44.641 --> 00:39:48.641 598 00:39:48.641 --> 00:39:52.641 ก็คือเป็นรูปแบบของส่วนต่อประสานใน 599 00:39:52.643 --> 00:39:56.643 ระบบคอมพิวเตอร์นี่ล่ะ เป็นส่วนปฏิสัมพันธ์ 600 00:39:56.644 --> 00:40:00.644 เขาบอกว่ามันเป็นตัว WIMP นี่ 601 00:40:00.645 --> 00:40:04.645 ใช้เฉพาะกับเครื่องคอมพิวเตอร์ส่วนบุคคล 602 00:40:04.647 --> 00:40:08.647 ก็คือเครื่องตั้งโต๊ะ, 603 00:40:08.648 --> 00:40:12.648 โน้ตบุ๊ก Laptop อะไรอย่างนี้ 604 00:40:12.649 --> 00:40:16.649 Windows คืออะไร Windows คือ หน้าจอทำงานน่ะค่ะ 605 00:40:16.649 --> 00:40:20.649 เปิดปุ๊บขึ้นมา ตอนนี้ คือตอนนี้มัน 606 00:40:20.651 --> 00:40:24.651 เป็นแบบลักษณะ multi นะคะ 607 00:40:24.652 --> 00:40:28.652 เราสามารถเปิดหลายหน้าต่างขึ้นมาพร้อมกัน 608 00:40:28.653 --> 00:40:32.653 ได้ไหม ได้เลย เราอาจจะย่อลง 609 00:40:32.653 --> 00:40:36.653 หรือเราอาจจะย่อขนาดลง มันอาจจะมี 610 00:40:36.654 --> 00:40:40.654 ไปเลยหรือย่อ เราก็สามารถเปิด Window ได้หลายหน้า 611 00:40:40.655 --> 00:40:44.655 เมื่อก่อนนะคะ มันเป็น Single นี่เราจะเปิด 612 00:40:44.655 --> 00:40:48.655 ได้หน้าเดียว คือ เมื่อก่อนมันเป็น Command line ด้วย 613 00:40:48.655 --> 00:40:52.655 มันก็เปิดหน้าใดหน้าหนึ่งได้เท่านั้น 614 00:40:52.657 --> 00:40:56.657 นะคะ เราก็สามารถเปิดงานได้หลาย Window ด้วยกัน 615 00:40:56.658 --> 00:41:00.658 ได้หลายหน้าต่างนั่นล่ะ ซึ่งหลายหน้าต่าง 616 00:41:00.659 --> 00:41:04.659 ก็จะมีส่วนของ Scorebar Scorebar อ 617 00:41:04.662 --> 00:41:08.662 ใน 1 หน้าต่างนี่ค่ะ สี่เหลี่ยม 618 00:41:08.663 --> 00:41:12.663 หน้าต่างหนึ่งนี่ ที่เปิดโปรแกรม 619 00:41:12.665 --> 00:41:16.665 ขึ้นมา 1 Windows นี่ Scroll bar 620 00:41:16.666 --> 00:41:20.666 ไหนได้บ้าง เคยใช้งาน Scrollbars ไหมคะ 621 00:41:20.668 --> 00:41:24.668 scor 622 00:41:24.669 --> 00:41:28.669 Score bar 623 00:41:28.670 --> 00:41:32.670 ภาษาไทย คือ 624 00:41:32.670 --> 00:41:36.670 สงสัยจะเรียนเกินไป 625 00:41:36.671 --> 00:41:40.671 เรียนเกิน 626 00:41:40.671 --> 00:41:44.671 Score bar คือ 627 00:41:44.672 --> 00:41:48.672 628 00:41:48.682 --> 00:41:52.682 คืออะไรคะ เขาบอกว่ามันเป็นส่วนหนึ่งของ Window 629 00:41:52.683 --> 00:41:56.683 ไม่ใช่ระบบจัดการนะคะ 630 00:41:56.684 --> 00:42:00.684 พัทชราภาตอบถูก 631 00:42:00.685 --> 00:42:04.685 Scroll bar ก็คือแถบ 632 00:42:04.686 --> 00:42:08.686 เลื่อน Task แถบเลื่อนจะอยู่ตรงไหน 633 00:42:08.686 --> 00:42:12.686 ไม่ด้านข้างก็ด้านล่าง 634 00:42:12.686 --> 00:42:16.686 Scrollbars เราจะให้งาน 635 00:42:16.687 --> 00:42:20.687 Scroll bar เมื่อไรคะ 636 00:42:20.688 --> 00:42:24.688 637 00:42:24.689 --> 00:42:28.689 เราจะใช้งาน คือ Scrobar 638 00:42:28.690 --> 00:42:32.690 เมื่อเราเปิด 639 00:42:32.691 --> 00:42:36.691 โปรแกรม เช่น Microsoft Word ก็ได้ 640 00:42:36.693 --> 00:42:40.693 แล้วเราซูมหรือเราขยายเกิน 100 เปอร์เซ็นต์น่ะ 641 00:42:40.694 --> 00:42:44.694 มันไม่สามารถแสดง Viwe ได้ในหน้า 642 00:42:44.695 --> 00:42:48.695 เช่น เราต้องการขยาย 200 643 00:42:48.696 --> 00:42:52.696 เปอร์เซ็นต์ มันก็จะทำให้ Windows มันขยาย 644 00:42:52.696 --> 00:42:56.696 หน้าจอการทำงานน่ะนะคะ เราก็สามารถเลื่อน 645 00:42:56.698 --> 00:43:00.698 ขึ้น-ลง หรือลาก 646 00:43:00.698 --> 00:43:04.698 ดูหน้าถัดไปนะคะ อันนี้เราเรียก 647 00:43:04.699 --> 00:43:08.699 Scrollbar นอกจากนี้ 648 00:43:08.699 --> 00:43:12.699 หน้าต่างก็จะมี title bars ก็คือ 649 00:43:12.700 --> 00:43:16.700 แถบแสดงชื่อนะคะ 650 00:43:16.701 --> 00:43:20.701 แต่ละหน้าต่าง 651 00:43:20.701 --> 00:43:24.701 มันก็จะมีชื่อ Title bar อยู่นะคะ 652 00:43:24.703 --> 00:43:28.703 บางโปรแกรมเขาก็จะให้เราตั้งชื่อเองน่ะค่ะ 653 00:43:28.704 --> 00:43:32.704 ตั้งชื่อ Windows หน้านั้นเองนะคะ 654 00:43:32.705 --> 00:43:36.705 ตัวที่ 2 ก็คือ icon 655 00:43:36.705 --> 00:43:40.705 รู้จัก icon ไหมคะ 656 00:43:40.705 --> 00:43:44.705 รู้จัก Icons ไหมเอ่ย 657 00:43:44.707 --> 00:43:48.707 รู้จัก Icon ไหมเอ่ย 658 00:43:48.707 --> 00:43:52.707 ค่ะ icons เป็นอย่างไร 659 00:43:52.708 --> 00:43:56.708 ความเป็นรูปภาพ 660 00:43:56.710 --> 00:44:00.710 เป็นแบบไหน 661 00:44:00.711 --> 00:44:04.711 เป็นรูปภาพเล็ก ๆ แทน 662 00:44:04.711 --> 00:44:08.711 การพิมพ์ข้อความ 663 00:44:08.712 --> 00:44:12.712 นะคะ icon ใช้ทำอะไร 664 00:44:12.712 --> 00:44:16.712 เป็นส่วนต่อประสานที่จะทำให้เรา 665 00:44:16.715 --> 00:44:20.715 เปิดโปรแกรมขึ้นมา เคยใช้งาน Icon 666 00:44:20.717 --> 00:44:24.717 ไหมคะ บน 667 00:44:24.718 --> 00:44:28.718 หน้าจอ Desktop เราน่ะ เราเปิดเครื่องคอมพิวเตอร์ 668 00:44:28.719 --> 00:44:32.719 ขึ้นมาปุ๊บ Boot เข้าคอมพิวเตอร์ได้แล้ว หน้าจอมันจะขึ้นมา 669 00:44:32.723 --> 00:44:36.723 ใช่ไหมคะ แล้ว Icon ก็คือรูปภาพเล็ก ๆ 670 00:44:36.724 --> 00:44:40.724 เอาไว้ทำอะไร 671 00:44:40.725 --> 00:44:44.725 1. icon แทนอะไรคะ 672 00:44:44.725 --> 00:44:48.725 แทน 1 โปรแกรม 673 00:44:48.726 --> 00:44:52.726 แทน 1 การทำงานอันนั้นล่ะนะคะ 674 00:44:52.727 --> 00:44:56.727 ใช้งานอย่างไร 675 00:44:56.728 --> 00:45:00.728 คลิกขึ้นอยู่กับการตั้งค่า 676 00:45:00.729 --> 00:45:04.729 บางทีเราคลิก icons ครั้งเดียวก็ทำงานได้ แค่บางที 677 00:45:04.731 --> 00:45:08.731 เราต้องคลิก 2 ครั้งเร็ว ๆ ก็คือการดับเ 678 00:45:08.731 --> 00:45:12.731 icons ถึงจะเปิดโปรแกรมนั้นขึ้นมา 679 00:45:12.732 --> 00:45:16.732 นะคะ ต่อไป คือ 680 00:45:16.734 --> 00:45:20.734 Menu อันนี้เราพูดไปแล้วนะคะ มันเป็นส่วนหนึ่งของ WIMP เหมือนกัน 681 00:45:20.735 --> 00:45:24.735 ก็คือเป็นตัวเลือกที่เป็นข้อความนะคะ แล้วเรา 682 00:45:24.735 --> 00:45:28.735 สามารถคลิกให้มันเป็น pull-down หรือ คลิัก 683 00:45:28.736 --> 00:45:32.736 เพื่อให้มันเป็น Pop-up Menu ได้ สุดท้าย 684 00:45:32.738 --> 00:45:36.738 ก็คือ Pointers นะคะ 685 00:45:36.739 --> 00:45:40.739 ความหมายตามตัวนะคะ Pointers 686 00:45:40.741 --> 00:45:44.741 ชี้ตำแหน่งและ 687 00:45:44.742 --> 00:45:48.742 เลือกวัตถุบนจอนะคะ เราเรียก Pointer 688 00:45:48.745 --> 00:45:52.745 เรียก Pointers นะคะ บางทีเราก็ใช้เมาส์ในการเลื่อน ใช้จอย 689 00:45:52.746 --> 00:45:56.746 ใช้ Mouse ในการเลื่อนก็ได้นะคะ 690 00:45:56.747 --> 00:46:00.747 คือ pointers อันนั้นนั่นล่ะ 691 00:46:00.748 --> 00:46:04.748 อันนี้คือตัวอย่าง Interaction Style 692 00:46:04.748 --> 00:46:08.748 ที่เป็นแบบ WIMP interface 4 ตัวนี้ 693 00:46:08.749 --> 00:46:12.749 ต่อไปนะคะ เป็น 694 00:46:12.750 --> 00:46:16.750 เป็นรูปแบบหนึ่งนะคะ point 695 00:46:16.750 --> 00:46:20.750 and Click ก็คือเป็นการใช้งานแบบชี้ตำแหน่ง 696 00:46:20.752 --> 00:46:24.752 และคลิก เขาจะนิยมใช้ interface ตัวนี้ 697 00:46:24.752 --> 00:46:28.752 ใช้ตัวส่วนต่อประสานอันนี้ 698 00:46:28.753 --> 00:46:32.753 multimidia web 699 00:46:32.755 --> 00:46:36.755 Hypertext รู้จัก 700 00:46:36.756 --> 00:46:40.756 hypertext ไหมคะ 701 00:46:40.758 --> 00:46:44.758 รู้จักMultimediaWeb 702 00:46:44.759 --> 00:46:48.759 เป็นอย่างไรเอ่ย 703 00:46:48.760 --> 00:46:52.760 ถ้าเป็น Multimedia Web 704 00:46:52.761 --> 00:46:56.761 ก็คือ 705 00:46:56.761 --> 00:47:00.761 Web ที่มันมี คือสื่อนั่นล่ะ คือ 706 00:47:00.762 --> 00:47:04.762 เว็บที่มันมี 707 00:47:04.762 --> 00:47:08.762 เนื้อหาหลากหลาย 708 00:47:08.763 --> 00:47:12.763 หลากหลาย ไม่ว่าจะเป็นข้อความ รูปภาพ สื่อ 709 00:47:12.764 --> 00:47:16.764 คลิป ภาพนิ่ง ภาพเคลื่อนไหว 710 00:47:16.765 --> 00:47:20.765 เราเรียกว่า multimedia web 711 00:47:20.766 --> 00:47:24.766 หรือ Hypertext คือ ข้อความที่ 712 00:47:24.767 --> 00:47:28.767 เป็นตัวลิงก์น่ะ เราเรียก "hypertext" นะคะ 713 00:47:28.768 --> 00:47:32.768 เช่น เราเอาเมาส์ไปชี้ที่ข้อความ เช่น 714 00:47:32.769 --> 00:47:36.769 ถ้าตัวชี้น่ะ มันเปลี่ยนจากตัว 715 00:47:36.769 --> 00:47:40.769 ลูกศรเป็นรูปมือ แปลว่าอะไรคะ 716 00:47:40.770 --> 00:47:44.770 เราเลื่อน cursor ไป 717 00:47:44.770 --> 00:47:48.770 ปกติ Cursor มันก็จะเป็นลูกศรนะ 718 00:47:48.770 --> 00:47:52.770 นึกภาพตาม ทุกคน 719 00:47:52.771 --> 00:47:56.771 เปิด Browser Web ขึ้นมา อะไรก็ได้ค่ะ 720 00:47:56.771 --> 00:48:00.771 Firefox เป็นตัวไหนก็ได้ที่เครื่องตัวเองมี 721 00:48:00.772 --> 00:48:04.772 แล้วเราเอา Pointers ก็คือ Cursor 722 00:48:04.773 --> 00:48:08.773 เลื่อนไป ปกติ cerser หรือตัวลูก 723 00:48:08.774 --> 00:48:12.774 มันเป็นรูปอะไรคะ เป็นลูกศร 724 00:48:12.775 --> 00:48:16.775 นะคะ ถ้าเราเลื่อนไปชี้ที่ข้อความหรือรูปใด 725 00:48:16.776 --> 00:48:20.776 แล้วมันเปลี่ยนจากลูกศรเป็นรูปมือ 726 00:48:20.777 --> 00:48:24.777 แปลว่าอะไรเอ่ย 727 00:48:24.777 --> 00:48:28.777 แปลว่าเป็น Hypertext หมายความว่า 728 00:48:28.777 --> 00:48:32.777 มันสามารถเชื่อมโยงไปยังที่อื่นได้อีก 729 00:48:32.779 --> 00:48:36.779 อันนี้เรียกว่า Hypertext นะคะ 730 00:48:36.780 --> 00:48:40.780 ก็แปลว่าข้อความนั้นมันเป็นลิงก์ 731 00:48:40.781 --> 00:48:44.781 มันเป็นประตูที่จะเปิดไป 732 00:48:44.782 --> 00:48:48.782 อีกงานอื่น หรือเว็บฯ อื่น หรือหน้าอื่น 733 00:48:48.783 --> 00:48:52.783 นะคะ ได้อีกนะคะ เขาก็เลยบอกว่าส่วนต่อประสานไม่จำเป็นต้องเป้น 734 00:48:52.785 --> 00:48:56.785 Click นี่ มันไม่ได้ขึ้นอยู่กับ m 735 00:48:56.786 --> 00:49:00.786 ต้องเป็น Mouse น่ะค่ะ เป็นรูปแบบอื่นก็ได้ 736 00:49:00.787 --> 00:49:04.787 เราเอามือจิ้มที่หน้าจอก็ได้ ผ่านตัว 737 00:49:04.787 --> 00:49:08.787 ตัว Touch screen น่ะก็ได้นะคะ เช่น 738 00:49:08.788 --> 00:49:12.788 เราเปิดหน้าเว็บขึ้นมา เราเอา 739 00:49:12.789 --> 00:49:16.789 Corsore ไปคลิก มันก็ 740 00:49:16.789 --> 00:49:20.789 ย่อยต่อไปอีกน่ะ อันนี้ข้อความเป็นตัว hypertext 741 00:49:20.790 --> 00:49:24.790 ต่อไปนะคะ 742 00:49:24.793 --> 00:49:28.793 interaction ตัวต่อไปนะคะ 743 00:49:28.794 --> 00:49:32.794 Predimentional เป็นตัวเชื่อมต่อ 744 00:49:32.794 --> 00:49:36.794 แบบ 3 มิติ ตัวนี้นะคะ 745 00:49:36.798 --> 00:49:40.798 เราจะนิยมใช้กับตัว Virtual Reality ก็คือตัวงาน 746 00:49:40.799 --> 00:49:44.799 ที่เป็นความเสมือนจริง 747 00:49:44.799 --> 00:49:48.799 อันนี้สุรเชฏ 748 00:49:48.801 --> 00:49:52.801 การสร้างส่วนต่อประสานที่เป็นแบบ 3 Dimansional 749 00:49:52.801 --> 00:49:56.801 3D น่ะค่ะ แบบ 3D นะคะ 750 00:49:56.801 --> 00:50:00.801 เหมาะกับการออกแบบ int 751 00:50:00.802 --> 00:50:04.802 Interface ที่ต้องการความเสมือนจริง 752 00:50:04.803 --> 00:50:08.803 นะคะ ก็เลยมีหลักการบอกว่า 753 00:50:08.803 --> 00:50:12.803 เทคนิคที่ง่ายที่สุดในการออกแบบส่วนต่อประสาน 754 00:50:12.805 --> 00:50:16.805 การใช้แสงและเงา 755 00:50:16.806 --> 00:50:20.806 มาทำให้ดูเป็น 3 มิติ 756 00:50:20.807 --> 00:50:24.807 เช่น เราวาดปุ๊บ Button 757 00:50:24.807 --> 00:50:28.807 ถ้าเราวาดเป็นสี่เหลี่ยมเฉย ๆ มันก็คือ 758 00:50:28.809 --> 00:50:32.809 2 มิติ คือ เห็นด้านเดียว 759 00:50:32.810 --> 00:50:36.810 นะคะ แต่เราให้แสงและเงาเพิ่ม 760 00:50:36.813 --> 00:50:40.813 มันจะดูมีความลึ 761 00:50:40.814 --> 00:50:44.814 มีความสูงขึ้นอย่างนี้ค่ะ อันนี้คือวิธีง่ายสุดในการสร้าง 762 00:50:44.814 --> 00:50:48.814 ที่เป็น 3 มิตินะคะ 763 00:50:48.814 --> 00:50:52.814 แต่ถ้าเกิดเป็นเทคนิค 764 00:50:52.816 --> 00:50:56.816 ที่ซับซ้อนขึ้น ก็คือเป็นการสร้างโมเดลที่เป็น 3 มิติน่ะค่ะ 765 00:50:56.820 --> 00:51:00.820 ครูเลยมีภาพมาประกอบให้ดู นี่ถ้าเราวาดภาพ 766 00:51:00.821 --> 00:51:04.821 สีเหลี่ยมเฉย ๆ มันก็เป็นปุ่ม 767 00:51:04.821 --> 00:51:08.821 2 มิติ แต่พอเราให้แสงกับเงาเพิ่ม 768 00:51:08.823 --> 00:51:12.823 วัตถุนั้นมันจะดูเป็น 3 มิติ จริง ๆ แล้ว 769 00:51:12.823 --> 00:51:16.823 มันเหมือนมันเป็นภาพหลอกตาน่ะ ให้ดูเสมือนจริงจขึ้น 770 00:51:16.824 --> 00:51:20.824 นะคะ แต่ถ้าเป็นเหมือนตัวต่อประสานแบบ 771 00:51:20.826 --> 00:51:24.826 3 มิติ จริง ๆ ก็คือสร้างโมเดลจริง ๆ แบบนี้ เหมือนที่ 772 00:51:24.827 --> 00:51:28.827 เราทำที่เรานิยมทำโครงงานกัน ก็คือ 773 00:51:28.828 --> 00:51:32.828 การ์ตูน 3D เกม 3D พวกนั้น 774 00:51:32.830 --> 00:51:36.830 นะคะ พวก AR, VR น่ะ 775 00:51:36.830 --> 00:51:40.830 อันนี้ คือ 3 มิติ ใช้ Marker 776 00:51:40.832 --> 00:51:44.832 มือถือไปส่อง Marker แล้วก็เห็นขึ้นมาเป็นโมเดลน่ะค่ะ 777 00:51:44.833 --> 00:51:48.833 อันนี้คือการ 3 มิตินะคะ 778 00:51:48.833 --> 00:51:52.833 ต่อไปนะคะ ส่วนต่อประสาร 779 00:51:52.834 --> 00:51:56.834 แบบ Direct หมายถึงโดยตรง 780 00:51:56.835 --> 00:52:00.835 โดยตรงนะคะ direct manipulation 781 00:52:00.836 --> 00:52:04.836 ส่วนต่อประสานตัวนี้ก็จะใช้กับการออกแบบงาน IOT 782 00:52:04.836 --> 00:52:08.836 ส่วนต่อประสานกับงาน IOT น่ะค่ะ 783 00:52:08.837 --> 00:52:12.837 หรืองานที่ผู้ใช้สามารถดำเนินการ 784 00:52:12.838 --> 00:52:16.838 กับ object บนหน้าจอได้โดยตรง 785 00:52:16.839 --> 00:52:20.839 เอาง่ายสุดนะคะ ที่ใกล้ตัวนักศึกษา ก็คือการใช้ 786 00:52:20.841 --> 00:52:24.841 touch 787 00:52:24.842 --> 00:52:28.842 Multitouch คืออะไรเอ่ย 788 00:52:28.843 --> 00:52:32.843 multi touch 789 00:52:32.845 --> 00:52:36.845 หมายถึง การใช้นิ้วสัมผัสที่หน้าจอ 790 00:52:36.846 --> 00:52:40.846 จะเป็น Smartphone หรือ คอม 791 00:52:40.847 --> 00:52:44.847 คอมพิวเตอร์ก็ได้นะคะ 792 00:52:44.847 --> 00:52:48.847 เอาสมาร์ทโฟนตัวเองแล้วกัน สมาร์ทโฟน 793 00:52:48.849 --> 00:52:52.849 ที่เราใช้งานมานี่ มีใครซื้อสมาร์ตโฟน 794 00:52:52.850 --> 00:52:56.850 ถ้าซื้อใหม่วันนี้พรุ่งนี้ 795 00:52:56.850 --> 00:53:00.850 ยังไม่ถึงนะ ถ้าซื้อใหม่เมื่อวาน วันนี้ 796 00:53:00.852 --> 00:53:04.852 หรือวันก่อนนี่อาจจะยังไม่รู้ว่าทำอะไรได้บ้าง 797 00:53:04.853 --> 00:53:08.853 มีไหมคะ เพิ่งซื้อ ไม่มี ใช้จนจะพังแล้วกำลั 798 00:53:08.854 --> 00:53:12.854 ให้อยู่ เราเคย 799 00:53:12.856 --> 00:53:16.856 ใช้ Multi touch กับมือถือเรารูปแบบไหนบ้าง 800 00:53:16.856 --> 00:53:20.856 ใช้แบบ Spin ไหมคะ 801 00:53:20.857 --> 00:53:24.857 เวลาเราใช้มือจิ้มที่จอน่ะ 802 00:53:24.858 --> 00:53:28.858 มือถือเราน่ะ รองรับแบบไหนบ้าง mul 803 00:53:28.859 --> 00:53:32.859 แบบ Tap ได้ไหม 804 00:53:32.860 --> 00:53:36.860 ครั้งหนึ่ง ครั้งหนึ่งเบา ๆ แล้วมันก็สั่งงานน่ะค่ะ 805 00:53:36.862 --> 00:53:40.862 ให้ทำอะไรคลิกตรงนั้นตรงนี้ อันนี้เรียก "Tap 806 00:53:40.862 --> 00:53:44.862 ใช้ 2 นิ้ว 807 00:53:44.862 --> 00:53:48.862 มันมีชื่อของมันอยู่นะ เราเคยใช้โดยแบบการเคยชิน 808 00:53:48.864 --> 00:53:52.864 เขาเรียก "การรู้จำ" แต่เราไม่ได้ท่องจำนะคะ 809 00:53:52.866 --> 00:53:56.866 ถ้าทำแบบนี้ อย่างเช่น ถ่ายรูป รูปหนึ่ง 810 00:53:56.867 --> 00:54:00.867 มาแต่สิ่งที่อยากดู คือ เบลอ ๆ ข้างหลัง 811 00:54:00.867 --> 00:54:04.867 เราไม่อยากดูหน้าเพื่อน เราก็จะ 812 00:54:04.868 --> 00:54:08.868 ทำอย่างไรคะ ซูม 813 00:54:08.870 --> 00:54:12.870 นี่คือ 1 หรือ 2 นิ้ว 2 นิ้วนี่คือนิ้วไหน 814 00:54:12.871 --> 00:54:16.871 นิ้วไหนก็ได้ค่ะ แต่ต้องใช้ 815 00:54:16.871 --> 00:54:20.871 ร่วมกันนะคะ ใช้คู่กัน 2 นิ้ว แล้ว Flip 816 00:54:20.872 --> 00:54:24.872 เข้าหรือกางนิ้วออก 817 00:54:24.873 --> 00:54:28.873 Zoom เราจะ... 818 00:54:28.874 --> 00:54:32.874 อันนี้ คือ การรู้จำค่ะ เรารู้ว่าทำอย่างนี้ 819 00:54:32.874 --> 00:54:36.874 แต่เราจะไม่รู้ว่าเขาเรียกว่าอะไรนะคะ 820 00:54:36.876 --> 00:54:40.876 นะคะ อย่างเช่น 821 00:54:40.876 --> 00:54:44.876 ถ้าบีบเข้าหาศู 822 00:54:44.878 --> 00:54:48.878 นึกถึงเวลาเราเขียนโปรแกรมให้มัน 823 00:54:48.879 --> 00:54:52.879 Multi touch น่ะ เราต้องใช้คำให้ถูกนะ 824 00:54:52.879 --> 00:54:56.879 ผู้ใช้ Swipe ได้อย่างนี้น่ะค่ะ เราจะใช้ผู้ใช้ 825 00:54:56.881 --> 00:55:00.881 แค่แตะเบา หรือจะให้ผู้ใช้แบบใช้ 2 นิ้ว 826 00:55:00.882 --> 00:55:04.882 2 นิ้วกางออก 827 00:55:04.883 --> 00:55:08.883 คำสั่งให้ถูก อันนี้ คือ ผู้ใช้สามารถ 828 00:55:08.883 --> 00:55:12.883 สั่งงานผ่านระบบได้แบบ direct ทำที่ตัว obj 829 00:55:12.885 --> 00:55:16.885 ได้เลยนะคะ เราดูภาพนี้ 830 00:55:16.886 --> 00:55:20.886 ประกอบเข้าใจมากขึ้นไหม 831 00:55:20.886 --> 00:55:24.886 ภาพแรกทำอะไรเอ่ย 832 00:55:24.887 --> 00:55:28.887 เสาวลักษณ์มีความ 833 00:55:28.887 --> 00:55:32.887 ชำนาญการเรื่องนี้มาก ถามปุ๊บตอบได้ทันทีเลย 834 00:55:32.889 --> 00:55:36.889 เราอยากรู้ว่ารถยนต์ของเรานี่ 835 00:55:36.891 --> 00:55:40.891 สีนี้ เหมาะกับ Max 836 00:55:40.892 --> 00:55:44.892 แบบไหนนะคะ ถ้าไปเปลี่ยนเลย 837 00:55:44.892 --> 00:55:48.892 พอเปลี่ยนไปแล้วมันอาจจะไม่เหมาะ เขาก็เลยมี 838 00:55:48.893 --> 00:55:52.893 มาให้เลือก แอปฯ นี้สามารถ 839 00:55:52.893 --> 00:55:56.893 เลือกประเภทรถได้อีก รถใหญ่ รถเล็ก 840 00:55:56.895 --> 00:56:00.895 รถประเภทน่ะค่ะ แล้วก็เลือกสี แล้ว 841 00:56:00.895 --> 00:56:04.895 เราก็คลิกได้เลยค่ะ ตรงแม็กซ์ มันก็จะไปเปลี่ยน 842 00:56:04.897 --> 00:56:08.897 อันนี้ คือ direct 843 00:56:08.898 --> 00:56:12.898 นะคะ เราทำระบบ 844 00:56:12.899 --> 00:56:16.899 แนวนี้ไหม โครงงานมีแบบนี้ไหมคะ 845 00:56:16.900 --> 00:56:20.900 ทำระบบเหมือนเสมือนจริง แต่ผู้ใช้สามารถทำกับตัว 846 00:56:20.900 --> 00:56:24.900 แบบนี้มีไหมคะ 847 00:56:24.902 --> 00:56:28.902 ลองทำดูอันนี้ระบบน่าสนใจ 848 00:56:28.902 --> 00:56:32.902 ที่ปรึกษารุ่น... เขาเป็นรุ่นพี่เรานะคะ 849 00:56:32.903 --> 00:56:36.903 ปีหนึ่ง ทำเกี่ยวกับระบบจำลองการจัดวางเฟอร์นิเจอร์ 850 00:56:36.904 --> 00:56:40.904 เฟอร์นิเจอร์ในบ้าน ทำแอปฯ ค่ะ 851 00:56:40.905 --> 00:56:44.905 ลักษณะงานของเขาคือ 852 00:56:44.906 --> 00:56:48.906 เวลาเราจะซื้อเฟอร์นิเจอร์หรืออะไรมาตกแต่งนี่วางตรงไหน 853 00:56:48.907 --> 00:56:52.907 มันถึงจะเหมาะ เหมือนจำลองขึ้นมาก่อน 854 00:56:52.909 --> 00:56:56.909 กับ Max นี่ละ แต่ของเขาทำ 855 00:56:56.909 --> 00:57:00.909 แบบ AR นะคะ 856 00:57:00.911 --> 00:57:04.911 เราเลือกขนาดโดยใส่ข้อมูลกว้าง-ยาวน่ะค่ะ 857 00:57:04.913 --> 00:57:08.913 ของพื้นที่แล้วเราก็เอามือถือไปส่อง เช่น ครูจะเอา 858 00:57:08.913 --> 00:57:12.913 โต๊ะมาตั้งตรงนี้ ตรงผนัง 859 00:57:12.915 --> 00:57:16.915 อย่างนี้ค่ะ ตรงผนังตรงนี้ ครูก็เอามือถือ 860 00:57:16.919 --> 00:57:20.919 ไปส่อง แล้วครูก็เลือกขนาดโต๊ะนะคะ 861 00:57:20.937 --> 00:57:24.937 อ้อ วางตรงนี้เหมาะไหม แทนที่เราจะเอามาแล้วเหมาะไหม 862 00:57:24.939 --> 00:57:28.939 เราสมารถจำลองได้ก่อน ซึ่ง 863 00:57:28.940 --> 00:57:32.940 ครูก็เลยเพิ่มขอบเขตให้เขาไปว่า 864 00:57:32.940 --> 00:57:36.940 เป็นแบบสั่งของออนไลน์ไหม สั่งเฟอร์นิเจอร์น่ะค่ะ 865 00:57:36.941 --> 00:57:40.941 เพราะเรายังไม่เห็นนะ ของจริง 866 00:57:40.943 --> 00:57:44.943 เราก็ลองดีไซน์ดูก่อน ว่าเรา 867 00:57:44.943 --> 00:57:48.943 ซื้อมาแล้ววางตรงนี้เหมาะไหม 868 00:57:48.945 --> 00:57:52.945 อย่างไรน่ะค่ะ เขาก็ทำ อันนี้คือการ direct นะคะ 869 00:57:52.945 --> 00:57:56.945 การไดเรกนะคะ การออกแบบไดเรก 870 00:57:56.947 --> 00:58:00.947 นะคะ Direct action 871 00:58:00.948 --> 00:58:04.948 Multi touch ในมือถือก็เหมือนกัน เป็น Direct 872 00:58:04.949 --> 00:58:08.949 สรุป 873 00:58:08.951 --> 00:58:12.951 สรุปแล้วนะคะ วันนี้เราเรียนอะไร 874 00:58:12.951 --> 00:58:16.951 เราเรียนรู้เกี่ยวกับ 875 00:58:16.953 --> 00:58:20.953 การปฏิสัมพันธ์นะคะ ระหว่างผู้ใช้ 876 00:58:20.954 --> 00:58:24.954 กับตัวระบบนะคะ ทั้งนี้นะคะ ระบบที่ 877 00:58:24.954 --> 00:58:28.954 มีการปฎิสัมพันธ์นี่ 878 00:58:28.956 --> 00:58:32.956 นะคะ ให้สำเร็จ 879 00:58:32.958 --> 00:58:36.958 ตามเป้าหมายได้ 880 00:58:36.959 --> 00:58:40.959 อย่างสะดวกสบายนะคะ 881 00:58:40.959 --> 00:58:44.959 ตาม Model ของ 882 00:58:44.960 --> 00:58:48.960 จะใช้หลักการปฏิสัมพันธ์ 883 00:58:48.961 --> 00:58:52.961 นะคะ ซึ่งนอกจากนี้นะคะ 884 00:58:52.963 --> 00:58:56.963 การออกแบบกระบวนแบบนี่ เราจะต้องดูหลักการยศาสตร์ 885 00:58:56.965 --> 00:59:00.965 ก็คือลักษณะทางกายภาพนะคะ ที่มันเป็นไปด้วย 886 00:59:00.966 --> 00:59:04.966 ซึ่ง 887 00:59:04.969 --> 00:59:08.969 กระบวนแบบนะคะ ที่นิยมใช้งานกันในปัจจุบันนี่ 888 00:59:08.970 --> 00:59:12.970 เราจะใช้ WIMP นะคะ 889 00:59:12.971 --> 00:59:16.971 หรือใช้รูปแบบอื่น 890 00:59:16.973 --> 00:59:20.973 หรือ diaDialog Box 891 00:59:20.973 --> 00:59:24.973 แต่เมื่อรวม ๆ กันแล้วนะคะ ทั้งหมดที่กล่าวไปนี่ 892 00:59:24.975 --> 00:59:28.975 เราจะเรียกว่า "widgets" นะคะ 893 00:59:28.976 --> 00:59:32.976 โอ.เค. อันนี้คือเนื้อหาของวันนี้ 894 00:59:32.978 --> 00:59:36.978 มีคำถามไหมคะ ก่อนจะทำงานจะให้ถามคำถามก่อน 895 00:59:36.979 --> 00:59:40.979 ถามไหมเอ่ย 896 00:59:40.979 --> 00:59:44.979 รู้จัก 897 00:59:44.981 --> 00:59:48.981 ส่วนต่อประสาน หรือ Interaction 898 00:59:48.982 --> 00:59:52.982 899 00:59:52.984 --> 00:59:56.984 พอจะนำไปประยุกต์กับงานเราได้ไหมคะ 900 00:59:56.986 --> 01:00:00.986 มีรูปแบบไหนที่เราคิดว่า อ๋อ เราตั้งใจ 901 01:00:00.986 --> 01:00:04.986 ว่าจะใช้รูปแบบนี้ล่ะ แต่เราไม่รู้ว่าอะไร 902 01:00:04.988 --> 01:00:08.988 มีไหมเอ่ย หรือ 903 01:00:08.989 --> 01:00:12.989 ที่ครูอธิบายไปทั้งหมดไม่ใช่รูปแบบที่เราจะใช้ หรือ 904 01:00:12.989 --> 01:00:16.989 เรามีรูปแบบที่แบบใหม่ ๆ เจ๋งกว่านี้ 905 01:00:16.989 --> 01:00:20.989 ก็ว่าไปนะคะ มีคำถามไหม 906 01:00:20.990 --> 01:00:24.990 จตุรครมีคำถามไหม 907 01:00:24.991 --> 01:00:28.991 908 01:00:28.992 --> 01:00:32.992 ยังไม่ถาม โอ.เค. ผ่านไปน่ะค่ะ อย่างนั้น 909 01:00:32.992 --> 01:00:36.992 ทำแบบฝึกหัดกันก่อนนะคะ อันนี้ 910 01:00:36.992 --> 01:00:40.992 ให้วาดนะ เราจะได้ 911 01:00:40.992 --> 01:00:44.992 มีความลึกซึ้งใน 912 01:00:44.993 --> 01:00:48.993 กระบวนแบบนั้น ๆ นะคะ มีอยู่ 14 ข้อนะคะ 913 01:00:48.994 --> 01:00:52.994 ให้ 5 คะแนน ครูก็จะมีความโหดร้ายนิดหนึ่ง 914 01:00:52.995 --> 01:00:56.995 คือ ผิดนี่หัก 915 01:00:56.996 --> 01:01:00.996 ข้อละ 1 ถ้าตอบถูกหมดได้ 5 คะแนน 916 01:01:00.998 --> 01:01:04.998 นะคะ ครูมีความโหดร้าย เดี๋ยว 917 01:01:04.999 --> 01:01:08.999 จะแจกกระดาษให้ทุกคนนะคะ มีติดลบมีไหม 918 01:01:09.001 --> 01:01:13.001 เต็ม 5 ค่ะ แต่ว่าสุรเชท 919 01:01:13.001 --> 01:01:17.001 วาดผิดไป 6 รูป 920 01:01:17.002 --> 01:01:21.002 921 01:01:21.005 --> 01:01:25.005 เสาวลักษณ์ของแบบอยู่ตัว คือไม่ทำ 922 01:01:25.007 --> 01:01:29.007 เดี๋ยวแจก 923 01:01:29.009 --> 01:01:33.009 กระดาษให้ พี่ปอยมีกระดาษ 924 01:01:33.009 --> 01:01:37.009 เปล่าไหม 925 01:01:37.010 --> 01:01:41.010 ได้ ใช้หน้าเดียวก็ได้ 926 01:01:41.012 --> 01:01:45.012 ก็แจกคนละ 2 แผ่นค่ะ 927 01:01:45.013 --> 01:01:49.013 เผื่อวาดไม่พอ กระดาษ Recycle ก็ได้ค่ะ 928 01:01:49.014 --> 01:01:53.014 recycle ก็ได้ค่ะ 929 01:01:53.014 --> 01:01:57.014 คนละแผ่นก่อน ถ้าวาดไม่พอแล้วค่อยให้น้อง 930 01:01:57.016 --> 01:02:01.016 ให้นักศึกษาวาดรูปนะคะ เราสามารถ 931 01:02:01.018 --> 01:02:05.018 ไปค้นข้อมูลนะคะ ถามว่าทำไม 932 01:02:05.019 --> 01:02:09.019 อาจารย์ต้องให้ทำอันนี้ เพราะว่าครูเชื่อว่า 933 01:02:09.020 --> 01:02:13.020 สิ่งที่เราจะเลือกมาใช้ในการสร้างส่วนต่อประสานนี่ 934 01:02:13.021 --> 01:02:17.021 แน่ ๆ น่ะ เราจะเลือกรูปแบบที่เป็น 935 01:02:17.021 --> 01:02:21.021 กราฟิกอยู่แล้ว แน่นอนเลย 936 01:02:21.022 --> 01:02:25.022 นะคะ graphical user interfa 937 01:02:25.022 --> 01:02:29.022 แน่ ๆ ล่ะ ในนี้ ใน 14 ตัวนี้ เราต้องใช้ 1 อย่างว 938 01:02:29.024 --> 01:02:33.024 แน่ ๆ นะคะ 939 01:02:33.024 --> 01:02:37.024 แจกกระดาษให้คนละ 1แผ่นนะคะ 940 01:02:37.026 --> 01:02:41.026 ให้ค้นในอินเทอร์เน็ตได้ 941 01:02:41.026 --> 01:02:45.026 แต่ให้วาดลงในแผ่นกระดาษนั้น แล้วส่ง 942 01:02:45.028 --> 01:02:49.028 อย่างเช่น Textbox 943 01:02:49.029 --> 01:02:53.029 เราก็เขียน Textbox 944 01:02:53.029 --> 01:02:57.029 แล้วบอกด้วยว่า Textbox ใช้ทำอะไร 945 01:02:57.031 --> 01:03:01.031 โอ.เค. ไหมคะ วางตรงไหนที่เราจะหยิบง่าย วาง 946 01:03:01.031 --> 01:03:05.031 ตรงโน้นก็ได้ 947 01:03:05.032 --> 01:03:09.032 ถ้าเขียนไม่พอใน 1 หน้า 948 01:03:09.033 --> 01:03:13.033 ให้ไปหยิบกระดาษด้านข้างนะคะ ไปเขียนเพิ่มได้ 949 01:03:13.034 --> 01:03:17.034 อย่าลืมเขียนรหัส เขียนชื่อตัวเองใส่ 950 01:03:17.034 --> 01:03:21.034 ทบทวนคำสั่งแบบฝึกหัด 951 01:03:21.035 --> 01:03:25.035 อีก 1 รอบ แบบฝึกหัดนี้ไม่ได้ทำฟรีค่ะ แบบฝึหดนี้ 952 01:03:25.036 --> 01:03:29.036 วาดรูปแล้วเหนื่อย ให้ 5 คะแนนนะคะ มีเงื่อนไขว่า 953 01:03:29.037 --> 01:03:33.037 ถ้าวาดผิด ถ้าวาดไม่เหมือนนี่ไม่หักนะคะ 954 01:03:33.037 --> 01:03:37.037 แต่พอดูออกว่า อันนี้ 955 01:03:37.037 --> 01:03:41.037 อย่างนี้ค่ะ ก็ให้อยู่นะคะ 956 01:03:41.038 --> 01:03:45.038 ให้วาดรูป Textbox มา แล้วบอกด้วยว่า Textbox 957 01:03:45.039 --> 01:03:49.039 ใช้ทำอะไร เป็นกราฟิก 958 01:03:49.040 --> 01:03:53.040 User interface 959 01:03:53.041 --> 01:03:57.041 ในการ Design 960 01:03:57.042 --> 01:04:01.042 หน้า interface Textbox radiobox 961 01:04:01.042 --> 01:04:05.042 962 01:04:05.044 --> 01:04:09.044 spinbox หรือ Spinerbox 963 01:04:09.045 --> 01:04:13.045 เคยได้ยินไหมคะ Check Button 964 01:04:13.047 --> 01:04:17.047 Listbox Stausbar 965 01:04:17.047 --> 01:04:21.047 966 01:04:21.049 --> 01:04:25.049 Box และ togcle but 967 01:04:25.050 --> 01:04:29.050 ใ 968 01:04:29.051 --> 01:04:33.051 ให้วาดรูปใส่กระดาษมา ถ้าให้ไปก็อบมาทางอินเทอร์เน็ตเลย 969 01:04:33.054 --> 01:04:37.054 เดี๋ยวมันจะไม่เกิดความลึกซึ้งในการเรียน 970 01:04:37.055 --> 01:04:41.055 ถ้าเราวาดได้ลงมือทำ 971 01:04:41.056 --> 01:04:45.056 เราจะได้สังเกตว่า Textbox 972 01:04:45.056 --> 01:04:49.056 มันเป็นหน้าตาแบบนี้ แล้วบอกหน้าที่ของมันด้วย 973 01:04:49.058 --> 01:04:53.058 เราจะใช้ Textbox ทำอะไร เอา 974 01:04:53.059 --> 01:04:57.059 อะไรคุณสมบัติของมันน่ะค่ะ 975 01:04:57.059 --> 01:05:01.059 ยังสงสัยในคำสั่งไหมเอ่ย 976 01:05:01.060 --> 01:05:05.060 สงสัยไหมคะ ถามไหม 977 01:05:05.060 --> 01:05:09.060 ใช้ดินสอหรือ 978 01:05:09.060 --> 01:05:13.060 ปากกาวาดก็ได้ค่ะ 979 01:05:13.061 --> 01:05:17.061 980 01:05:17.063 --> 01:05:21.063 พัชราภาบอกว่าอุปกรณ์ 981 01:05:21.064 --> 01:05:25.064 ไม่ครบ สงสัยงานศิลปะวันนี้จะไม่สวยงาน 982 01:05:25.065 --> 01:05:29.065 เน้นที่ความถูกต้องค่ะ สวยงามไม่เท่าไร 983 01:05:29.066 --> 01:05:33.066 เอาแบบให้อาจารย์เห็นปุ๊บ 984 01:05:33.067 --> 01:05:37.067 มันคือ Combobox จริง ๆ 985 01:05:37.068 --> 01:05:41.068 ไม่ใช่เห็นปุ๊บ ทำไม 986 01:05:41.069 --> 01:05:45.069 987 01:05:45.070 --> 01:05:49.070 มีคำถามไหมคะ 988 01:05:49.071 --> 01:05:53.071 มีคำถามไหมคะ ถามเลย 989 01:05:53.071 --> 01:05:57.071 บางคนเห็นปุ๊บใช้งาน 990 01:05:57.072 --> 01:06:01.072 มาตั้งนาน เขาเรียกอันนี้หรือ 991 01:06:01.073 --> 01:06:05.073 อันนี้มีชื่อว่าแบบนี้หรือ 992 01:06:05.074 --> 01:06:09.074 993 01:06:09.075 --> 01:06:13.075 พอให้วาดแล้วมันก็จะลึกซึ้งลงไปนะ 994 01:06:13.077 --> 01:06:17.077 ใช่ค่ะ ให้วาดให้ครบทั้ง 14 อัน 995 01:06:17.077 --> 01:06:21.077 เพราะเราอยู่ในแวดวงไอที 996 01:06:21.078 --> 01:06:25.078 IT นี่ เราจะต้องมีความรู้อย่างน้อย 997 01:06:25.080 --> 01:06:29.080 กราฟิก User Interf 998 01:06:29.080 --> 01:06:33.080 มันแล้วจะต้องรูปว่ามันเอาไว้ทำอะไรค่ะ 999 01:06:33.080 --> 01:06:37.080 เวลาวันหน้าที่เราไปออกแบบ 1000 01:06:37.082 --> 01:06:41.082 interface นะคะ เราจะได้เลือกใช้ได้ถูก 1001 01:06:41.082 --> 01:06:45.082 เลือกใช้ได้ถูกนะคะ ว่าอ๋อเราอยากให้ผู้ใช้ 1002 01:06:45.084 --> 01:06:49.084 คลิกคำตอบแค่ครั้งเดียว 1003 01:06:49.085 --> 01:06:53.085 ตอบแค่ Single น่ะค่ะ เราะต้องเลือก 1004 01:06:53.088 --> 01:06:57.088 ตัว graphic user interface แบบไหน 1005 01:06:57.089 --> 01:07:01.089 อยากให้ผู้ตอบมากกว่า 1 คำตอบ 1006 01:07:01.091 --> 01:07:05.091 เลือกใช้ตัว GUI ตัวไหน 1007 01:07:05.091 --> 01:07:09.091 อยากให้ผู้ใช้เลือกเอา 1008 01:07:09.091 --> 01:07:13.091 จาก Chose ที่เรามี 1009 01:07:13.092 --> 01:07:17.092 มันตายตัวน่ะ เราก็ไม่จำเป็นต้องให้ผู้ใชพิม 1010 01:07:17.094 --> 01:07:21.094 ข้อความนะคะ 1011 01:07:21.095 --> 01:07:25.095 มันเสียเวลา เราก็ให้ผู้ใช้ติ๊กเลือกเอ 1012 01:07:25.096 --> 01:07:29.096 ติ๊กเลือกเอาเลย เช่น เราอยากรู้ข้อมูล 1013 01:07:29.096 --> 01:07:33.096 ของผู้ใช้ว่าเป็นเพศชายหรือหญิง ถูกไหมคะ 1014 01:07:33.098 --> 01:07:37.098 เราไม่จำเป็นต้องให้ผู้ใช้พิมพ์ว 1015 01:07:37.099 --> 01:07:41.099 ว่าชายหรือพิมพ์ว่าหญิง มันเสียเวลา 1016 01:07:41.099 --> 01:07:45.099 ก็มีให้เลือกเลย แล้วให้ผู้ใช้ 1017 01:07:45.099 --> 01:07:49.099 ติ๊กเอานะคะ คลิกเลือกเอานะคะ 1 คน ก็จะ 1018 01:07:49.101 --> 01:07:53.101 มี 1 เพศ ฉะนั้น เราจะต้องเลือก 1019 01:07:53.102 --> 01:07:57.102 GUI ตัวไหน ที่ทำให้ผู้ใช้ติ๊กได้อันเดียว 1020 01:07:57.104 --> 01:08:01.104 แต่ถ้าเกิดเราอยากรู้ว่าผู้ใช้มีความสนใจนะคะ 1021 01:08:01.106 --> 01:08:05.106 User ของเรานี่มี 1022 01:08:05.107 --> 01:08:09.107 ในเรื่องใดเรื่องหนึ่งนะคะ เช่น 1023 01:08:09.107 --> 01:08:13.107 งานอดิเรก 1024 01:08:13.108 --> 01:08:17.108 ผู้ใช้สนใจอะไรบ้าง ตอบ 1025 01:08:17.109 --> 01:08:21.109 ได้มากกว่า 1 ข้อ เราก็จะเลือก GUI แบบไหน 1026 01:08:21.109 --> 01:08:25.109 ให้ผู้ใช้ติ๊กได้มากกว่า 1 วันนี้ละ ที่เราจะได้ 1027 01:08:25.111 --> 01:08:29.111 รู้นะคะ 1028 01:08:29.111 --> 01:08:33.111 1029 01:08:33.112 --> 01:08:37.112 มีคำถามเพิ่มไหมคะ ถามมาเลย 1030 01:08:37.113 --> 01:08:41.113 วาดรูปนะคะ แล้วก็อธิบายข้าง ๆ 1031 01:08:41.114 --> 01:08:45.114 ว่า 1032 01:08:45.116 --> 01:08:49.116 GUI ตัวนี้ ถามเลยค่ะ 1033 01:08:49.116 --> 01:08:53.116 วาดหน้าตาหลักมา 1034 01:08:53.116 --> 01:08:57.116 เห็นปุ๊ป 1035 01:08:57.116 --> 01:09:01.116 อันนี้ คือ Menu bar 1036 01:09:01.118 --> 01:09:05.118 นึกออกไหมคะ แล้วก็ 1037 01:09:05.118 --> 01:09:09.118 อธิบายมาพอสังเขปว่า 1038 01:09:09.119 --> 01:09:13.119 เอาไว้ทำอะไร ค่ะ อธิบายมาพอ 1039 01:09:13.119 --> 01:09:17.119 เข้าใจ 1040 01:09:17.119 --> 01:09:21.119 เช่น ยกตัวอย่างนะคะ 1041 01:09:21.121 --> 01:09:25.121 Textbox เอาไว้รับข้อความจาก 1042 01:09:25.123 --> 01:09:29.123 ผู้ใช้อย่างนี้ค่ะ ไม่ต้องบอกว่า 1043 01:09:29.124 --> 01:09:33.124 เอาไว้รับรหัส ชื่อ วันที่เกิด 1044 01:09:33.125 --> 01:09:37.125 ไม่ต้องค่ะ อะไรก็ได้ที่ผู้ใช้ต้องการกรอกเข้าไปในระบบ 1045 01:09:37.126 --> 01:09:41.126 เราจะใช้ Textbox นอกเสียจาก 1046 01:09:41.128 --> 01:09:45.128 เราจะยกตัวอย่างเพิ่ม เช่น 1047 01:09:45.129 --> 01:09:49.129 Textbox เราก็วาดรูปหน้าตา Textbox ขึ้นมา 1048 01:09:49.130 --> 01:09:53.130 ใช้รับข้อมูลนะคะ หรือรับข้อความจากผู้ใช้ เช่น 1049 01:09:53.130 --> 01:09:57.130 ชื่อ สกุล อย่างนี้ค่ะ หรือ 1050 01:09:57.132 --> 01:10:01.132 1051 01:10:01.132 --> 01:10:05.132 หรือ Combination box 1052 01:10:05.133 --> 01:10:09.133 เราก็วาดหน้าตา communication box 1053 01:10:09.134 --> 01:10:13.134 อธิบายว่าเอาไว้ทำอะไร ให้ผู้ใช้เลือก 1054 01:10:13.134 --> 01:10:17.134 แบบไหนเลือกจาก Choit 1055 01:10:17.134 --> 01:10:21.134 ตัวเลือกที่เรามีนะคะ หรือ 1056 01:10:21.136 --> 01:10:25.136 ป้อนข้อมูลเข้าไปเพิ่ม 1057 01:10:25.137 --> 01:10:29.137 หรืออย่างไรนะคะ 1058 01:10:29.137 --> 01:10:33.137 ปรึกษา Buddy ๆได 1059 01:10:33.139 --> 01:10:37.139 นั่งด้วยกัน 1060 01:10:37.140 --> 01:10:41.140 ก็ถามกันได้ เพราะอันนี้ไม่ได้สอบนะคะ 1061 01:10:41.141 --> 01:10:45.141 ครูอยากให้เรียนรูเกี่ยวกับพวกรูปแบบการติดต่อกับ 1062 01:10:45.142 --> 01:10:49.142 รูปแบบการติดต่อกับผู้ใช้ 1063 01:10:49.143 --> 01:10:53.143 เราอาจจะเคยได้ยินจาก 14 นี่ะ เราอาจจะเคย 14 แต่ 1064 01:10:53.143 --> 01:10:57.143 เราอาจจะเคยใช้งานหรือเคยได้ยินมาแค่ 4-5 อย่าง 1065 01:10:57.143 --> 01:11:01.143 แต่ในชีวิตจริงมันมีมากกว่านั้น เผื่อวันหน้า 1066 01:11:01.144 --> 01:11:05.144 รูปนี้จำได้เราเคยวาดในภาพ 1067 01:11:05.146 --> 01:11:09.146 ตอนร้อนให้วาดรูป Status bar 1068 01:11:09.146 --> 01:11:13.146 เราก็วาดรูปมา แล้วก็บอกด้วยว่าเราใช้ 1069 01:11:13.147 --> 01:11:17.147 ทำอะไรนะคะ ถ้าเราได้ฝึกวาดฝึกเขียน เราก็จะได้รู้จำ 1070 01:11:17.148 --> 01:11:21.148 นะคะ เวลาไปเลือกใช้งานจะได้ไป 1071 01:11:21.150 --> 01:11:25.150 เลือกถูกว่าจะใช้ตัวไหนนะคะ 1072 01:11:25.151 --> 01:11:29.151 โอ.เค. ไหม วาดนาน 1073 01:11:29.152 --> 01:11:33.152 ไหมคะ วิชาศิลปะนี่ค่อยข้างใช้เวลานาน 1074 01:11:33.152 --> 01:11:37.152 1075 01:11:37.153 --> 01:11:41.153 ่่ 1076 01:11:41.154 --> 01:11:45.154 1077 01:11:45.155 --> 01:11:49.155 ยังไม่มีนะ อย่างนั้นวาดไปก่อนนะคะ 1078 01:11:49.157 --> 01:11:53.157 1079 01:11:53.158 --> 01:11:57.158 1080 01:11:57.158 --> 01:12:01.158 ช่วงวาดรูป 1081 01:12:01.159 --> 01:12:05.159 ครูก็จะเช็กชื่อไปด้วย วันนี้ใครไม่มาเอ่ย 1082 01:12:05.161 --> 01:12:09.161 วันวิศาไม่มานะ 1083 01:12:09.162 --> 01:12:13.162 1084 01:12:13.163 --> 01:12:17.163 จุฬามาศก็ไม่มานะ 1085 01:12:17.164 --> 01:12:21.164 กาญจนา 1086 01:12:21.165 --> 01:12:25.165 ก็ไม่มา 3 คนใช่ไหมคะ 1087 01:12:25.166 --> 01:12:29.166 โอ.เค. ที่เหลือมาครบ 1088 01:12:29.167 --> 01:12:33.167 1089 01:12:33.167 --> 01:12:37.167 1090 01:12:37.169 --> 01:12:41.169 1091 01:12:41.170 --> 01:12:45.170 1092 01:12:45.172 --> 01:12:49.172 1093 01:12:49.174 --> 01:12:53.174 1094 01:12:53.175 --> 01:12:57.175 1095 01:12:57.176 --> 01:13:01.176 1096 01:13:01.178 --> 01:13:05.178 1097 01:13:05.179 --> 01:13:09.179 1098 01:13:09.180 --> 01:13:13.180 1099 01:13:13.183 --> 01:13:17.183 1100 01:13:17.184 --> 01:13:21.184 1101 01:13:21.185 --> 01:13:25.185 1102 01:13:25.186 --> 01:13:29.186 1103 01:13:29.188 --> 01:13:33.188 1104 01:13:33.189 --> 01:13:37.189 1105 01:13:37.192 --> 01:13:41.192 1106 01:13:41.192 --> 01:13:45.192 1107 01:13:45.194 --> 01:13:49.194 1108 01:13:49.196 --> 01:13:53.196 1109 01:13:53.197 --> 01:13:57.197 [สิ้นสุดการถอดความ] 1110 01:13:57.198 --> 01:14:01.198 1111 01:14:01.199 --> 01:14:05.199 1112 01:14:05.201 --> 01:14:09.201 1113 01:14:09.203 --> 01:14:12.203 1114 01:14:13.204 --> 01:14:13.206 1115 01:14:17.206 --> 01:14:17.209 รงโน้นก็ได้ 01:02:57.840 --> 01:02:59.160 วางตรงโต๊ะข้าง ๆ ก็ได้ 01:03:00.030 --> 01:03:01.520 ถ้าเขียนไม่พอใน 1 หน้า 01:03:02.660 --> 01:03:05.110 ให้ไปหยิบกระดาษด้านข้างนะคะ 01:03:05.780 --> 01:03:06.770 ไปเขียนเพิ่มได้ 01:03:06.770 --> 01:03:08.470 อย่าลืมเขียนรหัส เขียนชื่อตัวเองใส่ 01:03:08.470 --> 01:03:09.660 ครูจะได้ให้คะแนนถูก 01:03:12.350 --> 01:03:15.550 ทบทวนคำสั่งแบบฝึกหัดอีก 1 รอบ 01:03:15.570 --> 01:03:17.620 แบบฝึกหัดนี้ไม่ได้ให้ทำฟรีค่ะ 01:03:18.120 --> 01:03:20.580 กลัววาดรูปแล้วเหนื่อย ให้ 5 คะแนนนะคะ 01:03:21.250 --> 01:03:22.840 มีเงื่อนไขว่า 01:03:23.390 --> 01:03:27.220 ถ้าวาดผิด ถ้าวาดไม่เหมือนนี่ไม่หักนะคะ 01:03:28.130 --> 01:03:32.220 แต่พอดูออกว่า อ๋อ อันนี้คือ Text Box ล่ะ อย่างนี้ค่ะ 01:03:32.750 --> 01:03:34.680 ก็ให้อยู่นะคะ 01:03:35.430 --> 01:03:37.560 ให้วาดรูป Text Box มา 01:03:37.630 --> 01:03:40.130 แล้วบอกด้วยว่า Text Box ใช้ทำอะไร 01:03:43.230 --> 01:03:46.980 เป็น Graphic User Interface ที่เอาไว้ทำอะไร 01:03:48.480 --> 01:03:51.830 ในการดีไซน์หน้า Interface 01:03:54.400 --> 01:03:58.160 Text Box, Radio Button, Combination Box 01:03:58.250 --> 01:03:59.820 เราจะเรียกว่า “Combo Box” 01:04:00.610 --> 01:04:03.890 Spin Box หรือ Spiner Box เคยได้ยินไหมคะ 01:04:04.520 --> 01:04:07.650 Check Button, Menu Bars, List Box, 01:04:08.450 --> 01:04:12.350 Status Bar, Calendars, Scroll bars, 01:04:12.990 --> 01:04:16.230 Drop-down List Box, Toolbars, Dialog boxes 01:04:16.360 --> 01:04:18.270 และ Toggle buttons 01:04:22.600 --> 01:04:24.120 ให้วาดรูปใส่กระดาษมา 01:04:25.580 --> 01:04:27.570 ถ้าให้ไปก๊อบฯ มาในอินเทอร์เน็ตเลย 01:04:27.580 --> 01:04:31.440 เดี๋ยวมันจะไม่เกิดความลึกซึ้งในการเรียนรู้ 01:04:32.050 --> 01:04:34.200 ถ้าเราวาดได้ลงมือทำ 01:04:35.190 --> 01:04:37.520 เราจะได้สังเกตว่า อ๋อ 01:04:38.220 --> 01:04:40.220 Text Box มันเป็นหน้าตาแบบนี้ 01:04:41.220 --> 01:04:42.900 แล้วบอกหน้าที่ของมันด้วย 01:04:42.930 --> 01:04:44.590 เราจะใช้ Text Box ทำอะไร 01:04:45.730 --> 01:04:48.390 เอามารับค่าอะไร หรือเอามาป้อนอะไร 01:04:49.550 --> 01:04:50.900 คุณสมบัติของมันน่ะค่ะ 01:04:53.040 --> 01:04:54.670 ยังสงสัยในคำสั่งไหมเอ่ย 01:04:56.830 --> 01:04:58.120 สงสัยไหมคะ ถามไหม 01:05:01.990 --> 01:05:05.690 ใช้ดินสอหรือปากกาวาดก็ได้ค่ะ 01:05:12.400 --> 01:05:15.180 พัชราภาบอกว่าอุปกรณ์ไม่ครบ 01:05:15.180 --> 01:05:19.480 สงสัยงานศิลปะวันนี้จะไม่สวยงาม 01:05:19.840 --> 01:05:22.490 เน้นที่ความถูกต้องค่ะ สวยงามไม่เท่าไร 01:05:23.550 --> 01:05:26.430 เอาแบบให้อาจารย์เห็นปุ๊บ อ๋อ 01:05:27.100 --> 01:05:30.680 มันคือ Combo Box จริง ๆ อย่างนี้ค่ะ 01:05:31.190 --> 01:05:32.420 ไม่ใช่เห็นปุ๊บ เอ้า 01:05:32.750 --> 01:05:35.530 ทำไม Check Button มันเป็นแบบนี้ อย่างนี้ค่ะ 01:05:42.390 --> 01:05:43.380 มีคำถามไหมคะ 01:05:44.810 --> 01:05:45.640 ถามเลย 01:05:48.720 --> 01:05:50.610 บางคนเห็นปุ๊บ 01:05:51.440 --> 01:05:54.040 ใช้งานมาตั้งนาน เขาเรียกอันนี้หรือ 01:05:56.020 --> 01:05:58.430 อันนี้มีชื่อว่าแบบนี้หรือ อย่างนี้ค่ะ 01:06:03.010 --> 01:06:06.230 พอให้วาดแล้วมันก็จะลึกซึ้งลงไปนะ 01:06:08.290 --> 01:06:11.400 ใช่ค่ะ ให้วาดให้ครบทั้ง 14 อัน 01:06:12.430 --> 01:06:16.190 เพราะเราอยู่ในแวดวงไอทีนี่ 01:06:16.730 --> 01:06:18.810 เราจะต้องมีความรู้อย่างน้อย 01:06:19.190 --> 01:06:21.790 Graphic User Interface พวกนี้ เราจะต้องรู้ 01:06:22.910 --> 01:06:26.990 รู้หน้าตามันแล้วจะต้องรู้ด้วย ว่ามันเอาไว้ทำอะไรค่ะ 01:06:28.590 --> 01:06:32.450 เวลาวันหน้า ที่เราไปออกแบบ Interface นะคะ 01:06:32.450 --> 01:06:34.060 เราจะได้เลือกใช้ให้ถูก 01:06:34.820 --> 01:06:36.710 เลือกใช้ได้ถูกนะคะ 01:06:36.710 --> 01:06:42.750 ว่า อ๋อ เราอยากให้ผู้ใช้คลิกคำตอบแค่ครั้งเดียว 01:06:42.980 --> 01:06:44.510 ตอบแค่ Single น่ะค่ะ 01:06:45.270 --> 01:06:49.530 เราจะต้องเลือก ตัว Graphic User Interface ตัวไหน 01:06:50.910 --> 01:06:54.240 อยากให้ผู้ใช้ตอบมากกว่า 1 คำตอบ 01:06:55.200 --> 01:06:58.990 เราจะเลือกใช้ตัว GUI ตัวไหน 01:06:59.960 --> 01:07:05.530 อยากให้ผู้ใช้ เลือกเอาจากช้อยส์ที่เรามีนะคะ 01:07:06.260 --> 01:07:07.750 แต่ช้อยส์มันตายตัวน่ะ 01:07:08.830 --> 01:07:14.450 เราก็ไม่จำเป็นต้องให้ผู้ใช้พิมพ์ข้อความนะคะ 01:07:15.110 --> 01:07:16.170 มันเสียเวลา 01:07:16.500 --> 01:07:20.270 เราก็ให้ผู้ใช้ติ๊กเลือกเอาเลยนะคะ 01:07:20.270 --> 01:07:27.120 เช่น เราอยากรู้ข้อมูลของผู้ใช้ ว่าเป็นเพศชายหรือหญิง นึกออกไหมคะ 01:07:29.260 --> 01:07:33.480 เราไม่จำเป็นต้องให้ผู้ใช้พิมพ์ว่าชาย หรือพิมพ์ว่าหญิง มันเสียเวลา 01:07:34.390 --> 01:07:35.570 เราก็มีให้เลือกเลย 01:07:38.180 --> 01:07:42.080 แล้วให้ผู้ใช้ติ๊กเอานะคะ คลิกเลือกเอา 01:07:43.050 --> 01:07:44.820 1 คนก็จะมี 1 เพศ 01:07:45.550 --> 01:07:47.990 ฉะนั้น เราจะต้องเลือก GUI ตัวไหน 01:07:48.530 --> 01:07:49.980 ที่ให้ผู้ใช้ติ๊กได้แค่อันเดียว 01:07:51.870 --> 01:07:56.260 แต่ถ้าเกิดเราอยากรู้ว่าผู้ใช้มีความสนใจนะคะ User ของเรานี่ 01:07:57.840 --> 01:08:02.660 มีความสนใจในเรื่องใดเรื่องหนึ่งนะคะ 01:08:02.660 --> 01:08:09.530 เช่น งานอดิเรก ผู้ใช้สนใจอะไรบ้าง 01:08:10.440 --> 01:08:13.120 ตอบได้มากกว่า 1 ข้อ 01:08:13.900 --> 01:08:17.050 เราก็จะเลือก GUI แบบไหน ให้ผู้ใช้ติ๊กได้มากกว่า 1 01:08:17.930 --> 01:08:20.270 วันนี้ล่ะ เราจะได้รู้นะคะ 01:08:27.680 --> 01:08:28.910 มีคำถามเพิ่มไหมคะ 01:08:30.350 --> 01:08:31.150 ถามมาเลย 01:08:32.300 --> 01:08:35.430 วาดรูปนะคะ แล้วก็อธิบายข้าง ๆ 01:08:38.100 --> 01:08:42.020 ว่า GUI ตัวนี้ ถามเลยค่ะ 01:08:45.620 --> 01:08:47.020 วาดหน้าตาหลักมา 01:08:50.580 --> 01:08:53.960 เห็นปุ๊ป อ๋อ อันนี้คือ Menu bars 01:08:55.170 --> 01:08:55.650 นึกออกไหมคะ 01:08:58.430 --> 01:09:05.580 แล้วก็อธิบายมาพอสังเขป ว่าเอาไว้ทำอะไรค่ะ 01:09:06.100 --> 01:09:07.760 อธิบายมาพอเข้าใจ 01:09:11.380 --> 01:09:13.600 เช่น ยกตัวอย่างนะคะ 01:09:14.820 --> 01:09:21.300 Text Box เอาไว้รับข้อความจากผู้ใช้อย่างนี้ค่ะ 01:09:22.250 --> 01:09:24.470 ไม่ต้องบอกว่าเอาไว้รับรหัส, 01:09:24.520 --> 01:09:27.080 ชื่อ-นามสกุล, วันเดือนปีเกิด ไม่ต้องค่ะ 01:09:27.700 --> 01:09:31.020 อะไรก็ได้ที่ผู้ใช้ต้องการกรอกเข้าไปในระบบ 01:09:31.120 --> 01:09:34.480 เราจะใช้ Text Box นะคะ 01:09:35.210 --> 01:09:37.790 นอกจากเราจะยกตัวอย่างเพิ่มนะคะ 01:09:37.790 --> 01:09:41.540 เช่น Text Box เราก็วาดรูปหน้าตา Text Box ขึ้นมา 01:09:41.550 --> 01:09:43.930 แล้วเราก็บอกว่าใช้รับข้อมูลนะคะ 01:09:44.480 --> 01:09:46.280 หรือรับข้อความจากผู้ใช้ 01:09:46.280 --> 01:09:50.580 เช่น ชื่อ-นามสกุล อย่างนี้ค่ะ 01:09:54.950 --> 01:09:57.540 หรือ Combination Box 01:09:58.630 --> 01:10:02.090 เราก็วาดหน้าตา Combination Box ขึ้นมา 01:10:02.090 --> 01:10:06.230 เสร็จปุ๊บ เราก็อธิบายว่าเอาไว้ทำอะไรนะคะ 01:10:06.230 --> 01:10:08.160 ให้ผู้ใช้เลือกแบบไหน 01:10:08.830 --> 01:10:10.760 เลือกจากช้อยส์ที่เรามีนะคะ 01:10:10.760 --> 01:10:11.940 จากตัวเลือกที่เรามี 01:10:13.110 --> 01:10:16.370 หรือให้ผู้ใช้ป้อนข้อมูลเข้าไปเพิ่ม 01:10:17.890 --> 01:10:20.080 หรืออย่างไรนะคะ 01:10:25.240 --> 01:10:26.950 ปรึกษาบัดดี้ได้ค่ะ 01:10:26.950 --> 01:10:32.750 นั่งด้วยกัน ก็ถามกันได้ 01:10:32.750 --> 01:10:34.440 เพราะอันนี้ไม่ได้สอบนะคะ 01:10:35.640 --> 01:10:41.730 ครูอยากให้เรียนรู้ เกี่ยวกับพวกรูปแบบการติดต่อกับผู้ใช้นะคะ 01:10:41.730 --> 01:10:42.320 มันมีเยอะ 01:10:44.247 --> 01:10:45.509 เราอาจจะเคยได้ยิน 01:10:45.534 --> 01:10:50.170 จาก 14 นี่เราอาจจะเคยใช้งาน หรือเคยได้ยินมาแค่ 4-5 อย่าง 01:10:51.820 --> 01:10:54.020 แต่ในชีวิตจริงมันมีมากกว่านั้น 01:10:54.220 --> 01:10:58.000 วันหน้าเราไปเห็น อ๋อ รูปนี้จำได้เราเคยวาดตอนในคาบ 01:10:58.740 --> 01:11:02.410 อาจารย์แพรตะวันให้วาดรูป Status Bar อย่างนี้ค่ะ 01:11:04.490 --> 01:11:08.470 เราก็วาดรูปมา เราก็บอกด้วยว่าเราใช้ทำอะไรนะคะ 01:11:08.790 --> 01:11:10.660 ถ้าเราได้ฝึกวาดฝึกเขียน 01:11:10.660 --> 01:11:13.410 เราก็จะได้รู้จำนะคะ 01:11:13.480 --> 01:11:17.200 เวลาไปเลือกใช้งาน ก็จะได้ไปเลือกถูกว่าจะใช้ตัวไหนนะคะ 01:11:19.390 --> 01:11:19.980 โอ.เค. ไหม 01:11:22.260 --> 01:11:23.170 วาดนานไหมคะ 01:11:25.220 --> 01:11:27.230 วิชาศิลปะนี่ค่อนข้างใช้เวลานาน 01:11:32.870 --> 01:11:34.560 มีตัวไหนค้นไม่เจอไหมคะ 01:11:41.050 --> 01:11:43.450 ยังไม่มีนะ อย่างนั้นวาดไปก่อนนะคะ 01:11:54.530 --> 01:11:57.070 ช่วงวาดรูปครูก็จะเช็กชื่อไปด้วย 01:11:57.590 --> 01:11:58.850 วันนี้ใครไม่มาเอ่ย 01:12:03.620 --> 01:12:05.290 วันวิสาข์ไม่มานะ 01:12:08.180 --> 01:12:10.120 จุฑามาศก็ไม่มานะ 01:12:14.760 --> 01:12:16.510 กาญจนาก็ไม่มา 01:12:16.850 --> 01:12:18.110 3 คนใช่ไหมคะ 01:12:19.060 --> 01:12:20.850 โอ.เค. ที่เหลือมาครบ