Thiết kế giao diện ebook

Phân tích thiết kế phần mềmCreate by: quyetnv87@gmail.com 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: quyetnv87@gmail.com Đặ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: quyetnv87@gmail.com 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: quyetnv87@gmail.com 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: quyetnv87@gmail.com 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: quyetnv87@gmail.com 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: quyetnv87@gmail.com 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: quyetnv87@gmail.com 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: quyetnv87@gmail.com 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: quyetnv87@gmail.com Nguyên tắc thiết kế giao diện 3 [...]... Phân tích thiết kế phần mềm 5 Đặc tả thiết kế giao diện • 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 6 Chuẩn thiết kế giao diện và công cụ • 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...3 Nguyên tắc thiết kế giao diện • 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 4 Kỹ thuật thiết kế giao diện 4.1 Thiết kế tương tác chung... 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 4 Kỹ thuật thiết kế giao diện 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ị... 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 4 Kỹ thuật thiết kế giao diện 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ì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 4 Kỹ thuật thiết kế giao diện 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... 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 . Tiến trình thiết kế giao diện chung Phân tích thiết kế phần mềmCreate by: quyetnv87@gmail.com 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. 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: quyetnv87@gmail.com Đặ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. quyetnv87@gmail.com 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