Nghiên cứu xây dụng sản phẩm mẫu và thiết kế giao diện người dùng cho ứng dụng di động.

BỘ GIÁO DỤC VÀ ĐÀO TẠO

ĐẠI HỌC ĐÀ NẴNG

TRƯỜNG ĐẠI HỌC SƯ PHẠM

KHOA TIN HỌC

Đề Tài:

NGHIÊN CỨU XÂY DỰNG SẢN PHẨM MẪU

VÀ THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

CHO ỨNG DỤNG DI ĐỘNG

Giảng viên hướng dẫn : Nguyễn Thanh Tuấn

Sinh viên thực hiện : Nguyễn Diễm Thanh

Lớp : 10CNTT3

Niên khóa : 2010 - 2014

Đà Nẵng – 2014

Luận Văn Tốt Nghiệp

SVTT: Nguyễn Diễm Thanh

LỜI CAM ĐOAN

Tôi xin cam đoan đây là công trình nghiên cứu của bản thân. Các nội dung nghiên

cứu và kết quả trong đề tài này là trung thực và chưa từng được ai công bố trong bất cứ

công trình nghiên cứu nào trước đây. Sản phẩm của quá trình nghiên cứu này nằm

trong một phần dự án tôi được tham gia của công ty QGS Việt Nam và đã được sự

đồng ý của công ty khi sử dụng.

Sinh viên thực hiện

Nguyễn Diễm Thanh

Luận Văn Tốt Nghiệp

SVTT: Nguyễn Diễm Thanh

LỜI CẢM ƠN

Sau thời gian dài lựa chọn đề tài, nghiên cứu, tổng hợp và viết báo cáo về vấn

đề xây dựng sản phẩm mẫu và thiết kế giao diện ứng dụng tôi đã hoàn thành luận văn

nghiên cứu của mình.

Tôi xin chân thành cảm ơn Khoa Tin Học, trường Đại Học Sư Phạm Đà Nẵng

đã tạo điều kiện cho tôi thực hiện đề tài luận văn tốt nghiệp này. Xin cảm ơn Thầy

Nguyễn Thanh Tuấn, người đã tận tình hướng dẫn, chỉ bảo tôi trong suốt thời gian

thực hiện đề tài này. Trong thời gian làm việc với Thầy, tôi không những học hỏi được

nhiều kiến thức bổ ích mà còn học được tinh thần làm việc, thái độ nghiên cứu khoa

học nghiêm túc của Thầy. Xin gửi lời cảm ơn chân thành đến gia đình, ba mẹ và bè

bạn vì đã luôn là nguồn động viên to lớn, giúp đỡ tôi vượt qua những khó khăn trong

suốt quá trình làm việc.

Mặc dù đã cố gắng hoàn thiện luận văn với tất cả sự nỗ lực của bản thân, nhưng

chắc chắn không thể tránh khỏi những thiếu sót. Kính mong quý Thầy Cô tận tình chỉ

bảo.

Một lần nữa, tôi xin chân thành cảm ơn và luôn mong nhận được sự đóng góp

quý báu của tất cả mọi người.

Đà Nẵng, tháng 5/2014

Nguyễn Diễm Thanh

Luận Văn Tốt Nghiệp

SVTT: Nguyễn Diễm Thanh Trang i

MỤC LỤC

LỜI CÁM ƠN

DANH MỤC HÌNH

DANH MỤC BẢNG BIỂU

MỞ ĐẦU.........................................................................................................................1

A. Đặt vấn đề.......................................................................................................................1

a. Lời mở đầu .................................................................................................................1

b. Mục tiêu......................................................................................................................1

c. Phạm vi nghiên cứu ....................................................................................................2

B. Ý nghĩa khoa học thực tiễn.............................................................................................2

C. Phương pháp nghiên cứu ................................................................................................2

D. Bố cục luận văn ..............................................................................................................2

Chƣơng 1. TỔNG QUAN..............................................................................................4

1.1. Khái niệm ứng dụng di động ......................................................................................4

1.2. Quá trình phát triển ứng dụng di động .......................................................................4

1.2.1. Ứng dụng di động trước đây.................................................................................4

1.2.1. Ứng dụng di động hiện nay ..................................................................................5

1.2.2. Ứng dụng di động trong tương lai ........................................................................6

1.2.3. Sự tăng trưởng của thị trường điện thoại di động.................................................7

1.3. Các vấn đề trong phát triển ứng dụng di động ...........................................................8

1.4. Agile ...........................................................................................................................9

1.4.1. Agile là gì? ...........................................................................................................9

1.4.2. Tại sao phát triển ứng dụng theo hướng Agile là hợp lý? ....................................9

1.4.3. Các giá trị khi áp dụng phương pháp Agile vào phát triển dự án.........................9

1.5. Kết chương ...............................................................................................................10

Chƣơng 2. XÂY DỰNG SẢN PHẨM MẪU VÀ THIẾT KẾ GIAO DIỆN CHO

ỨNG DỤNG DI ĐỘNG...............................................................................................11

2.1. Xây dựng sản phẩm mẫu cho ứng dụng di động ......................................................11

2.1.1. Sản phẩm mẫu ....................................................................................................11

a. Sản phẩm mẫu ....................................................................................................11

b. Tại sao cần xây dựng sản phẩm mẫu? ................................................................11

c. Tiêu chuẩn đánh giá sản phẩm mẫu....................................................................11

d. Độ trung thực của sản phẩm mẫu .......................................................................11

Luận Văn Tốt Nghiệp

SVTT: Nguyễn Diễm Thanh Trang ii

e. Phân loại .............................................................................................................12

f. Kỹ thuật xây dựng sản phẩm mẫu bằng máy và các công cụ hỗ trợ ......................12

2.1.2. Quy trình xây dựng sản phẩm mẫu....................................................................14

a. Quá trình nghiên cứu ..........................................................................................14

b. Xây dựng sơ đồ Mindmap ..................................................................................15

c. Xây dựng User Story ..........................................................................................15

d. Xây dựng sản phẩm mẫu ....................................................................................15

e. Xác định luồng dữ liệu .......................................................................................15

f. PRD........................................................................................................................15

2.1.3. Các công cụ hỗ trợ xây dựng sản phẩm mẫu......................................................16

a. Mindject MindManager......................................................................................16

b. Axure ..................................................................................................................16

c. Draw.io ...............................................................................................................17

2.2. Thiết kế giao diện người dùng cho ứng dụng di động..............................................17

2.2.1. Giao diện người dùng .........................................................................................17

2.2.2. Các xu hướng xây dựng giao diện người dùng qua các thời kỳ .........................17

2.2.3. Quy trình thiết kế giao diện người dùng.............................................................19

a. Xác định người dùng và ngữ cảnh sử dụng sản phẩm........................................20

b. Thiết kế cấu trúc và định hướng giao diện .........................................................20

c. Thiết kế bố cục của giao diện .............................................................................21

d. Thiết kế giao diện trực quan ...............................................................................21

e. Chuyển giao diện trực quan vào mẫu thử nghiệm của sản phẩm .......................21

f. Kiểm tra khả năng sử dụng của mẫu thử nghiệm...................................................21

g. Đặc tả giao diện ..................................................................................................22

2.2.4. Các mẫu thiết kế cho ứng dụng di động .............................................................22

a) Navigation (Thanh điều hướng) .........................................................................22

b) Forms (Các dạng cửa sổ )...................................................................................23

c) Search, Sort & Filter (Tìm kiếm, phân loại và lọc)............................................23

d) Tools (Công cụ)..................................................................................................23

e) Invitation (Lời mời)............................................................................................23

f) Feedback & Affordance (Phản hồi và tương tác)...............................................23

2.2.5. Các công cụ hỗ trợ thiết kế giao diện người dùng..............................................24

a. Giấy và bút .........................................................................................................24

b. Lựa chọn màu sắc với dribbble.com...................................................................24

c. Adobe Photoshop................................................................................................25

2.3. Kết chương ...............................................................................................................25

Luận Văn Tốt Nghiệp

SVTT: Nguyễn Diễm Thanh Trang iii

Chƣơng 3. XÂY DỰNG SẢN PHẨM MẪU VÀ THIẾT KẾ GIAO DIỆN NGƢỜI

DÙNG CHO DỰ ÁN TAXI HOPPER.......................................................................26

3.1. Giới thiệu về dự án Taxi Hopper..............................................................................26

3.1.1. Dự án Taxi Hopper.............................................................................................26

a. Taxi Hopper là gì? ..............................................................................................26

b. QUp Taxi............................................................................................................27

c. QUp Taxi Touch.................................................................................................27

d. QUp Dispatching System ...................................................................................27

3.1.2. Các chức năng chính của Taxi Hopper...............................................................27

3.2. Xây dựng sản phẩm mẫu cho dự án Taxi Hopper ....................................................27

3.2.1. Nghiên cứu thị trường ........................................................................................27

a. Yellow Cab Seattle .............................................................................................28

b. Ping Taxi ............................................................................................................28

c. Uber ....................................................................................................................28

d. Kết quả của quá trình nghiên cứu.......................................................................29

3.2.2. Xây dựng Mind map...........................................................................................30

3.2.3. Xây dựng User Story ..........................................................................................31

3.2.4. Xây dựng sản phẩm mẫu ....................................................................................32

3.2.5. Xác định luồng dữ liệu của ứng dụng.................................................................34

3.3. Thiết kế giao diện người dùng cho dự án Taxi Hopper............................................37

3.3.1. Giao diện của Qup Taxi Touch...........................................................................37

3.3.2. Giao diện của Qup Taxi......................................................................................39

3.4. Kết chương ...............................................................................................................39

KẾT LUẬN

PHỤ LỤC .......................................................................................................................1

Phụ Lục 1. Mô tả thêm về các ứng dụng tương tự qua hình ảnh ứng dụng thực ...................1

a. Yellow Cab Seattle ...............................................................................................1

b. Ping Taxi ..............................................................................................................2

c. Uber ......................................................................................................................4

Phụ Lục 2. Sơ đồ Mindmap chi tiết của ứng dụng Qup Taxi và Qup Taxi Touch.................7

a. QUP Taxi..............................................................................................................7

b. QUP Taxi Touch...................................................................................................8

Phụ Lục 3. User story của ứng dụng Qup Taxi và Qup Taxi Touch ....................................10

Phụ Lục 4. Các thành phần chính trong thiết kế giao diện một ứng dụng di động ..............11

a. Navigation ..........................................................................................................11

b. Forms..................................................................................................................14

Luận Văn Tốt Nghiệp

SVTT: Nguyễn Diễm Thanh Trang iv

c. Search, Sort & Filter...........................................................................................16

d. Tools...................................................................................................................19

e. Invitation.............................................................................................................21

f. Feedback & Affordance .........................................................................................24

g. Các lỗi thường gặp nên tránh..............................................................................26