sa13 การออกแบบส่วนสื่อประสานผู้ใช้ (user...
Post on 27-Jul-2015
1.000 Views
Preview:
TRANSCRIPT
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
แผนภาพการเชอมโยงหนาจอ
top related