1 of 86

SO SÁNH UI/UX TRÊN iOS VÀ ANDROID

ROYAL SALUTE

2 of 86

Thành Viên

2

Nguyễn Thành Đạt

Đinh Bá Tùng

Vũ Thị Trang

Nguyễn Đức Trường An

Vũ Thị Thùy Dương

Đoàn Ngọc Vũ

Dương Bích Ngọc

3 of 86

3

4 of 86

UI & UX

4

5 of 86

Thế nào là UX/UI?

5

= User Interface

= User eXperience

6 of 86

6

7 of 86

7

8 of 86

Flat design (iOS) và Material design (Android)

8

Flat Design

Material Design

9 of 86

Đặc điểm của Flat design

​

  • Đều ở dạng 2D, không hiệu ứng, trang trí
  • Tính đơn giản trong thiết kế
  • Tập trung vào màu sắc

9

10 of 86

Đặc điểm của Material design

​

  • Sử dụng các màu sắc nổi bật
  • Các biểu tượng phẳng, đơn giản nhưng dễ hiểu
  • Giao diện phẳng, ít hiệu ứng, đổ bóng
  • Giao diện có khoảng cách thoáng đãng
  • Các hiệu ứng chuyển động tự nhiên, dễ hiểu

10

11 of 86

11

Flat design

Thiết kế cũ

12 of 86

12

Material design

Thiết kế cũ

13 of 86

13

Flat design

Material design

14 of 86

14

Flat design

Material design

15 of 86

UI & UX Detail

15

16 of 86

iPhone Screen Size và Resolution

16

17 of 86

iPad Screen Size và Resolution

17

18 of 86

Android Screen Size và Resolution

​

​

18

19 of 86

iOS icon

19

Bỏ đi những đường viền đổ bóng bên ngoài

Kích thước hình và độ phân giải

Kích thước luôn là số chẵn

Tính Đối Xứng

20 of 86

Android Icon

​

​

Android phân ra 4 mật độ điểm ảnh khác nhau trên tất cả các loại màn hình do đó icon cũng sẽ có 4 định dạng kích thước khác nhau (LDPI, MDPI, hDPI, XHDPI)

20

21 of 86

iOS Color

21

  • Thiết kế hướng tới nội dung, sử dụng màu trung tính để làm background
  • Sử dụng màu sặc sỡ cho các action
  • Dưới đây là bảng màu:

​

22 of 86

Android Color

​

​

Android sử dụng những gam màu sắc tươi sáng, tuy nhiên Google đưa ra thêm nhiều gam màu sắc khác nhau để lựa chọn cho thiết

22

23 of 86

iOS Font

​

​

  • iOS hỗ trợ rất nhiều font
  • iOS 8 hoặc nhỏ hơn: Helvetica Neue.
  • iOS 9 trở lên: San Francisco
  • San Francisco gồm 2 hình dạng: “SF UI Display” và “SF UI Text”

23

24 of 86

Android Font

24

25 of 86

Status Bar của iOS

Status bar dùng để hiển thị:

  • Nhà mạng và trạng thái nhà mạng cung cấp
    • Wifi, 2G, 3G, LTE
    • Trạng thái kết nối
    • Giờ
    • Bluetooth
    • Đồng bộ dữ liệu
    • Trạng thái pin

​

  • Apple khuyến cáo phải hiển thị status bar nhiều nơi nhất trên ứng dụng của bạn
  • Apple cung cấp 2 loại status bar và không cho phép tuỳ chỉnh nó (Dark & Light)
  • Status bar là trong suốt và cho phép nội dung đi qua dưới nó

25

26 of 86

Status Bar của Android

  • Status bar của Android cũng tương tự như của IOS,
  • Tuy nhiên chỉ khác ở chỗ status bar của android còn được sử dụng để hiển thị thông báo từ các ứng dụng của người dùng.

26

27 of 86

ToolBar của iOS

  • Một toolbar gồm 1 set các hành động để quản lý hoặc thao tác nội dung của view hiện tại.
  • Trên iPhone, Toolbar sẽ được căn chỉnh ở rìa dưới của màn hình, trong khi trên iPad sẽ được căn chinh ở phía trên màn hình
  • Toolbar nên được sử dụng khi khung nhìn cụ thể cần hơn 3 hành động chính

27

28 of 86

28

29 of 86

Toolbar của Android

​

​

  • Toolbar được căn chỉnh phía trên của view
  • Toolbar chứa icon menu, icon search và icon action
  • Title của ứng dụng được căn chỉnh bên trái của toolbar và sau icon menu

29

30 of 86

Toolbar của Android

​

​

  • 1 Số icon action của android toolbar

30

31 of 86

Navigation Bar của iOS

  • Bao gồm các thành phần:
    • Trái : bar button
    • Giữa: title, sub-title
    • Phải: bar button
  • Bar button
    • Loại custom
    • Loại system
  • Điều hướng màn hình
  • Giúp người dùng nắm thông tin nhanh
  • Apple cho phép custom Navigation Bar
  • Vị trí: Phía trên của view và phía dưới status bar

31

32 of 86

Navigation bar của Android

​

​

  • Khác với IOS, navigation bar của android ở dưới view
  • Các nút phần cứng trên Android cho phép quay lại màn hình trước bất cứ lúc nào trong khi iOS phụ thuộc vào nút trong ứng dụng

32

33 of 86

iOS Multi-tasking

  • Từ iOS 4.1, multi-task bằng cách double click vào phím Home
  • Từ iOS 9 trở đi, hỗ trợ đa nhiệm rõ ràng hơn:
    • SlideOver
    • Split View
    • PIP (picture in picture)
    • QuickType

​

​

33

34 of 86

34

Slide Over

35 of 86

35

SplitView

36 of 86

36

Picture in Picture (PIP)

37 of 86

37

QuickType

38 of 86

Android Multi-tasking

  • Hỗ trợ đa nhiệm từ Lilopop
  • Tính năng MultiWindow tương tự SlideOver và SplitView bên iOS
  • Có rất nhiều app hỗ trợ Multi-tasking trên Google Play

38

39 of 86

39

Recent Iterations

40 of 86

40

Multi Window

41 of 86

41

Multi tasking app

42 of 86

Install và uninstall app

iOS

  • Cài bằng app store
  • Gỡ bỏ bằng cách nhấp và giữ, sau đó nhấn nút (X) trên góc trái để xóa bỏ app
  • Gỡ bỏ app thì xóa luôn dữ liệu và thông tin app

Android

  • Cài bằng Google Play
  • Gỡ bỏ có nhiều cách, có thể dùng thủ công hoac dùng các ứng dụng hỗ trợ
  • Vì khi gỡ app thì các dữ liệu và thông tin app vẫn còn, nên thường hay dùng ứng dụng để gỡ toàn bộ
  • Một số ứng dụng gỡ bỏ khá hữu ích dành cho Android như CCleaner, Uninstaller,....

42

43 of 86

43

iOS

Android

44 of 86

Cách hiển thị list trên iOS

  • Table View : Dùng để hiển thị 1 danh sách trong iOS
  • Danh sách 1 chiều
  • Danh sách nhiều chiều
  • Một trong nhưng control quan trọng nhất và có nhiều nhất trong các ứng dụng. Bao gồm :
  • 1 scroll view -> dùng để chứa nội dung và người dùng có thể cuộn
  • các cell -> chứa nội dung hiển thị của phần tử trong danh sách
  • 1 index gồm các chữ cái -> có thể zoom tới theo thứ tự nào đó được sắp xếp

44

45 of 86

Cách hiển thị list trên Android

  • List view có những chức năng hiển thị tương tự như Table View của iOS

45

46 of 86

46

Table view

List view

47 of 86

47

Collection view

Grid view

48 of 86

48

49 of 86

Video view và view video in pop-up

iOS

  • Chính là công nghệ Picture in picture đã đề cập ở trên
  • Bắt đầu từ iOS 9 trên iPad

Android

  • Bắt đầu từ Android 7.0 trên các thiết bị Android TV

49

50 of 86

Crash App

  • Crash là hiện tượng ứng dụng bị đóng trong lúc đang hoạt động bình thường và tắt hoàn toàn khỏi hệ thống đa nhiệm của máy.
  • Theo thống kê thì iOS app crash nhiều hơn gấp 2, 3 lần so với Android app
  • Đã cải thiện hơn ở iOS 9.3

50

51 of 86

Thống kê app crash trên iOS và Android

51

52 of 86

Alert view và Pop-up

  • Alert View :
    • Hiển thị một thông báo
    • Chứa 1 hoặc nhiều button

​

  • Pop-up : là một loại menu, thường gọi là menu context hoặc menu chuột phải, menu này xuất hiện sau khi bạn click chuột phải. menu pop-up cung cấp các chức năng thông dụng như "Cut", "Copy", "Paste", ......

52

53 of 86

53

iOS

Android

54 of 86

Home screen and Lock screen

iOS:

  • Từ ios 9 trở về trước, mở khóa và tiếp cận màn hình Home chỉ bằng thao tác trượt màn hình
  • Từ iOS 10, hỗ trợ thêm tùy chọn unlock screen bằng nút Home, slide màn hình để check các Widget . Tùy chọn này có thể được chỉnh sửa để đổi về lại chế độ “slide to unlock” như cũ.
  • Một vấn đề lớn với Lock Screen trên iOS 10 beta là nó quá kém bảo mật. Không cần nhập passcode, một người bất kỳ cũng có thể xem hết thông báo và thông tin các Widget ngay từ màn hình khóa

54

55 of 86

55

56 of 86

56

3D Touch

57 of 86

Quyền sử dụng của app - iOS

  • Khi cài một ứng dụng, không cần phải quan tâm ứng dụng yêu cầu quyền nào để
  • Hiển thị mô tả về ứng dụng và các quyền cơ bản
  • iOS không cấp một quyền đặc biệt nào cho ứng dụng vừa cài (truy cập GPS, danh bạ…).

57

58 of 86

Quyền sử dụng của app - Android

  • Hiển bảng thông báo nêu rõ danh sách các quyền hạn của ứng dụng
  • Nếu bạn đồng ý ứng dụng sẽ được cài đặt
  • Ngược lại ứng dụng sẽ không được cài.

58

59 of 86

59

60 of 86

60

61 of 86

61

62 of 86

62

63 of 86

iOS và Android Testing

63

64 of 86

iOS và Android Testing

  • Android và iOS chiếm lĩnh thị trường với hơn 96% thị phần
  • Kiểm thử di động trên các thiết bị Apple và các thiết bị Android là khác nhau
  • Một tester phải có khả năng kiểm thử trên cả hai hệ điều hành

64

65 of 86

iOS và Android Testing

65

VS

66 of 86

66

Cài đặt ứng dụng

67 of 86

67

Nâng cấp phần mềm

68 of 86

68

Thiết bị và OS phân mảnh

69 of 86

69

Đặc thù phần cứng

70 of 86

70

Phiên bản hệ điều hành

71 of 86

71

Nguyên tắc thiết kế

72 of 86

72

Kiểm thử bảo mật - Security Testing

73 of 86

73

App Testing Tools

74 of 86

Tips

  • Cách đăng xuất Facebook messenger

74

75 of 86

Tips

75

76 of 86

Tips

76

77 of 86

Tips

77

78 of 86

Tips

78

79 of 86

79

Testing app sau khi cập nhật iOS

80 of 86

80

Kiểm tra việc ứng dụng gây tốn pin

81 of 86

81

Ứng dụng sử dụng chức năng cast

82 of 86

82

Lỗi về việc tính thời gian trên các ứng dụng offline

83 of 86

83

Chính sách về quyền của ứng dụng

84 of 86

Tham Khảo

84

85 of 86

QUESTION?

85

86 of 86

86