6 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
2.4 Mô hình MVVM [16]
Đa số các ứng dụng thuộc bất kì nền tảng nào cũng có thể chia thành hai phần: giao diện (View) và dữ liệu (Model). Vì việc tách riêng các phần này, cần phải có một phần trung gian nào đó nối kết hai phần này lại, và chúng tạo nên một mô hình (pattern), một trong số đó là MVVM (Model-View-View Model).
• View: Tương tự như trong mô hình MVC, View là phần giao diện của ứng dụng để hiển thị dữ liệu và nhận tương tác của người dùng. Điểm khác biệt so với các ứng dụng truyền thống là View trong mô hình này tích cực hơn, có khả năng thực hiện các hành vi và phản hồi lại người dùng thông qua tính năng binding, command.
• Model: Cũng tương tự như trong mô hình MVC. Model là các đối tượng giúp truy xuất và thao tác trên dữ liệu thực sự.
• ViewModel: Lớp trung gian giữa View và Model. ViewModel có thể được xem là thành phần thay thế cho Controller trong mô hình MVC. ViewModel chứa các mã lệnh cần thiết để thực hiện yêu cầu, ràng buộc dữ liệu.
Một số đặc điểm của mô hình MVVM:
• Trong MVVM sẽ có ràng buộc dữ liệu 2 chiều giữa View và View-Model. Mô hình cho phép tự động cập nhật data từ View-Model qua View. Thông thường View-Model sử dụng mô hình Observer để thực hiện cập nhật data từ View-Model qua View và ngược lại. Ràng buộc dữ liệu trong MVVM là không bắt buộc, một số hiện thực chỉ đơn giản làm ViewModel như một lớp trung gian giữa Model-View, lớp này giữ nhiệm vụ định dạng dữ liệu hoặc liên kết trạng thái của View.
• Thay thế Presenter trong MVP bằng View-Model nhưng có một số điểm khác như sau: - View không biết đến Model. Trong mô hình Observer thì View sẽ là thành phần lắng nghe và emit các event từ người dùng và từ life cycle của View qua View-Model.
– View-Model: sẽ đảm nhận công việc đồng bộ dữ liệu từ model lên View. Mối quan hệ giữa View và View-Model là View sẽ được ánh xạ tới View-Model nhưng View- Model lại không biết thông tin gì về View. Nó được ẩn dấu qua cách sử dụng Ràng buộc
dữ liệu và cơ chế của mô hình Observer. Một View-Model có thể được ánh xạ từ nhiều View. - Ưu điểm: Thực hiện Unit testing sẽ rất dễ dàng, vì thực sự không phụ thuộc vào view. Khi test chỉ cần xác nhận rằng các biến observable được set thích hợp khi model thay đổi. Không cần phải tạo mockup cho view để test như ở mô hình MVP.
- Hạn chế: Khả năng duy trì - Khi view có thể gán cả biến và biểu thức, các logic không liên quan sẽ tăng dần theo thời gian. Để phòng tránh điều này, luôn luôn lấy giá trị trực tiếp từ ViewModel so với việc cố gắng tính toán và viết lại chúng khi gán biểu thức ở View.
2.5 Một số lưu lý khi lập trình ứng dụng đa nền tảng
2.5.1 Phân biệt thiết kế UI trên hai nền tảng Android và IOS
ANDROID IOS
STATUS BAR Thời lượng pin, nhà mạng, thời gian
Thời lượng pin, nhà mạng, thời gian
NAVIGATION BAR
Điều hướng (nút Back), tên của màn hình, điều chỉnh hiển thị nội dung (như bộ lọc)
Nút back, home, và nút lịch sử
CONTENT DISPLAY
Hiển thị nội dung của ứng dụng như bản đồ, bài viết, bảng biểu, hình ảnh, video, v.v. . .
Hiển thị nội dung của ứng dụng như bản đồ, bài viết, bảng biểu, hình ảnh, video, v.v. . .
TAB BAR / ACTION BAR TABS
Điều hướng dạng tab, hoặc thanh tiến trình (progress bar), các hoạt động hoặc những điều hướng khác.
Điều hướng dạng tab.
GLOBAL
ELEMENTS • Text title được canh bên trái • Không nên thay thế text title
bằng logo của sản phẩm
• Text title được canh giữa • Có thể thay thế text title bằng
logo của sản phẩm ALERTS
• Sử dụng style vuông. • Có drop shadow tạo độ nổi. • Nội dung chữ có title và mô tả. • Nút tương tác đặt bên phải, chỉ sử dụng chữ in hoa và khoảng cách để phân biệt.
• Sử dụng style bo góc. • Không có drop shadow. • Nội dung chữ chỉ một loại,
không chia title và mô tả • Nút tương tác được phân cách
với nội dung và phân cách với nhau bởi đường line.
• Nút nhấn sử dụng chữ viết hoa ký tự đầu.
Bảng 2.1:Phân biệt thiết kế UI trên hai nền tảng Android và IOS[12]
2.5.2 Xu hướng thiết kế ứng dụng 2020
Minh họa bằng hình ảnh
Việc minh họa đã được phát triển rất lâu trong thiết kế sản phẩm của ngành công nghệ kỹ thuật số. Và sự phát triển của nó trong những năm gần đây là vô cùng ấn tượng. Việc thiết kế sử dụng hình ảnh minh họa là rất phổ biến và cần thiết trong thiết kế ứng dụng vì nó giúp cho người dùng dễ hiểu, đơn giản, tạo cảm giác gần gũi thân thiện với giao diện ứng dụng. Bên cạnh đó những hình ảnh họa hay cũng sẽ dễ thu hút sự chú ý, tạo ấn tượng mạnh mẽ cho người dùng. Một trong những cách làm cho hình ảnh minh họa trở nên hấp dẫn hơn là bạn hãy làm cho nó động, cách này sẽ thu hút sự chú ý của người dùng và kích thích họ tương tác với sản phẩm của mình.
Đơn giản hóa giao diện người dùng
Các nhà thiết kế ứng dụng có thiên hướng tạo giao diện người dùng đơn giản hóa. Họ hiểu rằng, giao diện nên đơn giản và rõ ràng để có chức năng tốt hơn. Hầu hết, các thiết kế UI là thiết kế phẳng để phù hợp với màn hình kỹ thuật số. Các tính năng nổi bật của UI đơn giản hóa bao gồm:
- Sự rõ ràng và chức năng của UI.
- Tận dụng lợi thế của màn hình kỹ thuật số.
- Các yếu tố của sự tối giản được thực hiện trong thiết kế UI. - Không gian màn hình trống.
Vuốt là cử chỉ chính trong thiết kế ứng dụng
Một xu hướng thiết kế ứng dụng là cải tiến hơn nữa trong tính năng vuốt. Màn hình điện thoại di động đã có tính năng vuốt nhưng có một phạm vi để cải thiện. Các nút quá nhỏ để chạm vào trong những năm đầu của thiết kế ứng dụng. Bây giờ, các nút đủ lớn để vuốt chúng dễ dàng.
Hình khối bo tròn tự nhiên
Không chỉ riêng thiết kế ứng dụng, các hình khối mềm mại bo góc được sử dụng nhiều trong các bản thiết kế. Các hình bo góc tròn tạo sự nhẹ nhàng, uyển chuyển, thu hút và tăng tính tương tác giữa người dùng với ứng dụng.
Bảng màu tươi và kết hợp màu tương phản
Sự lựa chọn phù hợp cho bảng màu tươi là màu Pastel.