Mobbin

Trang web thú vị

Trang web thú vịThư viện UIĐộ khó: DễCó bản miễn phí

Mobbin

4.0/5Đánh giá của 2dm

Thư viện màn hình ứng dụng thật, rất hữu ích khi thiết kế.

Thư viện ảnh chụp màn hình và luồng thao tác từ ứng dụng, website thật, sao chép nhanh sang Figma để tham khảo.

Mở trang chính thức Xem cách dùng

Giới thiệu

Mobbin là thư viện tham khảo thiết kế gồm rất nhiều màn hình thực tế đã được phát hành từ các ứng dụng di động và website, được cập nhật thường xuyên. Nội dung được sắp xếp theo ứng dụng, màn hình, luồng thao tác (flow), chuyển động và thành phần giao diện.

Điểm khác biệt là bạn xem được cả một hành trình người dùng, ví dụ đăng ký tài khoản, thanh toán hay xóa tài khoản, qua từng bước liên tiếp thay vì chỉ một ảnh đơn lẻ. Mobbin có plugin cho Figma và FigJam để dán nhiều màn hình hoặc cả luồng vào canvas.

Với doanh nghiệp đang làm app hoặc website, Mobbin giúp nghiên cứu cách các sản phẩm lớn giải quyết cùng một bài toán, từ đó ra quyết định thiết kế có căn cứ hơn.

Tính năng nổi bật

Màn hình thật đã phát hành

Tham khảo từ sản phẩm thực tế thay vì bản vẽ ý tưởng.

Xem theo luồng thao tác

Flows nhóm các bước của một nhiệm vụ như onboarding, thanh toán, quản lý tài khoản.

Thành phần giao diện

Mục UI Elements phân loại thẻ, bảng, thanh điều hướng, cửa sổ nổi để so sánh nhanh.

Sao chép sang Figma

Chọn nhiều màn hình hoặc một luồng, bấm Copy to Figma rồi dán bằng plugin Mobbin.

Thư viện cá nhân

Lưu màn hình, luồng vào bộ sưu tập và tải ảnh chụp riêng lên để làm bảng cảm hứng.

Dùng để làm gì

Thiết kế quy trình đặt hàng

Xem các luồng thanh toán của ứng dụng thương mại lớn trước khi vẽ luồng cho app của mình.

Cải thiện onboarding

Tham khảo cách sản phẩm khác dẫn người dùng mới qua vài màn hình đầu tiên.

Viết brief cho đội dev

Gom màn hình mẫu vào Figma kèm ghi chú để đội lập trình hiểu đúng yêu cầu.

Nghiên cứu đối thủ

Xem giao diện của sản phẩm cùng phân khúc nếu có trong thư viện.

Đào tạo designer mới

Dùng luồng thực tế làm bài tập phân tích trải nghiệm người dùng.

Cách dùng

1
Tạo tài khoản
Truy cập mobbin.com và đăng ký để bắt đầu duyệt thư viện.
2
Chọn nền tảng
Chọn xem thiết kế di động hoặc web tùy dự án.
3
Tìm theo nhu cầu
Duyệt theo ứng dụng, màn hình, luồng hoặc thành phần giao diện, hoặc gõ từ khóa tìm kiếm.
4
Xem luồng tương tác
Mở một flow và bấm qua từng điểm nóng để trải nghiệm như bản prototype.
5
Đưa vào Figma
Chọn màn hình hoặc luồng, bấm Copy to Figma, mở plugin Mobbin trong Figma và dán vào canvas.
6
Lưu bộ sưu tập
Lưu những mẫu hữu ích vào thư viện theo từng dự án để dùng lại.

Video hướng dẫn

How To Use Mobbin for UI/UX Inspiration!
Didasko Media

How to Find Top-Tier Website & App Design Inspiration in Minutes: Mobbin 2024
Jonathan Waterworth

Ví dụ thực tế

Tình huống minh hoạ

Một startup giao đồ ăn ở Cần Thơ chuẩn bị làm app riêng. Trước buổi họp thiết kế, nhóm sản phẩm vào Mobbin xem luồng đặt món và thanh toán của vài ứng dụng giao đồ ăn, chép các luồng đó sang FigJam, đánh dấu điểm hợp lý và điểm rườm rà. Nhờ vậy cả nhóm thống nhất nhanh số bước đặt hàng mong muốn trước khi designer bắt đầu vẽ.

Mẹo & lưu ý

Học cấu trúc, không sao chép giao diện
Dùng mẫu để hiểu logic bố cục, sau đó thiết kế theo nhận diện thương hiệu của bạn.
So sánh nhiều sản phẩm
Xem cùng một luồng ở vài ứng dụng để thấy điểm chung và điểm khác biệt.
Đặt tên bộ sưu tập theo dự án
Giúp cả đội tìm lại tài liệu tham khảo nhanh khi dự án kéo dài.
Chú ý bối cảnh người dùng Việt
Thói quen thanh toán, đăng nhập ở Việt Nam có thể khác thị trường của sản phẩm mẫu.