Bài 11: Thiết kế ngoài

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 xạ thành các screen để thiết kế. Dựa vào các dữ liệu vào, ra được xác định trong giai đoạn đặc tả use case.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 thành phần trên màn hình.

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI KHOA CÔNG NGHỆ THễNG TIN Bộ môn Công nghệ phần mềm PHN TCH THIẾT KẾ HƯỚNG ĐỐI TƯỢNG VỚI UML 2.0 Bài 11 Thiết kế Nội dung Thiết kế giao diện người dùng (Screen design) Thiết kế biểu đồ chuyển giao diện người dùng (Display transition diagram) Đặc tả giao diện người dùng (Screen specification) Từ use case Dựa vào use case lớp biên giao diện với người dùng ánh xạ thành screen để thiết kế Dựa vào liệu vào, xác định giai đoạn đặc tả use case Screen design Chuẩn hóa cấu trúc, cách thức tổ chức, hình thức biểu diễn thành phần hình Có thể sử dụng Front page (HTML), MS Word,… để thiết kế giao diện Chuẩn hóa Display   Kích thước thực tế Độ phân giải, số lượng màu hỗ trợ Screen: Được chia thành đối tượng hiển thị gọi Cửa sổ (Window)       Vị trí nút chuẩn (OK, Cancel, Register, Search,…) Vị trí hiển thị message,… Title menu hình Sự thống việc biểu diễn ký tự Biểu diễn câu vào chi tiết item Phối màu Chuẩn hóa Control    Kiểu, kích thước, màu sắc ký tự hiển thị Quy trình kiểm tra đầu vào Trình tự di chuyển focus (ví dụ định nghĩa trình tự tab) Menu  Thiết kế menu với cân nhắc chuẩn hóa thành phần chung hình Nhập liệu đầu vào tự bàn phím  Chú ý quán phím tắt, tab Chuẩn hóa Message  Xác định message hiển thị thời gian thực Error  Đưa quy trình xử lý lỗi thống gặp cố Help  Phát triển chi tiết thông tin trợ giúp: Phù hợp, quán thuật ngữ, mô tả,… Nội dung Thiết kế giao diện người dùng (Screen design) Thiết kế biểu đồ chuyển giao diện người dùng (Display transition diagram) Đặc tả giao diện người dùng (Screen specification) Display transition diagram Tổng hợp mối liên hệ hình   Phân loại hình theo mẫu chuẩn Liên kết hình theo phân loại transition patterns Simple screen transition: A conventional simple transition 10 transition patterns Transition to a child: Khi hình hiển thị hình cha, hình cha ko thao tác 11 transition patterns Transition to an independent child screen: Chuyển đến hình pop-up từ hình cha, hình hình cha thao tác 12 transition patterns Transition to an independent screen: Khởi tạo hình độc lập 13 Liên kết hình 14 Nội dung Thiết kế giao diện người dùng (Screen design) Thiết kế biểu đồ chuyển giao diện người dùng (Display transition diagram) Đặc tả giao diện người dùng (Screen specification) 15 Screen specification Đặc tả chi tiết cho thành phần hình 16 17 ... Transition to an independent screen: Khởi tạo hình độc lập 13 Liên kết hình 14 Nội dung Thiết kế giao diện người dùng (Screen design) Thiết kế biểu đồ chuyển giao diện người dùng (Display transition... chi tiết thông tin trợ giúp: Phù hợp, quán thuật ngữ, mô tả,… Nội dung Thiết kế giao diện người dùng (Screen design) Thiết kế biểu đồ chuyển giao diện người dùng (Display transition diagram) Đặc...Nội dung Thiết kế giao diện người dùng (Screen design) Thiết kế biểu đồ chuyển giao diện người dùng (Display transition diagram) Đặc