Bài tập tuần 09: Thiết kế giao diện người dùng. Mục tiêu của bài tập này gồm: Thực hiện các bài tập (câu hỏi) về các khái niệm cơ bản trong Thiết kế giao diện người dùng, thực hiện thiết kế các màn hình giao diện người dùng cho các chức năng của bài toán (casestudy).
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm Bài tập tuân 09 Thiết kế giao diện người dùng Mục tiêu - _ Thực tập (câu hỏi) khái niệm Thiết kế giao diện người dùng - _ Thực thiết kế hình giao diện người dùng cho chức tốn (casestudy): o Cai dat cơng cụ thiết kế mock-up, ví dụ: Balsamiq, moqups.com, mockflow.com, screenpeek.io, screely.com, animockup.com o_ Thiết kế hình giao diện người dùng cho chức o_ Hiện thực hoá thiết kế thành hình thực NetBeans IDE Đánh giá - - Hoàn thành tập khái niệm Thiết kế giao diện người dùng - _ Hoàn thành thiết kế mock-up cho hình giao diện - _ Cài đặt thành cơng hình thực cho ứng dụng NetBeans IDE, viết code xử lý kiện cho điều khiển giao diện Phần I: Bài 1.1 a) b) c) Giao diện người dùng gì? Là phương tiện để người dùng khai thác tính phần mềm Là công cụ dịch chương Là cơng cụ truyền liệu vị trí khác mạng Tất phương án trình sang dạng ngơn ngữ máy Lựa chọn kiểu giao diện người dùng? Giao diện người dùng đồ họa Giao diện dòng lệnh Giao diện ngôn ngữ tự nhiên Tất phương án Phan mềm cho phép người dùng tương tác qua thiết bị đa dạng chuột, bàn phím, thiết bị nhận dạng giọng nói, cảm ứng, ? Đúng Software Engineering Department - SolCT/HUST CuuDuongThanCong.com Trang 1/11 https://fb.com/tailieudientucntt Introduction to Software Engineering - Nhập môn Công nghệ phần mềm Sai d) Để xây dựng giao diện người dùng hiệu quả, nhà thiết kế phải bắt đầu hiểu biết người dùng, bao gồm hồ sơ tuổi, khả thể chất, kỹ năng, trình độ học vấn, sở thích, ? e) f)_ ø) Đúng Sai Nguyên tác thiết kế giao diện người dùng? Lấy người dùng làm trung tâm Giảm tải nhớ máy người dùng Giao diện cần quán (consistent) Tất phương án Những hoạt động trọng thiết kế giao diện người dùng? Mơ hình hóa phân tích người dùng, nhiệm vụ, môi trường Thiết kế giao diện Thẩm định giao diện Tất phương án Hướng tiếp cận để phân tích tác vụ người dùng thiết kế giao diện? Người dùng cho biết ưa thích qua câu hỏi Dựa vào ý kiến lập trình viên có kinh nghiệm Nghiên cứu hệ thống tự động liên quan Quan sát thao tác người dùng Bài 1.2 a) Trình bày bước quy trình thiết kế giao diện người dùng? b) Néu tam quan cua thiết kế giao diện người dùng? c)_ Hãy gợi ý số hướng dẫn yếu tố màu sắc việc thiết kế giao diện? Bài 1.3 So sánh hai hình đây, nhận xét đánh giá việc thiết kế hai hình này? Software Engineering Department - SolCT/HUST CuuDuongThanCong.com Trang 2/11 https://fb.com/tailieudientucntt Introduction to Software Engineering - Nhập môn Công nghệ phần mềm CUSTOMER INFORMATION CUSTOMER NO 1273 NAME CONTEMPORARY OF SIGNS AQORESS Pine Vé ley Furniture 123 OAK ST City STATS AUSTIN, TX 28304 ¥YTO PURCHASE 47 285.00 CREDIT LIMIT 10,060 00 YTOPAYMENTS Detad € Customer Number Umit so PURCHASE: ?1JAM -12 22,000.00 PAYWENT †!-/JAA-12 13.000 CO PUACHA%E O2-MAR-12 16.000.00 PAYMENT 02-MAR.12 16.800 00 PAYMENT 13-4AY-+2 $000 00 PURCHASE 12-JUL -12 24 00 PAYWENT 132-4UL-12 37 PAYMENT 21-SEP-12 6571.45 status os AD Name 42,684 65 OISCOUNT % ustomer Accourt infoematon 0C CURRENT UALAMLL PUPAL Jar Jor jee Ate vu Me 23 May t tĩ YTD SUMMARY 4? 2% @ tì 45⁄4 &' * ACTIVE = Phần II: Thiết kế giao diện người dùng cho chức toán (casestudy) Thiết kế mock-up cho giao diện Các nguyên tắc bản: O Nhận biết nội dung - Content awareness OO Cách bố trí - Layout Thẩm mĩ -Aesthetics O o_ Kinh nghiệm người dùng - User experience © ằO e©_ e e Nhất quán - Consistency Ít tốn công - Minimal user effort au vao cho thiét kế giao diện : o_ Đặc tả tiết kich ban usecase o_ Các mô tả liệu vào liệu Thiết kế nhập liệu (input) : Giảm thiểu gõ phím (giá trị mặc định) + Xác thực liệu hợp lệ (dữ liệu nhập vào hệ thống cần xác nhận tính hợp lệ để đảm bảo độ xác nó.) e©_ Thiết kế kết xuất (output) : thơng tin tóm tắt + thông tin tiết (thường thể dạng bảng) + đồ thị (trực quan) Software Engineering Department - SolCT/HUST CuuDuongThanCong.com Trang 3/11 https://fb.com/tailieudientucntt Introduction to Software Engineering - Nhập môn Công nghệ phần mềm Bài tập: Xây dựng biểu đồ chuyển giao diện người dùng (Display transition diagram) Gợi ý: e Display transition diagram: téng hop mdi lién két gitra cac man hình e Vidu: Trường tên người dùng ; = Phím mật Màn hình login độc giả Phím tìm kiếm Phím đệ trình oe Y Phím gợi ý _——————— | Màn hình độc giả Phím ⁄ \ Màn hình tìm kiếm liệu Chứa trường: Tác giả Loại Tên tài liệu Phím xóa Màn hình gợi ý r Màn hình kết Số tạp chí Chứa phim: Đệ trình xóa Màn hình danh sách sách > Phím đặt trước Màn hình đặt trước Cửa sổ đặt trước Phím đệ trình Bài tập: Thiết kế mock-up cho hình Gợi ý: e©_ Sử dụng công cụ hỗ trợ thiết kế mock-up e_ Ví dụ: phần mềm Balsamiq + Lt Bựttons ee =| 1X9%é 144 weHGRADE ñnanuàan“ Button Button Bar | Tab § FC FEB 2006 b ? Browser Window Common tt Calendar ta Media @ Callout Chart Software Engineering Department - SolCT/HUST CuuDuongThanCong.com far Chart Chart Trang 4/11 https://fb.com/tailieudientucntt Cc Introduction to Software Engineering - Nhập môn Cơng nghệ phần mềm e_ Ví dụ: cơng cụ trực tuyến : https://mockflow.com/ https://wireframepro.mockflow.com/ x Project Edit Review > Ø ELEMEMTS Ctrl+K to Search VII hoi O fadio2 O a Line OO aeneaiedrertmaeainaee Fado? Radio group STORE UNV BI vip } © Weve i (> eR)2 Mui a File upload | | Rectangle POWER-UP Ví dụ: Xây dựng mock-up cho hình tốn (casestudy) Quản lý nhân lchẩu _- H Nhãn có địa bàn: 20 Hộ có địa bàn: Nhãn tạm trú: Nhãn tam vang: Lt) Lt) Software Engineering Department - SolCT/HUST CuuDuongThanCong.com Trang 5/11 https://fb.com/tailieudientucntt x Introduction to Software Engineering - Nhập môn Công nghệ phần mềm Bài tập: Đặc tả thiết kế giao diện cho hình Gợi ý: e Đối với trường nhập liệu vào (input) cần mô tả (ghi chú) : người dùng nhập sai yêu cầu, cần có dẫn nhắc nhở (đưa nhắc nhở cụ thể) + cảnh báo thông báo lỗi (thông báo cụ thể, dễ hiểu) e Đặc tả thiết kế giao diện theo mẫu sau: Tên hình Điều khiển Thơng tin Thuộc tính liệu Ghi Ví dụ: Đặc tả thiết kế hình tốn (casestudy) Màn hình ứng dụng (main screen): hình làm việc sau người dùng đăng nhập thành cơng Màn hình chứa menu bên trái với nút liên kết để mở chức Khung bên phải chứa thông tin thống kê chung số liệu (nhân khẩu, hộ khẩu, tạm vắng, tạm trú) hệ thống Điều khiển Thơng tin liệu Thuộc tính Tiêu đề hình | Chứa ảnh đại diện tên | Image + text hình label Hiển thị Kích thước image Font chữ Nút menu "Nhân | Khi người dùng click khẩu" Image + Button | Hiển thị mở hình "Quản lý nhân khẩu" Kích thước image Font chữ Sự kiện click Nút menu "Hộ Khi người dùng click khẩu" mở hình "Quản lý hộ khẩu" Image + Button | Hiển thị Kích thước image Font chữ Sự kiện click Nút menu "Thống | Khi người dùng click kê" Image + Button | Hiển thị mở hình "Thống kê" Kích thước image Font chữ Sự kiện click Khung hiển thị Hiển thị số nhân có | Image + text thơng tin thống địa bàn kê nhân Hiển thị label + text label | Kích thước image (số liệu thống kê | Font chữ từ database) Software Engineering Department - SolCT/HUST CuuDuongThanCong.com Trang 6/11 https://fb.com/tailieudientucntt Introduction to Software Engineering - Nhập môn Công nghệ phần mềm Bài tập: Xây dựng hình thực NetBeans IDE Gợi ý: e Su dung cdc thành phần điều khiển giao diện công cụ trợ giúp kéo thả NetBeans IDE xây dựng hình giao diện thực : e_ Giao diện trang đãng nhập (6) Login - x LOGIN User Name: Password: e_ Giao diện trang (| QUÂN LÝ NHÂN KHẨU - —_—— x " [ay Trang chu Nhân khâu có địa bàn: Hộ có địa bàn: (0 Al ae Théng Ké Nhân khảu tạm trú: Nhân khảu tạm vắng: Wy e Giao dién quan ly nhân (|B) QUAN LÝ NHÂN KHẨU am || Trang F33 Nhân - chu Khâu Họ tên Trinh Văn An â zái ee soe Thống Kê Trần Thanh Duyên Ngày sinh 1990-12-07 |1997-12-23 Giới tính Địa Nam Nữ SỐ Tạ Quang Bưu | | mm A $6 Ta Quang Bửu Nguyễn Minh Quân |1995-05-31 Nam Số Tạ Quang Bửu Nguyễn Tiến Dũng |1964-06-03 Nam Số Ta Quang Bửu Vũ Mỹ Linh 1965-12-06 Nữ $6 Tạ Quang Bửu Nguyễn Tiến Đạt 1990-09-09 Nam Số Ta Quang Bửu Nguyễn Trà My 1997-12-12 Nữ $6 Ta Quang Biru Tran Van Nam 1980-07-09 'Nam (Số Tạ Quang Bửu | x Software Engineering Department - SolCT/HUST CuuDuongThanCong.com x DK tạm vắng ĐK tạm trú - Khai Tir Trang 7/11 https://fb.com/tailieudientucntt Introduction to Software Engineering - Nhập môn Công nghệ phần mềm e_ Giao diện thêm nhân cá| Thêm nhân Ho va ten: () Biệt danh: () Giới tính: Ngun qn: () — Tơn giáo: Œ) Dân tộc: (9 Quốc tịch: Œ) Số CMT/CCCD Hộ chiều số: Nơi thường trú: () Địa tại: (*) Trình độ học vắn: () Trinh độ chun mơn: Œ) Trình độ ngoại ngữ: () Biét tiêng dân tộc: “) Nghề nghiệp: (9 Nơi làm việc: ¢) Ngày tháng năm sinh: si December8, 2019 Nam « Khác e_ Giao diện đăng ký tạm vắng Léj SốCMT/CCCD: | Mã giấy tạm vắng: (Œ) Nơi tạm trú: ©) Tir ngay: December8, 2019 — Tal (*) Dén ngay: December8, 2019 Tal (*) Ly do: (*) Hủy e oA ? z a Xác nhận n Giao dién quan ly hd khau [6| QUẢN LÝ NHÂN KHẨU - x zm | Ds Trang chu | rsh Nhân Khẩu a PAI Thống : Kê Mã hộ khâu Họ tên chủ hộ Địa nies et TQB002 Nguyén Minh Quan Số Tạ Quang Bửu, quần Hai B Tach HiK TQB001 Trinh Van An $6 Ta Quang Biru, quan Hai B Chuyén uyén TQB003 Nguyễn Tiến Dũng Số Tạ Quang Bửu, quận Hai B TQB004 Trần Văn Nam Số Ta Quang Bửu, quận Hai B | Software Engineering Department - SolCT/HUST CuuDuongThanCong.co m Trang 8/11 https://fb.com/tailieudientucntt Introduction to Software Engineering - Nhập môn Công nghệ phần mềm e_ Giao diện thêm hộ [#) Mã hộ khẩu: €) Mã khu vực: () Địa chỉ: (*) Chu ho: > (") Ngày sinh chủ hộ: €) Số CMT chủ hộ: Thành viên hộ Sửa Họ tên Ngày sinh Quan hệ với chủ hộ Hủy e oA z A Lưu n Giao dién tach khâu {S| Tach ho Nhập mã hộ khẫu Chọn hộ cần tách Mã hộ khâu TQB002 'TQB001 TQB003 Họ tên chủ Địa Nguyễn Minh |Số Tạ Qua Trinh VănAn : Số Tạ Qua Chủ hộ Trần Văn Nam €) Mã khu vực (*) Nguyễn Tiến lSố Tạ Qua | Đla chí @ Trần Văn Nam Mã hộ khẫu (*) Chủ hộ (*) Số Tạ Qua | Chọn người sang hộ Họ tên Trần Văn Nam Những người hộ Ngày sinh Quan hệ v |1980-07-09 |Chủ hộ ht A Be Ps L4 er PA F call ID 26 Delt hồng Ké ~ Giớitính: , Toản ~ Độtuốt Từ: Họ tên Tinh trạng: Toàn => Tub Nă% Tớ: x s den x6 Me Ngày sinh Giới tính Địa 1990.12.07 Nam SỐ Tạ Quang Bưu, Hai 1997-42-23 Nờ Trinh Văn An 27 Trần Thanh Duyén 29 Nguyễn Mưh Quận 1999-09-31 Nam $42 Ta Quang Bou, qué 29 Nguyễn Tiền Oũng 1994-06-03 Nam SỐ Tạ Quang Đờu, 30 VO MF Unh 1965-12-06 N? SỐ Tạ Quang Bu, qua 31 Nguyễn Tiền Đạt 1990-09-09 ham SỐ Tạ Quang Bửu, 32 Nguyễn Trả My 1997-12-12 nN? SỐ Tạ Quang Bửu, | | ˆ Số Tạ Quang Biv, qué Bài tập: Viết code xử lý kiện cho điều khiển hình Ví dụ: hình ứng dụng : Software Engineering Department - SolCT/HUST CuuDuongThanCong.com Trang 10/11 https://fb.com/tailieudientucntt Introduction to Software Engineering - Nhập môn Công nghệ phần mềm mm public MainFramej) í initComponents(j; setTitle("QUAN LÝ NHÂN List KHẨU"); listDanhMuc = new rrayLi3t [|]? listDanhNuc.add(new DanhMucBean("TrangChu", Home, listDanhMuc.addinew DanhMucBean/{"Nhankhau", NhankKhauBtn, listDanhNuc.add(new DanhMucBean/{"Hokhau", listDanhMuc.addinew DanhMucBean/["ThongkKe", MainController controller controller.setView(Home, controller.setEvent = new HokhauBbtn, jJlbNhankKhau)j); jJlbHoKhau)); ThongKeBtn, ]1llhThangqEe] ]? MainController[{jpnbBean, jblTrangChu, (listDanhMuc) jblTrangChu)); this); "TrangChu"); ; setDefaultCloseOperation(JFrame.DO NOTHING ON CLOSE); this.addWindowListener (new Windowddapter({) { @Override public if void windowClosing(WindowEvent e) { (JOptionPane.showConfirmDiagloginull, "Confirm", "Are JOptionPane YES NO OPTION) you == sure 0) to close??", { dispose (); t1]? Nội dung tập tự làm Hoàn thành Thiết kế giao diện hình cho tốn (casestudy) với nội dung: sơ đồ chuyển hình, thiết kế mock-up hình, đặc tả thiết kế giao diện cho hình, triển khai xây dựng giao diện thực NetBeans IDE Phần nội dung nhóm làm vào file docx (báo cáo) Các nhóm chuẩn bị thêm slide powerpoint nội dung Thiết kế giao diện trên, buổi học trình bày HẾT Software Engineering Department - SolCT/HUST CuuDuongThanCong.com Trang 11/11 https://fb.com/tailieudientucntt ... người dùng Bài 1.2 a) Trình bày bước quy trình thiết kế giao diện người dùng? b) Néu tam quan cua thiết kế giao diện người dùng? c)_ Hãy gợi ý số hướng dẫn yếu tố màu sắc việc thiết kế giao diện? ... Nguyên tác thiết kế giao diện người dùng? Lấy người dùng làm trung tâm Giảm tải nhớ máy người dùng Giao diện cần quán (consistent) Tất phương án Những hoạt động trọng thiết kế giao diện người dùng? ...Introduction to Software Engineering - Nhập môn Công nghệ phần mềm Sai d) Để xây dựng giao diện người dùng hiệu quả, nhà thiết kế phải bắt đầu hiểu biết người dùng, bao gồm hồ sơ tuổi,