(LUẬN VĂN THẠC SĨ) Nghiên cứu ứng dụng mẫu thiết kế trong tương tác người máy

ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ LƯƠNG THỊ NGỌC HÀ NGHIÊN CỨU ỨNG DỤNG MẪU THIẾT KẾ TRONG TƯƠNG TÁC NGƯỜI - MÁY LUẬN VĂN THẠC SĨ Hà Nội - 2011 TIEU LUAN MOI download : skknchat@gmail.com ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ LƯƠNG THỊ NGỌC HÀ NGHIÊN CỨU ỨNG DỤNG MẪU THIẾT KẾ TRONG TƯƠNG TÁC NGƯỜI - MÁY Ngành: Công nghệ thông tin Chuyên ngành: Công nghệ phần mềm Mã số: 60 48 10 LUẬN VĂN THẠC SĨ NGƯỜI HƯỚNG DẪN KHOA HỌC: PGS.TS Đặng Văn Đức Hà Nội - 2011 TIEU LUAN MOI download : skknchat@gmail.com III MỤC LỤC Lời cam đoan I Lời cảm ơn II MỤC LỤC III Danh mục ký hiệu, chữ viết tắt V Danh mục hình vẽ VI MỞ ĐẦU Chương 1- TỔNG QUAN VỀ THIẾT KẾ GUI VÀ MẪU THIẾT KẾ 1.1 Giới thiệu UI 1.1.1 Định nghĩa UI 1.1.2 Tại cần thiết kế UI 1.2 Tính sử dụng hệ thống phần mềm 1.2.1 Định nghĩa tính sử dụng 1.2.2 Thuộc tính tính sử dụng 1.3 Nguyên lý thiết kế GUI 1.4 Qui trình thiết kế GUI 1.4.1 Đề xuất toán 1.4.2 Phân tích người sử dụng 1.4.3 Phân tích nhiệm vụ 1.4.4 Phác hoạ thiết kế 1.4.5 Prototype giấy 1.4.6 Prototype máy tính 10 1.4.7 Cài đặt 10 1.4.8 Kiểm thử người sử dụng 10 1.5 Mẫu phát triển phần mềm 11 1.5.1 Giới thiệu mẫu 11 1.5.2 Mẫu thiết kế 12 Chương – MỘT SỐ MẪU ỨNG DỤNG TRONG THIẾT KẾ GUI 14 2.1 Các mẫu kiến trúc 14 2.2.1 Abstract Factory 14 2.2.2 Builder 15 2.2.3 Adapter 16 2.2.4 Faỗade 17 2.2.5 Observer 17 2.2.6 Mẫu MVC 18 2.2 Các mẫu đồ họa 19 2.2.1 Các mẫu định vị 19 2.2.2 Các mẫu tổ chức trang 31 2.2.3 Các mẫu hành động 38 2.2.4 Đồ hoạ thông tin 46 Chương – PHÁT TRIỂN GUI PHẦN MỀM THỬ NGHIỆM ĐỊNH HƯỚNG MẪU 51 3.1 Giới thiệu toán 51 3.2 Giải toán 51 3.3 Phân tích người sử dụng phân tích nhiệm vụ 52 3.3.1 Tiêu đề 52 3.3.2 Phân tích người sử dụng 52 3.3.3 Phân tích nhiệm vụ 54 3.4 Phác hoạ thiết kế 59 3.4.1 Thiết kế tổng quan 59 3.4.2 Kịch 59 TIEU LUAN MOI download : skknchat@gmail.com IV 3.5 Xây dựng Prototype giấy 61 3.5.1 Login: 61 3.5.2 Sametime Instant Message 65 3.5.3 Sametime Call 65 3.5.4 Sametime Video Call 65 3.6 Xây dựng Prototype máy tính 66 3.6.1 Log in 66 3.6.2 Sametime Instant Message 70 3.6.3 Sametime Call 70 3.6.4 Sametime Video Call 71 3.7 Một số mẫu ứng dụng thiết kế Sametime 71 3.8 Cài đặt 74 3.9 Kiểm thử người sử dụng 74 3.9.1 Thiết kế 74 3.9.2 Cài đặt 76 3.9.3 Đánh giá 78 KẾT LUẬN 79 TÀI LIỆU THAM KHẢO 80 TIEU LUAN MOI download : skknchat@gmail.com V Danh mục ký hiệu, chữ viết tắt Thuật ngữ, chữ Giải thích viết tắt HCI Human - Computer Interaction Tương tác người – máy tính UI User Interface Giao diện người sử dụng GUI Graphical User Interface Giao diện đồ hoạ TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may VI Danh mục hình vẽ Hình 1-1 Framework ISO 9241-11 Hình 2-1 Mơ hình mu Faỗade 17 Hình 2-2 Mơ hình hoạt động mẫu MVC 19 Hình 2-3 Giao diện sử dụng mẫu Clear Entry Point 19 Hình 2-4 Giao diện sử dụng mẫu Hub and Spoke 21 Hình 2-5 Giao diện sử dụng mẫu Pyramid 23 Hình 2-6 Mơ hình Pyramid 24 Hình 2-7 Giao diện sử dụng mẫu Modal Panel 24 Hình 2-8 Giao diện sử dụng mẫu Sequence Map 25 Hình 2-9 Giao diện sử dụng mẫu Breadcrumbs 26 Hình 2-10 Giao diện sử dụng mẫu Annotated Scrollbar 27 Hình 2-11 Giao diện sử dụng mẫu Color-Coded Sections 29 Hình 2-12 Giao diện sử dụng mẫu Escape Hatch 30 Hình 2-13 Giao diện sử dụng mẫu Visual Framework 31 Hình 2-14 Giao diện sử dụng mẫu Center Stage 32 Hình 2-15 Giao diện sử dụng mẫu Titled Sections 34 Hình 2-16 Giao diện sử dụng mẫu Card Stack 35 Hình 2-17 Giao diện sử dụng mẫu Closable Panels 36 Hình 2-18 Giao diện sử dụng mẫu Movable Panels 37 Hình 2-19 Giao diện sử dụng mẫu Button Groups 39 Hình 2-20 Giao diện sử dụng mẫu Action Panel 40 Hình 2-21 Giao diện sử dụng mẫu Prominent “Done” Button 42 Hình 2-22 Giao diện sử dụng mẫu Preview 43 Hình 2-23 Giao diện sử dụng mẫu Progress Indicator 44 Hình 2-24 Giao diện sử dụng mẫu Cancelability 45 Hình 2-25 Giao diện sử dụng mẫu Overview Plus Detail 46 Hình 2-26 Giao diện sử dụng mẫu Datatips 48 Hình 2-27 Giao diện sử dụng mẫu Local Zooming 49 Hình 3-1 Giao diện Log in 60 Hình 3-2 Giao diện Sametime 60 Hình 3-3 Giao diện chat 61 Hình 3-4 Giao diện Video Call 61 Hình 3-5 Giao diện Log in với tài khoản haluong 62 Hình 3-6 Giao diện Sametime với tài khoản haluong 62 Hình 3-7 Giao diện File Menu 63 Hình 3-8 Giao diện Edit Menu 63 Hình 3-9 Giao diện View Menu 64 Hình 3-10 Giao diện Tool Menu 64 Hình 3-11 Giao diện chát với Nguyen Minh Tuyen 65 Hình 3-12 Giao diện Call với Luong Thanh Tung 65 Hình 3-13 Giao diện Video Call với Luong Thanh Tung 66 Hình 3-14 Giao diện tạo tài khoản 66 Hình 3-15 Giao diện Log in prototype máy tính 67 Hình 3-16 Giao diện Sametime prototype máy tính 67 Hình 3-17 Giao diện File Menu prototype máy tính 68 Hình 3-18 Giao diện Edit Menu prototype máy tính 68 Hình 3-19 Giao diện View Menu prototype máy tính 69 Hình 3-20 Giao diện Tool Menu prototype máy tính 69 Hình 3-21 Giao diện Help Menu prototype máy tính 70 (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may VII Hình 3-22 Giao diện chat prototype máy tính 70 Hình 3-23 Giao diện Call prototype máy tính 70 Hình 3-24 Giao diện Video Call prototype máy tính 71 Hình 3-25 Giao diện Notice sử dụng mẫu Model Panel 71 Hình 3-26 Giao diện New Contact sử dụng mẫu Button Groups 72 Hình 3-27 Giao diện Sametime sử dụng mẫu Closable Panels 72 Hình 3-28 Giao diện Forgotten your password 73 Hình 3-29 Giao diện Font sử dụng mẫu Card Stack 74 Hình 3-26 Giao diện New Contact 75 Hình 3-28 Giao diện Chat History 75 Hình 3-29 Giao diện Send File 75 Hình 3-30 Giao diện cài đặt Log In 76 Hình 3-31 Giao diện cài đặt Menu Sametime 77 (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may MỞ ĐẦU Tương tác người – máy (HCI – Human Computer Interaction) lĩnh vực nghiên cứu, lập kế hoạch thiết kế việc người máy tính làm việc với để nhu cầu người thoả mãn cao Nói cách khác HCI lĩnh vực nghiên cứu tương tác người, máy tính nhiệm vụ HCI liên quan đến việc hiểu tương tác người hệ thống sở máy tính để thực nhiệm vụ hiểu biết việc thiết kế hệ thống tương tác HCI đa lĩnh vực, sử dụng tri thức nhiều ngành khác như: khoa học máy tính, trí tuệ nhân tạo, nhân loại học, công thái học, ngôn ngữ học, triết học, nghệ thuật, xã hội học, thiết kế, tâm lý học, kỹ nghệ sinh lý học HCI lĩnh vực rộng, liên quan đến nhiều ngành khoa học Nhưng phạm vi người sử dụng tin học ta quan tâm đến lĩnh vực thiết kế giao diện người sử dụng cho hệ thống tương tác Giao diện người sử dụng (UI – User Interface) phần máy tính hệ thống phần mềm mà người nhìn, sờ, nói với Nếu hệ thống có giao diện tốt dễ sử dụng, sản phẩm dễ bán, thời gian lập trình giảm bớt tăng suất lao động Do việc thiết kế giao diện người sử dụng trở nên quan trọng Nhưng thiết kế giao diện tốt cho hệ thống thông tin khơng phải việc làm dễ dàng Để thiết kế giao diện tốt, tăng tính sử dụng thiết kế nhanh chóng phải sử dụng kinh nghiệm, tri thức kết có từ trước Đó mẫu thiết kế Do luận văn nghiên cứu “Nghiên cứu ứng dụng mẫu thiết kế tương tác người – máy” Mục tiêu trình thiết kế đạt giao diện người sử dụng có tính sử dụng cao Q trình thiết kế khơng phải lần mà phải thực lặp giai đoạn thiết kế, cài đặt đánh giá Dựa vào kết đánh giá để tái thiết kế giao diện Nếu thiết kế giao diện mã trình nhiều thời gian, đánh giá, góp ý để chỉnh sửa khó khăn Một số thiết kế có nhiều thiếu sót nghiêm trọng ta khơng nỡ vứt bỏ làm việc để có Để khắc phục điều có nhiều công cụ phần mềm với khả hỗ trợ việc thiết kế giao diện người dùng Và có nhiều trung tâm mở lớp dạy sử dụng phần mềm để thiết kế giao diện người dùng Luận văn sử dụng công cụ phần mềm để thiết kế giao diện đồ hoạ (GUI – Graphical User Interface) GUI Design Studio Khi dùng GUI Design Studio, mẫu xây dựng nhanh nhiều so với cài đặt cuối cùng, ta đánh giá sớm nhận phản hồi sớm điểm tốt điểm xấu thiết kế Nếu phát vấn đề thiết kế mẫu dễ dàng chỉnh sửa (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may xây dựng nhanh Quan trọng thiết kế có nhiều thiếu sót nghiêm trọng mẫu bị loại bỏ Luận văn bố cục thành chương Chương tìm hiểu thiết kế GUI mẫu thiết kế Chương trình bầy số mẫu ứng dụng thiết kế GUI Chương phát triển GUI phần mềm thử nghiệm định hướng mẫu (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may Chương 1- TỔNG QUAN VỀ THIẾT KẾ GUI VÀ MẪU THIẾT KẾ Chương tập chung tìm hiểu thiết kế GUI mẫu thiết kế Nội dung chương bố cục thành mục Mục giới thiệu UI Mục trình bày tính sử dụng hệ thống phần mềm Mục đưa nguyên lý thiết kế GUI Mục trình bày quy trình thiết kế GUI Mục tìm hiểu mẫu phát triển phần mềm 1.1 Giới thiệu UI 1.1.1 Định nghĩa UI Trong nhiều tài liệu, khái niệm UI có ý nghĩa tương tự với HCI Nhưng thật UI tập lĩnh vực nghiên cứu HCI UI hiểu sau: UI bao gồm khái niệm hệ thống máy tính cách thức sử dụng chúng để hồn thành cơng việc khác người sử dụng Do UI không mà người nhìn, sờ nghe thấy mà UI tập hợp phương tiện để người tương tác với máy móc, thiết bị, chương trình máy tính hay hệ thống phức tạp [3] UI hiểu tiến trình thiết kế phần mềm ghép nối cho hệ thống máy tính trở nên hiệu quả, dễ sử dụng làm người muốn chúng làm UI mặt, thành phần trung gian để thực giao tiếp người với máy tính Do ta cần nghiên cứu thiết kế UI 1.1.2 Tại cần thiết kế UI Có nhiều lý để tập trung nghiên cứu thiết kế UI Sau vài lý chính: UI điểm nơi giao tiếp người sử dụng hệ thống máy tính Nó phần hệ thống, nơi mà người sử dụng nhìn, sờ, nghe giao tiếp Người sử dụng xâm nhập vào hệ thống máy tính khơng có UI Phụ thuộc vào giao diện mà hệ thống thắng lợi hay thất bại việc giúp người sử dụng thực nhiệm vụ Nhiều người sử dụng đánh giá hệ thống thông qua UI, họ cho hệ thống tồi UI tồi UI tồi làm hệ thống khó sử dụng nguy hiểm sử dụng hệ thống với UI tồi  Hệ thống liệu pháp xạ chữa bệnh ung thư Therac-25 gây chết người có UI tồi [2]  Hệ thống rada Aegis tàu chiến USS Vincennes bắn nhầm máy bay dân Iran có UI thiết kế tồi [2] (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 66 Hình 3-13 Giao diện Video Call với Luong Thanh Tung 3.6 Xây dựng Prototype máy tính Các biểu tượng: : mời thêm người khác vào trò chuyện : mở lại trò chuyện từ trước : để call video call với người khác : thêm người vào danh sách liên lạc : để share hình 3.6.1 Log in - Một người dùng khởi động chương trình Sametime Người chưa có tài khoản Sametime - Người dùng nhấn vào liên kết: Don’t have a User name để tạo tài khoản Hình 3-14 Giao diện tạo tài khoản - Người sử dụng điền đầy đủ thông tin Giả sử người lấy tên tài khoản haluong - Người sử dụng điền thơng tin tài khoản vào hình Log in - Người sử dụng nhấn nút Log In để đăng nhập (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 67 Hình 3-15 Giao diện Log in prototype máy tính - Đăng nhập thành cơng Hình 3-16 Giao diện Sametime prototype máy tính (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 68 File Menu Hình 3-17 Giao diện File Menu prototype máy tính Edit Menu Hình 3-18 Giao diện Edit Menu prototype máy tính (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 69 View Menu: Hình 3-19 Giao diện View Menu prototype máy tính Tool Menu: Hình 3-20 Giao diện Tool Menu prototype máy tính (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 70 Help Menu: Hình 3-21 Giao diện Help Menu prototype máy tính 3.6.2 Sametime Instant Message - Người sử dụng nhấn chuột vào Nguyen Minh Tuyen để chat Hình 3-22 Giao diện chat prototype máy tính 3.6.3 Sametime Call - Người sử dụng nói chuyện với Luong Thanh Tung Hình 3-23 Giao diện Call prototype máy tính (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 71 3.6.4 Sametime Video Call - Người sử dụng Video call với Luong Thanh Tung Hình 3-24 Giao diện Video Call prototype máy tính 3.7 Một số mẫu ứng dụng thiết kế Sametime Để quản lý việc nhập liệu từ bàn phím chuột lấy liệu vừa nhập vào để hiển thị hình ta cần sử dụng mẫu MVC (Model – View – Controller) Việc nhập liệu vào quản lý Controller, liệu vừa nhập vào quản lý Model Dữ liệu hiển thị nhờ quản lý View Khi thiết kế giao diện Log In (hình 3-15) tơi sử dụng mẫu MVC để thiết kế text box chứa User name Password, check box Remember password Automatically log in, combo box để lựa chọn trạng thái log in trạng thái tin nhắn Trong hệ điều hành Windows, ta xóa đối tượng hệ thống đưa cho người sử dụng lựa chọn: “Bạn có chắn xố đối tượng khơng?” Sự lựa chọn mẫu thiết kế Model Panel Nếu khơng sử dụng mẫu Model Panel đơi vơ tình ta xố đối tượng mà ta chưa cần xố Trong chương trình Sametime tơi đưa mẫu Model Panel vào thiết kế giao diện Notice Khi người sử dụng nhấn vào biểu tượng biểu tượng cơng cụ Sametime (hình 3-16) xuất hộp thoại Hộp thoại cắt ngang chương trình buộc người sử dụng phải trả lời Hình 3-25 Giao diện Notice sử dụng mẫu Model Panel (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 72 Trong giao diện, Button giúp giao diện nhìn sinh động Các nhóm Button thơng báo đến người sử dụng họ phải giải cơng việc hồn cảnh Do chương trình Sametime tơi thiết kế nhóm Button Giao diện Notice hình 3-25 nhóm button Yes No Giao diện New Contact có nhóm button Add Close Các nhóm button thiết kế nhờ sử dụng mẫu Button Groups Hình 3-26 Giao diện New Contact sử dụng mẫu Button Groups Trong danh sách người cần liên hệ, ta có nhiều bạn danh sách lớn Nếu ta sử dụng mẫu Closable Panels ta chia thành nhóm bạn Do ta quản lý nhóm đơn giản, dễ dàng Trong chương trình Sametime, mục Contacts danh sách người liên hệ ta chia thành Group Friend Colleague Ta coi nhóm Friend Colleague kênh ta mở đóng kênh tuỳ theo ý thích Để làm điều tơi sử dụng mẫu Closable Panels vào thiết kế Hình 3-27 Giao diện Sametime sử dụng mẫu Closable Panels (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 73 Một cơng việc diễn theo nhiều giai đoạn khác Để giúp người sử dụng cảm nhận bước cuối công việc ta sử dụng mẫu Prominent “Done” Button Nhờ mẫu mà công việc kết thúc trở nên rõ ràng dễ hiểu Trong chương trình Sametime tơi sử dụng mẫu Prominent “Done” Button để thiết kế nút Create account giao diện Create a new Sametime account (hình 3-14) nút Submit giao diện Forgotten your password Hình 3-28 Giao diện Forgotten your password Nếu tất công việc đặt vào kênh đơi dẫn tới khó sử dụng Do ta chia cơng việc lớn thành phận phận đặt vào kênh giúp người sử dụng tập trung giải phận Để làm điều ta sử dụng mẫu Card Satck Với chương trình Sametime, chát người sử dụng có nhu cầu thay đổi phông chữ, cỡ chữ, kiểu chữ, tạo hiệu ứng cho chữ hay định dạng khoảng cách đoạn Ta nhấn chuột vào biểu tượng giao diện chát (hình 3-22) Khi xuất hộp thoại Font Trong hộp thoại Font có ba thẻ Font, Character Spacing Text Effects Các thẻ thiết kế theo mẫu Card Stack Ta đặt nội dung phù hợp vào thẻ, thời điểm có thẻ hiển thị (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 74 Hình 3-29 Giao diện Font sử dụng mẫu Card Stack 3.8 Cài đặt Môi trường yêu cầu phần mềm để chạy prototype:  Máy tính cài đặt hệ điều hành Windows  Cài đặt chương trình GUI Design Studio Professional v4.1.109.0 Repack-iNViSiBLE Các bước để test prototype: Khởi động GUI Design Studio Chọn File  Open Project Chỉ đến thư mục chứa chương trình Sametime Mở file Sametime.gdb Mở file Login.gui Ấn F9 để chạy Login.gui 3.9 Kiểm thử người sử dụng 3.9.1 Thiết kế Thiết kế cuối Sametime project sau xây dựng prototype kiểm thử: - Giao diện Login - Giao diện Sametime - Giao diện chat - Giao diện Call - Giao diện Video Call (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 75 - Giao diện tạo tài khoản - Giao diện Forgotten your password - Giao diện thêm người mới: Hình 3-26 Giao diện New Contact - Giao diện Chat History Hình 3-28 Giao diện Chat History - Giao diện Send File Hình 3-29 Giao diện Send File (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 76 Trong thiết kế giao diện Sametime tơi có sử dụng thực đơn công cụ Thanh công cụ bao gồm biểu tượng mà dựa vào người sử dụng tưởng tượng dễ dàng hiểu nhiệm vụ biểu tượng Với công cụ, người sử dụng sử dụng dễ dàng thao tác nhanh Ví dụ thêm người vào danh sách liên lạc Người sử dụng việc nhấn chuột vào biểu tượng thay phài vào thực đơn File  New  Contact Như người sử dụng thao tác tương tự với biểu tượng khác công cụ thay phải sử dụng thực đơn Trong trình phân tích thiết kế UI cho Sametime tơi định sử dụng phím tắt để giúp người sử dụng kinh nghiệm thao tác nhanh 3.9.2 Cài đặt Dưới số hình ảnh cài đặt mức cao sử dụng GUI Design Studio Hình 3-30 Giao diện cài đặt Log In (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 77 Hình 3-31 Giao diện cài đặt Menu Sametime Sametime chương trình thỏa mãn chuẩn Norman tính sử dụng hệ thống phần mềm: Sự rõ ràng: phần hệ thông liên quan đến tương tác textbox để nhập user/password rõ ràng; Sự phản hồi: người dùng đăng nhập thành cơng Chương trình đưa phản hồi thị giác (hiển thị hình giao diện chính); Sự ràng buộc: Tên tài khoản mật phải có ký tự trở lên user phải bắt đầu chữ không chứa ký tự đặc biệt $, % ; Sự ánh xạ: thứ tự User Password thiết kế User đặt password; Sự quán: bố trí thực đơn quán việc nhìn cảm giác Thực đơn bố trí xếp quán theo chuẩn Windows nên người sử dụng học cách sử dụng nhanh dễ dàng sử dụng; Sự gợi ý: nút Log In thiết kế cách trực quan Những gợi ý trường hợp quên mật muốn đăng ký tài khoản Các biểu tượng công cụ thiết kế trực quan có tính diễn đạt tốt tới nhiệm vụ mà biểu tượng thể (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 78 3.9.3 Đánh giá Sau cài đặt triển khai cho vài người dùng sử dụng thử chương trình Sametime Người dùng đưa vài đánh giá trình sử dụng Sametime: Giao diện Sametime thân thiện, gần gũi với người dùng; Chương trình đáp ứng nhu cầu cần thiết người dùng như: trò chuyện cách gửi tin nhắn hay nói chuyện, nói chuyện nhìn thấy nhau, chát người sử dụng gửi kèm file liệu, người sử dụng mời người vào danh sách trò chuyện, người sử dụng chia sẻ ứng dụng, tồn hình vùng hình…; Nhờ thiết kế cơng cụ giúp người dùng dễ hình dung lệnh sử dụng lệnh dễ dàng Các biểu tượng công cụ gần gũi, giúp người sử dụng dễ hình dung lệnh Nhờ phím tắt mà người dùng sử dụng lệnh nhanh chóng Và đặc biệt Sametime chương trình có tính sử dụng cao Nó đáp ứng đầy đủ nguyên lý để thiết kế hệ thống có tính sử dụng mà Don Norman đề là: rõ ràng, phản hồi, ràng buộc, ánh xạ, quán gợi ý Ta thấy Sametime chương trình đáp ứng nhu cầu giao tiếp, liên lạc, kết bạn từ xa người dùng Giao diện Sametime tốt, thân thiện, trực quan phù hợp với người dùng Kết luận: Chương phát triển GUI phần mềm thử nghiệm định hướng mẫu Tôi xây dựng phát triển chương trình Sametime nhằm đáp ứng nhu cầu giao tiếp, liên lạc, kết bạn từ xa người thông qua mạng Internet Chương trình xây dựng theo quy trình thiết kế GUI Một số mẫu thiết kế MVC (Model-View-Controller), Modal Panel, Button Groups, Closable Panels, Prominent “Done” Button Card Satck đưa vào để thiết kế giao diện Sametime Chương trình Sametime xây dựng ngồi ứng dụng số mẫu thiết kế cịn sử dụng phần mềm GUI Design Studio Do giao diện thiết kế nhanh chóng Q trình làm mẫu dễ dàng nhanh nhiều so với cài đặt Đặc biệt ta đánh giá sớm nhận phản hồi sớm điểm tốt điểm xấu thiết kế Nhờ tơi thiết kế giao diện Sametime thân thiện, trực quan gần gũi với người sử dụng (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may 79 KẾT LUẬN Kết đạt Mục tiêu luận văn đưa ra: Tìm hiểu thiết kế GUI mẫu thiết kế; Tìm hiểu số mẫu ứng dụng thiết kế GUI, đặc biệt mẫu đồ hoạ Ứng dụng số mẫu thiết kế để xây dựng chương trình Sametime Kết luận văn đạt được: Thứ nhất, tìm hiểu thiết kế GUI mẫu thiết kế gồm tìm hiểu UI, cần thiết kế UI, tính sử dụng hệ thống phần mềm, nguyên lý quy trình thiết kế GUI, mẫu phát triển phần mềm; Thứ hai, tìm hiểu số mẫu ứng dụng thiết kế GUI gồm mẫu kiến trúc mẫu đồ họa Các mẫu đồ hoạ gồm mẫu định vị, mẫu tổ chức trang, mẫu hành động, đồ hoạ thông tin; Cuối cùng, sử dụng phần mềm GUI Design Studio để xây dựng chương trình Sametime Chương trình Sametime gồm có chức năng: Sametime Instant Message; Sametime Call; Sametime Video Call; Sametime Screen Sharing; Sametime Send File Khi xây dựng chương trình tơi ứng dụng số mẫu vào thiết kế giao diện như: mẫu MVC (Model-View-Controller), Modal Panel, Button Groups, Closable Panels, Prominent “Done” Button Card Stack Khi thiết kế giao diện người sử dụng tơi thực theo bước quy trình thiết kế GUI đồng thời tận dụng kinh nghiệm, tri thức có từ trước mẫu thiết kế Việc áp dụng mẫu thiết kế thiết kế giao diện người sử dụng mang lại nhiều lợi ích to lớn, giúp cho q trình thiết kế giao diện nhanh chóng hiệu Hướng phát triển Do thời gian thực luận văn hạn chế nên luận văn tìm hiểu áp dụng số mẫu thiết kế thiết kế giao diện người sử dụng Hướng phát triển luận văn là: Tìm hiểu mẫu thiết kế khác bao gồm mẫu kiến trúc mẫu đồ hoạ Đặc biệt mẫu đồ hoạ Ứng dụng nhiều mẫu thiết kế vào thiết kế vào giao diện người dùng, cụ thể chương trình Sametime Đưa nhiều mẫu đồ hoạ vào chương trình để chương trình trở nên sinh động, dễ hiểu, dễ sử dụng, gần gũi với người dùng chương trình đảm bảo có tính sử dụng cao Từ đưa hệ thống Sametime vào ứng dụng thực tế (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may TIEU LUAN MOI download : skknchat@gmail.com (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may (LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may(LUAN.VAN.THAC.SI).Nghien.cuu.ung.dung.mau.thiet.ke.trong.tuong.tac.nguoi.may