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 [...]... dưới ko thao tác được 11 4 transition patterns 3 Transition to an independent child screen: Chuyển đến một 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 tác được 12 4 transition patterns 4 Transition to an independent screen: Khởi tạo một màn hình độc lập mới 13 Liên kết các màn hình 14 Nội dung 1 Thiết kế giao diện người dùng (Screen design) 2 Thiết kế biểu đồ chuyển giữa . 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. 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. 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