Bài giảng Thiết kế giao diện - Nguyễn Văn Quyết

Phân tích thiết kế phần mềmCreate by: quyetnv87@gmail.com THIẾT KẾ GIAO DIỆNNgười thực hiện: Nguyễn Văn QuyếtNgày thực hiện: 15/02/2011 NỘI DUNGNguyên tắc thiết kế giao diện3Vai trò và tầm quan trọng của thiết kế giao diện1Phong cách tương tác người máy2Kỹ thuật thiết kế giao diện4Phân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comĐặc tả thiết kế giao diện (Prototype)5Giớ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ềmNgười dùng đánh giá phần mềm qua giao diệnThiế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ốngPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comVai trò và tầm quan trọng của thiết kế giao diện1Là phương tiện để người dùng sử dụng hệ thốngGiao diện thiết kế nghèo nàn người dùng dễ mắc lỗiGiao diện thiết kế tồi là lý do nhiều phần mềm không được sử dụngGiao diện trợ giúp người dùng làm việc đúng khả năng của mìnhGiao diện trợ giúp tốt  người dùng thành côngGiao diện trợ giúp tồi  người dùng khó khăn, thất bạiPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comVai trò và tầm quan trọng của thiết kế giao diện1Phong 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.comPhong cách tương tác người - máy2Là phương thức tương tác có sớm nhấtNhập lệnh dữ liệu chủ yếu từ bàn phímDễ cài đặt so cới GUITốn ít tài nguyên hệ thốngThao tác thực hiện tuần tựKhông phù hợp với người dùng ít kinh nghiệmPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comPhong cách tương tác người - máy22.1. Giao diện dòng lệnhThô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ệmCó nhiều cửa sổ có thể tương tác song songCó thể nhập liệu bằng nhiều phương phápPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comPhong cách tương tác người - máy22.2. Giao diện đồ họaPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comTiến trình thiết kế giao diện33.1. Tiến trình thiết kế giao diện chungPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comTiến trình thiết kế giao diện33.2. Tiến trình thiết kế giao làm mẫuThiế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 ứngSở 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ùngPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comNguyên tắc thiết kế giao diện3Giao 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ỗiCung cấp các kịp thời các phản ứng và trợ giúp mọi lúc, mọi nơiTiện ích tương tác đa dạngPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comNguyên tắc thiết kế giao diện34.1. Thiết kế tương tác chungPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comKỹ thuật thiết kế giao diện4Nhất quán trong tương tácCho thông tin phản hồi có nghĩaYêu cầu kiểm chứng mọi hành động phá hủy (xóa) không tầm thườngCho phép dễ dàng lần ngược nhiều hành độngPhâ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.4.2. Thiết kế hiển thị thông tinPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comKỹ thuật thiết kế giao diện4Chỉ 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 tinDù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ướcCho phép người dùng duy trì ngữ cảnh trực quan4.2. Thiết kế hiển thị thông tin (tt)Phân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comKỹ thuật thiết kế giao diện4Đưa ra các thông báo lỗi có nghĩaDù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ểuDù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ả.4.3. Thiết kế vào dữ liệuPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comKỹ thuật thiết kế giao diện4Tối thiểu số hành động đưa vào mà người sử dụng thực hiệnDuy trì sự nhất quán giữa hiển thị thông tin và cách vào dữ liệuTương tác nên mềm dẻo và hài hòa với mode đưa vào ưa thíchKhử 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ácCung cấp trợ giúp cho mọi hành động đưa vàoPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comĐặc tả thiết kế giao diện5Diễn giải trên tài liệu kèm theo: Tài liệu đặc tả thiết kế giao diệnPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comChuẩn thiết kế giao diện và công cụ6Chuẩn thiết kế giao diện: Minh họaMột số công cụ hỗ trợ thiết kế giao diện:Visual StudioDevExpressInfragisticsPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comQUESTIONPhân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comddddddddddddddddddddddddThanks you !