การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (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

3. ส่วนประสานงานกับผู้ใช้ เป็นส่วนที่เป็นสื่อกลางระหว่างผู้ใช้กับคอมพิวเตอร์ มีหน้าที่ ทาให้ผู้ใช้งานสามารถปฏิสัมพันธ์โต้ตอบใช้งานผลิตภัณฑ์ได้ 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

11. สมมาตร Symmetry เป็นการจัดองค์ประกอบโดยจัดวางให้องค์ประกอบทางซ้ายและขวาเท่ากันพอดี โดยวัดจากเส้นกึ่งกลางของหน้าจอ

12. สมมาตร Symmetry ความแตกต่างระหว่างสมดุล (Balance) กับสมมาตร (Symmetry) คือ น้าหนักทัก 2 ด้านอาจเท่ากัน แต่อาจไม่สมมาตร เพราะเมื่อวัดจากเส้นกึ่งกลางหน้าจอแล้วไม่เท่ากันพอดี

13. ความสม่าเสมอ Regularity เป็นความสอดคล้องในการจัดวางองค์ประกอบให้เป็นระเบียบทั้งแนวนอนและแนวตั้ง การเว้นระยะห่างอย่างสม่าเสมอ รวมถึงการใช้ รูปร่าง สี และที่ว่าง ไปในทิศทางเดียวกัน

14. ในทางตรงกันข้าม หากเราจัดวางแบบไม่สม่าเสมอ เนื่องจากขาดหลักคิดในการจัดวางที่ชัดเจน ทาให้เกิดความไม่เป็นระเบียบในการออกแบบ ความสม่าเสมอ 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

17. การคาดการณ์ Predictability

18. การเรียงลาดับ Sequentially เป็นการจัดองค์ประกอบเพื่อนาสายตาผ่านหน้าจอที่ชัดเจน วัตถุใดจะมาก่อน-หลัง โดยเรียงจากสิ่งที่สาคัญ นามาจัดตาแหน่ง ระยะห่าง และจัดกลุ่ม ให้ลาดับโดยการจัดองค์ประกอบเพื่อนาสายตาผ่านหน้าจอในลักษณะที่ชัดเจน มีเหตุผล เป็นจังหวะ และมีประสิทธิภาพ

19. ลาดับชั้น Hierarchy เป็นการให้ความสาคัญกับสิ่งต่างๆ ที่ไม่เท่ากัน โดยใช้หลักการออกแบบเข้ามาช่วยนาสายตาให้ไปยังจุดที่สาคัญก่อน ไม่มีลาดับชั้น มีลาดับชั้น

20. ตัวอย่างการจัดวาง

23. ประหยัด Economy ใช้รูปแบบการจัดองค์ประกอบให้น้อย ใช้สีให้น้อยที่สุด อะไรที่เป็นสิ่งเดียวกันควรใช้เหมือนกัน xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

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) = ขนาดที่หลากหลาย

27. ความกลมกลืน Harmony เป็นการจัดองค์ประกอบเพื่อให้ผู้ใช้งานรู้สึกว่าทุกส่วนของการจัดวางประกอบกันเป็นหนึ่งเดียว ส่วนมากมาจากจังหวะในการจัดวาง และการทาซ้า

28. ความกลมกลืน Harmony ในขณะเดียวกันสิ่งที่ควรใช้ในการออกแบบ คือ ขนาด รูปร่าง และการจัดวาง

29. ความกลมกลืน Harmony เนื่องจากขอบเขตของคอนเทนต์อาจจะไม่เท่ากัน แต่การใช้สี ความกว้างของหัวข้อ และระยะห่างเท่ากัน

30. ความกลมกลืน Harmony บางครั้งการออกแบบก็ไม่จาเป็นต้องกลืนกันมากเกินไป เช่น หัวข้อหลักกับหัวข้อย่อย อาจจะเป็นคนละสีหรือคนละขนาดก็ได้ ปุ่ม Edit และปุ่ม Remove เป็นปุ่มเหมือนกัน แต่คนละหน้าที่กัน

31. ความกลมกลืน Harmony แอนิเมชั่นหรือวัตถุที่มีการเคลื่อนไหวเหมือนๆ กัน เพื่อความเป็นอันหนึ่งอันเดียวกัน

32. ความกลมกลืน Harmony

33. ความกลมกลืน Harmony Search

34. สัดส่วน Proportion เป็นการจัดวางองค์ประกอบในหน้าจอที่มีการจัดกลุ่มของวัตถุด้วยสัดส่วนที่สวยงาม Size vs Scale vs Proportion การใช้งานอัตราส่วน

35. สัดส่วน 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

45. Golden Rectangle (1:1.618)

46. การใช้งานอัตราส่วน อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น เป็นอัตราส่วนที่ถูกใช้น้อยกว่าสัดส่วนอื่นๆ ความแคบทาให้ ได้รูปร่างที่โดดเด่น Square root of three (1:1.732) 1 1.732

47. การใช้งานอัตราส่วน อัตราส่วนจะถูกในมาใช้ในงานต่างๆ เช่น เป็นอัตราส่วนที่สวยงามรูปแบบหนึ่ง ทาให้ผู้ใช้รู้สึกอยาก สัมผัส หากใช้สี่เหลี่ยมผืนผ้าที่ยาวกว่านี้อาจทาให้หน้าจอดู ไม่น่าสนใจ Double square (1:2) 1 2

48. ความเรียบง่าย Simplicity เป็นการออกแบบที่เน้นความง่ายไม่วุ่นวาย มีองค์ประกอบไม่ต้องเยอะจนเกินไป ในทางตรงกันข้ามหากองค์ประกอบถูกจัดวางอย่างซับซ้อน (Complexity) อาจทาให้เกิดความยุ่งยาก วุ่นวาย สับสน

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

56. การจัดกลุ่ม Grouping เป็นการจัดองค์ประกอบการทางานที่เกี่ยวข้องกันเป็นกลุ่ม เพื่อให้มีการแบ่งแยกพื้นที่ย่างชัดเจน ความคล้ายกัน Similarity พื้นที่ Area ระยะระหว่างวัตถุ Proximity ปิด Closure ความต่อเนื่อง Continuity สมมาตร Symmetry

57. การจัดกลุ่ม Grouping เป็นการจัดองค์ประกอบการทางานที่เกี่ยวข้องกันเป็นกลุ่ม เพื่อให้มีการแบ่งแยกพื้นที่ย่างชัดเจน

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

62. การสร้างจุดเด่น Dominance เป็นการสร้างจุดสนใจในหน้าจอ อยากให้ผู้ใช้สนใจสิ่งใดเน้นจุดนั้น เพื่อให้ผู้ใช้เห็นว่าคือจุดใดคือจุดที่สาคัญ

63. การสร้างจุดเด่น Dominance ไม่จาเป็นต้องทาเพียงจุดเดียวในหน้าจอ อาจเป็นหลายจุดก็ได้ แต่ไม่ใช้ทั้งหน้า เป็นเพียงแค่การสร้างจุดที่ทาให้ผู้ใช้สนใจ (Focus Point) สามารถสร้างเป็นจุดสนใจหลัก (Primary Dominant Element) จุดสนใจรอง (Secondary) และจุดสนใจลาดับที่ 3 (Tertiary) ได้

64. การสร้างจุดเด่น Dominance สามารถสร้างได้จากความเปรียบต่าง (Contrast) และการทาให้เกิดความแตกต่างจากจุดอื่น ขนาดที่ใหญ่กว่า = จุดเด่นที่มากกว่า

65. การสร้างจุดเด่น Dominance สามารถสร้างได้จากความเปรียบต่าง (Contrast) และการทาให้เกิดความแตกต่างจากจุดอื่น ความเปรียบต่างมากกว่า = จุดเด่นที่มากกว่า

66. การสร้างจุดเด่น Dominance

68. การสร้างจุดเด่น Dominance สามารถสร้างได้จากความเปรียบต่าง (Contrast) และการทาให้เกิดความแตกต่างจากจุดอื่น พื้นที่ว่างเชิงลบ = จุดเด่นที่มากกว่า

76. None of them การสร้างจุดเด่น Dominance

77. ความเปรียบต่าง Contrast เป็นสิ่งที่เกิดจากการทาเรื่องของสี ขนาด รูปร่าง และอื่นๆ ที่ทาให้เกิดความแตกต่างในองค์ประกอบ

78. สว่าง Lighter ค่ากลาง Middle Value มืด Darker ความเปรียบต่าง Contrast Contrasting Value

79. สีสด Saturated สีซีด Desaturated ความเปรียบต่าง Contrast Contrasting Saturation Hight Contrast Low Contrast

80. ปรับองค์ประกอบอื่นให้ดูซีดลง

81. อุณหภูมิสี Temperatures โทนเย็น Cold เป็นกลาง Neutral โทนร้อน Warm Contrasting Temperatures

82. อุณหภูมิสี Temperatures

83. มาตราส่วนที่แตกต่าง Scale Contrast

84. ขนาดที่แตกต่าง Sizes น่าเบื่อ Boring มีการเคลื่อนไหว Dynamic

85. รูปร่างที่แตกต่าง Shape Contrast

86. ตัวอักษรที่แตกต่าง Type Contrast

87. Contrast ที่ชัดเจน อาจใช้กับในสิ่งที่ใช้งานได้ Enable Contrast ที่ไม่ชัดเจน อาจใช้กับสิ่งที่ใช้ไม่ได้ Disable

88. Contrast >> Visual Weight ใช้สีหรือน้าหนักของภาพที่แตกต่าง

89. การจัดตาแหน่ง Alignment เป็นหลักการออกแบบที่สาคัญที่สุด ทาให้ผู้ใช้เข้าใจได้ง่ายขึ้น ใช้งานง่ายขึ้น

92. สามารถทาได้โดยเกิดจากการวางเส้นแนวนอน การจัดตาแหน่งแนวตั้ง Vertical Alignment

93. สามารถทาได้โดยเกิดจากการวางเส้นแนวตั้ง การจัดตาแหน่งแนวนอน Horizontal Alignment

94. การจัดตาแหน่งฟอร์ม Form Alignment

95. การจัดตาแหน่งตัวเลข Numbers Alignment

96. การจัดตาแหน่งวัตถุ Object Alignment

97. ระยะระหว่างวัตถุ Proximity เป็นระยะห่างระหว่างวัตถุที่เป็นชุดเดียวกัน โดยนักออกแบบจะต้องออกแบบให้มีความสัมพันธ์กันในกลุ่มเดียวกัน และนาสิ่งที่ไม่เกี่ยว ข้อแยกออกจากกัน

98. สิ่งนี้ถูกมองว่าแบ่งออกเป็นสองกลุ่ม ซึ่งแต่ละชุดแตกต่างกัน สิ่งนี้ถูกมองว่าเป็นกลุ่มเดียว ซึ่งส่วนประกอบทั้งหมดเกี่ยวข้องกัน ระยะระหว่างวัตถุที่มีความสัมพันธ์กัน Proximity Describes Relationships

99. ระยะระหว่างวัตถุมักชนะสีและความเปรียบต่าง Proximity Often Beats Color and Contrast แม้ว่าจะมีการใส่สีที่มีความเปรียบต่างกัน ก็ยังถูกมองเป็นสองกลุ่มอยู่ดี สองกลุ่มนี้ถูกแยกออกจากกันด้วยสี และความเปรียบต่าง

100. ตัวอย่าง

104. เมื่อเปรียบเทียบก่อนและหลังการใช้ Proximity จะเห็นได้ว่ารูปภาพขวามือจะมองง่ายและเห็นข้อมูลเป็นส่วนๆ มากกว่า ตัวอย่าง

106. พื้นที่ว่าง Whitespace เป็นสิ่งที่ทาให้เกิดพื้นที่ที่ไม่ได้ถูกใช้งาน (Negative Space) มักจะนามาใช้จัดย่อหน้า จัดรูปภาพ จัดกลุ่มไอคอน

107. พื้นที่ว่าง White Space เป็นสิ่งที่ทาให้เกิดพื้นที่ที่ไม่ได้ถูกใช้งาน (Negative Space) มักจะนามาใช้จัดย่อหน้า จัดรูปภาพ จัดกลุ่มไอคอน

113. การจัดพื้นที่ว่างที่ห่างเกินไปอาจไม่ดีเสมอไป ต้องจัดวางพื้นที่ว่างให้เหมาะสม ตัวอย่าง

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

Esté a ler uma amostra.

Confira estes a seguir

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

Mais Conteúdo rRelacionado

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

Mais de Kridsanapong Lertbumroongchai (20)

Mais recentes (17)