TRƯỜNG CAO ĐẲNG CƠ ĐIỆN HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN
GIÁO TRÌNH
THIẾT KÊ UI/UX
(Lưu hành nội bộ)
Hà Nội năm 2023
MỤC LỤC
Bài 1. Tổng quan về thiết kế UI/UX ....................................................................... 4
1. Các khái niệm cơ bản về UI/UX ................................................................. 4
2. Cài đặt Figma ............................................................................................... 5
3. Tạo File, Lưu và xuất File trong Figma .................................................... 6
Bài 2. Bố cục thiết kế ................................................................................................ 9
1. Bố cục thiết kế và phối màu ........................................................................ 9
1.1. Bố cục trong thiết kế ............................................................................. 9
1.2. Hòa trộn màu trong thiết kế ..............................................................14
2. Sử dụng Font trong thiết kế .....................................................................16
Bài 3. Làm việc với các công cụ trong Figma ......................................................19
1. Công cụ Move, Hand Tool, Scale ............................................................19
2. Frame, Selection và Slice Tool ................................................................19
3. Các công cụ vẽ cơ bản ...............................................................................19
4. Công cụ Pen Tool , Pencil .........................................................................20
5. Công cụ Text – Tạo Text Style trong thiết kế .........................................21
6. Icon trong Figma .......................................................................................23
7. Component – Instance – Variants ...........................................................24
Bài 4. Constraints - Auto Layout ..........................................................................26
1. Sử dụng Constraints trong thiết kế .........................................................27
2. Sử dụng Auto Layout trong thết kế ........................................................28
2.1. Giới thiệu Auto layout ........................................................................28
2.2. Auto Layout và Text ...........................................................................29
2.3. Tạo Auto Layout .................................................................................30
Bài 5. Hiệu ứng trong Figma ................................................................................31
1. Các hiệu ứng Prototypes ...........................................................................31
2. Interactive Components with Variants ...................................................31
3. Smart Animate ...........................................................................................34
Bài 6. Sử dụng Image Slider/Scroll ......................................................................35
1. Đặc điểm Image slider/ Scroll ..................................................................35
2. Các bước thiết kế Image Slide/Scroll .......................................................35
Bài 1. Tổng quan về thiết kế UI/UX
1. Các khái niệm cơ bản về UI/UX
▪ Khái niệm UX : UX là viết tắt của User Experience hay còn gọi là trải
nghiệm người dùng, cũng là một trong những cách thiết kế mà các designer
cần nắm rõ. UX tốt là điều cần thiết để tạo ra các sản phẩm và dịch vụ đáp
ứng nhu cầu của người dùng và cuối cùng là thúc đẩy thành công trong kinh
doanh.
- UX bao gồm tất cả các yếu tố liên quan đến cảm nhận, tương tác, học
hỏi của người dùng với một công ty, dịch vụ hay sản phẩm của công ty
đó.
- Nhiệm vụ của UX là cải thiện sự đơn giản hoá, tối ưu khả năng sử dụng,
tạo ra sự tương tác dễ dàng, tăng sự thỏa mãn trong cảm nhận của người
sử dụng.
- Thiết kế UX liên quan đến hiểu hành vi, nhu cầu, cảm nhận và trải
nghiệm của người dùng, tiếp đến là tiến hành tạo wireframe và
prototype, đồng thời lặp lại các thiết kế để tạo ra trải nghiệm tích cực,
trực quan, hiệu quả và thú vị cho người sử dụng khi tương tác với tổng
thể sản phẩm.
▪ Định nghĩa UI : UI là viết tắt của User Interface hay còn gọi là giao diện
người dùng. Trong khi UX tối ưu hóa sản phẩm để sử dụng hiệu quả và thú
vị thì UI đề cập đến bố cục đồ họa của một ứng dụng hoặc một trang web
thông qua đó người dùng tương tác với hệ thống. Thiết kế giao diện người
dùng tập trung vào việc tạo ra các giao diện trực quan và hấp dẫn cho phép
người dùng dễ dàng tương tác và điều hướng dịch vụ cũng như sản phẩm
- Nhà thiết kế giao diện người dùng chịu trách nhiệm thiết kế các thành
phần như nút, biểu tượng, menu và các thành phần hình ảnh khác mà
người dùng tương tác.
- Mục tiêu của UI là thiết kế, bố trí các thành phần trên 1 giao diện tổng
thể tạo tính nhất quán, phù hợp. Sự đa dạng trong thiết kế UI cũng góp
phần ảnh hưởng đến trải nghiệm của người dùng. UI tốt bổ sung cho
UX bằng cách cung cấp cho người dùng giao diện hiệu quả và thẩm mỹ
giúp họ đạt được mục tiêu của mình với sản phẩm hoặc dịch vụ.
▪ Sự khác biệt giữa thiết kế UI_UX là gì?
2. Cài đặt Figma
Figma là một phần mềm thiết kế đồ họa vector và xây dựng giao diện người
dùng (UI) trực tuyến, được sử dụng rộng rãi trong lĩnh vực thiết kế đồ họa, đặc
biệt là thiết kế giao diện cho các ứng dụng web và di động.
Figma là một công cụ thiết kế giao diện người dùng (UI) và trải nghiệm người
dùng (UX) mạnh mẽ, được sử dụng rộng rãi bởi các nhà thiết kế trên toàn thế
giới. Được phát triển dưới dạng một ứng dụng web, Figma cho phép người dùng
thiết kế, tạo prototype, và cộng tác trong thời gian thực
▪ Các bước cài đặt Figma
Bước 1: Tải phần mềm Figma về máy tính
Bước 2: Ở phần Desktop app có thể chọn Desktop app for
macOS hoặc Desktop app for Windows tùy theo hệ điều hành trên máy tính
