SlideShare a Scribd company logo
การออกแบบกราฟิก
ส่วนประสานงานกับผู้ใช้
Graphical User Interface
Facebook.com/TouchPoint.in.th TouchPoint.in.th YouTube.com/c/TouchPointTH
ดร.กฤษณพงศ์ เลิศบารุงชัย
เป็นการติดต่อกับผู้ใช้โดยใช้ภาพสัญลักษณ์ (Icon)
เพื่อทดแทนการพิมพ์คาสั่ง ทาให้ผู้ใช้งานสามารถใช้งาน
ได้ง่ายและรวดเร็วขึ้น ไม่ต้องจดจาคาสั่งต่าง ๆ
ของโปรแกรม เช่น Windows, Icons, Labels,
Textboxes, Radio Buttons เป็นต้น
การออกแบบกราฟิกส่วน
ประสานงานกับผู้ใช้
Graphical User Interface
ส่วนประสานงานกับผู้ใช้
เป็นส่วนที่เป็นสื่อกลางระหว่างผู้ใช้กับคอมพิวเตอร์ มีหน้าที่
ทาให้ผู้ใช้งานสามารถปฏิสัมพันธ์โต้ตอบใช้งานผลิตภัณฑ์ได้
User Interface
ส่วนประสานงานกับผู้ใช้
User Interface
การโต้ตอบด้วยบรรทัดคาสั่ง
Command Language Interaction: CLI
เป็นส่วนที่เป็นสื่อกลางระหว่างผู้ใช้กับคอมพิวเตอร์ มีหน้าที่ทาให้ผู้ใช้งานสามารถปฏิสัมพันธ์โต้ตอบใช้งานผลิตภัณฑ์ได้
การโต้ตอบด้วยภาษามนุษย์
Natural Language Interaction: NLI
การโต้ตอบด้วยกราฟิก
Graphic User interface: GUI
การโต้ตอบด้วยบรรทัดคาสั่ง
Command Language Interaction: CLI
เป็นการโต้ตอบโดยผู้ใช้งานจะต้องใช้คาสั่งที่เป็นตัวอักษร (String) ผ่านคีย์บอร์ดสาหรับเป็นข้อมูลนาเข้าสู่ระบบแล้วระบบจะ
แสดงข้อมูลนาออกผ่านหน้าจอ เช่น Command Line Interface
การโต้ตอบด้วยกราฟิก
Graphic User interface: GUI
เป็นการโต้ตอบที่ผู้ใช้งานจะมีปฏิสัมพันธ์กับวัตถุ (Objects) ที่สามารถมองเห็น ได้ยิน หรือสัมผัสได้ เช่น ภาพกราฟฟิก
ไอคอน การเคลื่อนไหว
การโต้ตอบด้วยภาษามนุษย์
Natural Language Interaction: NLI
การโต้ตอบด้วยภาษามนุษย์เป็นการโต้ตอบโดยผู้ใช้งานจะใช้ภาษามนุษย์หรือภาษาธรรมชาติเช่น ภาษาเขียน หรือเสียงเป็นข้อมูล
นาเข้า (Input) และระบบจะประมวลผลกลับมาเป็นข้อมูลแสดงผล (Output) การโต้ตอบประเภทนี้ส่วนใหญ่จะถูกนามาใช้ในเทคโนโลยี
ด้านปัญญาประดิษฐ์ (Artificial intelligent: AI) เช่น Siri ที่สามารถใช้งานในระบบปฏิบัติการ iOS
การสื่อสารทางการมองเห็น (Visual Communication) เป็น
การสื่อสารด้วยภาพและคาอธิบายข้อมูลในรูปแบบที่สามารถ
มองเห็นได้ ประกอบด้วยเครื่องหมาย ตัวอักษร รูปภาพ
ออกแบบกราฟิก และสี เป็นต้น
การสื่อสารทางการมองเห็น
Visual Communication
ระยะระหว่างวัตถุ
Proximity
พื้นที่ว่าง
White Space
หลักการออกแบบ
The Principles of Design
สมมาตร
Symmetry
สมดุล
Balance
ความสม่าเสมอ
Regularity
การคาดการณ์
Predictability
การเรียงลาดับ
Sequentially
ลาดับชั้น
Hierarchy
ประหยัด
Economy
เอกภาพ
Unity
ความกลมกลืน
Harmony
สัดส่วน
Proportion
ความเรียบง่าย
Simplicity
การจัดกลุ่ม
Grouping
จังหวะ
Rhythm
การจัดตาแหน่ง
Alignment
ความเปรียบต่าง
Contrast
การสร้างจุดเด่น
Dominance
สมดุล
Balance
เป็นการจัดวางองค์ประกอบอย่างสมมาตร ให้น้าหนักของพื้นที่มีความเท่าเทียมกัน
เหนือแกนกลาง
Above The Central Axis
ใต้แกนกลาง
Below The Central Axis
สมมาตร
Symmetry
เป็นการจัดองค์ประกอบโดยจัดวางให้องค์ประกอบทางซ้ายและขวาเท่ากันพอดี โดยวัดจากเส้นกึ่งกลางของหน้าจอ
สมมาตร
Symmetry
ความแตกต่างระหว่างสมดุล (Balance) กับสมมาตร (Symmetry) คือ น้าหนักทัก 2 ด้านอาจเท่ากัน แต่อาจไม่สมมาตร
เพราะเมื่อวัดจากเส้นกึ่งกลางหน้าจอแล้วไม่เท่ากันพอดี
ความสม่าเสมอ
Regularity
เป็นความสอดคล้องในการจัดวางองค์ประกอบให้เป็นระเบียบทั้งแนวนอนและแนวตั้ง การเว้นระยะห่างอย่างสม่าเสมอ รวมถึงการใช้
รูปร่าง สี และที่ว่าง ไปในทิศทางเดียวกัน
ในทางตรงกันข้าม หากเราจัดวางแบบไม่สม่าเสมอ เนื่องจากขาดหลักคิดในการจัดวางที่ชัดเจน
ทาให้เกิดความไม่เป็นระเบียบในการออกแบบ
ความสม่าเสมอ
Regularity
การคาดการณ์
Predictability
เป็นการจัดวางองค์ประกอบที่ทาให้ผู้ใช้คาดการณ์หรือคาดเดาสิ่งที่เราจัดวางองค์ประกอบในหน้าจอได้ ว่าอะไรอยู่ตรงไหน คืออะไร
Icon Icon Icon
Title Bar
Menu Bar
Control Control Control
Control Control Control
Button Button Button
การคาดการณ์
Predictability
ในทางตรงกันข้าม หากเราจัดวางแบบไม่มีหลักคิดวางแผน ผู้ใช้จะไม่สามารถคาดการณ์หรือคาดเดาอะไรได้เลย
ไม่สามารถเข้าใจได้ถึงโครงสร้างที่ชัดเจนของหน้าจอ
Menu Bar
Icon Control Control
Control
Control Button
Icon
Title Bar Button
Icon Control Control Button
การคาดการณ์
Predictability
การเรียงลาดับ
Sequentially
เป็นการจัดองค์ประกอบเพื่อนาสายตาผ่านหน้าจอที่ชัดเจน วัตถุใดจะมาก่อน-หลัง โดยเรียงจากสิ่งที่สาคัญ นามาจัดตาแหน่ง
ระยะห่าง และจัดกลุ่ม
ให้ลาดับโดยการจัดองค์ประกอบเพื่อนาสายตาผ่านหน้าจอในลักษณะที่ชัดเจน มีเหตุผล เป็นจังหวะ และมีประสิทธิภาพ
ลาดับชั้น
Hierarchy
เป็นการให้ความสาคัญกับสิ่งต่างๆ ที่ไม่เท่ากัน โดยใช้หลักการออกแบบเข้ามาช่วยนาสายตาให้ไปยังจุดที่สาคัญก่อน
ไม่มีลาดับชั้น มีลาดับชั้น
ตัวอย่างการจัดวาง
ตัวอย่างการจัดวาง
ตัวอย่างการจัดวาง
ประหยัด
Economy
ใช้รูปแบบการจัดองค์ประกอบให้น้อย ใช้สีให้น้อยที่สุด อะไรที่เป็นสิ่งเดียวกันควรใช้เหมือนกัน
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
ประหยัด
Economy
ในทางตรงกันข้าม การใช้องค์ประกอบหลายอย่างโดยไม่จาเป็น จะทาให้เกิดความซับซ้อนโดยไม่จาเป็น และทาให้ความชัดเจนลดลง
BBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBB
QQQQQQQQQQQQQQQQQQQQQ
QQQQQQQQQQQQQQQQQQQQQ
QQQQQQQQQQQQQQQQQQQQQ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZ
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
เอกภาพ
Unity
เป็นการจัดวางองค์ประกอบที่เชื่อมต่อกันเพื่อให้มองเห็นเป็นอันหนึ่งอันเดียวกัน กลมกลืนกัน คล้ายคลึงกัน
เช่น ขนาด รูปร่าง สี การเว้นระยะ
เอกภาพ
Unity
ในทางตรงกันข้าม หากองค์ประกอบถูกแยกส่วน โดยแต่ละวัตถุมีลักษณะเฉพาะ มีการใช้ขนาด รูปร่าง สี ที่แตกต่างกัน
ก็จะเกิดความไม่เป็นเอกภาพ
เอกภาพและความหลากหลาย
Unity and Variety
เอกภาพ (Unity) = ขนาดเดียวกัน
ความหลากหลาย (Variety) = สีที่หลากหลาย
เอกภาพ (Unity) = สีเดียวกัน
ความหลากหลาย (Variety) = ขนาดที่หลากหลาย
ความกลมกลืน
Harmony
เป็นการจัดองค์ประกอบเพื่อให้ผู้ใช้งานรู้สึกว่าทุกส่วนของการจัดวางประกอบกันเป็นหนึ่งเดียว ส่วนมากมาจากจังหวะในการจัดวาง
และการทาซ้า
ความกลมกลืน
Harmony
ในขณะเดียวกันสิ่งที่ควรใช้ในการออกแบบ คือ ขนาด รูปร่าง และการจัดวาง
ความกลมกลืน
Harmony
เนื่องจากขอบเขตของคอนเทนต์อาจจะไม่เท่ากัน แต่การใช้สี ความกว้างของหัวข้อ และระยะห่างเท่ากัน
ความกลมกลืน
Harmony
บางครั้งการออกแบบก็ไม่จาเป็นต้องกลืนกันมากเกินไป เช่น หัวข้อหลักกับหัวข้อย่อย อาจจะเป็นคนละสีหรือคนละขนาดก็ได้
ปุ่ม Edit และปุ่ม Remove เป็นปุ่มเหมือนกัน แต่คนละหน้าที่กัน
ความกลมกลืน
Harmony
แอนิเมชั่นหรือวัตถุที่มีการเคลื่อนไหวเหมือนๆ กัน เพื่อความเป็นอันหนึ่งอันเดียวกัน
ความกลมกลืน
Harmony
ความกลมกลืน
Harmony
Search
สัดส่วน
Proportion
เป็นการจัดวางองค์ประกอบในหน้าจอที่มีการจัดกลุ่มของวัตถุด้วยสัดส่วนที่สวยงาม
Size vs Scale vs Proportion การใช้งานอัตราส่วน
สัดส่วน
Proportion
เป็นการจัดวางองค์ประกอบในหน้าจอที่มีการจัดกลุ่มของวัตถุด้วยสัดส่วนที่สวยงาม
Size vs Scale vs Proportion
ขนาด (Size) เป็นความเล็กหรือใหญ่ของวัตถุที่สามารถบอกได้เป็นหน่วยวัด
UX
Designer
275px
75px
Size vs Scale vs Proportion
มาตราส่วน (Scale) เป็นขนาดที่เกิดจากการย่อหรือขยายที่สัมพันธ์กัน มักจะวัดเป็นร้อยละ (Percentages) โดยยังคงสัดส่วนเดิม
33%
70%
100%
133%
170%
200%
Size vs Scale vs Proportion
สัดส่วน (Proportion) เป็นความสัมพันธ์ที่กลมกลืนระหว่างสององค์ประกอบเพิ่มเติมของมาตราส่วน
ได้สัดส่วน ไม่ได้สัดส่วน
UX
Designer
UX
Designer
Size vs Scale vs Proportion
ถ้าสัดส่วนถูกนามาใช้กับการวางองค์ประกอบที่มีหลายขนาดหน้าจอ (Fluid Elements) สัดส่วนจะต้องเท่าเดิม แม้ว่าอาจถูกย่อหรือ
ขยาย ส่วนใหญ่จะย่อหรือขยายตามร้อยละของคอนเทนเนอร์
Header (Fluid)
Main Content (Fluid) Sidebar
(Static)
100% - (300px + 16px) 300px
100%
Size vs Scale vs Proportion
Retina Display
VS
Regular Display
The 8pt Grid System
เป็นอัตราส่วนที่ง่ายที่สุด นิยมใช้กับการไอคอนต่างๆ
Square (1 : 1)
1
1
การใช้งานอัตราส่วน
อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น
การใช้งานอัตราส่วน
อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น
Square root of two (1:1.414)
เป็นอัตราส่วนของการออกแบบหนังสือ และขนาดกระดาษมาตรฐาน
1
1.414
การใช้งานอัตราส่วน
อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น
เป็นอัตราส่วนที่พบเห็นได้สถาปัตยกรรมกรีกในยุคแรก
การเจริญเติบโตของพืชและสัตว์
Golden Rectangle (1:1.618)
1
1 0.618
Golden Rectangle (1:1.618)
การใช้งานอัตราส่วน
อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น
เป็นอัตราส่วนที่ถูกใช้น้อยกว่าสัดส่วนอื่นๆ ความแคบทาให้
ได้รูปร่างที่โดดเด่น
Square root of three (1:1.732)
1
1.732
การใช้งานอัตราส่วน
อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น
เป็นอัตราส่วนที่สวยงามรูปแบบหนึ่ง ทาให้ผู้ใช้รู้สึกอยาก
สัมผัส หากใช้สี่เหลี่ยมผืนผ้าที่ยาวกว่านี้อาจทาให้หน้าจอดู
ไม่น่าสนใจ
Double square (1:2)
1
2
ความเรียบง่าย
Simplicity
เป็นการออกแบบที่เน้นความง่ายไม่วุ่นวาย มีองค์ประกอบไม่ต้องเยอะจนเกินไป
ในทางตรงกันข้ามหากองค์ประกอบถูกจัดวางอย่างซับซ้อน (Complexity)
อาจทาให้เกิดความยุ่งยาก วุ่นวาย สับสน
ลองนับว่าหน้าจอนี้มีกี่คอลัมน์ (Column) กี่แถว (Row) กี่ขอบเขตข้อมูล (Field)
TEST RESULTS SUMMARY: GROUND
GROUND, FAULT T-G
3 TERMINAL DC RESISTANCE
3500.00 K OHMS T-R
14.21 K OHMS T-R
3500.00 K OHMS R-G
3 TERMINAL DC VOLTAGE
0.00 VOLTS T-G
0.00 VOLTS R-G
VALID AC SIGNATURE
3 TERMINAL RC RESISTANCE
8.82 K OHNS T-R
14.17 K OHNS T-R
628.52 K OHNS T-R
LONGITUDINAL BALANCE POOR
39 DB
COULD NOT COUNT AINGERS DUE TO
LOW RESISTANCE
VALID LINE CKT CONFIGURATION
CAN DRAW AND BREAK DIAL TONE
=
=
=
=
=
=
=
เฉลย
7 Columns / 20 Rows / 22 Fields = 49 Complexity
ถ้าเราเปลี่ยนการออกแบบ
Redesigned
DC RESISTANCE
3500 K T-R
3500 K R-G
14 K T-G
BALANCE
39 DB
DC VOLTAGE
0 V T-G
0 V R-G
AC SIGNATURE
9 K T-R
629 K R-G
14 K T-G
CENTRAL OFFICE
VALID LINE CKT
DIAL TONE OK
TIP GROUND 14 K
เฉลย
6 Columns / 8 Rows / 18 Fields = 32 Complexity
1 2 3 4 5
การจัดกลุ่ม
Grouping
เป็นการจัดองค์ประกอบการทางานที่เกี่ยวข้องกันเป็นกลุ่ม เพื่อให้มีการแบ่งแยกพื้นที่ย่างชัดเจน
TEST RESULTS SUMMARY: GROUND
GROUND, FAULT T-G
3 TERMINAL DC RESISTANCE
> 3500.00 K OHMS T-R
= 14.21 K OHMS T-R
> 3500.00 K OHMS R-G
3 TERMINAL DC VOLTAGE
= 0.00 VOLTS T-G
= 0.00 VOLTS T-G
VALID AC SIGNATURE
3 TERMINAL AC RESISTANCE
= 8.82 K OHMS T-R
= 14.17 K OHMS T-R
= 628.52 K OHMS R-G
LONGITUDINAL BALANCE POOR
= 39 DBB
COULD NOT COUNT RINGERS DUE TO
LOW RESISTANCE
VALID LINE CKT CIBFIGURATION
CAN DRAW AND VREAK DIAL TONE
การจัดกลุ่ม
Grouping
เป็นการจัดองค์ประกอบการทางานที่เกี่ยวข้องกันเป็นกลุ่ม เพื่อให้มีการแบ่งแยกพื้นที่ย่างชัดเจน
TIP GROUND TEST 14 K
DC RESISTANCE DC VOLTAGE AC SIGNATURE
3500 K T-R
14 K T-G
3500 K R-G
0 V T-G
0 V R-G
9 K T-R
14K T-G
629K R-G
BALANCE
39 DB
CENTRAL OFFICE
VALID LINE CKT
DIAL TONE OK
การจัดกลุ่ม
Grouping
เป็นการจัดองค์ประกอบการทางานที่เกี่ยวข้องกันเป็นกลุ่ม เพื่อให้มีการแบ่งแยกพื้นที่ย่างชัดเจน
ความคล้ายกัน
Similarity
พื้นที่
Area
ระยะระหว่างวัตถุ
Proximity
ปิด
Closure
ความต่อเนื่อง
Continuity
สมมาตร
Symmetry
การจัดกลุ่ม
Grouping
เป็นการจัดองค์ประกอบการทางานที่เกี่ยวข้องกันเป็นกลุ่ม เพื่อให้มีการแบ่งแยกพื้นที่ย่างชัดเจน
จังหวะ
Rhythm
เป็นการเกิดขึ้นขององค์ประกอบต่างๆ ที่ผู้ใช้สามารถคาดเดาได้ว่าองค์ประกอบต่างๆ จะเกิดขึ้นซ้าๆ เช่น
ขนาด รูปร่าง และความยาวขอวัตถุ
x y x
y
x
x
y
จังหวะ
Rhythm
เป็นการเกิดขึ้นขององค์ประกอบต่างๆ ที่ผู้ใช้สามารถคาดเดาได้ว่าองค์ประกอบต่างๆ จะเกิดขึ้นซ้าๆ เช่น ขนาด รูปร่าง
และความยาวขอวัตถุ
Uneven Frequency
ความถี่ที่ไม่ต่อเนื่อง
Even Frequency
ความถี่ที่ต่อเนื่อง
x x x x
x y z
ตัวอย่าง
1 2
3
1 2
3
1 2
3
1 2
3
1 2
3
1 2
3
1 2
3
โดยมากจังหวะ (Rhythm) มักจะใช้กับรายการ (List) ที่เกิดขึ้นซ้าๆ
1
2
3
1
2
3
1
2
3
1
2
3
การสร้างจุดเด่น
Dominance
เป็นการสร้างจุดสนใจในหน้าจอ อยากให้ผู้ใช้สนใจสิ่งใดเน้นจุดนั้น เพื่อให้ผู้ใช้เห็นว่าคือจุดใดคือจุดที่สาคัญ
การสร้างจุดเด่น
Dominance
ไม่จาเป็นต้องทาเพียงจุดเดียวในหน้าจอ อาจเป็นหลายจุดก็ได้ แต่ไม่ใช้ทั้งหน้า เป็นเพียงแค่การสร้างจุดที่ทาให้ผู้ใช้สนใจ (Focus Point)
สามารถสร้างเป็นจุดสนใจหลัก (Primary Dominant Element) จุดสนใจรอง (Secondary) และจุดสนใจลาดับที่ 3 (Tertiary) ได้
การสร้างจุดเด่น
Dominance
สามารถสร้างได้จากความเปรียบต่าง (Contrast) และการทาให้เกิดความแตกต่างจากจุดอื่น
ขนาดที่ใหญ่กว่า = จุดเด่นที่มากกว่า
การสร้างจุดเด่น
Dominance
สามารถสร้างได้จากความเปรียบต่าง (Contrast) และการทาให้เกิดความแตกต่างจากจุดอื่น
ความเปรียบต่างมากกว่า = จุดเด่นที่มากกว่า
การสร้างจุดเด่น
Dominance
การสร้างจุดเด่น
Dominance
การสร้างจุดเด่น
Dominance
สามารถสร้างได้จากความเปรียบต่าง (Contrast) และการทาให้เกิดความแตกต่างจากจุดอื่น
พื้นที่ว่างเชิงลบ = จุดเด่นที่มากกว่า
การสร้างจุดเด่น
Dominance
การสร้างจุดเด่น
Dominance
การสร้างจุดเด่น
Dominance
การสร้างจุดเด่น
Dominance
การสร้างจุดเด่น
Dominance
การสร้างจุดเด่น
Dominance
การสร้างจุดเด่น
Dominance
None of them
การสร้างจุดเด่น
Dominance
ความเปรียบต่าง
Contrast
เป็นสิ่งที่เกิดจากการทาเรื่องของสี ขนาด รูปร่าง และอื่นๆ ที่ทาให้เกิดความแตกต่างในองค์ประกอบ
สว่าง
Lighter
ค่ากลาง
Middle Value
มืด
Darker
ความเปรียบต่าง
Contrast
Contrasting
Value
สีสด
Saturated
สีซีด
Desaturated
ความเปรียบต่าง
Contrast
Contrasting
Saturation
Hight
Contrast
Low
Contrast
ปรับองค์ประกอบอื่นให้ดูซีดลง
อุณหภูมิสี
Temperatures
โทนเย็น
Cold
เป็นกลาง
Neutral
โทนร้อน
Warm
Contrasting
Temperatures
อุณหภูมิสี
Temperatures
มาตราส่วนที่แตกต่าง
Scale Contrast
ขนาดที่แตกต่าง
Sizes
น่าเบื่อ
Boring
มีการเคลื่อนไหว
Dynamic
รูปร่างที่แตกต่าง
Shape Contrast
ตัวอักษรที่แตกต่าง
Type Contrast
Contrast ที่ชัดเจน อาจใช้กับในสิ่งที่ใช้งานได้
Enable
Contrast ที่ไม่ชัดเจน อาจใช้กับสิ่งที่ใช้ไม่ได้
Disable
Contrast >> Visual Weight
ใช้สีหรือน้าหนักของภาพที่แตกต่าง
การจัดตาแหน่ง
Alignment
เป็นหลักการออกแบบที่สาคัญที่สุด ทาให้ผู้ใช้เข้าใจได้ง่ายขึ้น ใช้งานง่ายขึ้น
การจัดตาแหน่ง
Alignment
เป็นหลักการออกแบบที่สาคัญที่สุด ทาให้ผู้ใช้เข้าใจได้ง่ายขึ้น ใช้งานง่ายขึ้น
การจัดตาแหน่ง
Alignment
เป็นหลักการออกแบบที่สาคัญที่สุด ทาให้ผู้ใช้เข้าใจได้ง่ายขึ้น ใช้งานง่ายขึ้น
สามารถทาได้โดยเกิดจากการวางเส้นแนวนอน
การจัดตาแหน่งแนวตั้ง
Vertical Alignment
สามารถทาได้โดยเกิดจากการวางเส้นแนวตั้ง
การจัดตาแหน่งแนวนอน
Horizontal Alignment
การจัดตาแหน่งฟอร์ม
Form Alignment
การจัดตาแหน่งตัวเลข
Numbers Alignment
การจัดตาแหน่งวัตถุ
Object Alignment
ระยะระหว่างวัตถุ
Proximity
เป็นระยะห่างระหว่างวัตถุที่เป็นชุดเดียวกัน โดยนักออกแบบจะต้องออกแบบให้มีความสัมพันธ์กันในกลุ่มเดียวกัน และนาสิ่งที่ไม่เกี่ยว
ข้อแยกออกจากกัน
สิ่งนี้ถูกมองว่าแบ่งออกเป็นสองกลุ่ม
ซึ่งแต่ละชุดแตกต่างกัน
สิ่งนี้ถูกมองว่าเป็นกลุ่มเดียว
ซึ่งส่วนประกอบทั้งหมดเกี่ยวข้องกัน
ระยะระหว่างวัตถุที่มีความสัมพันธ์กัน
Proximity Describes Relationships
ระยะระหว่างวัตถุมักชนะสีและความเปรียบต่าง
Proximity Often Beats Color and Contrast
แม้ว่าจะมีการใส่สีที่มีความเปรียบต่างกัน
ก็ยังถูกมองเป็นสองกลุ่มอยู่ดี
สองกลุ่มนี้ถูกแยกออกจากกันด้วยสี
และความเปรียบต่าง
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง
เมื่อเปรียบเทียบก่อนและหลังการใช้ Proximity
จะเห็นได้ว่ารูปภาพขวามือจะมองง่ายและเห็นข้อมูลเป็นส่วนๆ มากกว่า
ตัวอย่าง
ตัวอย่าง
พื้นที่ว่าง
Whitespace
เป็นสิ่งที่ทาให้เกิดพื้นที่ที่ไม่ได้ถูกใช้งาน (Negative Space) มักจะนามาใช้จัดย่อหน้า จัดรูปภาพ จัดกลุ่มไอคอน
พื้นที่ว่าง
White Space
เป็นสิ่งที่ทาให้เกิดพื้นที่ที่ไม่ได้ถูกใช้งาน (Negative Space) มักจะนามาใช้จัดย่อหน้า จัดรูปภาพ จัดกลุ่มไอคอน
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง
การจัดพื้นที่ว่างที่ห่างเกินไปอาจไม่ดีเสมอไป
ต้องจัดวางพื้นที่ว่างให้เหมาะสม
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง

More Related Content

What's hot

การจัดวางตัวอักษร (Typography)
การจัดวางตัวอักษร (Typography)การจัดวางตัวอักษร (Typography)
การจัดวางตัวอักษร (Typography)
Dr.Kridsanapong Lertbumroongchai
 
การทดสอบส่วนติดต่อผู้ใช้งาน (User Interface Testing)
การทดสอบส่วนติดต่อผู้ใช้งาน (User Interface Testing)การทดสอบส่วนติดต่อผู้ใช้งาน (User Interface Testing)
การทดสอบส่วนติดต่อผู้ใช้งาน (User Interface Testing)
Dr.Kridsanapong Lertbumroongchai
 
การออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซ
การออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซการออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซ
การออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซ
CC Nakhon Pathom Rajabhat University
 
หลักการจัดองค์ประกอบของงานภาพเคลื่อนไหว (Compositing)
หลักการจัดองค์ประกอบของงานภาพเคลื่อนไหว (Compositing)หลักการจัดองค์ประกอบของงานภาพเคลื่อนไหว (Compositing)
หลักการจัดองค์ประกอบของงานภาพเคลื่อนไหว (Compositing)
Dr.Kridsanapong Lertbumroongchai
 
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
Dr.Kridsanapong Lertbumroongchai
 
อุปกรณ์เสริมของคอมพิวเตอร์ (Computer Accessories)
อุปกรณ์เสริมของคอมพิวเตอร์ (Computer Accessories)อุปกรณ์เสริมของคอมพิวเตอร์ (Computer Accessories)
อุปกรณ์เสริมของคอมพิวเตอร์ (Computer Accessories)
Dr.Kridsanapong Lertbumroongchai
 
เริ่มสร้างผลิตภัณฑ์ (Product Begining)
เริ่มสร้างผลิตภัณฑ์ (Product Begining)เริ่มสร้างผลิตภัณฑ์ (Product Begining)
เริ่มสร้างผลิตภัณฑ์ (Product Begining)
Dr.Kridsanapong Lertbumroongchai
 
เทคนิคการสร้างสื่อเพื่อการปฏิบัติงานในยุคดิจิทัล (Creating Techniques Media f...
เทคนิคการสร้างสื่อเพื่อการปฏิบัติงานในยุคดิจิทัล (Creating Techniques Media f...เทคนิคการสร้างสื่อเพื่อการปฏิบัติงานในยุคดิจิทัล (Creating Techniques Media f...
เทคนิคการสร้างสื่อเพื่อการปฏิบัติงานในยุคดิจิทัล (Creating Techniques Media f...
Dr.Kridsanapong Lertbumroongchai
 
การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)
การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)
การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)
Dr.Kridsanapong Lertbumroongchai
 
การออกแบบเรซูเม่และแฟ้มสะสมผลงานในยุคดิจิทัล (Resume and Portfolio Design in ...
การออกแบบเรซูเม่และแฟ้มสะสมผลงานในยุคดิจิทัล (Resume and Portfolio Design in ...การออกแบบเรซูเม่และแฟ้มสะสมผลงานในยุคดิจิทัล (Resume and Portfolio Design in ...
การออกแบบเรซูเม่และแฟ้มสะสมผลงานในยุคดิจิทัล (Resume and Portfolio Design in ...
Dr.Kridsanapong Lertbumroongchai
 
การออกแบบแอพพลิเคชั่นด้วย Adobe XD
การออกแบบแอพพลิเคชั่นด้วย Adobe XDการออกแบบแอพพลิเคชั่นด้วย Adobe XD
การออกแบบแอพพลิเคชั่นด้วย Adobe XD
Dr.Kridsanapong Lertbumroongchai
 
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)
Dr.Kridsanapong Lertbumroongchai
 
แนะนำโปรแกรม Adobe Photoshop
แนะนำโปรแกรม Adobe Photoshopแนะนำโปรแกรม Adobe Photoshop
แนะนำโปรแกรม Adobe Photoshop
Dr.Kridsanapong Lertbumroongchai
 
อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)
อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)
อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)
Dr.Kridsanapong Lertbumroongchai
 
การเขียนบทความวิจัยนวัตกรรมเทคโนโลยีดิจิทัลเพื่อการศึกษา (Research Article Wr...
การเขียนบทความวิจัยนวัตกรรมเทคโนโลยีดิจิทัลเพื่อการศึกษา (Research Article Wr...การเขียนบทความวิจัยนวัตกรรมเทคโนโลยีดิจิทัลเพื่อการศึกษา (Research Article Wr...
การเขียนบทความวิจัยนวัตกรรมเทคโนโลยีดิจิทัลเพื่อการศึกษา (Research Article Wr...
Dr.Kridsanapong Lertbumroongchai
 
การเขียนบทประกอบภาพกราฟิกเคลื่อนไหว (Script Writing for Motion Graphic)
การเขียนบทประกอบภาพกราฟิกเคลื่อนไหว (Script Writing for Motion Graphic)การเขียนบทประกอบภาพกราฟิกเคลื่อนไหว (Script Writing for Motion Graphic)
การเขียนบทประกอบภาพกราฟิกเคลื่อนไหว (Script Writing for Motion Graphic)
Dr.Kridsanapong Lertbumroongchai
 
ความปลอดภัยการใช้งานดิจิทัลและกฎหมายเบื้องต้น (Digital Safety and Laws)
ความปลอดภัยการใช้งานดิจิทัลและกฎหมายเบื้องต้น (Digital Safety and Laws)ความปลอดภัยการใช้งานดิจิทัลและกฎหมายเบื้องต้น (Digital Safety and Laws)
ความปลอดภัยการใช้งานดิจิทัลและกฎหมายเบื้องต้น (Digital Safety and Laws)
Dr.Kridsanapong Lertbumroongchai
 
วิดีโอสำหรับมัลติมีเดีย (Video for Multimedia)
วิดีโอสำหรับมัลติมีเดีย (Video for Multimedia)วิดีโอสำหรับมัลติมีเดีย (Video for Multimedia)
วิดีโอสำหรับมัลติมีเดีย (Video for Multimedia)
Dr.Kridsanapong Lertbumroongchai
 
การสร้างสื่อภาพกราฟิกเคลื่อนไหว (Motion Graphic)
การสร้างสื่อภาพกราฟิกเคลื่อนไหว  (Motion Graphic)การสร้างสื่อภาพกราฟิกเคลื่อนไหว  (Motion Graphic)
การสร้างสื่อภาพกราฟิกเคลื่อนไหว (Motion Graphic)
Dr.Kridsanapong Lertbumroongchai
 
การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)
การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)
การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)
Dr.Kridsanapong Lertbumroongchai
 

What's hot (20)

การจัดวางตัวอักษร (Typography)
การจัดวางตัวอักษร (Typography)การจัดวางตัวอักษร (Typography)
การจัดวางตัวอักษร (Typography)
 
การทดสอบส่วนติดต่อผู้ใช้งาน (User Interface Testing)
การทดสอบส่วนติดต่อผู้ใช้งาน (User Interface Testing)การทดสอบส่วนติดต่อผู้ใช้งาน (User Interface Testing)
การทดสอบส่วนติดต่อผู้ใช้งาน (User Interface Testing)
 
การออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซ
การออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซการออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซ
การออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซ
 
หลักการจัดองค์ประกอบของงานภาพเคลื่อนไหว (Compositing)
หลักการจัดองค์ประกอบของงานภาพเคลื่อนไหว (Compositing)หลักการจัดองค์ประกอบของงานภาพเคลื่อนไหว (Compositing)
หลักการจัดองค์ประกอบของงานภาพเคลื่อนไหว (Compositing)
 
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
 
อุปกรณ์เสริมของคอมพิวเตอร์ (Computer Accessories)
อุปกรณ์เสริมของคอมพิวเตอร์ (Computer Accessories)อุปกรณ์เสริมของคอมพิวเตอร์ (Computer Accessories)
อุปกรณ์เสริมของคอมพิวเตอร์ (Computer Accessories)
 
เริ่มสร้างผลิตภัณฑ์ (Product Begining)
เริ่มสร้างผลิตภัณฑ์ (Product Begining)เริ่มสร้างผลิตภัณฑ์ (Product Begining)
เริ่มสร้างผลิตภัณฑ์ (Product Begining)
 
เทคนิคการสร้างสื่อเพื่อการปฏิบัติงานในยุคดิจิทัล (Creating Techniques Media f...
เทคนิคการสร้างสื่อเพื่อการปฏิบัติงานในยุคดิจิทัล (Creating Techniques Media f...เทคนิคการสร้างสื่อเพื่อการปฏิบัติงานในยุคดิจิทัล (Creating Techniques Media f...
เทคนิคการสร้างสื่อเพื่อการปฏิบัติงานในยุคดิจิทัล (Creating Techniques Media f...
 
การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)
การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)
การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)
 
การออกแบบเรซูเม่และแฟ้มสะสมผลงานในยุคดิจิทัล (Resume and Portfolio Design in ...
การออกแบบเรซูเม่และแฟ้มสะสมผลงานในยุคดิจิทัล (Resume and Portfolio Design in ...การออกแบบเรซูเม่และแฟ้มสะสมผลงานในยุคดิจิทัล (Resume and Portfolio Design in ...
การออกแบบเรซูเม่และแฟ้มสะสมผลงานในยุคดิจิทัล (Resume and Portfolio Design in ...
 
การออกแบบแอพพลิเคชั่นด้วย Adobe XD
การออกแบบแอพพลิเคชั่นด้วย Adobe XDการออกแบบแอพพลิเคชั่นด้วย Adobe XD
การออกแบบแอพพลิเคชั่นด้วย Adobe XD
 
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)
 
แนะนำโปรแกรม Adobe Photoshop
แนะนำโปรแกรม Adobe Photoshopแนะนำโปรแกรม Adobe Photoshop
แนะนำโปรแกรม Adobe Photoshop
 
อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)
อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)
อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)
 
การเขียนบทความวิจัยนวัตกรรมเทคโนโลยีดิจิทัลเพื่อการศึกษา (Research Article Wr...
การเขียนบทความวิจัยนวัตกรรมเทคโนโลยีดิจิทัลเพื่อการศึกษา (Research Article Wr...การเขียนบทความวิจัยนวัตกรรมเทคโนโลยีดิจิทัลเพื่อการศึกษา (Research Article Wr...
การเขียนบทความวิจัยนวัตกรรมเทคโนโลยีดิจิทัลเพื่อการศึกษา (Research Article Wr...
 
การเขียนบทประกอบภาพกราฟิกเคลื่อนไหว (Script Writing for Motion Graphic)
การเขียนบทประกอบภาพกราฟิกเคลื่อนไหว (Script Writing for Motion Graphic)การเขียนบทประกอบภาพกราฟิกเคลื่อนไหว (Script Writing for Motion Graphic)
การเขียนบทประกอบภาพกราฟิกเคลื่อนไหว (Script Writing for Motion Graphic)
 
ความปลอดภัยการใช้งานดิจิทัลและกฎหมายเบื้องต้น (Digital Safety and Laws)
ความปลอดภัยการใช้งานดิจิทัลและกฎหมายเบื้องต้น (Digital Safety and Laws)ความปลอดภัยการใช้งานดิจิทัลและกฎหมายเบื้องต้น (Digital Safety and Laws)
ความปลอดภัยการใช้งานดิจิทัลและกฎหมายเบื้องต้น (Digital Safety and Laws)
 
วิดีโอสำหรับมัลติมีเดีย (Video for Multimedia)
วิดีโอสำหรับมัลติมีเดีย (Video for Multimedia)วิดีโอสำหรับมัลติมีเดีย (Video for Multimedia)
วิดีโอสำหรับมัลติมีเดีย (Video for Multimedia)
 
การสร้างสื่อภาพกราฟิกเคลื่อนไหว (Motion Graphic)
การสร้างสื่อภาพกราฟิกเคลื่อนไหว  (Motion Graphic)การสร้างสื่อภาพกราฟิกเคลื่อนไหว  (Motion Graphic)
การสร้างสื่อภาพกราฟิกเคลื่อนไหว (Motion Graphic)
 
การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)
การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)
การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)
 

Similar to การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface)

ใบความรู้
ใบความรู้ใบความรู้
อุปกรณ์เชื่อมต่อคอมพิวเตอร์
อุปกรณ์เชื่อมต่อคอมพิวเตอร์อุปกรณ์เชื่อมต่อคอมพิวเตอร์
อุปกรณ์เชื่อมต่อคอมพิวเตอร์MiNtDamrongkulnan
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
Suthida23
 
ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์
ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์
ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์Umaporn Maneesatjang
 
โปรแกรม Photoshop ครั้งที่_1
โปรแกรม Photoshop ครั้งที่_1โปรแกรม Photoshop ครั้งที่_1
โปรแกรม Photoshop ครั้งที่_1teaw-sirinapa
 
ประเภทของโครงงานคอมพิวเตอร์
ประเภทของโครงงานคอมพิวเตอร์ประเภทของโครงงานคอมพิวเตอร์
ประเภทของโครงงานคอมพิวเตอร์watnawong
 
ใบงานที่5 การพัฒนาเครื่องมือ
ใบงานที่5 การพัฒนาเครื่องมือใบงานที่5 การพัฒนาเครื่องมือ
ใบงานที่5 การพัฒนาเครื่องมือ
Krittamook Sansumdang
 
สื่อดิจิทัล
สื่อดิจิทัลสื่อดิจิทัล
สื่อดิจิทัลPhonkao Mickey
 
ระบบปฏิบัติการ
ระบบปฏิบัติการระบบปฏิบัติการ
ระบบปฏิบัติการNaluemonPcy
 
ระบบปฏิบัติการ
ระบบปฏิบัติการระบบปฏิบัติการ
ระบบปฏิบัติการNaluemonPcy
 
ระบบปฏิบัติการ
ระบบปฏิบัติการระบบปฏิบัติการ
ระบบปฏิบัติการJoMaZa03
 
ใบงานที่7 การประยุกต์ใช้งาน
ใบงานที่7 การประยุกต์ใช้งานใบงานที่7 การประยุกต์ใช้งาน
ใบงานที่7 การประยุกต์ใช้งาน
Krittamook Sansumdang
 
โครงงานประเภท การพัฒนาเครื่องมือ
โครงงานประเภท การพัฒนาเครื่องมือโครงงานประเภท การพัฒนาเครื่องมือ
โครงงานประเภท การพัฒนาเครื่องมือcartoon656
 
ขอบข่ายและประเภทของโครงงาน
ขอบข่ายและประเภทของโครงงานขอบข่ายและประเภทของโครงงาน
ขอบข่ายและประเภทของโครงงานcartoon656
 
งานนำเสนอ1 คอม
งานนำเสนอ1 คอมงานนำเสนอ1 คอม
งานนำเสนอ1 คอมPassawan' Koohar
 

Similar to การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface) (20)

ใบความรู้
ใบความรู้ใบความรู้
ใบความรู้
 
อุปกรณ์เชื่อมต่อคอมพิวเตอร์
อุปกรณ์เชื่อมต่อคอมพิวเตอร์อุปกรณ์เชื่อมต่อคอมพิวเตอร์
อุปกรณ์เชื่อมต่อคอมพิวเตอร์
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
U1
U1U1
U1
 
ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์
ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์
ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์
 
โปรแกรม Photoshop ครั้งที่_1
โปรแกรม Photoshop ครั้งที่_1โปรแกรม Photoshop ครั้งที่_1
โปรแกรม Photoshop ครั้งที่_1
 
ประเภทของโครงงานคอมพิวเตอร์
ประเภทของโครงงานคอมพิวเตอร์ประเภทของโครงงานคอมพิวเตอร์
ประเภทของโครงงานคอมพิวเตอร์
 
ใบงานที่5 การพัฒนาเครื่องมือ
ใบงานที่5 การพัฒนาเครื่องมือใบงานที่5 การพัฒนาเครื่องมือ
ใบงานที่5 การพัฒนาเครื่องมือ
 
สื่อดิจิทัล
สื่อดิจิทัลสื่อดิจิทัล
สื่อดิจิทัล
 
08
0808
08
 
08
0808
08
 
ระบบปฏิบัติการ
ระบบปฏิบัติการระบบปฏิบัติการ
ระบบปฏิบัติการ
 
ระบบปฏิบัติการ
ระบบปฏิบัติการระบบปฏิบัติการ
ระบบปฏิบัติการ
 
ระบบปฏิบัติการ
ระบบปฏิบัติการระบบปฏิบัติการ
ระบบปฏิบัติการ
 
ใบงานที่7 การประยุกต์ใช้งาน
ใบงานที่7 การประยุกต์ใช้งานใบงานที่7 การประยุกต์ใช้งาน
ใบงานที่7 การประยุกต์ใช้งาน
 
โครงงานประเภท การพัฒนาเครื่องมือ
โครงงานประเภท การพัฒนาเครื่องมือโครงงานประเภท การพัฒนาเครื่องมือ
โครงงานประเภท การพัฒนาเครื่องมือ
 
ขอบข่ายและประเภทของโครงงาน
ขอบข่ายและประเภทของโครงงานขอบข่ายและประเภทของโครงงาน
ขอบข่ายและประเภทของโครงงาน
 
งานนำเสนอ1 คอม
งานนำเสนอ1 คอมงานนำเสนอ1 คอม
งานนำเสนอ1 คอม
 

More from Dr.Kridsanapong Lertbumroongchai

การสื่อสารภายในองค์กรอย่างมีประสิทธิภาพ (Communication Effectively in an Orga...
การสื่อสารภายในองค์กรอย่างมีประสิทธิภาพ (Communication Effectively in an Orga...การสื่อสารภายในองค์กรอย่างมีประสิทธิภาพ (Communication Effectively in an Orga...
การสื่อสารภายในองค์กรอย่างมีประสิทธิภาพ (Communication Effectively in an Orga...
Dr.Kridsanapong Lertbumroongchai
 
ทักษะดิจิทัลสำหรับการปฏิบัติงานในยุคดิจิทัล (Digital Skills for Working in Th...
ทักษะดิจิทัลสำหรับการปฏิบัติงานในยุคดิจิทัล (Digital Skills for Working in Th...ทักษะดิจิทัลสำหรับการปฏิบัติงานในยุคดิจิทัล (Digital Skills for Working in Th...
ทักษะดิจิทัลสำหรับการปฏิบัติงานในยุคดิจิทัล (Digital Skills for Working in Th...
Dr.Kridsanapong Lertbumroongchai
 
เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับการท่องเที่ยว โรงแรม และอีเวนต์
เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับการท่องเที่ยว โรงแรม และอีเวนต์เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับการท่องเที่ยว โรงแรม และอีเวนต์
เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับการท่องเที่ยว โรงแรม และอีเวนต์
Dr.Kridsanapong Lertbumroongchai
 
การทำการตลาดบนมือถือสำหรับธุรกิจจัดจำหน่ายสินค้า (Mobile Marketing for Produc...
การทำการตลาดบนมือถือสำหรับธุรกิจจัดจำหน่ายสินค้า (Mobile Marketing for Produc...การทำการตลาดบนมือถือสำหรับธุรกิจจัดจำหน่ายสินค้า (Mobile Marketing for Produc...
การทำการตลาดบนมือถือสำหรับธุรกิจจัดจำหน่ายสินค้า (Mobile Marketing for Produc...
Dr.Kridsanapong Lertbumroongchai
 
การทำการตลาดบนมือถือสำหรับธุรกิจบริการ (Mobile Marketing for Service Business)
การทำการตลาดบนมือถือสำหรับธุรกิจบริการ (Mobile Marketing for Service Business)การทำการตลาดบนมือถือสำหรับธุรกิจบริการ (Mobile Marketing for Service Business)
การทำการตลาดบนมือถือสำหรับธุรกิจบริการ (Mobile Marketing for Service Business)
Dr.Kridsanapong Lertbumroongchai
 
การตลาดผ่านเครื่องมือค้นหา (Search Engine Marketing)
การตลาดผ่านเครื่องมือค้นหา (Search Engine Marketing)การตลาดผ่านเครื่องมือค้นหา (Search Engine Marketing)
การตลาดผ่านเครื่องมือค้นหา (Search Engine Marketing)
Dr.Kridsanapong Lertbumroongchai
 
AR / VR / MR / XR มุ่งสู่อนาคตการท่องเที่ยวที่เหนือจริง
AR / VR / MR / XR มุ่งสู่อนาคตการท่องเที่ยวที่เหนือจริงAR / VR / MR / XR มุ่งสู่อนาคตการท่องเที่ยวที่เหนือจริง
AR / VR / MR / XR มุ่งสู่อนาคตการท่องเที่ยวที่เหนือจริง
Dr.Kridsanapong Lertbumroongchai
 
เทคนิคการจัดการเรียนรู้ด้วยเกมมิฟิเคชั่น (Gamification)
เทคนิคการจัดการเรียนรู้ด้วยเกมมิฟิเคชั่น (Gamification)เทคนิคการจัดการเรียนรู้ด้วยเกมมิฟิเคชั่น (Gamification)
เทคนิคการจัดการเรียนรู้ด้วยเกมมิฟิเคชั่น (Gamification)
Dr.Kridsanapong Lertbumroongchai
 
เทคนิคการสร้างสื่อการเรียนรู้ในยุคดิจิทัล (Learning Media Technique in Digita...
เทคนิคการสร้างสื่อการเรียนรู้ในยุคดิจิทัล (Learning Media Technique in Digita...เทคนิคการสร้างสื่อการเรียนรู้ในยุคดิจิทัล (Learning Media Technique in Digita...
เทคนิคการสร้างสื่อการเรียนรู้ในยุคดิจิทัล (Learning Media Technique in Digita...
Dr.Kridsanapong Lertbumroongchai
 
เสียงสำหรับงานมัลติมีเดีย (Sound for Multimedia)
เสียงสำหรับงานมัลติมีเดีย (Sound for Multimedia)เสียงสำหรับงานมัลติมีเดีย (Sound for Multimedia)
เสียงสำหรับงานมัลติมีเดีย (Sound for Multimedia)
Dr.Kridsanapong Lertbumroongchai
 
การตลาดไมซ์ที่รู้ใจและเข้าถึงการตลาดดิจิทัล (MICE Digital Marketing)
การตลาดไมซ์ที่รู้ใจและเข้าถึงการตลาดดิจิทัล (MICE Digital Marketing)การตลาดไมซ์ที่รู้ใจและเข้าถึงการตลาดดิจิทัล (MICE Digital Marketing)
การตลาดไมซ์ที่รู้ใจและเข้าถึงการตลาดดิจิทัล (MICE Digital Marketing)
Dr.Kridsanapong Lertbumroongchai
 
เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับงานไมซ์ (Virtual Reality and Metavers...
เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับงานไมซ์ (Virtual Reality and Metavers...เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับงานไมซ์ (Virtual Reality and Metavers...
เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับงานไมซ์ (Virtual Reality and Metavers...
Dr.Kridsanapong Lertbumroongchai
 
อัตลักษณ์องค์กร (Corporate Identity: C.I.)
อัตลักษณ์องค์กร (Corporate Identity: C.I.)อัตลักษณ์องค์กร (Corporate Identity: C.I.)
อัตลักษณ์องค์กร (Corporate Identity: C.I.)
Dr.Kridsanapong Lertbumroongchai
 
AR VR Metaverse ทางการแพทย์และพยาบาล
AR VR Metaverse ทางการแพทย์และพยาบาลAR VR Metaverse ทางการแพทย์และพยาบาล
AR VR Metaverse ทางการแพทย์และพยาบาล
Dr.Kridsanapong Lertbumroongchai
 
สร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinoti
สร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinotiสร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinoti
สร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinoti
Dr.Kridsanapong Lertbumroongchai
 
การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)
การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)
การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)
Dr.Kridsanapong Lertbumroongchai
 
การเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขาย
การเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขายการเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขาย
การเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขาย
Dr.Kridsanapong Lertbumroongchai
 
การเก็บข้อมูลด้วย Google Forms และการวิเคราะห์ข้อมูลด้วย Google Sheets
การเก็บข้อมูลด้วย Google Forms และการวิเคราะห์ข้อมูลด้วย Google Sheetsการเก็บข้อมูลด้วย Google Forms และการวิเคราะห์ข้อมูลด้วย Google Sheets
การเก็บข้อมูลด้วย Google Forms และการวิเคราะห์ข้อมูลด้วย Google Sheets
Dr.Kridsanapong Lertbumroongchai
 
หนังสือดิจิทัล 13 เล่ม น่าอ่าน อัพสกิลการสร้างนวัตกรรมสื่อดิจิทัล สื่อมัลติมี...
หนังสือดิจิทัล 13 เล่ม น่าอ่าน อัพสกิลการสร้างนวัตกรรมสื่อดิจิทัล สื่อมัลติมี...หนังสือดิจิทัล 13 เล่ม น่าอ่าน อัพสกิลการสร้างนวัตกรรมสื่อดิจิทัล สื่อมัลติมี...
หนังสือดิจิทัล 13 เล่ม น่าอ่าน อัพสกิลการสร้างนวัตกรรมสื่อดิจิทัล สื่อมัลติมี...
Dr.Kridsanapong Lertbumroongchai
 
การสร้างจักรวาลนฤมิต Spatial Metaverse
การสร้างจักรวาลนฤมิต Spatial Metaverseการสร้างจักรวาลนฤมิต Spatial Metaverse
การสร้างจักรวาลนฤมิต Spatial Metaverse
Dr.Kridsanapong Lertbumroongchai
 

More from Dr.Kridsanapong Lertbumroongchai (20)

การสื่อสารภายในองค์กรอย่างมีประสิทธิภาพ (Communication Effectively in an Orga...
การสื่อสารภายในองค์กรอย่างมีประสิทธิภาพ (Communication Effectively in an Orga...การสื่อสารภายในองค์กรอย่างมีประสิทธิภาพ (Communication Effectively in an Orga...
การสื่อสารภายในองค์กรอย่างมีประสิทธิภาพ (Communication Effectively in an Orga...
 
ทักษะดิจิทัลสำหรับการปฏิบัติงานในยุคดิจิทัล (Digital Skills for Working in Th...
ทักษะดิจิทัลสำหรับการปฏิบัติงานในยุคดิจิทัล (Digital Skills for Working in Th...ทักษะดิจิทัลสำหรับการปฏิบัติงานในยุคดิจิทัล (Digital Skills for Working in Th...
ทักษะดิจิทัลสำหรับการปฏิบัติงานในยุคดิจิทัล (Digital Skills for Working in Th...
 
เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับการท่องเที่ยว โรงแรม และอีเวนต์
เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับการท่องเที่ยว โรงแรม และอีเวนต์เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับการท่องเที่ยว โรงแรม และอีเวนต์
เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับการท่องเที่ยว โรงแรม และอีเวนต์
 
การทำการตลาดบนมือถือสำหรับธุรกิจจัดจำหน่ายสินค้า (Mobile Marketing for Produc...
การทำการตลาดบนมือถือสำหรับธุรกิจจัดจำหน่ายสินค้า (Mobile Marketing for Produc...การทำการตลาดบนมือถือสำหรับธุรกิจจัดจำหน่ายสินค้า (Mobile Marketing for Produc...
การทำการตลาดบนมือถือสำหรับธุรกิจจัดจำหน่ายสินค้า (Mobile Marketing for Produc...
 
การทำการตลาดบนมือถือสำหรับธุรกิจบริการ (Mobile Marketing for Service Business)
การทำการตลาดบนมือถือสำหรับธุรกิจบริการ (Mobile Marketing for Service Business)การทำการตลาดบนมือถือสำหรับธุรกิจบริการ (Mobile Marketing for Service Business)
การทำการตลาดบนมือถือสำหรับธุรกิจบริการ (Mobile Marketing for Service Business)
 
การตลาดผ่านเครื่องมือค้นหา (Search Engine Marketing)
การตลาดผ่านเครื่องมือค้นหา (Search Engine Marketing)การตลาดผ่านเครื่องมือค้นหา (Search Engine Marketing)
การตลาดผ่านเครื่องมือค้นหา (Search Engine Marketing)
 
AR / VR / MR / XR มุ่งสู่อนาคตการท่องเที่ยวที่เหนือจริง
AR / VR / MR / XR มุ่งสู่อนาคตการท่องเที่ยวที่เหนือจริงAR / VR / MR / XR มุ่งสู่อนาคตการท่องเที่ยวที่เหนือจริง
AR / VR / MR / XR มุ่งสู่อนาคตการท่องเที่ยวที่เหนือจริง
 
เทคนิคการจัดการเรียนรู้ด้วยเกมมิฟิเคชั่น (Gamification)
เทคนิคการจัดการเรียนรู้ด้วยเกมมิฟิเคชั่น (Gamification)เทคนิคการจัดการเรียนรู้ด้วยเกมมิฟิเคชั่น (Gamification)
เทคนิคการจัดการเรียนรู้ด้วยเกมมิฟิเคชั่น (Gamification)
 
เทคนิคการสร้างสื่อการเรียนรู้ในยุคดิจิทัล (Learning Media Technique in Digita...
เทคนิคการสร้างสื่อการเรียนรู้ในยุคดิจิทัล (Learning Media Technique in Digita...เทคนิคการสร้างสื่อการเรียนรู้ในยุคดิจิทัล (Learning Media Technique in Digita...
เทคนิคการสร้างสื่อการเรียนรู้ในยุคดิจิทัล (Learning Media Technique in Digita...
 
เสียงสำหรับงานมัลติมีเดีย (Sound for Multimedia)
เสียงสำหรับงานมัลติมีเดีย (Sound for Multimedia)เสียงสำหรับงานมัลติมีเดีย (Sound for Multimedia)
เสียงสำหรับงานมัลติมีเดีย (Sound for Multimedia)
 
การตลาดไมซ์ที่รู้ใจและเข้าถึงการตลาดดิจิทัล (MICE Digital Marketing)
การตลาดไมซ์ที่รู้ใจและเข้าถึงการตลาดดิจิทัล (MICE Digital Marketing)การตลาดไมซ์ที่รู้ใจและเข้าถึงการตลาดดิจิทัล (MICE Digital Marketing)
การตลาดไมซ์ที่รู้ใจและเข้าถึงการตลาดดิจิทัล (MICE Digital Marketing)
 
เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับงานไมซ์ (Virtual Reality and Metavers...
เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับงานไมซ์ (Virtual Reality and Metavers...เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับงานไมซ์ (Virtual Reality and Metavers...
เทคโนโลยีเสมือนจริงและจักรวาลนฤมิตสำหรับงานไมซ์ (Virtual Reality and Metavers...
 
อัตลักษณ์องค์กร (Corporate Identity: C.I.)
อัตลักษณ์องค์กร (Corporate Identity: C.I.)อัตลักษณ์องค์กร (Corporate Identity: C.I.)
อัตลักษณ์องค์กร (Corporate Identity: C.I.)
 
AR VR Metaverse ทางการแพทย์และพยาบาล
AR VR Metaverse ทางการแพทย์และพยาบาลAR VR Metaverse ทางการแพทย์และพยาบาล
AR VR Metaverse ทางการแพทย์และพยาบาล
 
สร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinoti
สร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinotiสร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinoti
สร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinoti
 
การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)
การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)
การเล่าเรื่องสินค้าผ่านภาพถ่าย (Digital Storytelling in Photography)
 
การเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขาย
การเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขายการเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขาย
การเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขาย
 
การเก็บข้อมูลด้วย Google Forms และการวิเคราะห์ข้อมูลด้วย Google Sheets
การเก็บข้อมูลด้วย Google Forms และการวิเคราะห์ข้อมูลด้วย Google Sheetsการเก็บข้อมูลด้วย Google Forms และการวิเคราะห์ข้อมูลด้วย Google Sheets
การเก็บข้อมูลด้วย Google Forms และการวิเคราะห์ข้อมูลด้วย Google Sheets
 
หนังสือดิจิทัล 13 เล่ม น่าอ่าน อัพสกิลการสร้างนวัตกรรมสื่อดิจิทัล สื่อมัลติมี...
หนังสือดิจิทัล 13 เล่ม น่าอ่าน อัพสกิลการสร้างนวัตกรรมสื่อดิจิทัล สื่อมัลติมี...หนังสือดิจิทัล 13 เล่ม น่าอ่าน อัพสกิลการสร้างนวัตกรรมสื่อดิจิทัล สื่อมัลติมี...
หนังสือดิจิทัล 13 เล่ม น่าอ่าน อัพสกิลการสร้างนวัตกรรมสื่อดิจิทัล สื่อมัลติมี...
 
การสร้างจักรวาลนฤมิต Spatial Metaverse
การสร้างจักรวาลนฤมิต Spatial Metaverseการสร้างจักรวาลนฤมิต Spatial Metaverse
การสร้างจักรวาลนฤมิต Spatial Metaverse
 

การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface)