Đâ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
AMBIENT/
Chủ đề:
Nội dung Text: Thiết kế giao diện
- Người thực hiện: Nguyễn Văn Quyết
Ngày thực hiện: 15/02/2011
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- 1 Vai trò và tầm quan trọng của thiết kế giao diện
2 Phong cách tương tác người máy
3 Nguyên tắc thiết kế giao diện
4 Kỹ thuật thiết kế giao diện
5 Đặc tả thiết kế giao diện (Prototype)
6 Giới thiệu chuẩn thiết kế giao diện và công cụ
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- 1 Vai trò và tầm quan trọng của thiết kế giao diện
• Đâ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
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- 1 Vai trò và tầm quan trọng của thiết kế giao diện
• 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
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- 2 Phong cách tương tác người máy
• 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,...
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- 2 Phong cách tương tác người máy
2.1. Giao diện dòng lệnh
• 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
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- 2 Phong cách tương tác người máy
2.2. Giao diện đồ họa
• 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
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- Tiến trình thiết kế giao diện
3
3.1. Tiến trình thiết kế giao diện chung
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- 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
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- Nguyên tắc thiết kế giao diện
3
• 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
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- 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
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- Kỹ thuật thiết kế giao diện
4
4.1. Thiết kế tương tác chung
• 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.
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- Kỹ thuật thiết kế giao diện
4
4.2. Thiết kế hiển thị thông tin
• 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
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- Kỹ thuật thiết kế giao diện
4
4.2. Thiết kế hiển thị thông tin (tt)
• Đư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ả.
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- Kỹ thuật thiết kế giao diện
4
4.3. Thiết kế vào dữ liệu
• 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
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- Đặ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
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- 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
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
- dddddddddddddddddddddddd
Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm
Thêm vào BST
Báo xấu
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
