05bai5tacvuthietkegiaodien xuanhiens weblog

 Ý nghĩa sử dụng: đây là màn hình cho phép người dùng chọn được công việc mà họ muốn thực hiện với phần mềm, thông thường mỗi phần mềm chỉ có một màn hình chính duy nhất...[r]

1

CÔNG NGHỆ PHẦN MỀM

TÁC VỤ THIẾT KẾ GIAO DIỆN

Bài 5:

Thời gian: tiết

Giảng viên: ThS Dƣơng Thành Phết Email: phetcm@gmail.com

Website: http://www.thayphet.net Tel: 0918158670

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

NỘI DUNG

1. Tổng quan

2. Thiết kế hình

3

CƠNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1 TỔNG QUAN THIẾT KẾ GIAO DIỆN

 Giới thiệu phương pháp thiết kế giao diện, công đoạn quan trọng q trình làm phần mềm cịn cơng đoạn phác thảo mẫu cho phần mềm, từ nhận phản hồi yêu cầu khách hàng chương trình để người thiết kế điều chỉnh theo yêu cầu đề

 Tùy theo mục đích, yêu cầu độ phức tạp chương trình, người thiết kế giao diện nên ý:

 Biết thông tin người dùng (họ ai? mục đích người dùng gì? kỹ kinh nghiệm người dùng, nhu cầu họ?),

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1 TỔNG QUAN THIẾT KẾ GIAO DIỆN Thể hiện:

 Tính sẵn sàng chức giao diện phần mềm

 Sự tương phản với giao diện chương trình người dùng thay đổi ứng xử,

 Tính tập trung (để giao diện ý nhiều hơn)  Quy luật phần mềm, thông qua luật thao tác

giao diện,

5

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.1 KẾT QUẢ THIẾT KẾ Màn hình giao diện:

 Màn hình giao diện hình thức giao tiếp người sử dụng phần mềm

 Mục tiêu thiết kế giao diện mơ tả hệ thống hình giao diện

Kết thiết kế giao diện gồm phần:

 Sơ đồ hình: Nhằm mơ tả thơng tin tổng quát hệ thống hình với quan hệ việc chuyển đổi điều khiển chúng

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.1 KẾT QUẢ THIẾT KẾ Ví dụ: Liệt kê phần sau:  Màn hình

7

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.1 KẾT QUẢ THIẾT KẾ

Sơ đồ hình

CƠNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.1 KẾT QUẢ THIẾT KẾ Mơ tả hình giao diện

Các thơng tin cần mơ tả hình:

 Tên hình: Đó tên cơng việc tương ứng muốn thực máy tính

 Nội dung hình: Nội dung hình bao gồm cấu

9

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.1 KẾT QUẢ THIẾT KẾ Các thành phần chia làm loại:

 Thành phần dữ liệu: chứa đựng thông tin liên quan đến công việc xét, như:

 Thông tin nhập liệu: Do người dùng chịu trách nhiệm cung cấp giá trị (ví dụ ngày lập, hóa đơn, hàng bán …), nhập trực tiếp hay chọn giá trị định sẵn

 Thông tin kết xuất: Do phần mềm chịu trách nhiệm cung cấp giá trị (ví dụ tổng tiền trả …)

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.1 KẾT QUẢ THIẾT KẾ

Ngồi ra, hình cịn liên quan đến hình thức trình bày:  Cách thức bố trí xếp thành phần

hình (như vị trí, màu sắc, kích thước …)

 Với hình có biểu mẫu liên quan, ta cần trình bày với biểu mẫu tương ứng

 Khi đó, ta cần bổ sung, sáng tạo hình thức trình bày hình trung gian thể công việc trung gian

11

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.1 KẾT QUẢ THIẾT KẾ

Các thao tác thực hiện

 Ta cần mô tả hệ thống thao tác mà người dùng thực hình với ý nghĩa chúng

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.2 PHÂN LOẠI MÀN HÌNH GIAO DIỆN

Quá trình sử dụng phần mềm bao gồm bước sau:  Chọn công việc muốn thực máy tính,

 Cung cấp thơng tin cần thiết tương ứng với công việc chọn,

13

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.2 PHÂN LOẠI MÀN HÌNH GIAO DIỆN

Dựa theo trình trên, hình giao diện chia thành nhiều loại tùy theo ý nghĩa sử dụng

 Màn hình chính: Nhằm cho phép người dùng sử dụng chọn lựa công việc mong muốn thực máy tính từ danh sách cơng việc

 Màn hình nhập liệu lưu trữ: Nhằm cho phép người dùng thực lưu trữ thông tin phát sinh giới thực

 Màn hình nhập liệu xử lý: Nhằm cho phép người sử dụng cung cấp thông tin cần thiết cho việc thực công việc

CƠNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.2 PHÂN LOẠI MÀN HÌNH GIAO DIỆN

 Màn hình thơng báo: Nhằm thơng báo, nhắc nhở người sử dụng trình thực cơng việc

 Màn hình tra cứu: Nhằm cho phép tìm kiếm thơng tin lưu trữ với tiêu chuẩn tìm kiếm

 Một hình giao diện thuộc loại trên, hay tích hợp từ nhiều hình sở tùy theo chất công việc liên quan

15

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.3 Q TRÌNH THIẾT KẾ Quy trình chung:

 Dựa yêu cầu chức năng, người thiết kế xem xét thiết kế giao diện từ tính đắn, đến tính tiện dụng thỏa yêu cầu tiện dụng

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.3.1 THIẾT KẾ GIAO DIỆN VỚI TÍNH ĐÚNG ĐẮN

Sơ đồ hình:

 Giả sử cần thực n cơng việc máy tính, sơ đồ hình trường hợp bao gồm n+1 hình sau:

 Một hình cho phép chọn cơng việc

17

CƠNG

NGHỆ

P

HẦ

N

M

Ề

M

Mô tả chi tiết hình

Màn hình Chính

 Mục tiêu hình xác định xác nội dung dựa danh sách cơng việc u cầu

 Chọn hình thức trình bày đơn giản

Ví dụ: Phần mềm thư viện

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

 Đây thiết kế cho dạng phần mềm thực thi độc lập (desktop-application máy tính, hay native-application thiết bị di động) hiển thị tất danh sách hình,

 Còn dạng phần mềm web ta tùy theo quyền hạn sử dụng để đưa hình có hạn chế hình tương tác cho người sử dụng

19

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

Màn hình Tra cứu:

 Màn hình giúp người dùng chọn tiêu chuẩn tra cứu

đơn giản (chỉ có mã số) trả kết tìm kiếm đơn giản (có mã số hay khơng)

CƠNG

NGHỆ

P

HẦ

N

M

Ề

M

Màn hình Nhập liệu

 Trong hình này, ta xác định chính xác nội

dung dựa biểu mẫu thông tin liên quan đến

công việc tương ứng chọn hình thức trình bày đơn giản có (liệt kê nội dung)

 Ví dụ: Giao diện cho chức nhập sách, mượn sách (quản lý thư viện)

21

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.3.2 THIẾT KẾ GIAO DIỆN VỚI TÍNH TIỆN DỤNG Sơ đồ hình

 Ta cần bổ sung vào sơ đồ hình cơng việc trung gian giúp cho việc sử dụng hình cơng việc dễ dàng hơn, tự nhiên

Mơ tả chi tiết hình

Màn hình Chính

CƠNG

NGHỆ

P

HẦ

N

M

Ề

M

Màn hình Tra cứu:

 Trong hình này, mở rộng tiêu chuẩn tra cứu (các thông tin khác đối tượng cần tìm) kết tìm kiếm (các thơng tin liên quan đến đối tượng tìm thấy), sau cho phép người dùng xem kết tra cứu nhiều hình thức trình bày khác (các thứ tự khác với danh sách, dạng thể biểu đồ, hình ảnh, …)

23

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

Màn hình Nhập liệu:

 Màn hình giúp ta chọn dạng trình bày biểu mẫu liên quan (nếu có) bổ sung vào thơng tin giúp việc sử dụng thuận tiện

 Ngược lại, ta cố gắng thiết kế hình thức trình bày tự nhiên có

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.4 CÁC VẤN ĐỀ KHÁC

25

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

 Ngồi ra, việc đặc tả giao diện cịn trọng đến thành phần chi tiết theo loại thiết bị sử dụng (máy tính, điện thoại …)

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.5 MỘT SỐ CHÚ Ý CHUNG Biểu diễn thông tin

 Biểu diễn thơng tin có liên quan tới việc hiển thị thông tin hệ thống tới người sử dụng

 Thơng tin biểu diễn cách trực tiếp chuyển thành nhiều dạng hiển thị khác như: dạng đồ hoạ, âm … Thông tin cần biểu diễn chia thành hai loại:

27

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.5 MỘT SỐ CHÚ Ý CHUNG

 Thông tin động: thay đổi phiên sử dụng thay đổi phải người sử dụng quan sát  Nếu cần hiển thị số lượng lớn thơng tin

nên trực quan hố liệu Trực quan hố phát mối quan hệ thực thể xu hướng liệu

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.5 MỘT SỐ CHÚ Ý CHUNG Sử dụng màu:

 Thường sử dụng màu thiết kế giao diện  Màu giúp cho người sử dụng hiểu cấu

trúc thông tin phức tạp

 Màu sử dụng để đánh dấu kiện ngoại lệ

 Khi sử dụng màu để thiết kế giao diện gây phản tác dụng Nên quan tâm số hướng dẫn:

29

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.1.5 MỘT SỐ CHÚ Ý CHUNG

 Sử dụng màu để hỗ trợ cho nhiệm vụ mà người sử dụng cố gắng thực

 Sử dụng màu cách thống cẩn thận sử dụng cặp màu

 Khi người sử dụng tương tác với hệ thống, xảy lỗi hệ thống phải thơng báo cho người sử dụng biết lỗi xảy

 Thiết kế thông báo lỗi vô quan trọng Nếu thơng báo lỗi nghèo nàn làm cho người sử dụng khó chấp nhận hệ thống

 Thông báo lỗi nên ngắn gọn, súc tích, thống nhất, có cấu trúc

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.2 THIẾT KẾ MÀN HÌNH

5.2.1 Mơ tả hình

31

CƠNG

NGHỆ

P

HẦ

N

M

Ề

M

5.2.1 MÔ TẢ MÀN HÌNH CHÍNH

 Ý nghĩa sử dụng: hình cho phép người dùng chọn công việc mà họ muốn thực với phần mềm, thơng thường phần mềm có hình

 Nội dung: gồm danh mục cơng việc thực với phần mềm

 Hình thức trình bày: bao gồm thành phần như:

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.2.1 MƠ TẢ MÀN HÌNH CHÍNH

 Thực đơn: Nhóm cơng việc theo chức (ví dụ lưu trữ, kết xuất), sử dụng thơng dụng

 Biểu tượng: Thể công việc trực quan qua biểu tượng (ký hiệu hay hình ảnh tượng trưng cho cơng việc), tương tự phím nóng thông dụng thường kết hợp với hình thức khác

 Sơ đồ: Nhằm hiển thị trực quan đối tượng chính, thể qua thao tác trực tiếp sơ đồ  Tích hợp: Nhằm sử dụng đồng thời nhiều hình thức,

33

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.2.2 THIẾT KẾ MÀN HÌNH CHÍNH DÙNG MENU

 Tổ chức thực đơn: Thực đơn bao gồm nhiều nhóm chức năng, nhóm gồm nhiều chức năng, chức tương ứng với cơng việc

 Phân loại thực đơn: có loại:

 Thực đơn hướng chức

 Thực đơn hướng đối tượng

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.2.2 THIẾT KẾ MÀN HÌNH CHÍNH DÙNG MENU

 Thực đơn hướng chức năng:

 Là nhóm chức tương ứng với loại yêu cầu Ví dụ:

 (i) Tổ chức: Các công việc liên quan đến tổ chức,  (ii) Lưu trữ: Các công việc liên quan đến lưu trữ,

35

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.2.2 THIẾT KẾ MÀN HÌNH CHÍNH DÙNG MENU

 Thực đơn hướng đối tượng:

 Là nhóm chức tương ứng với lớp đối tượng

 Với sơ đồ lớp gồm n lớp đối tượng, thực đơn bao gồm (n+1) nhóm chức Trong đó:

 Một nhóm chức tương ứng với đối tượng giới thực

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.2.2 THIẾT KẾ MÀN HÌNH CHÍNH DÙNG MENU

 Thực đơn hướng quy trình:

 Là nhóm chức tương ứng với giai đoạn hoạt động giới thực

37

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.2.3 VÍ DỤ

CƠNG

NGHỆ

P

HẦ

N

M

Ề

M

5.3 THIẾT KẾ MÀN HÌNH TRA CỨU

5.3.1 Mơ tả hình tra cứu

5.3.2 Thể tiêu chuẩn tra cứu 5.3.3 Thể kết tra cứu

39

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.3.1 MƠ TẢ MÀN HÌNH TRA CỨU

Ý nghĩa sử dụng: Cho phép người dùng tìm kiếm xem thơng

Nội dung:

 Tiêu chuẩn tra cứu: Gồm thơng tin sử dụng cho việc tìm kiếm (thơng thường thuộc tính)

CƠNG

NGHỆ

P

HẦ

N

M

Ề

M

5.3.1 MÔ TẢ MÀN HÌNH TRA CỨU

Hình thức trình bày: Gồm có

 Tiêu chuẩn tra cứu: Gồm biểu thức luận lý, cây, tích hợp  Kết tra cứu: Gồm thông báo, danh sách đơn, xâu

các danh sách, danh sách

41

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.3.2 THỂ HIỆN TIÊU CHUẨN TRA CỨU

 Tra cứu với biểu thức luận lý: Tiêu chuẩn thể dạng biểu thức luận lý có dạng sau:

<Biểu thức luận lý>=<biểu thức sở>  Phép toán luận lý …

 Phép toán AND, OR, NOT, phép so sánh

 Tra cứu với hình thức cây: Tiêu chuẩn thể qua mà nút phận tổ chức giới thực

 Hình thức thích hợp với giới thực có cấu trúc tổ chức phân cấp

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.3.3 THỂ HIỆN KẾT QUẢ TRA CỨU

 Kết tra cứu dùng thơng báo: Khi kết tra cứu câu thơng báo có hay khơng?

Là hình thức đơn giản, có tính tiện dụng thấp Với hình thức người sử dụng khơng biết thêm thơng tin đối tượng tìm thấy Ví dụ tìm kiếm sách cho thơng báo “Hệ thống khơng có sách cần tìm.”

 Kết tra cứu dùng danh sách đơn: Khi kết tra cứu danh sách đối tượng tìm thấy với số thông in đối tượng

43

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.3.3 THỂ HIỆN KẾT QUẢ TRA CỨU

 Kết tra cứu dùng xâu danh sách: Kết tra cứu gồm nhiều DS DS ds(k) chứa mô tả cho phần tử danh sách ds(k-1) trước

 DS đầu DS đơn hình thức

45

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.3.3 THỂ HIỆN KẾT QUẢ TRA CỨU

Cây danh sách:

 Kết tra cứu mà nút danh sách (như Windows Explorer)

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.3.4 THAO TÁC NGƢỜI DÙNG VÀ XỬ LÝ CỦA P.MỀM

Nhập giá trị cho tiêu chuẩn tra cứu:

 Có thể nhập số tất tiêu chuẩn tra cứu,  Với tiêu chuẩn thường dùng dùng giá trị

định sẵn (loại sách thường tìm …) để tiện dụng cho người dùng

 Trong q trình nhập liệu thơng thường, phần mềm khơng xử lý tính tốn, chờ nhập giá trị cho tiêu chuẩn tra cứu

47

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

Xem xét chi tiết kết tra cứu:  Chọn đối tượng cần xem chi tiết

 Nhập phạm vi thời gian cần quan sát

 Phần mềm đọc xuất kết tra cứu chi tiết theo loại hoạt động

 Yêu cầu kết xuất: Có thể bổ sung nút điều khiển tương ứng với việc in ấn ghi lên tập tin kết tra cứu

 Thơng thường kết tra cứu có nút riêng, dùng chung nút cho kết tra cứu

 Việc kết xuất thông thường qua máy in, kết xuất (tập tin Excel, trang web,…)

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.4 THIẾT KẾ MÀN HÌNH NHẬP LIỆU

5.4 Mơ tả hình nhập liệu

5.4.2 Thiết kế hình nhập liệu dạng ds

49

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.4 MƠ TẢ MÀN HÌNH NHẬP LIỆU

 Ý nghĩa sử dụng: Đây hình cho phép người dùng thực cơng việc có liên quan đến ghi chép giới thực

 Nội dung:

 Các thông tin nhập liệu: Người dùng chịu trách nhiệm nhập trực tiếp giá trị, phần mềm tiến hành kiểm tra tính hợp lệ giá trị nhập dựa vào quy định liên quan

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.4 MƠ TẢ MÀN HÌNH NHẬP LIỆU Hình thức trình bày:

 Danh sách: Là hình nhập liệu có dạng danh sách giới thực (danh sách thể loại sách, danh sách lớp học)

 Hồ sơ: Là hình nhập liệu có dạng hồ sơ với nhiều thông tin chi tiết (hồ sơ học sinh, hồ sơ cầu thủ)

51

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.4 MÔ TẢ MÀN HÌNH NHẬP LIỆU

Thao tác ngƣời dùng: Có thao tác hình

nhập liệu

 Nút Ghi: để lưu trữ thông tin

 Nút Xóa: để loại bỏ thơng tin lưu trữ

 Nút Tìm: để tìm cập nhật lại thông tin lưu trữ Các thao tác khác nhằm tăng tính tiện dụng như:

 Tạo phím nóng: để xác định phím nóng tương ứng giá trị nhập liệu thường dùng, cho phép tăng tốc độ nhập liệu

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

53

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.4.2 THIẾT KẾ MÀN HÌNH NHẬP LIỆU DẠNG DS

 Sử dụng: Dạng danh sách thích hợp cần nhập liệu bảng danh sách với kích thước nhỏ (danh sách thể loại sách, môn học,…)

 Thành phần nhập liệu:

 Thông tin nhập liệu: Các thuộc tính bảng liên quan

 Thơng tin tính tốn: Mã số thường tự động phát sinh

 Thành phần xử lý:

 Ghi: ghi nhận thay đổi danh sách (thêm mới,

sửa đổi)

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.4.2 THIẾT KẾ MÀN HÌNH NHẬP LIỆU DẠNG DS Các thao tác:

 Người dùng sửa đổi thơng tin dịng thêm dịng (vào cuối danh sách), chọn xóa dịng, lưu vào kho

55

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.4.3.THIẾT KẾ MÀN HÌNH NHẬP LIỆU DẠNG HỒ SƠ

 Sử dụng: Dạng hồ sơ thích hợp cần nhập liệu hồ sơ (hồ sơ học sinh, đội bóng)

 Thành phần liệu:

 Thơng tin nhập liệu: Thuộc tính bảng liên quan  Thơng tin tính tốn: Các mã số thường tự

động phát sinh

 Thành phần xử lý: Thêm, Ghi, Xóa, Tìm, Thốt

 Các thao tác: Thêm hồ sơ mới, tìm lại hồ sơ lưu trữ, xoá hay sửa đổi thông tin hồ sơ lưu trữ

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

5.4.4.THIẾT KẾ MÀN HÌNH NHẬP LIỆU DẠNG PHIẾU

 Sử dụng: Dạng phiếu thích hợp cần nhập liệu phiếu ghi nhận thông tin hoạt động đối tượng giới thực

 Thành phần liệu:

 Thông tin nhập liệu: thông tin liên quan đến bảng  Thông tin tính tốn: mã số thường tự động

phát sinh

57

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

57 TÓM TẮT

Cung cấp kiến thức về:

 Phân loại hình giao diện

 Quá trình thiết kế giao diện với tính đắn tiện dụng

 Thiết kế hình thơng thường dùng thực đơn (menu)

 Thiết kế hình tra cứu: Mơ tả hình, tiêu chuẩn tra cứu, thể kết tra cứu

 Thao tác người dùng xử lý phần mềm

 Thiết kế hình nhập liệu

 Mơ tả hình nhập liệu

 Thiết kế hình nhập liệu dạng danh sách

 Thiết kế hình nhập liệu dạng hồ sơ

CÔNG

NGHỆ

P

HẦ

N

M

Ề

M

BÀI TẬP