Tải bản đầy đủ (.pdf) (126 trang)

Thiết kế ứng dụng di động trên đầu cuối

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.44 MB, 126 trang )

HỌC VIỆN CƠNG NGHỆ BƢU CHÍNH VIỄN THƠNG

IT

BÀI GIẢNG

PT

THIẾT KẾ ỨNG DỤNG TRÊN ĐẦU CUỐI
DI ĐỘNG

THIẾT KẾ VÀ SÁNG TẠO ĐA PHƢƠNG TIỆN
T C GIẢ THS. BÙI THỊ THU HUẾ

Hà nội - 2014


LỜI NĨI ĐẦU
Giáo trình “Thiết kế ứng dụng di động” dùng cho sinh viên tham khảo, thuộc lĩnh vực
công nghệ Đa phương tiện, với hai đơn vị học trình. Nội dung của tài liệu đề cập (i) Tổng
quan về thiết kế ứng dụng di động; (ii) Thiết kế ứng dụng di động; và (iii) Sáng tạo ứng dụng
di động.
Trong vài năm lại đây, ngành phát triển ứng dụng di động đang phát triển rất mạnh mẽ.
Giáo trình lập trình ứng dụng di động đã có rất nhiều và dành cho sinh viên đại học về công
nghệ thông tin. Nội dung giáo trình này thì liên quan đến cả thiết kế tương tác, thiết kế giao
diện và tư duy sáng tạo trong thiết kế ứng dụng di động. Và đặc biệt dành cho sinh viên ngành
thiết kế.
Tài liệu được đánh số chương mục theo chữ số Ả rập. Một số hình vẽ và bảng biểu
trong các chương có giá trị minh hoạ. Một số hình vẽ được trích từ các tài liệu tham khảo, để
tiện đối chiếu và có thơng tin sâu hơn.


IT

Nội dung đã trình bày các vấn đề cơ bản về lĩnh vực thiết kế ứng dụng di động, một số
các nguyên tắc và những vấn đề cần quan tâm khi thiết kế ứng dụng di động. Nội dung tiếp
theo tập trung cụ thể vào quy trình thiết kế, thiết kế giao diện và thiết kế hình ảnh cho ứng
dụng di động. Chương 3 trong giáo trình giới thiệu các case study tiêu biểu về thiết kế sáng
tạo ứng dụng di động cùng với những bài học áp dụng. Trong các chương có những thuật ngữ
được chú thích bằng Tiếng Anh giúp đọc giả hiểu rõ hơn về từ gốc được sử dụng.

PT

Nội dung về ứng dụng di động, một sản phẩm đa phương tiện tương tác gắn liền với
công nghệ. Một số thông tin liên quan đến kĩ thuật, thiết bị chỉ có nghĩa thời đoạn, mang
tính minh họa. Sinh viên có thể sử dụng các thiết bị và phần mềm tương đương để thực hiện
xử lí các dữ liệu đa phương tiện.
Tác giả xin chân thành cám ơn các cán bộ Viện Công nghệ thông tin và truyền thơng
CDIT, Học viện Cơng nghệ bưu chính viễn thơng PTIT đã trợ giúp để hoàn thành tài liệu này.

1


MỤC LỤC
MỤC LỤC ................................................................................................................................. 2
DANH MỤC HÌNH VẼ ............................................................................................................ 6
DANH MỤC BẢNG BIỂU .................................................................................................... 11
CHƢƠNG 1.TỔNG QUAN VỀ THIẾT KẾ ỨNG DỤNG DI ĐỘNG ............................... 12
1.1

Ứng dụng di động .................................................................................................................. 12


1.1.1

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

1.1.2

Phân loại ứng dụng di động.............................................................................................. 12

1.1.2.1

Phân loại ứng dụng di động theo kỹ thuật phát triển. .............................................................. 12

1.1.2.2

Phân loại ứng dụng di động theo ngữ cảnh. ............................................................................ 15

1.1.3

Kho ứng dụng và hệ điều hành di động............................................................................ 19
Kho ứng dụng di động ............................................................................................................. 19

1.1.3.2

Hệ điều hành di động ............................................................................................................... 19

IT

1.1.3.1

1.1.4


Ứng dụng di động trong cuộc sống hàng ngày ................................................................. 20

1.1.5

Đặc điểm của thiết kế ứng dụng di động .......................................................................... 24

1.2

Thiết bị đầu cuối di động ...................................................................................................... 25

1.2.1

Các loại thiết bị di động ................................................................................................... 25
Phân loại theo mục đích sử dụng ............................................................................................. 25

1.2.1.2

Phân loại theo hệ điều hành. ................................................................................................... 28

PT

1.2.1.1

1.2.2

Đặc trưng của thiết bị đầu cuối di động. .......................................................................... 31

1.2.2.1


Đa phần là màn hình cảm ứng ................................................................................................. 31

1.2.2.2

Kích thước màn hình linh hoạt ................................................................................................ 32

1.2.2.3

Giới hạn năng lượng – Pin ....................................................................................................... 35

1.2.2.4

Có tích hợp cảm biến ............................................................................................................... 36

1.2.2.5

Đa phần có định vị ................................................................................................................... 39

1.2.2.6

Có khả năng kết nối ................................................................................................................. 40

1.2.2.7

Một số đặc trưng khác ............................................................................................................. 41

1.2.3

Các dạng tương tác người dùng với thiết bị di động. ....................................................... 45


1.2.3.1

Điều khiển trực tiếp (Entry directional) ................................................................................... 45

1.2.3.2

Focus and Cursor ..................................................................................................................... 45

1.2.3.3

Các phím cứng ......................................................................................................................... 46

1.2.3.4

Accesskey ................................................................................................................................ 47

1.2.3.5

Các cử chỉ trên màn hình. ........................................................................................................ 47

1.2.3.6

Các cử chỉ xúc giác.................................................................................................................. 49

2


1.2.3.7

1.3


Cử chỉ từ xa ............................................................................................................................. 51

Đặc điểm hành vi của ngƣời dùng di động .......................................................................... 52

1.3.1

Tính di động ..................................................................................................................... 52

1.3.2

Dễ ngắt quãng và mất tập trung ....................................................................................... 52

1.3.3

Tính sẵn sàng.................................................................................................................... 53

1.3.4

Tính cộng đồng. ............................................................................................................... 53

1.3.5

Hồn cảnh người dùng ..................................................................................................... 54

1.3.6

Sự nhận dạng .................................................................................................................... 54

1.4


Vòng đời phát triển ứng dụng di động ................................................................................ 54

1.4.1

Xây dựng tưởng............................................................................................................. 55

1.4.2

Thiết kế............................................................................................................................. 56

1.4.3

Phát triển và kiểm thử ...................................................................................................... 56

1.4.4

Phân phối.......................................................................................................................... 57

IT

CHƢƠNG 2.THIẾT KẾ ỨNG DỤNG DI ĐỘNG ............................................................... 59
2.1 Thiết kế phác thảo..................................................................................................................... 59
2.1.1

Vai trò của thiết kế phác thảo ........................................................................................... 59

2.1.2

Kiến trúc thông tin. .......................................................................................................... 60


2.1.3

Wireframe ........................................................................................................................ 60
Các phương pháp để thực hiện wireframe ............................................................................... 61

2.1.3.2

Các bước thực hiện phác thảo Wireframe ............................................................................... 63

PT

2.1.3.1

2.1.4

2.2

Prototype .......................................................................................................................... 65

2.1.4.1

Tạo Prototype trên giấy. .......................................................................................................... 66

2.1.4.2

Tạo Prototype trên máy tính .................................................................................................... 67

Thiết kế giao diện................................................................................................................... 67


2.2.1

Các thành phần của trang ................................................................................................. 67

2.2.1.1

Thanh cuộn (Scroll) ................................................................................................................. 68

2.2.1.2

Khu vực hiển thị phụ (Annunciator Row) ............................................................................... 69

2.2.1.3

Thông báo (Notification) ......................................................................................................... 70

2.2.1.4

Tiêu đề (Title).......................................................................................................................... 71

2.2.1.5

Menu........................................................................................................................................ 73

2.2.1.6

Quảng cáo ................................................................................................................................ 74

2.2.2


Hiển thị thông tin ............................................................................................................. 75

2.2.2.1

Danh sách theo chiều dọc (Vertical List) ................................................................................ 75

2.2.2.2

Băng chuyền (Carousel) .......................................................................................................... 77

2.2.2.3

Lưới (Grid) .............................................................................................................................. 78

3


2.2.2.4

Dải phim (Film Strip) .............................................................................................................. 79

2.2.2.5

Trình chiếu (Slideshow) .......................................................................................................... 80

2.2.2.6

Khơng gian vô tận (Infinite Area) ........................................................................................... 81

2.2.2.7


Danh sách lựa chọn (Select List) ............................................................................................. 82

2.2.3

2.2.3.1

Điều khiển bắt buộc (Imperative control) ................................................................................ 83

2.2.3.2

Điều khiển lựa chọn (Select Control) ...................................................................................... 85

2.2.3.3

Điều khiển tiếp nhận (Entry control) ....................................................................................... 88

2.2.3.4

Điều khiển hiển thị (Display control) ...................................................................................... 89

Thiết kế hình ảnh ................................................................................................................... 90

2.3.1

Cấu trúc hình ảnh ............................................................................................................. 90

2.3.1.1

Nhóm (group) .......................................................................................................................... 90


2.3.1.2

Hệ thống phân cấp (Hierarchy) ............................................................................................... 92

2.3.1.3

Căn chỉnh (alignment) ............................................................................................................. 94

2.3.2

Màu sắc ............................................................................................................................ 94

IT

2.3

Control.............................................................................................................................. 83

2.3.2.1

Tạo sự khác biệt....................................................................................................................... 94

2.3.2.2

Nhấn mạnh .............................................................................................................................. 96

2.3.2.3

Phân loại .................................................................................................................................. 97


2.3.3

Background và icon.......................................................................................................... 97
Background. ............................................................................................................................ 97

2.3.3.2

Icon .......................................................................................................................................... 99

PT

2.3.3.1

CHƢƠNG 3. SÁNG TẠO ỨNG DỤNG DI ĐỘNG. .......................................................... 104
3.1

Sáng tạo ứng dụng với đặc trƣng của thiết bị di động ..................................................... 104

3.2

Case study............................................................................................................................. 106

3.2.1

Case study 1: What’s Shackin’s ..................................................................................... 106

3.2.2

Case study 2: Foodspotting ............................................................................................ 108


3.2.3

Case study 3: Not for Tourists........................................................................................ 111

3.2.4

Case study 4: Convertbot ............................................................................................... 114

3.2.5

Case study 5: Realtor.com.............................................................................................. 116

3.2.6

Case study 6: Twine ....................................................................................................... 117

3.3

Bài tập ................................................................................................................................... 120

3.3.1

Bài tập 1. Xây dựng tưởng .......................................................................................... 120

3.3.2

Bài tập 2. Thiết kế phác thảo .......................................................................................... 121

3.3.3


Bài tập 3 . Thiết kế lại .................................................................................................... 122

3.3.4

Bài tập 4. Tạo Prototype................................................................................................. 123

4


3.3.5

Bài tập 5. Thiết kế đồ họa – Bài tập về nhà.................................................................... 124

PT

IT

TÀI LIỆU THAM KHẢO.................................................................................................... 125

5


DANH MỤC HÌNH VẼ
Hình 1-1: Ba loại kỹ thuật phát triển ứng dụng di động. .......................................................... 12
Hình 1-2: Giao diện ứng dụng Native PicFrame ...................................................................... 13
Hình 1-3: Giao diện ứng dụng dạng Web Forecast.co cung cấp thông tin thời tiết. ................ 14
Hình 1-4: Ứng dụng Hybrid ..................................................................................................... 15
Hình 1-5: Một ví dụ về ứng dụng Utility.................................................................................. 16
Hình 1-6: Ví dụ về ứng dụng Locale ........................................................................................ 16

Hình 1-7: Ví dụ về ứng dụng cung cấp thơng tin ..................................................................... 17
Hình 1-8: Ứng dụng Productivity ............................................................................................. 18
Hình 1-9: Ví dụ ứng dụng Immersive ...................................................................................... 18
Hình 1-10: Thống kê tỷ lệ ứng dụng trên kho ứng dụng của Apple store tháng 7/2012 .......... 21
Hình 1-11: Ứng dụng TeacherKid trên AppStore .................................................................... 21

IT

Hình 1-12: Ứng dụng eClicker Presenter – AppStore .............................................................. 22
Hình 1-13: Ứng dụng Cardiograp ............................................................................................. 22
Hình 1-14: Ứng dụng Name card maker .................................................................................. 23
Hình 1-15: Ứng dụng Sổ thu chi .............................................................................................. 23
Hình 1-16: Ứng dụng Zing MP3 .............................................................................................. 24

PT

Hình 1-17: Ứng dụng Allrecipes.com ...................................................................................... 24
Hình 1-18: P835 WVGA PDA của hãng ASUS ...................................................................... 26
Hình 1-19: MC55 EDA của hãng Motorola ............................................................................. 26
Hình 1-20: Một số điện thoại di động tính năng của hãng Nokia chạy hệ điều hành Series 40
(S40) ................................................................................................................................. 26
Hình 1-21: Một số điện thoại thơng minh ................................................................................ 27
Hình 1-22: Máy tính bảng ........................................................................................................ 27
Hình 1-23: Ultra-Mobile PC sản xuất bởi Gigabyte................................................................. 28
Hình 1-24: Smartwatch của Sony Fan và kính thơng minh Google glass ................................ 28
Hình 1-25: Các loại điện thoại iPhone và iPad......................................................................... 29
Hình 1-26: Một số mẫu điện thoại và tablet chạy Android ...................................................... 30
Hình 1-27: Thiết bị chạy Windows phone ............................................................................... 30
Hình 1-28: Sử dụng mục tiêu lớn cho màn hình cảm ứng........................................................ 32
Hình 1-29: Ví dụ về pop-up menu trong ứng dụng di động ..................................................... 32

Hình 1-30: Kích thước màn hình thiết bị dp............................................................................. 33
6


Hình 1-31: Cài đặt mức độ sáng của màn hình hiển thị ........................................................... 37
Hình 1-32: Thay đổi mức độ sáng của màn hình bằng các phím cứng của thiết bị ................. 37
Hình 1-33: Định hướng của thiết bị làm thay đổi bố cục nội dung trên ứng dụng. .................. 38
Hình 1-34: Marble Maze sử dụng các cảm biến chuyển động để di chuyển các quả bóng bạc
qua mê cung. ..................................................................................................................... 38
Hình 1-35: ProCamera sử dụng cảm biến gia tốc để cải thiện khả năng chụp ảnh. ................. 39
Hình 1-36: Ứng dụng định vị ................................................................................................... 40
Hình 1-37: LinkedIn cho phép người dùng kết nối với các thành viên LinkedIn khác qua
Bluetooth. ......................................................................................................................... 41
Hình 1-38: Ứng dụng Postman cho phép người dùng thêm ảnh vào tấm bưu thiếp ................ 42
Hình 1-39: Ứng dụng Photoshop .............................................................................................. 42
Hình 1-40: Ứng dụng SnapTell ................................................................................................ 43
Hình 1-41: a, Ứng dụng Google search; b, Ứng dụng QuickVoice ......................................... 44

IT

Hình 1-42: Ứng dụng chiếu sáng bằng đèn flash ..................................................................... 44
Hình 1-43: Phím cứng điều khiển trực tiếp .............................................................................. 45
Hình 1-44: ví dụ bộ điều khiển định hướng ............................................................................. 45
Hình 1-45: Ví dụ về các kiểu tương tác con trỏ. ...................................................................... 45

PT

Hình 1-46: Khu vực cho Focus & Cursor................................................................................. 46
Hình 1-47: Các phím cứng ....................................................................................................... 46
Hình 1-48: Sử dụng Accesskey để truy cập nhanh vào danh sách ........................................... 47

Hình 1-49: Các tương tác cử chỉ trên màn hình ....................................................................... 48
Hình 1-50: Các loại cử chỉ Two point action ........................................................................... 49
Hình 1-51: Roll handset (từ màn hình ngửa chuyển sang màn hình úp) .................................. 50
Hình 1-52: Shake handset ......................................................................................................... 50
Hình 1-53: Cử chỉ hướng tới thiết bị cầm tay........................................................................... 50
Hình 1-54: Cử chỉ gần thiết bị .................................................................................................. 51
Hình 1-55: Cử chỉ từ xa ............................................................................................................ 51
Hình 1-56: Mơ hình vịng đời phát triển ứng dụng di động ..................................................... 55
Hình 1-57: Pha xây dựng tưởng ............................................................................................ 55
Hình 1-58: Pha thiết kế ............................................................................................................. 56
Hình 1-59: Pha phát triển và kiểm thử ..................................................................................... 57
Hình 1-60: Pha phân phối ......................................................................................................... 58
Hình 2-1: Information Architecture .......................................................................................... 60
7


Hình 2-2: Wireframe ................................................................................................................ 60
Hình 2-3: Wireframe có thể thực hiện trên giấy nhanh chóng ................................................. 61
Hình 2-4: Tấm kim loại mẫu dùng để thiết kế wireframe ........................................................ 62
Hình 2-5: Sử dụng Template để thiết kế Wireframe ................................................................ 62
Hình 2-6: Mobile Sheet page .................................................................................................... 63
Hình 2-7: Ví dụ mẫu flow cho ứng dụng.................................................................................. 64
Hình 2-8: Wireframe bằng vẽ phác thảo trên mobile sheet ...................................................... 65
Hình 2-9: Wireframe có sử dụng keyboard in sẵn và dán vào khung màn hinh ...................... 65
Hình 2-10: Wireframe thực hiện trên máy tính ........................................................................ 65
Hình 2-11: Prototype trên giấy ................................................................................................. 66
Hình 2-12: Thiết kế rời từng thành phần của giao diện cho bản Prototype.............................. 66
Hình 2-13: Quay video trên bản thiết kế giấy .......................................................................... 67

IT


Hình 2-14: Một số thành phần chủ chốt trên giao diện ứng dụng ............................................ 68
Hình 2-15: Scroll ...................................................................................................................... 68
Hình 2-16: Khu vực hiển thị phụ của màn hình ứng dụng ....................................................... 69
Hình 2-17: Các icon phổ biến trong khu vực hiển thị phụ ....................................................... 70
Hình 2-18 Icon biểu diễn tình trạng pin ................................................................................... 70

PT

Hình 2-19: Sắp xếp các biểu tượng khơng cùng kích thước .................................................... 70
Hình 2-20: Lựa chọn biểu tượng đơn giản nhất cho người dùng ............................................. 70
Hình 2-21: Notification trên ứng dụng Facebook .................................................................... 71
Hình 2-22: Title ln ln được sử dụng trên các trang, cửa sổ, pop-up ................................. 72
Hình 2-23: Title của trang có thể được chọn, tap hoặc kéo ...................................................... 72
Hình 2-24: Hiển thị menu ẩn bằng phím cứng và phím mềm .................................................. 73
Hình 2-25: Menu xuất hiện khi người dùng kéo vào màn hình................................................ 74
Hình 2-26: Menu cố định ln ln được hiển thị ................................................................... 74
Hình 2-27: Quảng cáo được đặt trong trang ............................................................................. 75
Hình 2-28 Vertical list .............................................................................................................. 75
Hình 2-29: Infinite list đang nạp dữ liệu .................................................................................. 76
Hình 2-30: Thumbnail list ........................................................................................................ 76
Hình 2-31: Fisheye list ............................................................................................................. 77
Hình 2-32: Carousel biểu diễn dạng 3D ................................................................................... 77
Hình 2-33: Carousel biểu diễn theo chiều dọc và chiều ngang ................................................ 78
8


Hình 2-34: Biểu diễn thơng tin dạng lưới ................................................................................. 78
Hình 2-35: Tương tác với một item trong grid ......................................................................... 79
Hình 2-36: Kéo khung màn hình để lựa chọn Film strip .......................................................... 79

Hình 2-37: Tương tác với Film strip ........................................................................................ 80
Hình 2-38: Mơ hình slideshow ................................................................................................. 81
Hình 2-39: Biểu diễn bản đồ với dạng Infinite Area ................................................................ 81
Hình 2-40: Infinite Area ứng dụng trong biểu diễn biểu đồ ..................................................... 82
Hình 2-41: Select List dùng cho danh sách chiều dọc.............................................................. 82
Hình 2-42: Select list dùng trong danh sách dạng lưới ............................................................ 83
Hình 2-43: Ví dụ về Button trên các hệ điều hành Android, iOS, Window phone .................. 84
Hình 2-44: Butcon trên Bottom tab của iOS ............................................................................ 84
Hình 2-45: Một số dạng icon trên hệ điều hành Android, iOS, Windows phone..................... 84

IT

Hình 2-46: App bar trên windows phone ................................................................................. 85
Hình 2-47: Link được dùng để liên kết đến các trang .............................................................. 85
Hình 2-48: Check box .............................................................................................................. 86
Hình 2-49 Flip-flop button ....................................................................................................... 86
Hình 2-50: On – Off button ...................................................................................................... 86

PT

Hình 2-51: Radio button ........................................................................................................... 86
Hình 2-52: List control dạng danh sách dọc ............................................................................. 87
Hình 2-53: Combo box ............................................................................................................. 87
Hình 2-54: Date picker control trên windows phone ............................................................... 88
Hình 2-55: Entry control slider................................................................................................. 88
Hình 2-56: Text edit control ..................................................................................................... 89
Hình 2-57: Text Control ........................................................................................................... 90
Hình 2-58: Yahoo stock quote .................................................................................................. 91
Hình 2-59: eTrade stock quote (top and bottom) ..................................................................... 91
Hình 2-60: Urbanspoon restaurant screen và Yelp restaurant screen ....................................... 92

Hình 2-61 a, Twitterific Tweet form và b, TweetDeck Tweet form ........................................ 93
Hình 2-62: a,iThermometer app và b,All Recipes recipe screen .............................................. 93
Hình 2-63: USA TODAY và Huffington Post ......................................................................... 94
Hình 2-64: Ứng dụng Facebook và Flickr ................................................................................ 95
Hình 2-65: a, iLike và b, iConcertCal ...................................................................................... 95
9


Hình 2-66: Whole Foods recipe................................................................................................ 96
Hình 2-67: Sử dụng màu sắc để nhấn mạnh ............................................................................. 96
Hình 2-68: a, USA TODAY và b, Huffington Post ................................................................. 97
Hình 2-69: Các kích thước và độ phân giải trên iPhone........................................................... 98
Hình 2-70: Các kích thước màn hình trên điện thoại chạy windows phone............................. 99
Hình 2-71: Icon App trên iOS ................................................................................................ 100
Hình 2-72: Icon App trên Android ......................................................................................... 100
Hình 2-73: Iconic Tile trên Windows phone .......................................................................... 101
Hình 2-74: Icon Cycle Tile trên Windows phone................................................................... 101
Hình 2-75: Icon Flip Tile trên Windows phone ..................................................................... 102
Hình 2-76: Tab bar icon và Toolbar icon trên iOS ................................................................. 103
Hình 2-77: Action bar và notification icon trên Android ....................................................... 103

IT

Hình 2-78: Icon trên App bar windows phone ....................................................................... 103
Hình 3-1: Ứng dụng What’s Skackin’s .................................................................................. 108
Hình 3-2: Giao diện Foodspotting trước khi nghiên cứu khả năng sử dụng .......................... 110
Hình 3-3: Giao diện Foodspotting sau khi nghiên cứu khả năng sử dụng ............................. 110
Hình 3-4: Một số giao diện của Foodspotting phiên bản mới nhất ........................................ 111

PT


Hình 3-5: Phác thảo tưởng NFT .......................................................................................... 112
Hình 3-6: Screen Flow ............................................................................................................ 113
Hình 3-7: Giao diện NFT ver 1.0 ........................................................................................... 113
Hình 3-8: Phác thảo Convertbot ............................................................................................. 115
Hình 3-9: Quá trình thiết kế Convertbot ................................................................................. 115
Hình 3-10: Giao diện Convertbot phiên bản 1.6.1 ................................................................. 116
Hình 3-11: Giao diện Twine ................................................................................................... 118
Hình 3-12: Thiết kế giao diện Home Twine ........................................................................... 118
Hình 3-13: Giao diện thiết kế của Twine Cavas ..................................................................... 120
Hình 3-14: Viết những tưởng ra giấy và nhìn lại chúng...................................................... 121
Hình 3-15: Phác thảo trên giấy ............................................................................................... 122
Hình 3-16: Ví dụ Bảng các wireframe ................................................................................... 123
Hình 3-17: Sắp xếp các giao diện màn hình theo kịch bản để tạo Prototype ......................... 123

10


DANH MỤC BẢNG BIỂU
Bảng 1.1 Bảng ma trận phân loại ứng dụng di động theo ngữ cảnh........................................ 19
Bảng 2.1 Cấu hình các màn hình có sẵn trong Android. ......................................................... 98
Bảng 2.2 Kích thước Icon launcher theo các hệ điều hành quy định ...................................... 99
Bảng 2.3 Kích thước Icon bar trên iOS ................................................................................. 102

PT

IT

Bảng 2.4 Kích thước Icon bar trên Androind ........................................................................ 103


11


CHƢƠNG 1 TỔNG QUAN VỀ THIẾT KẾ ỨNG DỤNG DI ĐỘNG
Nội dung chương 1 sẽ cung cấp cho độc giả những kiến thức cơ bản liên quan đến lĩnh
vực thiết kế ứng dụng di động. Để có một ứng dụng di động tốt phụ thuộc vào rất nhiều yếu
tố, mà người thiết kế phải tìm hiểu, nghiên cứu. Người thiết kế phải là người am hiểu về thiết
bị di động, phải nắm được các đặc điểm của từng loại thiết bị. Người thiết kế phải là người
hiểu người dùng, tìm hiểu nhu cầu, mong muốn cũng như thói quen sử dụng của người dùng
để tạo ra những ứng dụng tốt nhất cho họ. Nội dung chương 1, tác giả cũng đưa ra những mơ
hình vịng đời phát triển ứng dụng di động.
1.1

Ứng dụng di động

1.1.1 Khái niệm ứng dụng di động

PT

IT

Một ứng dụng di động là một chương trình máy tính được thiết kế để chạy trên điện
thoại thơng minh, máy tính bảng và các thiết bị di động khác.
Ứng dụng di động được xuất hiện vào năm 2008 khi Apple mở kho ứng dụng dụng App
store. Các ứng dụng di động đều được thông qua các nền tảng phân phối ứng dụng và thường
được điều hành bởi các chủ sở hữu của hệ thống của nó, chẳng hạn như Apple App Store,
Google Play, Windows Phone Store, và BlackBerry App World. Một số ứng dụng là miễn
phí, và có những ứng dụng phải mất phí tải về. Thơng thường, chúng được tải về từ các nền
tảng cho một thiết bị mục tiêu, chẳng hạn như iPhone, BlackBerry, điện thoại Android hoặc
Windows Phone, nhưng đơi khi chúng có thể được tải về máy tính xách tay hoặc máy tính để

bàn.
Thuật ngữ “App” là viết tắt của thuật ngữ “Application software” và nó đã là thuật ngữ
sử dụng phổ biến. Ngày nay điện thoại thơng minh cịn được gọi là điện thoại ứng dụng (app
phone).
1.1.2 Phân loại ứng dụng di động

1.1.2.1 Phân loại ứng dụng di động theo kỹ thuật phát triển.
Dựa trên nền tảng phát triển ứng dụng di động người ta chia thành 3 loại ứng dụng :
Native app, Hybrid app và Web app.

Hình 1-1: Ba loại kỹ thuật phát triển ứng dụng di động.

12


PT

IT

 Native App: một ứng dụng được phát triển để sử dụng trên một nền tảng hoặc thiết bị cụ
thể. Vì các ứng dụng Native được viết cho một nền tảng cụ thể, nên nó có thể tương tác
và tận dụng lợi thế của các tính năng hệ điều hành và phần mềm khác được cài đặt trên
nền tảng đó. Vì ứng dụng Native được xây dựng cho một thiết bị đặc biệt và hệ điều
hành của nó, nó có khả năng sử dụng thiết bị phần cứng và phần mềm cụ thể, có nghĩa
là các ứng dụng Native có thể tận dụng lợi thế của các công nghệ mới nhất có sẵn trên
các thiết bị di động như hệ thống định vị toàn cầu (GPS) và camera. Một ứng dụng
Native được cài đặt trực tiếp trên thiết bị di động và các nhà phát triển tạo ra một phiên
bản ứng dụng riêng biệt cho mỗi thiết bị di động. Các ứng dụng Native có thể được lưu
trữ trên các thiết bị di động, hoặc nó có thể được tải về từ một kho ứng dụng hoặc được
cài đặt trên thiết bị di động. Dữ liệu liên quan đến các ứng dụng Native cũng được lưu

trữ trên thiết bị, mặc dù dữ liệu có thể được lưu trữ từ xa và truy cập bởi các ứng dụng
Native. Tùy thuộc vào tính chất của các ứng dụng Native, kết nối Internet có thể khơng
cần thiết.

Hình 1-2: Giao diện ứng dụng Native PicFrame

 Web App: là một chương trình ứng dụng được lưu trữ trên một máy chủ từ xa và gửi
qua mạng Internet thơng qua một giao diện trình duyệt. Giao diện tính năng được xây
dựng với HTML hoặc CSS, được cung cấp thơng qua các ngơn ngữ lập trình web phổ
biến. Ứng dụng web có thể chạy trên bất kỳ điện thoại, máy tính bảng hay máy tính nào
13


PT

IT

với một tiêu chuẩn, trình duyệt web phù hợp. Tuy nhiên các nhà thiết kế và phát triển
ứng dụng sẽ không thể truy cập vào các công cụ sáng tạo, hay can thiệp được đến các
tính năng mà các nền tảng cung cấp như Apple, Google hay các nền tảng khác. Thay
vào đó các nhà thiết kế phải tạo ra các giao diện người dùng hoàn toàn từ đầu. Tương tự
như vậy, ứng dụng Web sẽ không đáp ứng được các tính năng phong phú như ứng dụng
Native.

Hình 1-3: Giao diện ứng dụng dạng Web Forecast.co cung cấp thông tin thời tiết.

 Hybrid App: là một tứng dụng kết hợp các yếu tố của cả ứng dụng Native và ứng dụng
Web. Ứng dụng Hybrid cũng giống như Native là nó được đặt trong kho ứng dụng và
có thể tận dụng lợi thế của các tính năng thiết bị có sẵn. Hybrid cũng giống như các ứng
dụng Web, nó dựa trên HTML hiển thị trên trình duyệt được nhúng vào trong ứng dụng.

Phổ biến, các nhà phát triển xây dựng ứng dụng hybrid như vỏ bọc cho một trang web
hiện có. Nhờ vậy, các doanh nghiệp, cửa hàng có thể đưa hình ảnh của họ lên kho ứng
dụng, và khơng tốn công để xây dựng một ứng dụng dạng Native.

14


Hình 1-4: Ứng dụng Hybrid

1.1.2.2 Phân loại ứng dụng di động theo ngữ cảnh.

IT

Đứng về phía người dùng, ứng dụng được lựa chọn do ngữ cảnh quyết định, họ không
cần quan tâm đến việc ứng dụng đó sửu dụng cơng nghệ gì. Tiện ích của ứng dụng là có thể
tạo được sự tập trung và sự chú của người. Trên thực tế, mỗi ứng dụng đều chỉ tập trung vào
một ngữ cảnh sử dụng để tránh gây nhầm lẫn cho người dùng.

PT

 Ứng dụng Utility: Là ứng dụng tập trung vào các tiện ích, hoặc là tập trung vào những
thói quen sử dụng đơn giản của người dùng để giải quyết các tình huống, nhiệm vụ.
Thơng tin được trình bày tối giản, thường sử dụng ít nhất đầu vào thì càng tốt. Ví dụ về
ứng dụng Utility là ứng dụng máy tính, dự báo thời tiết, chuyển đổi đơn vị, cổ phiếu,
đồng hồ thế giới,… Trong mỗi trường hợp này, người dùng chỉ cần nhập vào một lượng
nhỏ thông tin, như một phương trình đơn giản, tên thành phố, hay một biểu tượng cổ
phiếu,… bằng cách thực hiện một thao tác đơn giản trên màn hình thiết bị. Các tiện ích
sẽ trình bày dữ liệu mà người dùng mong muốn. Mục tiêu của tiện ích này là để cung
cấp cho người sử dụng thơng tin, do đó thiết kế của nó thường đơn giản, và thiết kế tập
trung vào nội dung bên trong.


15


IT
Hình 1-5: Một ví dụ về ứng dụng Utility

PT

 Ứng dụng Locale: Là những ứng dụng cung cấp thông tin vị trí. Thiết bị hỗ trợ thêm
GPS để xác định vị trí của người dùng. Ứng dụng Locale đang trở thành ứng dụng tuyệt
vời với những dữ liệu hữu ích cho người dùng. Ví dụ, người dùng có thể xác định vị trí
các quán cafe, khách sạn, cửa hàng, ngân hàng,.. quanh vị trí hiện tại của họ. Ứng dụng
Locale hầu như ln ln có ít nhất một điểm chung đó là bản đồ. Mục đích của người
sử dụng là tìm thơng tin liên quan đến vị trí hiện tại của họ. Do vậy, khi thiết kế ứng
dụng Locale luôn ln xác định rõ mục tiêu này.

Hình 1-6: Ví dụ về ứng dụng Locale

16


PT

IT

 Ứng dụng Imformative: Là những ứng dụng mà ngữ cảnh mục tiêu của nó là cung cấp
thơng tin, giống như một trang web tin tức, một danh sách trực tuyến, một trang web
tiếp thị, hoặc thậm chí một trang web thương mại, mà nhiệm vụ chính của người sử
dụng là để đọc và hiểu nó mà khơng cần thiết để tương tác.


Hình 1-7: Ví dụ về ứng dụng cung cấp thông tin

 Ứng dụng Productivity: là những ứng dụng sử dụng cho các nội dung và dịch vụ chủ
yếu dựa trên chức năng. Với các loại ứng dụng này, người sử dụng phải thực hiện nhiều
hơn để hoàn thành một mục tiêu cụ thể, như quản l nội dung tin nhắn, danh bạ, hoặc
media. Ứng dụng Productivity thường có cấu trúc, trình bày thơng tin theo hệ thống
phân cấp và sử dụng các thư mục hoặc các nhóm ẩn dụ hoạt động cho người dùng. Khi
thiết kế ứng dụng dạng này cần quan tâm đến cách người dùng suy nghĩ thực hiện
nhiệm vụ. Ví dụ về một ứng dụng dạng Productivity như trong Hình 1-8. Ứng dụng gửi
mail tập trung vào hộp thư đến, đó là nhiệm vụ ưu tiên hàng đầu. Các mục khác có mức
ưu tiên thấp hơn. Nên giao diện chính là danh sách các email đến. Tuy nhiên không nên
bỏ qua những mục tiêu ưu tiên khác, như chức năng gửi tin nhắn mới, tạo mục mới.

17


Hình 1-8: Ứng dụng Productivity

PT

IT

 Ứng dụng Immersive: Là ứng dụng hiển thị tồn màn hình, dạng nhập vai, hoặc có thể
là một tiện ích màn hình. Các ứng dụng dạng này khiến người dùng tập trung vào ứng
dụng thường xuyên bằng cách làm đầy màn hình (Hình 1-9). Ứng dụng này chủ yếu là
ứng dụng giải trí, ứng dụng Locale hiển thị bản đồ tồn màn hình, ứng dụng la bàn,
bảng điều khiển.

Hình 1-9: Ví dụ ứng dụng Immersive


18


Có thể thấy, các ứng dụng di động có thể được thiết kế từ kinh nghiệm người dùng,
nhiệm vụ. Trong một số trường hợp, nó có thể được chuyển đổi qua lại với nhau. Bảng 1.1
mơ tả tính chất và quan hệ qua lại của các ứng dụng di động theo ngữ cảnh.
Bảng 1.1 Bảng ma trận phân loại ứng dụng di động theo ngữ cảnh

1.1.3 Kho ứng dụng và hệ điều hành di động.
1.1.3.1 Kho ứng dụng di động

PT

IT

App Store (kho ứng dụng) hay còn gọi là App marketplace. Kho ứng dụng là một loại
nền tảng kỹ thuật số phân phối cho các ứng dụng di động. Kho ứng dụng mang tính chất là
một cửa hàng trực tuyến, nơi người dùng có thể duyệt qua các ứng dụng khác nhau, xem
thông tin về từng ứng dụng (chẳng hạn như đánh giá, xếp hạng,…), tải các ứng dụng. Các kho
ứng dụng được quản lý bởi chủ sở hữu của nó, các ứng dụng đưa lên kho đều được kiểm tra
và tuân thủ các nguyên tắc nhất định, các yêu cầu về lợi nhuận đối với các ứng dụng trả tiền.
Các kho ứng dụng lớn nhất là iOS App Store, Google Play, Windows phone Store.
1.1.3.2 Hệ điều hành di động

Hệ điều hành di động (Mobile Operating System – Mobile OS) là một hệ điều hành cho
một điện thoại thông minh, máy tính bảng, PDA, hoặc thiết bị di động khác. Hệ điều hành di
động hiện đại kết hợp các tính năng của một hệ điều hành máy tính cá nhân với các tính năng
khác, bao gồm màn hình cảm ứng, di động, Bluetooth, Wi-Fi, định vị GPS, máy ảnh, video,
nhận dạng giọng nói, ghi âm, máy nghe nhạc, hồng ngoại…

Một số hệ điều hành di động lớn hiện nay:

 Android là hệ điều hành đến từ Google. Android là hoàn toàn miễn phí và mã nguồn
mở. Phiên bản Android 2.x đã được sử dụng chủ yếu cho điện thoại di động nhưng cũng
có một số máy tính bảng. Android 3.0 là một bản phát hành cho máy tính bảng và
khơng chính thức chạy trên điện thoại di động. Các phiên bản Android hiện nay là 5.0.
Hầu hết các nhà cung cấp dịch vụ di động lớn mang theo một cái tên là thiết bị Android.
Ngày 15 tháng 11 năm 2011, Android đạt 52,5% của thị phần smartphone toàn cầu [8].
Vào tháng 9 năm 2014 thị phần toàn cầu của Android đã tăng đến 85%. [9]
 iOS là hệ điều hành đến từ Apple. Nó là mã nguồn đóng, độc quyền. iPhone, iPod
Touch, iPad và thế hệ thứ hai của Apple TV đều sử dụng một hệ điều hành được gọi là
iOS. Hiện nay tất cả các thiết bị iOS được phát triển bởi Apple và sản xuất bởi Foxconn
hay khác của các đối tác của Apple. Tính đến tháng 9 năm 2014, iOS chiếm thị phần
toàn cầu là 11%. [9]
19


IT

 Windows Phone là hệ điều hành đến từ Microsoft. Nó là mã nguồn đóng và độc quyền.
Nó có hệ điều hành lớn thứ ba được cài đặt trên điện thoại thông minh sau Android và
iOS. Ngày 15 tháng hai năm 2010, Microsoft đã giới thiệu thế hệ tiếp theo hệ điều hành
di động Windows Phone của mình. Nó tích hợp đầy đủ các dịch vụ của Microsoft như
OneDrive và Office, Xbox Music, Xbox Video, Xbox Live và Bing, nhưng cũng tích
hợp với nhiều dịch vụ khơng phải của Microsoft khác như Facebook và tài khoản
Google. Các thiết bị Windows Phone được sản xuất chủ yếu bởi Nokia, cùng với HTC,
Samsung. Tính đến tháng 9 năm 2014, Windows Phone chiếm thị phần toàn cầu là 3%.
[9]
 BlackBerry 10 là hệ điều hành đến từ BlackBerry. Như một hệ điều hành điện thoại
thơng minh, nó là mã nguồn đóng và độc quyền. BlackBerry 10 là nền tảng thế hệ tiếp

theo cho điện thoại thơng minh BlackBerry và máy tính bảng. Tất cả điện thoại và máy
tính bảng được sản xuất bởi chính Blackberry. Thị phần tồn cầu của nó là dưới 1% vào
cuối năm 2014. [9]
 Symbian là hệ điều hành được phát triển bởi Nokia với những mẫu điện thoại thông
minh. Đây là phần mềm độc quyền. Các hệ điều hành đã bị ngừng vào năm 2012.
Microsoft đã chính thức hoãn lại nền tảng này khi mua lại Nokia để tập trung cho nền
tảng Windows phone.
1.1.4 Ứng dụng di động trong cuộc sống hàng ngày

PT

Điện thoại di động đang thực sự rất quan trọng trong cuộc sống của con người ngày
nay. Chúng giúp họ quản lý công việc trong văn phịng hoặc ở nhà. Nó khơng chỉ là phương
tiện giao tiếp, nó cung cấp các tính năng cao cấp giúp cuộc sống của con người trở nên tuyệt
vời hơn. Nó thay thế đồng hồ đeo tay, hay đồng hồ báo thức, nó giúp người dùng biết được
thời gian khi họ ở bất cứ nơi nào, quốc gia nào. Nó có thể trở thành nhật k điện tử cầm tay,
nó cho người dùng biết được lịch trình hàng ngày, các cuộc hẹn, các buổi họp hay các sự kiện
quan trọng. Khi cần thư giãn, nó có thể giúp họ giảm căng thẳng bằng cách trở thành máy
nghe nhạc, máy chơi game,.. Nó cịn đang thay thế những chiếc máy ảnh kỹ thuật số, máy
quay phim một cách tuyệt vời với khả năng tự động lấy nét, flash, ổn định hình ảnh, chống
rung,…Nó cịn nhiều hữu ích khác nữa trong cuộc sống hàng ngày của con người.
Các kho ứng dụng đều phân chia các ứng dụng theo các chuyên mục khác nhau. Ví dụ
thống kê tháng 7/2012 trên kho ứng dụng App Store cho thấy các tỷ lệ về số lượng ứng dụng
theo các chuyên mục khác nhau như giáo dục, âm nhạc, cuộc sống,…Hình 1-10

20


Hình 1-10: Thống kê tỷ lệ ứng dụng trên kho ứng dụng của Apple store tháng 7/2012


PT

IT

 Ứng dụng di động trong giáo dục:
 Đối với giáo viên: Ứng dụng di động giúp quản lý công việc của họ như quản lý
lớp, quản lý học sinh, quản lý các bài kiểm tra, …Ví dụ ứng dụng teacherKid trên
AppStore (Hình 1-11), ứng dụng Teacher Aide Pro trên Google Play. Ứng dụng di
động giúp dễ dàng thăm dò kiến học sinh về bất cứ điều gì và tất cả mọi thứ trong
lớp học. Tạo và phân loại nhiều loại câu hỏi - nhiều lựa chọn, đúng / sai, và đồng ý
/ không đồng ý. Các câu hỏi được gửi trực tiếp đến các thiết bị của học sinh, vì vậy
họ khơng cần phải sử dụng tới máy chiếu hoặc các phần mềm khác. Nhận báo cáo
ngay lập tức trên mỗi phiên, và xuất kết quả để theo dõi theo thời gian. Ví dụ như
ứng dụng eClicker Presenter – AppStore (Hình 1-12). Ngồi ra ứng dụng di động
cịn giúp họ có bài giảng sinh động hơn, chia sẻ tài liệu thuận tiện hơn,…

Hình 1-11: Ứng dụng TeacherKid trên AppStore

21


Hình 1-12: Ứng dụng eClicker Presenter – AppStore



PT

IT

Đối với học sinh: Họ có thể học bất cứ thời gian nào, bất cứ nơi nào, dù ở nhà, ở

trường hay đứng chờ xe,..Ghi nhớ các bài tập về nhà, đặt lịch học, nhắc nhở. Giúp tối
ưu hóa các cơng cụ học tập như máy tính, sách, từ điển, máy ảnh, máy ghi âm. Giúp
họ có thể tổ chức học nhóm, chia sẻ tài liệu, thực hành từ xa…
 Ứng dụng di động trong chăm sóc sức khỏe: Trước đây muốn kiểm tra sức khỏe của
mình, người bệnh phải đến bệnh viện, hoặc gặp bác sĩ. Nhưng với những ứng dụng di
động, nó giúp cho bệnh nhân nghiên cứu và hiểu rõ hơn sức khỏe, phương pháp điều trị
và những trường hợp cấp cứu,.. Ví dụ ứng dụng Diabetes Pilot là ứng dụng về cho bệnh
nhân tiểu đường cho phép người bệnh theo dõi tại nhà. Ứng dụng Cardiograph cho phép
đo nhịp tim của người bệnh.

Hình 1-13: Ứng dụng Cardiograp

22


IT

 Ứng dụng di động trong doanh nghiệp và tài chính:
 Trong doanh nghiệp: Ứng dụng di động giúp liên hệ đối tác, gửi email, họp hành.
Lưu thông tin khách hàng. Đồng bộ dữ liệu máy tính và điện thoại, thiết lập lịch
làm việc. Thanh tốn thẻ tín dụng.

Hình 1-14: Ứng dụng Name card maker

Trong lĩnh vực tài chính: Ứng dụng di động giúp người dùng không cần thiết phải
mang theo tiền mặt, theo dõi lịch sử giao dịch, thanh tốn từ xa, quản lý tài chính cá
nhân, thống kê tài chính,…

PT




Hình 1-15: Ứng dụng Sổ thu chi

23


 Ứng dụng di động trong lĩnh vực giải trí: Giúp người dùng thoát khỏi sự nhàm chán và
cải thiện tâm trạng. Ví dụ như ứng dụng nghe nhạc, chơi nhạc, game, xem phim,
truyện cười.

Hình 1-16: Ứng dụng Zing MP3

PT

IT

 Ngồi ra cịn có những ứng dụng phục vụ cho những hoạt động hàng ngày khác như
ứng dụng thời tiết, bản đồ, ăn uống, thời trang,…

Hình 1-17: Ứng dụng Allrecipes.com

1.1.5 Đặc điểm của thiết kế ứng dụng di động
Ứng dụng trên điện thoại di động ra đời lần đầu tiên vào năm 2008, đến nay nó đã trở
thành một lĩnh vực phát triển. Lĩnh vực thiết kế ứng dụng di động đòi hỏi thiết kế phức tạp và
khác biệt so với ứng dụng phần mềm máy tính trước đây. Sự khác biệt lớn nhất đó là thói
quen người dùng di động. Trong thực tế, khi làm việc với máy tính để bàn, người dùng phải
mất một khoảng thời gian lớn, và thường làm việc tại văn phòng, ở nhà, ở quán café. Còn đối
với người dùng điện thoại di động, thời gian tập trung vào màn hình là từ 17 phút đến 39


24


×