Thiết kế giao diện người dùng

Nguyễn Thị Hà, Quyên

dc.contributor.author	Nguyễn Thị Hà, Quyên
dc.date.accessioned	2023-03-31T03:34:51Z
dc.date.available	2023-03-31T03:34:51Z
dc.date.issued	2023
dc.identifier.uri	http://data.ute.udn.vn:8080/jspui/handle/123456789/892
dc.description.abstract	Học phần này tập trung giới thiệu những kiến thức, kỹ năng liên quan đến quá trình thiết kế giao diện cho các ứng dụng trực quan giúp người dùng có khả năng trao đổi trực tiếp với máy tính, thiết bị điện tử thông qua các nút bấm, thanh trượt, ô nhập chữ,… Bên cạnh việc giới thiệu các vấn đề lý thuyết, học phần yêu cầu sinh viên vận dụng kiến thức để thiết kế giao diện cho các nhiệm vụ cụ thể thông qua các công cụ thiết kế giao diện phổ biến như Figma, GUI Design Studi, Balsamiq, … hoặc trên chính các framework hỗ trợ ngôn ngữ lập trình.	en_US
dc.description.tableofcontents	MUC LUC CHƯƠNG 1. TỔNG QUAN THIẾT KẾ GIAO DIỆN ......................................................1 1.1. Các khái niệm............................................................................................................ 1 1.1.1. Tương tác người máy (HCI)................................................................................1 1.1.2. Giao diện người dùng (UI) ..................................................................................1 1.1.3. Trải nghiệm người dùng (UX).............................................................................2 1.2. Nguyên tắc thiết kế giao diện.................................................................................... 3 a. Người dùng dễ thao tác........................................................................................3 b. Người dùng ít phải nhớ........................................................................................3 c. Đảm bảo sự quen thuộc của người dùng .............................................................4 d. Tối thiểu hóa sự bất ngờ ......................................................................................4 e. Khả năng phục hồi...............................................................................................4 f. Tính đa dạng ........................................................................................................4 g. Sắp xếp một cách đúng đắn .................................................................................4 h. Phối màu hợp lý, font chữ chuẩn, hình ảnh chất lượng.......................................5 i. Tăng các ràng buộc..............................................................................................5 j. Thiết kế phải tính đến lỗi.....................................................................................5 1.3. Quy trình thiết kế giao diện....................................................................................... 6 BÀI TẬP .................................................................................................................................7 CHƯƠNG 2. KHẢO SÁT & PHÂN TÍCH YÊU CẦU ......................................................1 2.1. Xác định đối tượng người dùng ................................................................................ 1 2.1.1. Xác định cách mà người dùng tương tác với hệ thống........................................1 2.1.2. Xác định rõ trình độ và kinh nghiệm của người sử dụng hệ thống .....................1 2.1.3. Xác định rõ thể trạng sức khỏe của người dùng..................................................2 2.2. Xác định yêu cầu người dùng.................................................................................... 2 2.2.1. Xác định Actor – Usecase ...................................................................................2 2.2.1.1. Actor (tác nhân) ............................................................................................2 2.2.1.2. Usecase (chức năng hoặc ca sử dụng) ..........................................................3 2.2.2. Xây dựng kịch bản của Usecase..........................................................................4 2.2.2.1. Định nghĩa.....................................................................................................4 2.2.2.2. Mẫu kịch bản ................................................................................................5 BÀI TẬP .................................................................................................................................6 CHƯƠNG 3. THIẾT KẾ GIAO DIỆN - MẪU THỬ .........................................................1 3.1. Các dạng tương tác trong thiết kế giao diện.............................................................. 1 a. Sử dụng dòng lệnh (Command line) ...................................................................1b. Lựa chọn từ thực đơn (Menu Selection) ..............................................................1 c. Điền thông tin (Form Fill in) ...............................................................................2 d. Thao tác trực tiếp (Direct Manipulation) .............................................................2 e. Sử dụng ngôn ngữ tự nhiên..................................................................................2 f. Đối thoại...............................................................................................................2 3.2. Các đặc điểm đồ họa trong thiết kế giao diện............................................................2 a. Tính trực quan......................................................................................................2 b. Thao tác Pick & Click..........................................................................................2 c. Định hướng đối tượng..........................................................................................3 d. Tính thực hiện đồng thời......................................................................................3 3.3. Xác định kích thước màn hình và cách thức input ....................................................4 3.3.1. Kích thước màn hình hiển thị ..............................................................................4 3.3.2. Cách thức input ....................................................................................................4 3.4. Các tiêu chí để có giao diện thỏa mãn người dùng....................................................4 3.4.1. Dữ liệu và nội dung..............................................................................................4 3.4.2. Điều hướng và luồng màn hình............................................................................4 3.4.3. Bố cục dễ chịu về mặt thị giác.............................................................................5 3.4.4. Tính nhấn mạnh và tập trung ...............................................................................5 3.5. Các phần tử màn hình ................................................................................................6 3.5.1. Cửa sổ (Window).................................................................................................6 3.5.2. Thực đơn (Menu) .................................................................................................7 3.5.3. Icon.......................................................................................................................8 3.5.4. Pointer ..................................................................................................................8 3.5.5. Các phần tử điều khiển (Control, hay Component) .............................................8 a. Buttons .................................................................................................................8 b. Toggle Button ......................................................................................................8 c. Caption/Label.......................................................................................................9 d. Textbox/Data Field ..............................................................................................9 e. Password Box.......................................................................................................9 f. TextBlock.............................................................................................................9 g. Rich TextBox .......................................................................................................9 h. ListBox, ListView và ComboBox/Dropdown List ............................................10 i. CheckBox và RadioButton ................................................................................11 j. Multiselect ComboBox ......................................................................................11 k. Grid View/Table ................................................................................................12 l. TreeView............................................................................................................12 m. Menu và Tab...................................................................................................12 n. Toolbar và ActionBar ........................................................................................13 o. NumericUpDown...............................................................................................13 p. DatePicker và DatetimePicker ...........................................................................14q. Pallete ................................................................................................................14 r. ProgressBar........................................................................................................14 s. ImageView/Image Button .................................................................................15 3.5.6. Các phần tử chứa (Container)............................................................................15 a. Form...................................................................................................................15 b. Frame, Panel, Dialog, Scroll Pane.....................................................................15 c. Group box ..........................................................................................................16 d. Flow Layout và Table Layout ...........................................................................16 3.6. Mô tả màn hình giao diện........................................................................................ 17 3.6.1. Các thông tin cần mô tả của một màn hình giao diện .......................................17 3.6.2. Các nhóm giao diện màn hình phổ biến ............................................................18 3.6.2.1. Giao diện cập nhật dữ liệu ..........................................................................18 3.6.2.2. Giao diện thống kê dữ liệu (Statistical Graphic) ........................................18 3.6.3. Mô tả luồng thao tác của người dùng trên giao diện.........................................19 1.1.1.2. Định nghĩa ......................................................................................................... 19 1.1.1.3. Các thành phần trong sơ đồ hoạt động .............................................................. 19 1.1.1.4. Phân loại sơ đồ hoạt động ................................................................................. 20 3.7. Các kiểu giao diện màn hình phổ biến .................................................................... 21 3.7.1. Giao diện dạng Winform hay Windows Form ..................................................22 3.7.2. Giao diện dạng Webform ..................................................................................22 3.7.3. Giao diện ứng dụng di động ..............................................................................24 3.8. Bố cục giao diện ...................................................................................................... 25 3.8.1. Bố cục Z-pattern:...............................................................................................25 3.8.2. Bố cục F-pattern ................................................................................................26 3.8.3. Bố cục hình ảnh toàn màn hình .........................................................................26 3.8.4. Bố cục chia màn hình ........................................................................................27 3.8.5. Bố cục không đối xứng......................................................................................27 3.8.6. Bố cục một cột...................................................................................................28 3.8.7. Bố cục dựa trên hộp...........................................................................................28 3.8.8. Bố cục thẻ..........................................................................................................28 3.8.9. Bố cục tạp chí ....................................................................................................29 3.8.10. Bố cục dải ngang ...............................................................................................29 3.9. Quy trình xây dựng giao diện dạng Webform......................................................... 30 BÀI TẬP ...............................................................................................................................32 CHƯƠNG 4. ĐÁNH GIÁ GIAO DIỆN .............................................................................35 4.1. Các kỹ thuật đánh giá giao diện .............................................................................. 35 4.2. Ý nghĩa của đánh giá giao diện ............................................................................... 354.3. Các tiêu chí đánh giá giao diện................................................................................35 4.4. Những việc cần chuẩn bị trước khi thực hiện đánh giá giao diện ...........................35 4.5. Những việc cần thực hiện trong khi đánh giá giao diện ..........................................36 4.6. Phân tích lại vấn đề, chỉnh sửa và thực hiện đánh giá lại........................................36 BÀI TẬP................................................................................................................................37 CHƯƠNG 5. TRIỂN KHAI CÀI ĐẶT GIAO DIỆN........................................................38 5.1. Các công cụ thiết kế phổ biến..................................................................................38 5.1.1. GUI Design Studio.............................................................................................38 5.1.1.1. Thao tác cơ bản ...........................................................................................38 5.1.1.2. Thao tác nâng cao........................................................................................38 5.1.2. Balsamiq.............................................................................................................38 5.1.2.1. Các thành phần trên Balsamiq.....................................................................39 5.1.2.2. Các tính năng nổi bật của Balsamiq............................................................39 5.1.3. Figma .................................................................................................................39 5.1.3.1. Các tính năng nổi bật của Figma.................................................................39 5.1.3.2. Cài đặt và sử dụng Figma............................................................................40 5.1.3.3. Các thành phần trên giao diện màn hình Figma..........................................41 5.1.4. Adobe XD ..........................................................................................................41 5.1.4.1. Các thành phần trên Adobe XD ..................................................................41 5.1.4.2. Các tính năng nổi bật của Adobe XD .........................................................42 5.2. Sử dụng công cụ thiết kế..........................................................................................42 CHƯƠNG 6. PROTOTYPE CHO GIAO DIỆN...............................................................43 6.1. Thiết lập Interaction cho Prototype .........................................................................44 6.2. Cài đặt giao diện ......................................................................................................44	en_US
dc.language.iso	vi	en_US
dc.title	Thiết kế giao diện người dùng	en_US