NHÓM 10

ĐỀ TÀI SỐ 4

SỬ DỤNG
MOCKPLUS
ĐỂ THIẾT KẾ
GIAO DIỆN
MOBILE
 1. Tổng quan tình hình nghiên cứu

Xã hội ngày nay càng phát triển cuốn theo ngành công nghệ
thông tin (CNTT) cũng thay đổi nhanh chóng theo.
CNTT góp phần rất lớn vào sự phát triển của nền kinh tế thế
giới. Nó giúp chúng ta đơn giản hóa các công việc trong đời xong
I. MỞ ĐẦU và kết nối với nhau dễ dàng hơn.
Vì thế yêu cầu các lập trình viên tạo ra các công cụ phần mềm
giúp con người tương tác với máy tính dễ dàng hơn.
Vậy nên đề tài tương tác người – máy (Human – Computer
interaction HCL) hiện được chú trọng trong việc thiết kế ra những
sản phẩm đáp ứng được nhu cầu của người sử dụng.
2. Tính cấp thiết, ý nghĩa khoa học và thực tiễn

Ý tưởng sử dụng một công cụ tạo mẫu để thiết kế, kiểm tra và
nhận phản hồi về giao diện ứng dung trên nền tảng web
Mục đích nhằm giúp người sử dụng thuận tiện hơn trong việc
tương tác với hệ thống, nhận được các đóng góp trong phân đoạn
thiết kế ứng dụng để tạo ra những sản phẩm chất lượng, nhiều
người dùng.
 Sau thời gian tiếp thu kiến thức môn
Tương tác người – máy, chúng em muốn
xây dựng Giao diện MOBILE để có thể áp
dụng được kiến thức đã học trong thời gian
qua. Vì vậy đề tài chúng em chọn để tìm
hiểu và thực hiện là “ Mockplus trong xây
dựng giao diện Mobile “
 II: CƠ SỞ LÝ THUYẾT – LÀM QUEN
VỚI PHẦN MỀM

1. Mockplus

Mockplus là một website với nhiều tính năng với giao diện đơn giản, dễ sử dụng, tối ưu hóa
chức năng với cả những người không có nhiều kinh nghiệm.

Web sở hữu hệ thống chủ đề đa dạng phong phú.

Nền tảng web phù hợp với hầu hết mọi hệ điều hành phổ biến trên máy tính và điên thoại.
2. Giao diện và các chức năng

Mỗi tệp Mockplus Classic (có phần mở rộng tệp .mp) đại diện cho một dự án và có thể chứa
nhiều Mockplus Classic khác nhau.
Với Mockplus Classic, bạn có thể dễ dàng tạo các nguyên mẫu ứng dụng hoặc web thực tế
nhưng đầy đủ tính tương tác trong vòng vài phút mà không cần lập trình.
Khi đăng nhập vào ứng dụng
Mockplus dành cho máy tính
bằng tài khoản có thể tạo hai
loại dự án: Private project và
Collaboration project.

• Chọn Private project nếu

định làm mọi thứ một mình;

• Chọn Collaboration project

nếu muốn làm việc nhóm trên
cùng một dự án đồng thời.
 Sau khi chọn Private project , Collaboration
project sẽ được đưa đến giao diện lựa chọn dự án,
bạn có thể chọn dự án Mobile, Tablet, Web và
Desktop tùy ý. Đối với phác thảo tùy chỉnh, có thể
chọn giữa Bảng trắng và Tùy chỉnh:
 Giao diện làm
việc của
Mockplus Classic
được thành nhiều
thành phần :

Thanh công cụ Không gian làm Bảng điều khiển Bảng tài sản
Bảng thành phần
(Toolbar) việc dự án (Property Panel)
Giao diện làm việc
• Thanh công cụ (Top Toolbar)
Có thể truy cập các tùy chọn phổ biến để tạo điều kiện thuận lợi cho quá trình thiết kế với thanh
công cụ. Các công cụ sau (từ trái sang phải): Lưu, Làm lại, Hoàn tác, Nhóm , Bỏ nhóm, Định dạng
họa sĩ , Bộ lặp , Tự động điền dữ liệu , Xem trước, Xuất bản và chia sẻ, Luồng giao diện người
dùng, Xuất dữ liệu
• Bảng điều khiển cây dự án ( Project Tree
Panel )
Project Tree cho phép bạn quản lý các trang
dự án bằng cách kéo và thả đơn giản. Cũng có
thể tạo các thư mục để sắp xếp và quản lý các
trang của mình tốt hơn.
• Bảng thành phần (Component Panel)
Bảng thành phần chứa tất cả các thư viện thành phần được
tạo sẵn, sẵn sàng sử dụng (bao gồm hơn 200 thành phần). Tất
cả các thành phần được tổ chức thành các thư viện nhỏ hơn,
như Tương tác, Mở rộng, Bố cục, Di động, Tĩnh, Biểu đồ và
Đánh dấu. Có thể mở rộng và thu gọn các thư viện này hoặc
sử dụng trực tiếp thanh tìm kiếm để tìm thành phần mong
muốn .
• Bảng biểu tượng (Icon Panel)

Bảng biểu tượng cung cấp hơn 3000 biểu tượng

trong mọi lĩnh vực của cuộc sống. Cũng có thể sử
dụng thanh tìm kiếm để tìm một biểu tượng cụ thể.
• Bảng điều khiển thư viện (My Library
Panel)

Bảng điều khiển thư viện thu thập hoặc có

thể giúp nhập tất cả các thành phần, nhóm,
thư viện giao diện người dùng và các tài
nguyên thiết kế yêu thích và sử dụng lại
chúng một cách tự do trên các dự án hoặc
trang khác nhau bằng cách kéo và thả đơn
giản. Với bảng điều khiển này, vẫn có thể
đồng bộ hóa thư viện trên các thiết bị khác
nhau để sử dụng lại nhanh chóng, đăng ký và
tải xuống thư viện thành phần trực tuyến chỉ
trong vài cú nhấp chuột.
 Ngoài ra còn một số thành phần giao diện như:

Component Style Library Bảng Tương Tác Bảng liên kết Property Panel
 1. Hướng dẫn thiết kế giao diện bằng Mockplus
III: HƯỚNG
Bước 1: Tạo một project mới
DẪN CÁCH Cách 1:
LÀM GIAO • Chọn Mockplus Classic
DIỆN BẰNG
MOCKPLUS
• Tiếp theo chọn Persona Project

• Chọn New Project

• Cách 2: Chọn tổ hợp phím
“Ctrl + Shift + N “
Sau khi tạo mới 1 Project
xong trên thanh tiêu đề sẽ
hiển thị ra các trường hợp
thiết kế giao diện như web
app, mobile app hoặc thiết
kế Desktop. Chúng ta chỉ
cần chọn một thiết kế bạn
muốn sử dụng, và chọn kích
thước hợp lý.
Ưu điểm của Mockplus:

• Mockplus là một trong những website phổ biến được người dùng tin tưởng, sử dụng
trong việc tạo ra các mockup.

• Giao diện web được đánh giá là đơn giản, dễ sử dụng và tối ưu hóa các chức năng kể cả
với những người không nhiều kinh nghiệm hay mới bắt đầu

• Với template đa dạng, phong phú, đây là sự lựa chọn lí tưởng trong việc tạo những
mockup cơ bản

• Nền tảng web thích ứng hầu hết với các hệ điều hành cả trên máy tính lẫn điện thoại.
Nhược điểm:

• Bản free bị giới hạn tính năng. Nếu muốn sử

dụng đầy đủ tính năng người dùng sẽ phải tốn
ít nhất 129$/năm hoặc mua trọn đời giá 399$.

• Mockplus chưa hỗ trợ nền tảng Linux.

 Giao diện sẽ có 4 giao diện chính:

Home
2 GIỚI
THIỆU GIAO
DIỆN Page 2
MOBILE
Page 3

Page 4
 Ở trang giao diện Home hiện thị đồng hồ, lịch , thanh
tìm kiếm , phần trăm còn lại của pin , check list để không
quên những việc quan trọng và một số ứng dụng hay
dùng như google , thời tiết , map
Trên đầu ở mỗi trang có thanh thông báo trạng thái
hiện wifi , bluetooth , thời gian , phần trăm pin
 Ở trang giao diện page 2 chúng em sẽ để hiện các
tiện ích như gọi điện, nhắn tin, chụp ảnh, ảnh và các ứng
dụng nổi tiếng như facebook , messerger , instagram
gmail và cửa hàng ứng dụng của dòng iphone
 Ở trang giao diện page 3 chúng em có thể thêm vào
các hình ảnh các ứng dụng nổi tiếng của các ngân hàng ,
ứng dụng giúp chụp ảnh, một số để nghe nhạc , ứng
dụng để đặt xe , giao hàng,..
 Ở trang giao diện page 4 chúng em để một số hình
ảnh một sô ứng dụng cửa hàng trực tuyến nổi tiếng như
tiki , shoppe , một số nơi lưu trữ video
 Sau khi tiến hành tìm hiểu về Mockplus cũng như
được thực hiện các thao tác để tạo giao diện trên
phần mềm, chúng em đã nắm bắt được những kiến
thức cũng như hiểu được tầm quan trọng của
Tương tác Người – Máy tới trải nghiệm và cảm xúc
người sử dụng.
Nhưng trên hết chúng em đã nắm bắt được những
ưu điểm và nhược điểm của phần mềm Mockplus
để hoàn thiện được đề tài này. Để thiết kế được ứng
I V. K Ế T dụng có giao diện đẹp mắt, dễ sử dụng nên trong
thời gian tới chúng em cố gắng phát triển ngày
LUẬN VÀ càng hoàn thiện hơn.
Qua quá trình thực hiện, chúng em không thể
HƯỚNG PHÁT tránh được những thiếu sót trong quá trình thực
hiện đề tài. Chúng em mong được những lời nhận
TRIỂN xét và góp ý của thầy cùng toàn thể các bạn.
CẢM ƠN THẦY
CÔ VÀ CÁC BẠN
ĐÃ THEO DÕI!!!
Nhóm 10:
•Nhóm trưởng : Nguyễn Phúc Huy ( 1721050031 )
• Ngô Xuân Đạt ( 1621050059)
• Lưu Đình Dương ( 1721050157)
• Nguyễn Duy Tân (1721050343)
• Phạm Văn Minh (17210500492)