Thiết kế app là gì? Quy trình 6 bước từ ý tưởng đến prototype

Thiết kế app là gì và quy trình 6 bước: tìm hiểu người dùng, user flow, wireframe, giao diện UI, prototype và test, bàn giao cho lập trình viên; minh hoạ bằng một app đặt lịch chụp ảnh mẫu.

Thiết kế app là quá trình quyết định một ứng dụng trông thế nào và hoạt động ra sao trước khi lập trình viên viết code: người dùng đi qua những màn hình nào, mỗi màn hình có gì, nút nằm đâu, màu và chữ ra sao. Người làm việc này thường gọi là UI/UX designer. Bài này đi qua quy trình 6 bước bằng một ví dụ nhỏ: app đặt lịch chụp ảnh "Hẹn Chụp" do ColorME tự dựng, từ user flow, wireframe đến giao diện và prototype.

Quy trình thiết kế app 6 bước

Quy trình thiết kế app 6 bước. Sơ đồ do ColorME tổng hợp.

Các bước không đi một chiều. Sau khi cho người dùng thử prototype, gần như luôn phải quay lại sửa wireframe hoặc giao diện. Với app nhỏ, một người có thể làm cả 6 bước; ở công ty lớn, nghiên cứu người dùng (UX research), thiết kế giao diện (UI) và viết nội dung (UX writing) có thể do nhiều người đảm nhận.

Bước 1: Tìm hiểu người dùng và mục tiêu

Trước khi vẽ bất cứ thứ gì, hãy trả lời ba câu: ai dùng app, họ muốn làm xong việc gì, và hiện họ đang làm việc đó bằng cách nào. Với "Hẹn Chụp", người dùng là các bạn trẻ muốn đặt một buổi chụp ảnh chân dung; việc chính là chọn gói và chọn giờ trống nhanh nhất có thể. Ghi lại thành một hai persona ngắn và xem vài app đặt lịch có sẵn để biết người dùng đã quen thao tác nào.

Bước 2: Vẽ user flow

User flow đặt lịch chụp ảnh cho app giả định Hẹn Chụp, có nhánh chưa đăng nhập.

User flow là sơ đồ các màn hình người dùng đi qua để làm xong một việc. Với việc "đặt một buổi chụp": mở app, chọn gói, kiểm tra đã đăng nhập chưa, chọn ngày giờ, xác nhận. Mỗi hình chữ nhật sau này thành một màn hình, mỗi hình thoi là một điểm rẽ nhánh. Vẽ flow giúp bạn biết cần thiết kế bao nhiêu màn hình và không bỏ sót trường hợp như "chưa đăng nhập".

Bước 3: Wireframe, chưa cần màu

Wireframe low-fidelity của ba màn hình: khối xám cho ảnh, vạch cho chữ.

Wireframe là bản phác bố cục bằng khối xám và vạch thay chữ. Mục tiêu là chốt thứ tự nội dung: ảnh ở đâu, tiêu đề nào to nhất, nút chính nằm đâu để ngón cái dễ bấm. Làm wireframe xám giúp cả nhóm bàn về cấu trúc mà không bị cuốn vào chuyện "màu này đẹp không". Đọc thêm wireframe là gì và các mức low-fidelity, high-fidelity.

Bước 4: Thiết kế giao diện (UI)

Giao diện hoàn chỉnh theo đúng wireframe. Thiết kế mẫu do ColorME tự dựng; ảnh: Sou Jest, Unsplash.

Giao diện là lúc thêm màu, chữ, ảnh và icon vào đúng khung wireframe. Mẫu trong ảnh dùng một màu chính tím #5B4BDB cho nút và nhãn đang chọn, chữ Be Vietnam Pro, nền trắng, và nhiều khoảng trống để người dùng tập trung vào ảnh mẫu và nút hành động. Một vài nguyên tắc:

• Một nút chính mỗi màn hình: "Xem gói chụp", "Chọn lịch", "Xác nhận" luôn cùng kiểu, cùng vị trí phía dưới.
• Dùng lưới và khoảng cách đều: xem bài layout grid trong Figma: 4 cột cho mobile.
• Gom màu, chữ, nút thành design system: để mọi màn hình đồng bộ và lập trình viên dùng lại được.
• Kiểm tra chữ tiếng Việt và độ tương phản: font phải đủ dấu, chữ trên nền màu phải đọc được.

Bước 5: Prototype và cho người dùng thử

Prototype: vùng bấm (khung đỏ) nối các màn hình để người dùng bấm thử.

Prototype là các màn hình được nối với nhau để bấm thử như app thật. Theo hướng dẫn prototype của Figma, bạn chọn vùng bấm (hotspot), kéo kết nối tới màn hình đích, và mở "the Prototype tab in the right sidebar" để thêm tương tác, hiệu ứng chuyển cảnh. Sau đó gửi prototype cho vài người dùng thật, nhờ họ đặt thử một lịch và quan sát chỗ họ lúng túng. Xem thêm prototype là gì trong thiết kế UI/UX và usability testing.

Bước 6: Bàn giao cho lập trình viên

Bàn giao (design handoff) là gửi cho lập trình viên mọi thứ họ cần để dựng đúng thiết kế: kích thước, khoảng cách, mã màu, font, ảnh và icon đã xuất, cùng các trạng thái của nút (bình thường, đang bấm, bị khoá) và màn hình lỗi, màn hình trống. Thiết kế càng rõ ràng ở bước 4, bàn giao càng nhanh.

Học thiết kế app bắt đầu từ đâu?

Bạn không cần biết vẽ hay biết code để bắt đầu. Hãy tập lại quy trình trên với một app nhỏ quen thuộc: đặt đồ uống, ghi chi tiêu, đặt lịch cắt tóc. Công cụ phổ biến nhất hiện nay là Figma, xem Figma là gì và lộ trình học Figma. Nếu muốn học có người hướng dẫn, khoá UI/UX của ColorME đi đúng thứ tự này trong 8 buổi: user flow và wireframe, màu sắc và chữ, auto layout, design system, giao diện app và web, rồi prototype bấm thử trên điện thoại.

Ảnh minh hoạ trong giao diện mẫu: Sou Jest, Unsplash (Unsplash License). App "Hẹn Chụp" và mọi màn hình là thiết kế mẫu do ColorME tự dựng.

Câu hỏi thường gặp

Thiết kế app là gì?

Là quá trình quyết định một ứng dụng trông thế nào và hoạt động ra sao trước khi lập trình: luồng màn hình, bố cục, màu, chữ, nút bấm và cách người dùng tương tác.

Quy trình thiết kế app gồm những bước nào?

Thường gồm 6 bước: tìm hiểu người dùng, vẽ user flow, làm wireframe, thiết kế giao diện, làm prototype và cho người dùng thử, rồi bàn giao cho lập trình viên.

Wireframe và prototype khác nhau thế nào?

Wireframe là bản phác bố cục tĩnh bằng khối xám. Prototype là các màn hình được nối với nhau để bấm thử như app thật, có thể ở mức thô hoặc đã có giao diện hoàn chỉnh.

Thiết kế app dùng phần mềm gì?

Figma là công cụ phổ biến nhất hiện nay để làm wireframe, giao diện và prototype trong cùng một file. Giai đoạn đầu bạn cũng có thể phác user flow và wireframe trên giấy.

Không biết code có học thiết kế app được không?

Được. Designer tập trung vào luồng, bố cục và giao diện; lập trình viên dựng app từ file thiết kế. Hiểu cơ bản cách app được xây dựng sẽ giúp bạn bàn giao dễ hơn.