Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

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

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
ใบความรู้
ใบความรู้
Cargando en…3
×

Eche un vistazo a continuación

1 de 116 Anuncio

Más Contenido Relacionado

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

Más de Kridsanapong Lertbumroongchai (20)

Anuncio

Más reciente (17)

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

  1. 1. การออกแบบกราฟิก ส่วนประสานงานกับผู้ใช้ Graphical User Interface Facebook.com/TouchPoint.in.th TouchPoint.in.th YouTube.com/c/TouchPointTH ดร.กฤษณพงศ์ เลิศบารุงชัย
  2. 2. เป็นการติดต่อกับผู้ใช้โดยใช้ภาพสัญลักษณ์ (Icon) เพื่อทดแทนการพิมพ์คาสั่ง ทาให้ผู้ใช้งานสามารถใช้งาน ได้ง่ายและรวดเร็วขึ้น ไม่ต้องจดจาคาสั่งต่าง ๆ ของโปรแกรม เช่น Windows, Icons, Labels, Textboxes, Radio Buttons เป็นต้น การออกแบบกราฟิกส่วน ประสานงานกับผู้ใช้ Graphical User Interface
  3. 3. ส่วนประสานงานกับผู้ใช้ เป็นส่วนที่เป็นสื่อกลางระหว่างผู้ใช้กับคอมพิวเตอร์ มีหน้าที่ ทาให้ผู้ใช้งานสามารถปฏิสัมพันธ์โต้ตอบใช้งานผลิตภัณฑ์ได้ User Interface
  4. 4. ส่วนประสานงานกับผู้ใช้ User Interface การโต้ตอบด้วยบรรทัดคาสั่ง Command Language Interaction: CLI เป็นส่วนที่เป็นสื่อกลางระหว่างผู้ใช้กับคอมพิวเตอร์ มีหน้าที่ทาให้ผู้ใช้งานสามารถปฏิสัมพันธ์โต้ตอบใช้งานผลิตภัณฑ์ได้ การโต้ตอบด้วยภาษามนุษย์ Natural Language Interaction: NLI การโต้ตอบด้วยกราฟิก Graphic User interface: GUI
  5. 5. การโต้ตอบด้วยบรรทัดคาสั่ง Command Language Interaction: CLI เป็นการโต้ตอบโดยผู้ใช้งานจะต้องใช้คาสั่งที่เป็นตัวอักษร (String) ผ่านคีย์บอร์ดสาหรับเป็นข้อมูลนาเข้าสู่ระบบแล้วระบบจะ แสดงข้อมูลนาออกผ่านหน้าจอ เช่น Command Line Interface
  6. 6. การโต้ตอบด้วยกราฟิก Graphic User interface: GUI เป็นการโต้ตอบที่ผู้ใช้งานจะมีปฏิสัมพันธ์กับวัตถุ (Objects) ที่สามารถมองเห็น ได้ยิน หรือสัมผัสได้ เช่น ภาพกราฟฟิก ไอคอน การเคลื่อนไหว
  7. 7. การโต้ตอบด้วยภาษามนุษย์ Natural Language Interaction: NLI การโต้ตอบด้วยภาษามนุษย์เป็นการโต้ตอบโดยผู้ใช้งานจะใช้ภาษามนุษย์หรือภาษาธรรมชาติเช่น ภาษาเขียน หรือเสียงเป็นข้อมูล นาเข้า (Input) และระบบจะประมวลผลกลับมาเป็นข้อมูลแสดงผล (Output) การโต้ตอบประเภทนี้ส่วนใหญ่จะถูกนามาใช้ในเทคโนโลยี ด้านปัญญาประดิษฐ์ (Artificial intelligent: AI) เช่น Siri ที่สามารถใช้งานในระบบปฏิบัติการ iOS
  8. 8. การสื่อสารทางการมองเห็น (Visual Communication) เป็น การสื่อสารด้วยภาพและคาอธิบายข้อมูลในรูปแบบที่สามารถ มองเห็นได้ ประกอบด้วยเครื่องหมาย ตัวอักษร รูปภาพ ออกแบบกราฟิก และสี เป็นต้น การสื่อสารทางการมองเห็น Visual Communication
  9. 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. 10. สมดุล Balance เป็นการจัดวางองค์ประกอบอย่างสมมาตร ให้น้าหนักของพื้นที่มีความเท่าเทียมกัน เหนือแกนกลาง Above The Central Axis ใต้แกนกลาง Below The Central Axis
  11. 11. สมมาตร Symmetry เป็นการจัดองค์ประกอบโดยจัดวางให้องค์ประกอบทางซ้ายและขวาเท่ากันพอดี โดยวัดจากเส้นกึ่งกลางของหน้าจอ
  12. 12. สมมาตร Symmetry ความแตกต่างระหว่างสมดุล (Balance) กับสมมาตร (Symmetry) คือ น้าหนักทัก 2 ด้านอาจเท่ากัน แต่อาจไม่สมมาตร เพราะเมื่อวัดจากเส้นกึ่งกลางหน้าจอแล้วไม่เท่ากันพอดี
  13. 13. ความสม่าเสมอ Regularity เป็นความสอดคล้องในการจัดวางองค์ประกอบให้เป็นระเบียบทั้งแนวนอนและแนวตั้ง การเว้นระยะห่างอย่างสม่าเสมอ รวมถึงการใช้ รูปร่าง สี และที่ว่าง ไปในทิศทางเดียวกัน
  14. 14. ในทางตรงกันข้าม หากเราจัดวางแบบไม่สม่าเสมอ เนื่องจากขาดหลักคิดในการจัดวางที่ชัดเจน ทาให้เกิดความไม่เป็นระเบียบในการออกแบบ ความสม่าเสมอ Regularity
  15. 15. การคาดการณ์ Predictability เป็นการจัดวางองค์ประกอบที่ทาให้ผู้ใช้คาดการณ์หรือคาดเดาสิ่งที่เราจัดวางองค์ประกอบในหน้าจอได้ ว่าอะไรอยู่ตรงไหน คืออะไร Icon Icon Icon Title Bar Menu Bar Control Control Control Control Control Control Button Button Button
  16. 16. การคาดการณ์ Predictability ในทางตรงกันข้าม หากเราจัดวางแบบไม่มีหลักคิดวางแผน ผู้ใช้จะไม่สามารถคาดการณ์หรือคาดเดาอะไรได้เลย ไม่สามารถเข้าใจได้ถึงโครงสร้างที่ชัดเจนของหน้าจอ Menu Bar Icon Control Control Control Control Button Icon Title Bar Button Icon Control Control Button
  17. 17. การคาดการณ์ Predictability
  18. 18. การเรียงลาดับ Sequentially เป็นการจัดองค์ประกอบเพื่อนาสายตาผ่านหน้าจอที่ชัดเจน วัตถุใดจะมาก่อน-หลัง โดยเรียงจากสิ่งที่สาคัญ นามาจัดตาแหน่ง ระยะห่าง และจัดกลุ่ม ให้ลาดับโดยการจัดองค์ประกอบเพื่อนาสายตาผ่านหน้าจอในลักษณะที่ชัดเจน มีเหตุผล เป็นจังหวะ และมีประสิทธิภาพ
  19. 19. ลาดับชั้น Hierarchy เป็นการให้ความสาคัญกับสิ่งต่างๆ ที่ไม่เท่ากัน โดยใช้หลักการออกแบบเข้ามาช่วยนาสายตาให้ไปยังจุดที่สาคัญก่อน ไม่มีลาดับชั้น มีลาดับชั้น
  20. 20. ตัวอย่างการจัดวาง
  21. 21. ตัวอย่างการจัดวาง
  22. 22. ตัวอย่างการจัดวาง
  23. 23. ประหยัด Economy ใช้รูปแบบการจัดองค์ประกอบให้น้อย ใช้สีให้น้อยที่สุด อะไรที่เป็นสิ่งเดียวกันควรใช้เหมือนกัน xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  24. 24. ประหยัด Economy ในทางตรงกันข้าม การใช้องค์ประกอบหลายอย่างโดยไม่จาเป็น จะทาให้เกิดความซับซ้อนโดยไม่จาเป็น และทาให้ความชัดเจนลดลง BBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBBBBBBB QQQQQQQQQQQQQQQQQQQQQ QQQQQQQQQQQQQQQQQQQQQ QQQQQQQQQQQQQQQQQQQQQ ZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZ IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
  25. 25. เอกภาพ Unity เป็นการจัดวางองค์ประกอบที่เชื่อมต่อกันเพื่อให้มองเห็นเป็นอันหนึ่งอันเดียวกัน กลมกลืนกัน คล้ายคลึงกัน เช่น ขนาด รูปร่าง สี การเว้นระยะ
  26. 26. เอกภาพ Unity ในทางตรงกันข้าม หากองค์ประกอบถูกแยกส่วน โดยแต่ละวัตถุมีลักษณะเฉพาะ มีการใช้ขนาด รูปร่าง สี ที่แตกต่างกัน ก็จะเกิดความไม่เป็นเอกภาพ เอกภาพและความหลากหลาย Unity and Variety เอกภาพ (Unity) = ขนาดเดียวกัน ความหลากหลาย (Variety) = สีที่หลากหลาย เอกภาพ (Unity) = สีเดียวกัน ความหลากหลาย (Variety) = ขนาดที่หลากหลาย
  27. 27. ความกลมกลืน Harmony เป็นการจัดองค์ประกอบเพื่อให้ผู้ใช้งานรู้สึกว่าทุกส่วนของการจัดวางประกอบกันเป็นหนึ่งเดียว ส่วนมากมาจากจังหวะในการจัดวาง และการทาซ้า
  28. 28. ความกลมกลืน Harmony ในขณะเดียวกันสิ่งที่ควรใช้ในการออกแบบ คือ ขนาด รูปร่าง และการจัดวาง
  29. 29. ความกลมกลืน Harmony เนื่องจากขอบเขตของคอนเทนต์อาจจะไม่เท่ากัน แต่การใช้สี ความกว้างของหัวข้อ และระยะห่างเท่ากัน
  30. 30. ความกลมกลืน Harmony บางครั้งการออกแบบก็ไม่จาเป็นต้องกลืนกันมากเกินไป เช่น หัวข้อหลักกับหัวข้อย่อย อาจจะเป็นคนละสีหรือคนละขนาดก็ได้ ปุ่ม Edit และปุ่ม Remove เป็นปุ่มเหมือนกัน แต่คนละหน้าที่กัน
  31. 31. ความกลมกลืน Harmony แอนิเมชั่นหรือวัตถุที่มีการเคลื่อนไหวเหมือนๆ กัน เพื่อความเป็นอันหนึ่งอันเดียวกัน
  32. 32. ความกลมกลืน Harmony
  33. 33. ความกลมกลืน Harmony Search
  34. 34. สัดส่วน Proportion เป็นการจัดวางองค์ประกอบในหน้าจอที่มีการจัดกลุ่มของวัตถุด้วยสัดส่วนที่สวยงาม Size vs Scale vs Proportion การใช้งานอัตราส่วน
  35. 35. สัดส่วน Proportion เป็นการจัดวางองค์ประกอบในหน้าจอที่มีการจัดกลุ่มของวัตถุด้วยสัดส่วนที่สวยงาม
  36. 36. Size vs Scale vs Proportion ขนาด (Size) เป็นความเล็กหรือใหญ่ของวัตถุที่สามารถบอกได้เป็นหน่วยวัด UX Designer 275px 75px
  37. 37. Size vs Scale vs Proportion มาตราส่วน (Scale) เป็นขนาดที่เกิดจากการย่อหรือขยายที่สัมพันธ์กัน มักจะวัดเป็นร้อยละ (Percentages) โดยยังคงสัดส่วนเดิม 33% 70% 100% 133% 170% 200%
  38. 38. Size vs Scale vs Proportion สัดส่วน (Proportion) เป็นความสัมพันธ์ที่กลมกลืนระหว่างสององค์ประกอบเพิ่มเติมของมาตราส่วน ได้สัดส่วน ไม่ได้สัดส่วน UX Designer UX Designer
  39. 39. Size vs Scale vs Proportion ถ้าสัดส่วนถูกนามาใช้กับการวางองค์ประกอบที่มีหลายขนาดหน้าจอ (Fluid Elements) สัดส่วนจะต้องเท่าเดิม แม้ว่าอาจถูกย่อหรือ ขยาย ส่วนใหญ่จะย่อหรือขยายตามร้อยละของคอนเทนเนอร์ Header (Fluid) Main Content (Fluid) Sidebar (Static) 100% - (300px + 16px) 300px 100%
  40. 40. Size vs Scale vs Proportion Retina Display VS Regular Display
  41. 41. The 8pt Grid System
  42. 42. เป็นอัตราส่วนที่ง่ายที่สุด นิยมใช้กับการไอคอนต่างๆ Square (1 : 1) 1 1 การใช้งานอัตราส่วน อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น
  43. 43. การใช้งานอัตราส่วน อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น Square root of two (1:1.414) เป็นอัตราส่วนของการออกแบบหนังสือ และขนาดกระดาษมาตรฐาน 1 1.414
  44. 44. การใช้งานอัตราส่วน อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น เป็นอัตราส่วนที่พบเห็นได้สถาปัตยกรรมกรีกในยุคแรก การเจริญเติบโตของพืชและสัตว์ Golden Rectangle (1:1.618) 1 1 0.618
  45. 45. Golden Rectangle (1:1.618)
  46. 46. การใช้งานอัตราส่วน อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น เป็นอัตราส่วนที่ถูกใช้น้อยกว่าสัดส่วนอื่นๆ ความแคบทาให้ ได้รูปร่างที่โดดเด่น Square root of three (1:1.732) 1 1.732
  47. 47. การใช้งานอัตราส่วน อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น เป็นอัตราส่วนที่สวยงามรูปแบบหนึ่ง ทาให้ผู้ใช้รู้สึกอยาก สัมผัส หากใช้สี่เหลี่ยมผืนผ้าที่ยาวกว่านี้อาจทาให้หน้าจอดู ไม่น่าสนใจ Double square (1:2) 1 2
  48. 48. ความเรียบง่าย Simplicity เป็นการออกแบบที่เน้นความง่ายไม่วุ่นวาย มีองค์ประกอบไม่ต้องเยอะจนเกินไป ในทางตรงกันข้ามหากองค์ประกอบถูกจัดวางอย่างซับซ้อน (Complexity) อาจทาให้เกิดความยุ่งยาก วุ่นวาย สับสน
  49. 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. 50. เฉลย 7 Columns / 20 Rows / 22 Fields = 49 Complexity
  51. 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. 52. เฉลย 6 Columns / 8 Rows / 18 Fields = 32 Complexity
  53. 53. 1 2 3 4 5
  54. 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. 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
  56. 56. การจัดกลุ่ม Grouping เป็นการจัดองค์ประกอบการทางานที่เกี่ยวข้องกันเป็นกลุ่ม เพื่อให้มีการแบ่งแยกพื้นที่ย่างชัดเจน ความคล้ายกัน Similarity พื้นที่ Area ระยะระหว่างวัตถุ Proximity ปิด Closure ความต่อเนื่อง Continuity สมมาตร Symmetry
  57. 57. การจัดกลุ่ม Grouping เป็นการจัดองค์ประกอบการทางานที่เกี่ยวข้องกันเป็นกลุ่ม เพื่อให้มีการแบ่งแยกพื้นที่ย่างชัดเจน
  58. 58. จังหวะ Rhythm เป็นการเกิดขึ้นขององค์ประกอบต่างๆ ที่ผู้ใช้สามารถคาดเดาได้ว่าองค์ประกอบต่างๆ จะเกิดขึ้นซ้าๆ เช่น ขนาด รูปร่าง และความยาวขอวัตถุ x y x y x x y
  59. 59. จังหวะ Rhythm เป็นการเกิดขึ้นขององค์ประกอบต่างๆ ที่ผู้ใช้สามารถคาดเดาได้ว่าองค์ประกอบต่างๆ จะเกิดขึ้นซ้าๆ เช่น ขนาด รูปร่าง และความยาวขอวัตถุ Uneven Frequency ความถี่ที่ไม่ต่อเนื่อง Even Frequency ความถี่ที่ต่อเนื่อง x x x x x y z
  60. 60. ตัวอย่าง 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3
  61. 61. โดยมากจังหวะ (Rhythm) มักจะใช้กับรายการ (List) ที่เกิดขึ้นซ้าๆ 1 2 3 1 2 3 1 2 3 1 2 3
  62. 62. การสร้างจุดเด่น Dominance เป็นการสร้างจุดสนใจในหน้าจอ อยากให้ผู้ใช้สนใจสิ่งใดเน้นจุดนั้น เพื่อให้ผู้ใช้เห็นว่าคือจุดใดคือจุดที่สาคัญ
  63. 63. การสร้างจุดเด่น Dominance ไม่จาเป็นต้องทาเพียงจุดเดียวในหน้าจอ อาจเป็นหลายจุดก็ได้ แต่ไม่ใช้ทั้งหน้า เป็นเพียงแค่การสร้างจุดที่ทาให้ผู้ใช้สนใจ (Focus Point) สามารถสร้างเป็นจุดสนใจหลัก (Primary Dominant Element) จุดสนใจรอง (Secondary) และจุดสนใจลาดับที่ 3 (Tertiary) ได้
  64. 64. การสร้างจุดเด่น Dominance สามารถสร้างได้จากความเปรียบต่าง (Contrast) และการทาให้เกิดความแตกต่างจากจุดอื่น ขนาดที่ใหญ่กว่า = จุดเด่นที่มากกว่า
  65. 65. การสร้างจุดเด่น Dominance สามารถสร้างได้จากความเปรียบต่าง (Contrast) และการทาให้เกิดความแตกต่างจากจุดอื่น ความเปรียบต่างมากกว่า = จุดเด่นที่มากกว่า
  66. 66. การสร้างจุดเด่น Dominance
  67. 67. การสร้างจุดเด่น Dominance
  68. 68. การสร้างจุดเด่น Dominance สามารถสร้างได้จากความเปรียบต่าง (Contrast) และการทาให้เกิดความแตกต่างจากจุดอื่น พื้นที่ว่างเชิงลบ = จุดเด่นที่มากกว่า
  69. 69. การสร้างจุดเด่น Dominance
  70. 70. การสร้างจุดเด่น Dominance
  71. 71. การสร้างจุดเด่น Dominance
  72. 72. การสร้างจุดเด่น Dominance
  73. 73. การสร้างจุดเด่น Dominance
  74. 74. การสร้างจุดเด่น Dominance
  75. 75. การสร้างจุดเด่น Dominance
  76. 76. None of them การสร้างจุดเด่น Dominance
  77. 77. ความเปรียบต่าง Contrast เป็นสิ่งที่เกิดจากการทาเรื่องของสี ขนาด รูปร่าง และอื่นๆ ที่ทาให้เกิดความแตกต่างในองค์ประกอบ
  78. 78. สว่าง Lighter ค่ากลาง Middle Value มืด Darker ความเปรียบต่าง Contrast Contrasting Value
  79. 79. สีสด Saturated สีซีด Desaturated ความเปรียบต่าง Contrast Contrasting Saturation Hight Contrast Low Contrast
  80. 80. ปรับองค์ประกอบอื่นให้ดูซีดลง
  81. 81. อุณหภูมิสี Temperatures โทนเย็น Cold เป็นกลาง Neutral โทนร้อน Warm Contrasting Temperatures
  82. 82. อุณหภูมิสี Temperatures
  83. 83. มาตราส่วนที่แตกต่าง Scale Contrast
  84. 84. ขนาดที่แตกต่าง Sizes น่าเบื่อ Boring มีการเคลื่อนไหว Dynamic
  85. 85. รูปร่างที่แตกต่าง Shape Contrast
  86. 86. ตัวอักษรที่แตกต่าง Type Contrast
  87. 87. Contrast ที่ชัดเจน อาจใช้กับในสิ่งที่ใช้งานได้ Enable Contrast ที่ไม่ชัดเจน อาจใช้กับสิ่งที่ใช้ไม่ได้ Disable
  88. 88. Contrast >> Visual Weight ใช้สีหรือน้าหนักของภาพที่แตกต่าง
  89. 89. การจัดตาแหน่ง Alignment เป็นหลักการออกแบบที่สาคัญที่สุด ทาให้ผู้ใช้เข้าใจได้ง่ายขึ้น ใช้งานง่ายขึ้น
  90. 90. การจัดตาแหน่ง Alignment เป็นหลักการออกแบบที่สาคัญที่สุด ทาให้ผู้ใช้เข้าใจได้ง่ายขึ้น ใช้งานง่ายขึ้น
  91. 91. การจัดตาแหน่ง Alignment เป็นหลักการออกแบบที่สาคัญที่สุด ทาให้ผู้ใช้เข้าใจได้ง่ายขึ้น ใช้งานง่ายขึ้น
  92. 92. สามารถทาได้โดยเกิดจากการวางเส้นแนวนอน การจัดตาแหน่งแนวตั้ง Vertical Alignment
  93. 93. สามารถทาได้โดยเกิดจากการวางเส้นแนวตั้ง การจัดตาแหน่งแนวนอน Horizontal Alignment
  94. 94. การจัดตาแหน่งฟอร์ม Form Alignment
  95. 95. การจัดตาแหน่งตัวเลข Numbers Alignment
  96. 96. การจัดตาแหน่งวัตถุ Object Alignment
  97. 97. ระยะระหว่างวัตถุ Proximity เป็นระยะห่างระหว่างวัตถุที่เป็นชุดเดียวกัน โดยนักออกแบบจะต้องออกแบบให้มีความสัมพันธ์กันในกลุ่มเดียวกัน และนาสิ่งที่ไม่เกี่ยว ข้อแยกออกจากกัน
  98. 98. สิ่งนี้ถูกมองว่าแบ่งออกเป็นสองกลุ่ม ซึ่งแต่ละชุดแตกต่างกัน สิ่งนี้ถูกมองว่าเป็นกลุ่มเดียว ซึ่งส่วนประกอบทั้งหมดเกี่ยวข้องกัน ระยะระหว่างวัตถุที่มีความสัมพันธ์กัน Proximity Describes Relationships
  99. 99. ระยะระหว่างวัตถุมักชนะสีและความเปรียบต่าง Proximity Often Beats Color and Contrast แม้ว่าจะมีการใส่สีที่มีความเปรียบต่างกัน ก็ยังถูกมองเป็นสองกลุ่มอยู่ดี สองกลุ่มนี้ถูกแยกออกจากกันด้วยสี และความเปรียบต่าง
  100. 100. ตัวอย่าง
  101. 101. ตัวอย่าง
  102. 102. ตัวอย่าง
  103. 103. ตัวอย่าง
  104. 104. เมื่อเปรียบเทียบก่อนและหลังการใช้ Proximity จะเห็นได้ว่ารูปภาพขวามือจะมองง่ายและเห็นข้อมูลเป็นส่วนๆ มากกว่า ตัวอย่าง
  105. 105. ตัวอย่าง
  106. 106. พื้นที่ว่าง Whitespace เป็นสิ่งที่ทาให้เกิดพื้นที่ที่ไม่ได้ถูกใช้งาน (Negative Space) มักจะนามาใช้จัดย่อหน้า จัดรูปภาพ จัดกลุ่มไอคอน
  107. 107. พื้นที่ว่าง White Space เป็นสิ่งที่ทาให้เกิดพื้นที่ที่ไม่ได้ถูกใช้งาน (Negative Space) มักจะนามาใช้จัดย่อหน้า จัดรูปภาพ จัดกลุ่มไอคอน
  108. 108. ตัวอย่าง
  109. 109. ตัวอย่าง
  110. 110. ตัวอย่าง
  111. 111. ตัวอย่าง
  112. 112. ตัวอย่าง
  113. 113. การจัดพื้นที่ว่างที่ห่างเกินไปอาจไม่ดีเสมอไป ต้องจัดวางพื้นที่ว่างให้เหมาะสม ตัวอย่าง
  114. 114. ตัวอย่าง
  115. 115. ตัวอย่าง
  116. 116. ตัวอย่าง

×