thiết kế giao diện

Phân tích thiết kế phần mềmCreate by:
Người thực hiện: Nguyễn Văn Quyết
Ngày thực hiện: 15/02/2011
Nguyên tắc thiết kế giao diện
3
Vai trò và tầm quan trọng của thiết kế giao diện
1
Phong cách tương tác người máy
2
Kỹ thuật thiết kế giao diện
4
Phân tích thiết kế phần mềmCreate by:
Đặc tả thiết kế giao diện (Prototype)
5
Giới thiệu chuẩn thiết kế giao diện và công cụ
6
•
Đây là một khâu quan trọng không thể thiếu trong thiết
kế phần mềm
•
Người dùng đánh giá phần mềm qua giao diện
•
Thiết kế giao diện nhằm hướng tới người dùng, che dấu
chi tiết kỹ thuật bên trong và kết hợp 3 mặt: người
dùng, chức năng và công nghệ
•
Là phương tiện để người dùng sử dụng hệ thống
Phân tích thiết kế phần mềmCreate by:
Vai trò và tầm quan trọng của thiết kế giao diện
1
•

Là phương tiện để người dùng sử dụng hệ thống
–
Giao diện thiết kế nghèo nàn người dùng dễ mắc lỗi
–
Giao diện thiết kế tồi là lý do nhiều phần mềm không được sử
dụng
•
Giao diện trợ giúp người dùng làm việc đúng khả năng
của mình
–
Giao diện trợ giúp tốt  người dùng thành công
–
Giao diện trợ giúp tồi  người dùng khó khăn, thất bại
Phân tích thiết kế phần mềmCreate by:
Vai trò và tầm quan trọng của thiết kế giao diện
1
•
Phong cách tương tác người – máy quan hệ chặt chẽ với
lịch sử tiến hóa của máy tính, có một số loại giao diện
như:
–
Giao diện dòng lệnh ( giao diện hỏi đáp)
–
Giao diện đồ họa (Graphich User Interface)
•
Hiện nay, giao diện thông dụng nhất cho người sử dụng
là giao diện đồ họa như Window Form – Web Form,
Phân tích thiết kế phần mềmCreate by:
Phong cách tương tác người - máy
2

•
Là phương thức tương tác có sớm nhất
•
Nhập lệnh dữ liệu chủ yếu từ bàn phím
•
Dễ cài đặt so cới GUI
•
Tốn ít tài nguyên hệ thống
•
Thao tác thực hiện tuần tự
•
Không phù hợp với người dùng ít kinh nghiệm
Phân tích thiết kế phần mềmCreate by:
Phong cách tương tác người - máy
2
2.1. Giao diện dòng lệnh
•
Thông dụng trên Windows, Mobile,…
•
Dễ học, dễ sử dụng, thuận tiện ngay cả với người dùng
ít kinh nghiệm
•
Có nhiều cửa sổ có thể tương tác song song
•
Có thể nhập liệu bằng nhiều phương pháp
Phân tích thiết kế phần mềmCreate by:
Phong cách tương tác người - máy
2
2.2. Giao diện đồ họa
Phân tích thiết kế phần mềmCreate by:

Tiến trình thiết kế giao diện
3
3.1. Tiến trình thiết kế giao diện chung
Phân tích thiết kế phần mềmCreate by:
Tiến trình thiết kế giao diện
3
3.2. Tiến trình thiết kế giao làm mẫu
•
Thiết kế giao diện cần phản ảnh các yếu tố sau:
–
Kinh nghiệm, năng lực và nhu cầu của người dùng: khả năng
dùng bàn phím, chuột, tốc độ phản ứng…
–
Sở thích, văn hóa, lứa tuổi: màu sắc, ngôn ngữ…
•
Giao diện cần có các tính chất sau:
–
Tính thân thiện: thuật ngữ, khái niệm, thói quen, trình tự nghiệp
vụ của người dùng
Phân tích thiết kế phần mềmCreate by:
Nguyên tắc thiết kế giao diện
3
•
Giao diện cần có các tính chất sau (tt):
–
Tính nhất quán: vị trí hiển thị, cấu lệnh, thực đơn, biểu tượng,
màu sắc.
–
Cơ chế phục hồi tình trạng trước lỗi
–

Cung cấp các kịp thời các phản ứng và trợ giúp mọi lúc, mọi
nơi
–
Tiện ích tương tác đa dạng
Phân tích thiết kế phần mềmCreate by:
Nguyên tắc thiết kế giao diện
3
4.1. Thiết kế tương tác chung
Phân tích thiết kế phần mềmCreate by:
Kỹ thuật thiết kế giao diện
4
•
Nhất quán trong tương tác
•
Cho thông tin phản hồi có nghĩa
•
Yêu cầu kiểm chứng mọi hành động phá hủy (xóa) không tầm
thường
•
Cho phép dễ dàng lần ngược nhiều hành động
•
Phân loại các hoạt động theo chức năng và tổ chức màn hình
hài hòa theo vùng.
•
Cung cấp tiện nghi trợ giúp làm ngữ cảnh.
•
Dùng các động từ đơn giản hay cụm từ ngắn để đặt tên chỉ
lệnh.
4.2. Thiết kế hiển thị thông tin
Phân tích thiết kế phần mềmCreate by:

Kỹ thuật thiết kế giao diện
4
•
Chỉ hiển thị thông tin có liên quan đến ngữ cảnh hiện tại
•
Đừng chôn vùi người dùng dưới dữ liệu, hãy dùng định dạng
trình bày cho phép hấp thu nhanh chóng thông tin
•
Dùng nhãn nhất quán, cách viết tắt chuẩn và màu sắc được
dự kiến trước
•
Cho phép người dùng duy trì ngữ cảnh trực quan
4.2. Thiết kế hiển thị thông tin (tt)
Phân tích thiết kế phần mềmCreate by:
Kỹ thuật thiết kế giao diện
4
•
Đưa ra các thông báo lỗi có nghĩa
•
Dùng chữ hoa, chữ thường, thụt cấp và gộp nhóm để trợ giúp
cho người dùng dễ hiểu hiểu
•
Dùng cách hiển thị "tương tự" để biểu diễn thông tin dễ được
hấp thụ hơn với dạng biểu diễn này.
•
Xem xét vùng hiển thị có sẵn trên màn hình và dùng nó một
cách có hiệu quả.
4.3. Thiết kế vào dữ liệu
Phân tích thiết kế phần mềmCreate by:
Kỹ thuật thiết kế giao diện

4
•
Tối thiểu số hành động đưa vào mà người sử dụng thực hiện
•
Duy trì sự nhất quán giữa hiển thị thông tin và cách vào dữ liệu
•
Tương tác nên mềm dẻo và hài hòa với mode đưa vào ưa thích
•
Khử tích hợp các lệnh không phù hợp hiện tại
•
Để cho người dùng kiểm soát luồng tương tác
•
Cung cấp trợ giúp cho mọi hành động đưa vào
Phân tích thiết kế phần mềmCreate by:
Đặc tả thiết kế giao diện
5
•
Diễn giải trên tài liệu kèm theo:
Tài liệu đặc tả thiết kế giao diện
Phân tích thiết kế phần mềmCreate by:
Chuẩn thiết kế giao diện và công cụ
6
•
Chuẩn thiết kế giao diện: Minh họa
•
Một số công cụ hỗ trợ thiết kế giao diện:
–
Visual Studio
–
DevExpress

–
Infragistics
Phân tích thiết kế phần mềmCreate by:
Phân tích thiết kế phần mềmCreate by:
dddddddddddddddddddddddd