bài số 11 thiết kế ngoại

1
1
PHÂN TÍCH THIẾT KẾ HƯỚNG
PHÂN TÍCH THIẾT KẾ HƯỚNG
ĐỐI TƯỢNG VỚI UML 2.0
ĐỐI TƯỢNG VỚI UML 2.0
TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ THÔNG TIN


Bé m«n C«ng nghÖ phÇn mÒm
Bé m«n C«ng nghÖ phÇn mÒm
Bài 11
Bài 11
. Thiết kế ngoài
. Thiết kế ngoài
2
2
Nội dung
Nội dung
1.
1.
Thiết kế giao diện người dùng (Screen
Thiết kế giao diện người dùng (Screen
design)
design)
2.
2.
Thiết kế biểu đồ chuyển giữa các giao

Thiết kế biểu đồ chuyển giữa các giao
diện người dùng (Display transition
diện người dùng (Display transition
diagram)
diagram)
3.
3.
Đặc tả giao diện người dùng (Screen
Đặc tả giao diện người dùng (Screen
specification)
specification)
3
3
Từ use case
Từ use case
Dựa vào các use case và các lớp
Dựa vào các use case và các lớp
biên là giao diện với người dùng ánh
biên là giao diện với người dùng ánh
xạ thành các screen để thiết kế.
xạ thành các screen để thiết kế.
Dựa vào các dữ liệu vào, ra được xác
Dựa vào các dữ liệu vào, ra được xác
định trong giai đoạn đặc tả use case.
định trong giai đoạn đặc tả use case.
4
4
Screen design
Screen design
Chuẩn hóa cấu trúc, cách thức tổ

Chuẩn hóa cấu trúc, cách thức tổ
chức, hình thức biểu diễn của các
chức, hình thức biểu diễn của các
thành phần trên màn hình.
thành phần trên màn hình.
Có thể sử dụng Front page (HTML),
Có thể sử dụng Front page (HTML),
MS Word,… để thiết kế giao diện
MS Word,… để thiết kế giao diện
5
5
Chuẩn hóa
Chuẩn hóa
Display
Display

Kích thước thực tế
Kích thước thực tế

Độ phân giải, số lượng màu hỗ trợ
Độ phân giải, số lượng màu hỗ trợ
Screen: Được chia thành các đối tượng hiển thị
Screen: Được chia thành các đối tượng hiển thị
gọi là Cửa sổ (Window)
gọi là Cửa sổ (Window)

Vị trí của các nút chuẩn (OK, Cancel, Register,
Vị trí của các nút chuẩn (OK, Cancel, Register,
Search,…)
Search,…)


Vị trí hiển thị các message,…
Vị trí hiển thị các message,…

Title và menu của màn hình
Title và menu của màn hình

Sự thống nhất trong việc biểu diễn các ký tự
Sự thống nhất trong việc biểu diễn các ký tự

Biểu diễn các câu vào chi tiết các item
Biểu diễn các câu vào chi tiết các item

Phối màu
Phối màu
6
6
Chuẩn hóa
Chuẩn hóa
Control
Control

Kiểu, kích thước, màu sắc và các ký tự hiển thị
Kiểu, kích thước, màu sắc và các ký tự hiển thị

Quy trình kiểm tra đầu vào
Quy trình kiểm tra đầu vào

Trình tự di chuyển focus (ví dụ định nghĩa trình tự
Trình tự di chuyển focus (ví dụ định nghĩa trình tự

tab)
tab)
Menu
Menu

Thiết kế menu với sự cân nhắc về chuẩn hóa của các
Thiết kế menu với sự cân nhắc về chuẩn hóa của các
thành phần chung của màn hình
thành phần chung của màn hình
Nhập dữ liệu đầu vào tự bàn phím
Nhập dữ liệu đầu vào tự bàn phím

Chú ý sự nhất quán giữa các phím tắt, tab
Chú ý sự nhất quán giữa các phím tắt, tab
7
7
Chuẩn hóa
Chuẩn hóa
Message
Message

Xác định các message được hiển thị như thế
Xác định các message được hiển thị như thế
nào trong thời gian thực hiện
nào trong thời gian thực hiện
Error
Error

Đưa ra quy trình xử lý lỗi thống nhất khi gặp
Đưa ra quy trình xử lý lỗi thống nhất khi gặp

sự cố
sự cố
Help
Help

Phát triển chi tiết các thông tin trợ giúp: Phù
Phát triển chi tiết các thông tin trợ giúp: Phù
hợp, nhất quán về thuật ngữ, mô tả,…
hợp, nhất quán về thuật ngữ, mô tả,…
8
8
Nội dung
Nội dung
1.
1.
Thiết kế giao diện người dùng (Screen
Thiết kế giao diện người dùng (Screen
design)
design)
2.
2.
Thiết kế biểu đồ chuyển giữa các giao
Thiết kế biểu đồ chuyển giữa các giao
diện người dùng (Display transition
diện người dùng (Display transition
diagram)
diagram)
3.
3.
Đặc tả giao diện người dùng (Screen

Đặc tả giao diện người dùng (Screen
specification)
specification)
9
9
Display transition diagram
Display transition diagram
Tổng hợp mối liên hệ giữa các màn
Tổng hợp mối liên hệ giữa các màn
hình
hình

Phân loại các màn hình theo 4 mẫu chuẩn
Phân loại các màn hình theo 4 mẫu chuẩn

Liên kết các màn hình theo sự phân loại trên
Liên kết các màn hình theo sự phân loại trên
10
10
4 transition patterns
4 transition patterns
1. Simple screen transition: A
1. Simple screen transition: A
conventional simple transition
conventional simple transition
11
11
4 transition patterns
4 transition patterns
2. Transition to a child: Khi màn hình

2. Transition to a child: Khi màn hình
con hiển thị trên màn hình cha, màn
con hiển thị trên màn hình cha, màn
hình cha ở dưới ko thao tác được
hình cha ở dưới ko thao tác được
12
12
4 transition patterns
4 transition patterns
3. Transition to an independent child
3. Transition to an independent child
screen: Chuyển đến một màn hình
screen: Chuyển đến một màn hình
pop-up từ màn hình cha, màn hình
pop-up từ màn hình cha, màn hình
con và màn hình cha đều cùng thao
con và màn hình cha đều cùng thao
tác được.
tác được.
13
13
4 transition patterns
4 transition patterns
4. Transition to an independent
4. Transition to an independent
screen: Khởi tạo một màn hình độc
screen: Khởi tạo một màn hình độc
lập mới.
lập mới.
14

14
Liên
Liên
kết
kết
các
các
màn
màn
hình
hình
15
15
Nội dung
Nội dung
1.
1.
Thiết kế giao diện người dùng (Screen
Thiết kế giao diện người dùng (Screen
design)
design)
2.
2.
Thiết kế biểu đồ chuyển giữa các giao
Thiết kế biểu đồ chuyển giữa các giao
diện người dùng (Display transition
diện người dùng (Display transition
diagram)
diagram)
3.

3.
Đặc tả giao diện người dùng (Screen
Đặc tả giao diện người dùng (Screen
specification)
specification)
16
16
Screen specification
Screen specification
Đặc tả chi tiết cho các thành phần
Đặc tả chi tiết cho các thành phần
trên màn hình
trên màn hình
17
17