Seminar

Nhóm 21:
1. Phạm Nguyễn Quỳnh Nhi – 19521968
Giảng viên hướng dẫn:
2. Thị Kim Phương – 19522068
Tạ Thu Thủy 3. Nguyễn Thị Minh Thư – 19522308
4. Trần Thị Thanh Tuyền – 19522503
IE106 - Thiết kế giao diện người dùng 1
Nôị dung
Tổng quan

Tính năng

Cài đặt

So sánh

Kết luâ ̣n
IE106 - Thiết kế giao diện người dùng 2
 Tổng quan
Giới thiêụ

InVision là mô ̣t công cụ tạo

mẫu giao diê ̣n tương tác.
Nhanh chóng và dễ dàng
tạo ra các mockup tương
tác.
Giúp viê ̣c trình bày các thiết
kế dễ dàng và hiê ̣u quả hơn.

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

 Tổng quan Chia sẻ thiết kế trực tuyến
7 với các tính năng

Thuyết trình với Các trạng thái khi di

1 6
khách hàng chuyển chuô ̣t –
Hover States
Lợi ích,
Kiểm soát
công
2 dụng Kiểm soát
thiết kế
5 phiên bản và
đồng bô ̣ hóa
Tạo danh sách công 3 Tạo prototype
viê ̣c phải làm theo thời 4 giao diê ̣n cho
gian thực thiết bị di đô ̣ng
IE106 - Thiết kế giao diện người dùng 4
 Tổng quan

Yêu cầu hê ̣ thống

1. Desktop operating systems: macOS 10.11 trở lên, Windows 10 trở lên với bô ̣ xử
lý Intel hoă ̣c AMD 64 bit.

2. Browsers: Được đề xuất cho trình xem tài liê ̣u, yêu cầu 2 phiên bản mới nhất đối
với Firefox, Chrome và Safari.

3. Mobile operating systems: iOS 9+ và Android OS 6.0+.

4. Yêu cầu tối thiểu cho card đồ họa: Intel HD Graphics 5000 trở lên, Nvidia
GeForce GT 650M trở lên, ATI Radeon HD 4850 trở lên.

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

Tổng quan Các phiên bản hiêṇ có

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

Nôị dung
Tổng quan

Tính năng

Cài đặt

So sánh

Kết luâ ̣n
IE106 - Thiết kế giao diện người dùng 7
 Tính năng

Tạo nguyên
Thay đổi kích
thước, cắt
mẫu
responsive với
Tính năng
hình ảnh mọi thứ theo
tỷ lệ %

Phản chiếu Tính năng

prototype trực chuyển đổi
tiếp trên điện giữa các chủ đề
thoại sáng, tối

Phản chiếu Cuộn nguyên

prototype trực mẫu trong khi
tiếp trên điện cố định các
thoại phần tử khác IE106 - Thiết kế giao diện người dùng 8
Nôị dung
Tổng quan

Tính năng

Cài đặt

So sánh

Kết luâ ̣n
IE106 - Thiết kế giao diện người dùng 9
 Cài đặt

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

Nôị dung
Tổng quan

Tính năng

Cài đặt

So sánh

Kết luâ ̣n
IE106 - Thiết kế giao diện người dùng 11
 VS
So sánh

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

So sánh
Tính năng:
• Tính tương thích
• Hỗ trợ làm viê ̣c nhóm hieueuj quả
Ra măt năm 2016, giao diê ̣n thân
• Chia sẻ file đơn giản
thiê ̣n, dễ sử dụng.
• Tính năng feedback thuâ ̣n tiê ̣n
Các thương hiê ̣u sử dụng: Microsoft,
• Mọi thứ được lưu trữ online
Twitter, GitHub, Dropbox, …
• Kho Plugin phong phú
• File versioning
• Prototype tích hợp sẵn

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

So sánh

Giống nhau

 Các thành phần lồng nhau.  Tạo thiết kế màn hình giao diê ̣n
người dùng tĩnh.
 Cấu trúc trực quan của các lớp
và trang.  Gói cơ bản miễn phí.

 Giá trị giống như CSS cho các  Tích hợp của bên thứ 3.
lớp.

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

 So sánh

Khác nhau

  Ra mắt 2018
Ra mắt 2016

  Dùng để tạo mẫu nhiều hơn

Dùng để thiết kế giao diê ̣n nhiều hơn

  Nhiều công cụ dành riêng cho tác vụ và

Tất cả tính năng ở cùng 1 nơi
tích hợp bên thứ 3
 Ảnh dô ̣ng chỉ có sẵn cho macOS
 Tính năng ảnh đô ̣ng khá tốt
 Khả năng cô ̣ng tác thời gian thực tương
 Không có khả năng cô ̣ng tác “Nhiều
tự Google Docs
người cùng làm” của Figma.
IE106 - Thiết kế giao diện người dùng 15
 So sánh

Khác nhau

  Không có tổng quan trực quan về các

Tạo mô ̣t thu nhỏ trực quan của từng thành
phần thành phần

  Gă ̣p sự cố và thời gian phản hồi châ ̣m với

Phản hồi nhất quán và hiển thị các thiết
kế mô ̣t cách trơn tru các nguyên mẫu từ trung bình đến phức
tạp
 Là lựa chọn tốt nhất để tạo mẫu nhanh là
 Nhiều thương hiê ̣u quốc tế nổi tiếng sử
lă ̣p lại nhanh trong các nhóm lớn hơn
dụng

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

So sánh

Khác nhau

 Microsoft, Twitter, Dribble, Slack,  HubSpot, Linkedln, Sony, Visa,

Dropbox, GitHub. GoDaddy, Atlassian

 Không gă ̣p sự cố Import SVG  Xảy ra sự cố Import SVG

 Từ 0-45$/ tháng  Từ 0-99$/ tháng

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

So sánh

VS

Khác nhau về phong cách

Sự lựa chọn phụ thuô ̣c vào như cầu của dự án, sở thích quy
trình làm viê ̣c và kinh nghiê ̣m của các nhà thiết kế

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

Nôị dung
Tổng quan

Tính năng

Cài đặt

So sánh

Kết luâ ̣n
IE106 - Thiết kế giao diện người dùng 19
Ưu điểm,
Hướng
nhược
phát triển
điểm
Kết luâ ̣n
IE106 - Thiết kế giao diện người dùng 20
Kết luâ ̣n

Ưu điểm

Nhược điểm.

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

Kết luâ ̣n

Hướng phát triển

 Cần phải tối ưu hơn: giảm tiêu hao tài nguyên và tăng tốc độ trên các nền tảng
ứng dụng web hoặc mobile.
 Cần có cơ chế theo dõi sự thay đổi.
 Cải tiến giao diện giúp người dung có trải nghiệm tốt hơn.
 Sửa các lỗi còn phát sinh khi cập nhật.
 Cải thiện sự chuyển động.
 Có thể tích hợp với Illustrator để đăng tải các thiết kế mới nhất lên.
 Nâng cấp để hỗ trợ cả nhóm khách hàng không chuyên về thiết kế.
 Thêm khả năng điều hướng động đến đường link của người dùng.
IE106 - Thiết kế giao diện người dùng 22
 TÀI LIỆU THAM KHẢO

[1] “InVision Review: Pricing, Pros, Cons & Features,” CompareCamp.com, Apr. 12, 2019.
https://comparecamp.com/invision-review-pricing-pros-cons-features/ (accessed Nov. 05, 2021).
[2] “9 features you might have missed in InVision Studio Early Access.”
https://www.learninvisionstudio.com/tips-and-tutorials/early-access-tutorials (accessed Nov. 05,
2021).
[3] “InVision Reviews & Ratings 2021,” TrustRadius.
https://www.trustradius.com/products/invisionapp/reviews (accessed Nov. 05, 2021).

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

Cảm ơn cô và các bạn
đã lắng nghe!

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