การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface)
•
2 j'aime•1,484 vues
Facebook : https://www.facebook.com/TouchPoint.in.th Website : http://touchpoint.in.th
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface)
Similaire à การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface) (20)
Plus de Dr.Kridsanapong Lertbumroongchai
Plus de Dr.Kridsanapong Lertbumroongchai (20)
การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface)
- 1. การออกแบบกราฟิก ส่วนประสานงานกับผู้ใช้ Graphical User Interface Facebook.com/TouchPoint.in.th TouchPoint.in.th YouTube.com/c/TouchPointTH ดร.กฤษณพงศ์ เลิศบารุงชัย
- 2. เป็นการติดต่อกับผู้ใช้โดยใช้ภาพสัญลักษณ์ (Icon) เพื่อทดแทนการพิมพ์คาสั่ง ทาให้ผู้ใช้งานสามารถใช้งาน ได้ง่ายและรวดเร็วขึ้น ไม่ต้องจดจาคาสั่งต่าง ๆ ของโปรแกรม เช่น Windows, Icons, Labels, Textboxes, Radio Buttons เป็นต้น การออกแบบกราฟิกส่วน ประสานงานกับผู้ใช้ Graphical User Interface
- 4. ส่วนประสานงานกับผู้ใช้ User Interface การโต้ตอบด้วยบรรทัดคาสั่ง Command Language Interaction: CLI เป็นส่วนที่เป็นสื่อกลางระหว่างผู้ใช้กับคอมพิวเตอร์ มีหน้าที่ทาให้ผู้ใช้งานสามารถปฏิสัมพันธ์โต้ตอบใช้งานผลิตภัณฑ์ได้ การโต้ตอบด้วยภาษามนุษย์ Natural Language Interaction: NLI การโต้ตอบด้วยกราฟิก Graphic User interface: GUI
- 5. การโต้ตอบด้วยบรรทัดคาสั่ง Command Language Interaction: CLI เป็นการโต้ตอบโดยผู้ใช้งานจะต้องใช้คาสั่งที่เป็นตัวอักษร (String) ผ่านคีย์บอร์ดสาหรับเป็นข้อมูลนาเข้าสู่ระบบแล้วระบบจะ แสดงข้อมูลนาออกผ่านหน้าจอ เช่น Command Line Interface
- 6. การโต้ตอบด้วยกราฟิก Graphic User interface: GUI เป็นการโต้ตอบที่ผู้ใช้งานจะมีปฏิสัมพันธ์กับวัตถุ (Objects) ที่สามารถมองเห็น ได้ยิน หรือสัมผัสได้ เช่น ภาพกราฟฟิก ไอคอน การเคลื่อนไหว
- 7. การโต้ตอบด้วยภาษามนุษย์ Natural Language Interaction: NLI การโต้ตอบด้วยภาษามนุษย์เป็นการโต้ตอบโดยผู้ใช้งานจะใช้ภาษามนุษย์หรือภาษาธรรมชาติเช่น ภาษาเขียน หรือเสียงเป็นข้อมูล นาเข้า (Input) และระบบจะประมวลผลกลับมาเป็นข้อมูลแสดงผล (Output) การโต้ตอบประเภทนี้ส่วนใหญ่จะถูกนามาใช้ในเทคโนโลยี ด้านปัญญาประดิษฐ์ (Artificial intelligent: AI) เช่น Siri ที่สามารถใช้งานในระบบปฏิบัติการ iOS
- 8. การสื่อสารทางการมองเห็น (Visual Communication) เป็น การสื่อสารด้วยภาพและคาอธิบายข้อมูลในรูปแบบที่สามารถ มองเห็นได้ ประกอบด้วยเครื่องหมาย ตัวอักษร รูปภาพ ออกแบบกราฟิก และสี เป็นต้น การสื่อสารทางการมองเห็น Visual Communication
- 9. ระยะระหว่างวัตถุ Proximity พื้นที่ว่าง White Space หลักการออกแบบ The Principles of Design สมมาตร Symmetry สมดุล Balance ความสม่าเสมอ Regularity การคาดการณ์ Predictability การเรียงลาดับ Sequentially ลาดับชั้น Hierarchy ประหยัด Economy เอกภาพ Unity ความกลมกลืน Harmony สัดส่วน Proportion ความเรียบง่าย Simplicity การจัดกลุ่ม Grouping จังหวะ Rhythm การจัดตาแหน่ง Alignment ความเปรียบต่าง Contrast การสร้างจุดเด่น Dominance
- 10. สมดุล Balance เป็นการจัดวางองค์ประกอบอย่างสมมาตร ให้น้าหนักของพื้นที่มีความเท่าเทียมกัน เหนือแกนกลาง Above The Central Axis ใต้แกนกลาง Below The Central Axis
- 12. สมมาตร Symmetry ความแตกต่างระหว่างสมดุล (Balance) กับสมมาตร (Symmetry) คือ น้าหนักทัก 2 ด้านอาจเท่ากัน แต่อาจไม่สมมาตร เพราะเมื่อวัดจากเส้นกึ่งกลางหน้าจอแล้วไม่เท่ากันพอดี
- 13. ความสม่าเสมอ Regularity เป็นความสอดคล้องในการจัดวางองค์ประกอบให้เป็นระเบียบทั้งแนวนอนและแนวตั้ง การเว้นระยะห่างอย่างสม่าเสมอ รวมถึงการใช้ รูปร่าง สี และที่ว่าง ไปในทิศทางเดียวกัน
- 15. การคาดการณ์ Predictability เป็นการจัดวางองค์ประกอบที่ทาให้ผู้ใช้คาดการณ์หรือคาดเดาสิ่งที่เราจัดวางองค์ประกอบในหน้าจอได้ ว่าอะไรอยู่ตรงไหน คืออะไร Icon Icon Icon Title Bar Menu Bar Control Control Control Control Control Control Button Button Button
- 16. การคาดการณ์ Predictability ในทางตรงกันข้าม หากเราจัดวางแบบไม่มีหลักคิดวางแผน ผู้ใช้จะไม่สามารถคาดการณ์หรือคาดเดาอะไรได้เลย ไม่สามารถเข้าใจได้ถึงโครงสร้างที่ชัดเจนของหน้าจอ Menu Bar Icon Control Control Control Control Button Icon Title Bar Button Icon Control Control Button
- 18. การเรียงลาดับ Sequentially เป็นการจัดองค์ประกอบเพื่อนาสายตาผ่านหน้าจอที่ชัดเจน วัตถุใดจะมาก่อน-หลัง โดยเรียงจากสิ่งที่สาคัญ นามาจัดตาแหน่ง ระยะห่าง และจัดกลุ่ม ให้ลาดับโดยการจัดองค์ประกอบเพื่อนาสายตาผ่านหน้าจอในลักษณะที่ชัดเจน มีเหตุผล เป็นจังหวะ และมีประสิทธิภาพ
- 19. ลาดับชั้น Hierarchy เป็นการให้ความสาคัญกับสิ่งต่างๆ ที่ไม่เท่ากัน โดยใช้หลักการออกแบบเข้ามาช่วยนาสายตาให้ไปยังจุดที่สาคัญก่อน ไม่มีลาดับชั้น มีลาดับชั้น
- 24. ประหยัด Economy ในทางตรงกันข้าม การใช้องค์ประกอบหลายอย่างโดยไม่จาเป็น จะทาให้เกิดความซับซ้อนโดยไม่จาเป็น และทาให้ความชัดเจนลดลง BBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBBBBBBB QQQQQQQQQQQQQQQQQQQQQ QQQQQQQQQQQQQQQQQQQQQ QQQQQQQQQQQQQQQQQQQQQ ZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZ IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
- 25. เอกภาพ Unity เป็นการจัดวางองค์ประกอบที่เชื่อมต่อกันเพื่อให้มองเห็นเป็นอันหนึ่งอันเดียวกัน กลมกลืนกัน คล้ายคลึงกัน เช่น ขนาด รูปร่าง สี การเว้นระยะ
- 26. เอกภาพ Unity ในทางตรงกันข้าม หากองค์ประกอบถูกแยกส่วน โดยแต่ละวัตถุมีลักษณะเฉพาะ มีการใช้ขนาด รูปร่าง สี ที่แตกต่างกัน ก็จะเกิดความไม่เป็นเอกภาพ เอกภาพและความหลากหลาย Unity and Variety เอกภาพ (Unity) = ขนาดเดียวกัน ความหลากหลาย (Variety) = สีที่หลากหลาย เอกภาพ (Unity) = สีเดียวกัน ความหลากหลาย (Variety) = ขนาดที่หลากหลาย
- 28. ความกลมกลืน Harmony ในขณะเดียวกันสิ่งที่ควรใช้ในการออกแบบ คือ ขนาด รูปร่าง และการจัดวาง
- 29. ความกลมกลืน Harmony เนื่องจากขอบเขตของคอนเทนต์อาจจะไม่เท่ากัน แต่การใช้สี ความกว้างของหัวข้อ และระยะห่างเท่ากัน
- 30. ความกลมกลืน Harmony บางครั้งการออกแบบก็ไม่จาเป็นต้องกลืนกันมากเกินไป เช่น หัวข้อหลักกับหัวข้อย่อย อาจจะเป็นคนละสีหรือคนละขนาดก็ได้ ปุ่ม Edit และปุ่ม Remove เป็นปุ่มเหมือนกัน แต่คนละหน้าที่กัน
- 34. สัดส่วน Proportion เป็นการจัดวางองค์ประกอบในหน้าจอที่มีการจัดกลุ่มของวัตถุด้วยสัดส่วนที่สวยงาม Size vs Scale vs Proportion การใช้งานอัตราส่วน
- 36. Size vs Scale vs Proportion ขนาด (Size) เป็นความเล็กหรือใหญ่ของวัตถุที่สามารถบอกได้เป็นหน่วยวัด UX Designer 275px 75px
- 37. Size vs Scale vs Proportion มาตราส่วน (Scale) เป็นขนาดที่เกิดจากการย่อหรือขยายที่สัมพันธ์กัน มักจะวัดเป็นร้อยละ (Percentages) โดยยังคงสัดส่วนเดิม 33% 70% 100% 133% 170% 200%
- 38. Size vs Scale vs Proportion สัดส่วน (Proportion) เป็นความสัมพันธ์ที่กลมกลืนระหว่างสององค์ประกอบเพิ่มเติมของมาตราส่วน ได้สัดส่วน ไม่ได้สัดส่วน UX Designer UX Designer
- 39. Size vs Scale vs Proportion ถ้าสัดส่วนถูกนามาใช้กับการวางองค์ประกอบที่มีหลายขนาดหน้าจอ (Fluid Elements) สัดส่วนจะต้องเท่าเดิม แม้ว่าอาจถูกย่อหรือ ขยาย ส่วนใหญ่จะย่อหรือขยายตามร้อยละของคอนเทนเนอร์ Header (Fluid) Main Content (Fluid) Sidebar (Static) 100% - (300px + 16px) 300px 100%
- 40. Size vs Scale vs Proportion Retina Display VS Regular Display
- 41. The 8pt Grid System
- 42. เป็นอัตราส่วนที่ง่ายที่สุด นิยมใช้กับการไอคอนต่างๆ Square (1 : 1) 1 1 การใช้งานอัตราส่วน อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น
- 43. การใช้งานอัตราส่วน อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น Square root of two (1:1.414) เป็นอัตราส่วนของการออกแบบหนังสือ และขนาดกระดาษมาตรฐาน 1 1.414
- 44. การใช้งานอัตราส่วน อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น เป็นอัตราส่วนที่พบเห็นได้สถาปัตยกรรมกรีกในยุคแรก การเจริญเติบโตของพืชและสัตว์ Golden Rectangle (1:1.618) 1 1 0.618
- 46. การใช้งานอัตราส่วน อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น เป็นอัตราส่วนที่ถูกใช้น้อยกว่าสัดส่วนอื่นๆ ความแคบทาให้ ได้รูปร่างที่โดดเด่น Square root of three (1:1.732) 1 1.732
- 47. การใช้งานอัตราส่วน อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น เป็นอัตราส่วนที่สวยงามรูปแบบหนึ่ง ทาให้ผู้ใช้รู้สึกอยาก สัมผัส หากใช้สี่เหลี่ยมผืนผ้าที่ยาวกว่านี้อาจทาให้หน้าจอดู ไม่น่าสนใจ Double square (1:2) 1 2
- 49. ลองนับว่าหน้าจอนี้มีกี่คอลัมน์ (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 = = = = = = =
- 50. เฉลย 7 Columns / 20 Rows / 22 Fields = 49 Complexity
- 51. ถ้าเราเปลี่ยนการออกแบบ 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
- 52. เฉลย 6 Columns / 8 Rows / 18 Fields = 32 Complexity
- 53. 1 2 3 4 5
- 54. การจัดกลุ่ม 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
- 55. การจัดกลุ่ม 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
- 58. จังหวะ Rhythm เป็นการเกิดขึ้นขององค์ประกอบต่างๆ ที่ผู้ใช้สามารถคาดเดาได้ว่าองค์ประกอบต่างๆ จะเกิดขึ้นซ้าๆ เช่น ขนาด รูปร่าง และความยาวขอวัตถุ x y x y x x y
- 59. จังหวะ Rhythm เป็นการเกิดขึ้นขององค์ประกอบต่างๆ ที่ผู้ใช้สามารถคาดเดาได้ว่าองค์ประกอบต่างๆ จะเกิดขึ้นซ้าๆ เช่น ขนาด รูปร่าง และความยาวขอวัตถุ Uneven Frequency ความถี่ที่ไม่ต่อเนื่อง Even Frequency ความถี่ที่ต่อเนื่อง x x x x x y z
- 60. ตัวอย่าง 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3
- 61. โดยมากจังหวะ (Rhythm) มักจะใช้กับรายการ (List) ที่เกิดขึ้นซ้าๆ 1 2 3 1 2 3 1 2 3 1 2 3
- 63. การสร้างจุดเด่น Dominance ไม่จาเป็นต้องทาเพียงจุดเดียวในหน้าจอ อาจเป็นหลายจุดก็ได้ แต่ไม่ใช้ทั้งหน้า เป็นเพียงแค่การสร้างจุดที่ทาให้ผู้ใช้สนใจ (Focus Point) สามารถสร้างเป็นจุดสนใจหลัก (Primary Dominant Element) จุดสนใจรอง (Secondary) และจุดสนใจลาดับที่ 3 (Tertiary) ได้
- 64. การสร้างจุดเด่น Dominance สามารถสร้างได้จากความเปรียบต่าง (Contrast) และการทาให้เกิดความแตกต่างจากจุดอื่น ขนาดที่ใหญ่กว่า = จุดเด่นที่มากกว่า
- 65. การสร้างจุดเด่น Dominance สามารถสร้างได้จากความเปรียบต่าง (Contrast) และการทาให้เกิดความแตกต่างจากจุดอื่น ความเปรียบต่างมากกว่า = จุดเด่นที่มากกว่า
- 68. การสร้างจุดเด่น Dominance สามารถสร้างได้จากความเปรียบต่าง (Contrast) และการทาให้เกิดความแตกต่างจากจุดอื่น พื้นที่ว่างเชิงลบ = จุดเด่นที่มากกว่า
- 77. ความเปรียบต่าง Contrast เป็นสิ่งที่เกิดจากการทาเรื่องของสี ขนาด รูปร่าง และอื่นๆ ที่ทาให้เกิดความแตกต่างในองค์ประกอบ
- 87. Contrast ที่ชัดเจน อาจใช้กับในสิ่งที่ใช้งานได้ Enable Contrast ที่ไม่ชัดเจน อาจใช้กับสิ่งที่ใช้ไม่ได้ Disable
- 88. Contrast >> Visual Weight ใช้สีหรือน้าหนักของภาพที่แตกต่าง
- 89. การจัดตาแหน่ง Alignment เป็นหลักการออกแบบที่สาคัญที่สุด ทาให้ผู้ใช้เข้าใจได้ง่ายขึ้น ใช้งานง่ายขึ้น
- 90. การจัดตาแหน่ง Alignment เป็นหลักการออกแบบที่สาคัญที่สุด ทาให้ผู้ใช้เข้าใจได้ง่ายขึ้น ใช้งานง่ายขึ้น
- 91. การจัดตาแหน่ง Alignment เป็นหลักการออกแบบที่สาคัญที่สุด ทาให้ผู้ใช้เข้าใจได้ง่ายขึ้น ใช้งานง่ายขึ้น
- 99. ระยะระหว่างวัตถุมักชนะสีและความเปรียบต่าง Proximity Often Beats Color and Contrast แม้ว่าจะมีการใส่สีที่มีความเปรียบต่างกัน ก็ยังถูกมองเป็นสองกลุ่มอยู่ดี สองกลุ่มนี้ถูกแยกออกจากกันด้วยสี และความเปรียบต่าง
- 100. ตัวอย่าง
- 101. ตัวอย่าง
- 102. ตัวอย่าง
- 103. ตัวอย่าง
- 105. ตัวอย่าง
- 106. พื้นที่ว่าง Whitespace เป็นสิ่งที่ทาให้เกิดพื้นที่ที่ไม่ได้ถูกใช้งาน (Negative Space) มักจะนามาใช้จัดย่อหน้า จัดรูปภาพ จัดกลุ่มไอคอน
- 107. พื้นที่ว่าง White Space เป็นสิ่งที่ทาให้เกิดพื้นที่ที่ไม่ได้ถูกใช้งาน (Negative Space) มักจะนามาใช้จัดย่อหน้า จัดรูปภาพ จัดกลุ่มไอคอน
- 108. ตัวอย่าง
- 109. ตัวอย่าง
- 110. ตัวอย่าง
- 111. ตัวอย่าง
- 112. ตัวอย่าง
- 114. ตัวอย่าง
- 115. ตัวอย่าง
- 116. ตัวอย่าง