1

บทท 13 การออกแบบสวนสอประสานผใช (User Interface Design)

2

การออกแบบสวนสอประสานผใช

วตถประสงคการเรยนร

เพอใหทราบถงขนตอนในการออกแบบสวนสอประสานผใช

เพอใหทราบถงชนดของสวนรบค าส งจากผใช

เพอใหทราบถงขอดและขอเสยของสวนรบค าส งจากผใชแตละชนด

เพอใหทราบถงวธการออกแบบแผนภาพการเชอมโยงหนาจอใชงาน

3

การออกแบบสวนสอประสานผใช

ข นตอนการออกแบบสวนสอประสานผใช

เกบรวบรวมขอมลความตองการจากผใช

รางแบบหนาจอการท างานสวนตาง ๆ

สรางตนแบบหนาจอและเมนค าส ง

4

การออกแบบสวนสอประสานผใช

ประเภทของสวนสอประสานผใช

การสงงานโปรแกรมดวยขอความค าส ง

(Command Language Interaction) การสงงานดวยเมนค าส ง

(Menu Interaction) การสงงานดวยปมค าส ง

(Object Interaction)

5

การออกแบบสวนสอประสานผใช

การส งงานโปรแกรมดวยขอความค าส ง

เปนการสงงานโดยการพมพค าส งในลกษณะของขอความหรอประโยคค าส ง ซง

โดยมากมกจะพบการสงงานประเภทน ในโปรแกรมทท างานอยบน

ระบบปฏบตการ DOS หรอ ระบบปฏบตการ Unix โดยการสงงานประเภทนผใชจะตองจดจ าค าส ง หรอไวยากรณตาง ๆ อยางแมนย า มเชนนนจะท าใหการ

สงงานผดพลาดหรออาจจะไมสามารถสงงานโปรแกรมไดเลย

6

การออกแบบสวนสอประสานผใช

การส งงานดวยเมนค าส ง

- Pull-down Menu เปนเมนทแสดงตวเลอกของรายการค าสงหลงจากทมการเลอก

ท างานกบเมนดานบน โดยรายการของค าสงจะมการเรยงล าดบจากบนลงลาง และมการ

แบงรายการเมนค าส งออกเปนกลม ซงโดยปกตแลวเมนลกษณะนจะใชเปนเมนของค าสงหลก

ๆ ของโปรแกรม และมกจะพบอยในหนาจอหลกของโปรแกรมเสมอ

- Pop-up Menu เปนเมนค าส งทแสดงขนมาหลงจากทผใชน าเมาสไปวางทขอความหรอ

ปมค าสงทผใชตองการและกดเมาสปมขวา ซงภายในเมนจะประกอบดวยรายการค าสงหรอ

คณสมบตทเกยวกบขอความหรอปมค าสงนน โดยสวนใหญจะใชเมนลกษณะนในการแสดง

รายการค าสงเรงดวนหรอค าส งพเศษในกรณทผใชตองการ และเมนลกษณะนจะไมปรากฏ

ใหผใชเหนบนหนาจอในสภาวะปกตของโปรแกรม

7

Pull-Down Menu

8

Pop-Up Menu

9

การออกแบบสวนสอประสานผใช

การส งงานดวยปมค าส ง

Text Box

Command Button

Toggle Button

Radio Button

Check Box

List Box

Drop-Down List Box

Spin Box

10

11

การออกแบบสวนสอประสานผใช

การออกแบบแผนภาพการเชอมโยงหนาจอ

เลขล าดบหนาจอ เปนหมายเลขทต งขนเพอใชอางองถงหนาจอแตละหนาจอ

โดยการใชหมายเลขล าดบหนาจอจะตองไมซ ากน และควรตงหมายเลข

ตามล าดบช นของหนาจอโดยใหเครองหมาย ‘ . ’ เปนตวขนล าดบของหนาจอ ชอหนาจอ ควรจะใชชอไปสอความหมายไดด และตองไมเปนขอความทยาว

จนเกนไป

หมายเลขหนาจอกอนหนาน ใชอางองถงหมายเลขหนาจอทอยกอนหนา

หนาจอปจจบน หรอเปนหนาจอทเรยกใชหนาจอปจจบนอยน นเอง

หมายเลขหนาจอถดไป เปนหมายเลขทใชอางองถงหนาจอถดไป หรอ

หนาจอทพรอมจะใหเปดโดยการสงการจากหนาจอปจจบน

12

การออกแบบแผนภาพการเชอมโยงหนาจอ

4.2

4.0 4.2.1

13

0

- 1

1

2, 3, 4, 5 0

2

1 2.1, 2.2

3

1 1

4

1 1

5

1 1

2.1

2 1

2.2

2 1

2.3

2 1

แผนภาพการเชอมโยงหนาจอ