15 dạng màn hình cơ bản dành cho thiết kế UI trên mobile (phần 1)

Ngày nay ngành công nghiệp mobile đang phát triển nhanh chóng, dẫn đến các ứng dụng cũng không ngừng thay đổi. Các bộ màn hình chuẩn của ứng dụng cũng rất khó để phân biệt. Vì vậy, trong bài viết này, chúng tôi sẽ giới thiệu các loại màn hình mobile chung và phổ biến nhất để hiển thị tính năng thiết kế.

Với sự phát triển của công nghệ ngày nay, smartphone đã trở thành một phần không thể thiếu. 

Các ứng dụng trên mobile hỗ trợ và giúp cho cuộc sống chúng ta trở nên dễ dàng hơn. Chính vì thế, công việc của một nhà thiết kế là tạo ra giao diện người dùng đáp ứng nhu cầu của người sử dụng và làm cho trải nghiệm thú vị hơn. Để xây dựng giao diện người dùng hiệu quả, các nhà thiết kế cần phải hiểu sâu hơn về đặc thù của các ứng dụng mobile, tìm hiểu các thành phần và chức năng của chúng.

Bài viết của Tubik Studio - Agency chuyên về thiết kế UX/UI và phát triển website, ứng dụng mobile, hoạt hình, đồ họa, thương hiệu.

Màn hình chung

1. Màn hình Splash

Ấn tượng đầu tiên là một trong những điểm chính ảnh hưởng đến đánh giá ​​của người dùng về một ứng dụng mobile. Khi UI (trải nghiệm người dùng) mang lại cảm giác dễ chịu ngay từ khi bắt đầu tương tác, ứng dụng đó có cơ hội mang lại nhiều người dùng hơn. Đó là lý do tại sao màn hình Splash cần được quan tâm nhiều như bất kỳ màn hình ứng dụng mobile nào.

Màn hình Splash là hình ảnh đầu tiên người dùng xem được khi tìm hiểu về một ứng dụng di động. Chúng thường được thiết kế tối giản với phần hiển thị tên, logo, ​​hoặc khẩu hiệu của một sản phẩm. Để đảm bảo rằng màn hình Splash sẽ hiển thị đẹp trên các thiết bị khác nhau, các nhà thiết kế thường tập trung các yếu tố ở giữa màn hình. Màn hình Splash được khuyến cáo hiển thị không quá 4-8 giây, nếu không sẽ gây khó chịu cho người dùng. Ngoài ra, nó sẽ tốt hơn khi hiển thị tiến độ tải, giúp người dùng thiếu kiên nhẫn có thể biết khi nào ứng dụng sẽ được trình bày.

Ứng dụng thương mại điện tử

2. Màn hình hướng dẫn Onboarding

Onboarding là một tập hợp các màn hình trình bày ứng dụng mobile, hệ thống định vị, tính năng và lợi ích mà ứng dụng có thể mang đến cho người dùng. Chúng xuất hiện trong lần đầu tiên khởi chạy ứng dụng, giúp người dùng được định hướng và kiểm soát những tính năng không quen thuộc, cũng như hiểu được liệu ứng dụng có hữu ích hay không.

Cấu trúc và nội dung của hướng dẫn ứng dụng rất riêng biệt cho từng dự án cụ thể. Tuy nhiên, có một số khuynh hướng chung trong thiết kế onboarding. Trước hết, hướng dẫn này sử dụng nhiều minh họa tùy chỉnh để trình bày một tính năng cụ thể hoặc lợi ích một cách hấp dẫn và dễ giải mã. Ngoài ra, các nhà thiết kế thường gắn vào một linh vật, đó là một nhân vật mô phỏng dòng chảy của truyền thông thực sự với người sử dụng và thiết lập sự gắn kết cảm xúc. Một nội dung ấn tượng cũng rất quan trọng cho việc đăng nhập. Nó nên ngắn gọn, hữu ích và dễ đọc.

Hướng dẫn về Bách khoa toàn cầu về thế giới dưới nước

3. Màn hình trang chủ và menu

Homey App

Màn hình trang chủ là phần thiết yếu của bất kỳ ứng dụng nào. Trong một ứng dụng mobile, đây là màn hình chính mà người dùng tương tác với hầu hết các tùy chọn của ứng dụng. Màn hình trang chủ được thiết kế tùy thuộc vào loại sản phẩm và mục đích, nhưng nó vẫn mang một số yếu tố chính phổ biến cho từng loại khác nhau. Trước tiên, màn hình chính thường bao gồm thanh tìm kiếm hoặc nút để người dùng có thể dễ dàng tìm kiếm nội dung mà họ cần. Ngoài ra, vì màn hình trang chủ là điểm bắt đầu cho hành trình của người dùng, nó thường chứa các phần tử điều hướng cung cấp quyền truy cập vào các phần nội dung khác nhau.

Để làm cho tương tác của người dùng dễ dàng hơn, ứng dụng dành cho mobile cần trang bị một menu chứa danh sách các hướng có thể xảy ra, để người dùng di chuyển đến trong một cú click. Có hai biến thể trình bày menu trong các ứng dụng mobile: nó có thể là một phần của màn hình trang chủ hoặc một màn hình riêng. Bạn nên đề xuất nhiều tùy chọn trong menu hiển thị dưới bảy phần quan trọng. Nếu ứng dụng cần nhiều hơn, bạn nên tạo các tiểu mục.

Slide Menu Concept

4. Màn hình đăng nhập và hồ sơ cá nhân

Ngày nay nhiều ứng dụng cho phép người dùng tạo tài khoản cá nhân, vì vậy mỗi nhà thiết kế cần phải biết làm thế nào để làm việc với màn hình đăng nhập và hồ sơ cá nhân. Màn hình đăng nhập phải được thiết kế tối giản và rõ ràng để người dùng có thể dễ dàng truy cập vào ứng dụng. Thông thường có hai trường gồm nơi người dùng có thể nhập tên và mật khẩu cùng với nút xác nhận. Đối với những người sử dụng ứng dụng lần đầu tiên, luôn phải có tùy chọn để đăng ký.

Hồ sơ cá nhân làm cho tương tác trong ứng dụng mobile được cá nhân hóa và cho phép hoạt động với dữ liệu một cách hiệu quả. Ngoài ra, tài khoản cá nhân là phần quan trọng của bất kỳ ứng dụng nào có liên quan đến người dùng trong cộng đồng mạng xã hội và chia sẻ thông tin cá nhân với những người khác. Nhiệm vụ chính của các nhà thiết kế là tối đa hóa sự tiện lợi thông qua một UX thông minh. 

Theo Interaction Design Foundation, điểm đầu tiên mà nhà thiết kế cần cân nhắc là trang hồ sơ cá nhân phải rõ ràng khi sử dụng. Số lượng thông tin phải được giới hạn, nếu không màn hình hồ sơ có thể nhìn quá phức tạp. Hơn nữa, điều quan trọng để tạo ra hệ thống điều hướng là yếu tố trực quan. Bằng cách này người dùng sẽ không phải mất nhiều công sức để khám phá các ứng dụng. Cuối cùng, thiết kế màn hình hồ sơ cá nhân phải được định hướng đến đối tượng khách hàng mục tiêu. Nghiên cứu người dùng là việc cần thiết nếu bạn muốn ứng dụng của mình đáp ứng được nhu cầu của người dùng.

id 15 dang man hinh co ban de thiet ke ui tren mobile 6
Ứng dụng hẹn hò

5. Màn hình Thống kê

Các ứng dụng khác nhau chứa các số liệu thống kê về hoạt động của người dùng khác nhau. Dữ liệu càng cung cấp nhiều thì việc thiết kế màn hình thống kê cho mobile càng khó khăn. Các nhà thiết kế cần chắc chắn rằng có thể nhìn thấy tất cả các thông tin quan trọng trên màn hình một cách rõ ràng và khả dụng. Biểu đồ đường cong, tỷ lệ và biểu tượng nguyên bản có thể làm cho màn hình thống kê được trơn tru và sạch sẽ trên ứng dụng mobile. Hơn nữa, màn hình thống kê đòi hỏi phải có typography riêng biệt để người dùng có thể dễ dàng đọc dữ liệu.

id 15 dang man hinh co ban de thiet ke ui tren mobile 7
Ứng dụng NGIN

6. Lịch

Ứng dụng sự kiện, ứng dụng danh sách công việc và nhiều ứng dụng cung cấp lịch cá nhân cho người dùng. Tùy thuộc vào từng loại ứng dụng, lịch thực hiện một số chức năng nhất định như nhắc nhở hoặc lịch trình. Yếu tố thị giác dành cho lịch phải phù hợp với tâm trạng và mục tiêu của ứng dụng mobile.

id 15 dang man hinh co ban de thiet ke ui tren mobile 8
Lịch Bright Vibe

(Còn tiếp)

Biên tập: Thao Lee

Nguồn: Tubik

12 xu hướng thiết kế UX Mobile cho năm 2018

Định luật Miller - kim chỉ nam trong thiết kế UX

Mẹo và lời khuyên khi thiết kế lại một trang web