Nguyên tắc thiết kế button UI: 8 cách để thiết kế button hoàn hảo

Button (nút bấm) là thành phần không thể thiếu trong thiết kế UI. Tuy vậy, không phải designer nào cũng hiểu rõ về button và biết cách thiết kế để nó thực sự hiệu quả.

Trong bài viết này, Capi Demy tổng hợp 8 nguyên tắc thiết kế button UI giúp nút bấm của bạn vừa thu hút hơn, vừa thân thiện hơn với người dùng. Bài viết cũng giới thiệu các trạng thái button và kích thước touch target chuẩn cho thiết kế mobile.

Button là một trong những UI element quan trọng nhất. Nếu bạn muốn tìm hiểu các thành phần giao diện khác, hãy đọc thêm bài UI element là gì? 13 UI element phổ biến trong thiết kế giao diện.

8 nguyên tắc thiết kế button UI

1. Chọn hình dạng button dễ nhận biết

Khi tương tác với giao diện, người dùng cần biết ngay đâu là thành phần có thể bấm và đâu thì không. Vì vậy, hãy dùng những hình dạng button quen thuộc như hình chữ nhật, chữ nhật bo góc hoặc hình viên thuốc. Tránh những hình dạng lạ như ngôi sao, vì người dùng sẽ khó nhận ra đó là một button.

2. Thể hiện mức độ ưu tiên của button

Kích thước và kiểu dáng của button cần phản ánh mức độ quan trọng của nó. Button dạng chữ (text button) có độ nhấn mạnh thấp, button viền (outlined button) có độ nhấn mạnh trung bình, còn button tô màu nền (filled button) có độ nhấn mạnh cao. Ngoài ra còn có button dạng công tắc (toggle) cho các hành động bật/tắt. Button càng cần được ưu tiên thì nên có kích thước càng lớn.

3. Hiểu cấu tạo của một button

Một button cơ bản gồm 3 phần: nhãn văn bản (text label), nền (background) và đường viền (border). Hiểu rõ từng phần giúp bạn tùy biến button đúng mục đích.

4. Áp dụng tâm lý học màu sắc

Màu sắc là công cụ hiệu quả để thể hiện công dụng và tầm quan trọng của một button. Ví dụ, button chính (primary) thường dùng màu xanh dương, button nguy hiểm (danger) dùng màu đỏ, button cảnh báo (warning) dùng màu cam và button thành công (success) dùng màu xanh lá. Để làm nổi bật button quan trọng, hãy dùng màu tương phản với nền.

5. Đặt button ở vị trí người dùng mong đợi

Button nên được đặt ở nơi người dùng dễ tìm thấy hoặc mong đợi sẽ nhìn thấy. Đừng bắt người dùng phải đi "săn" button.

Mẹo: Luôn đặt button quan trọng trong màn hình đầu tiên.

6. Đặt tên rõ ràng cho từng button

Nhãn của button cần nói rõ chức năng của nó. Ví dụ, với câu hỏi "Cancel Order?", cặp button "Yes / Cancel" gây nhầm lẫn, còn "Yes / No" thì rõ ràng. Button có tên chung chung hoặc gây hiểu lầm có thể khiến người dùng khó chịu hay thất vọng.

7. Kích thước button phù hợp với ngón tay người dùng

Chiều ngang trung bình của đầu ngón tay người là 1,6 - 2cm. Vì vậy, bạn nên thiết kế button có kích thước tối thiểu 44 - 56px để người dùng dễ chạm và tương tác trên điện thoại.

Touch target là vùng có thể chạm để kích hoạt một button. Vùng này có thể lớn hơn phần hình hiển thị của button, ví dụ một icon 24px vẫn có vùng chạm 48px. Kích thước tối thiểu được đưa ra như sau:

Ngoài kích thước, hãy giữ khoảng cách đủ rộng giữa các vùng chạm để người dùng không bấm nhầm.

8. Đặt khoảng cách phù hợp giữa các button

Khoảng cách giữa các button cũng thay đổi theo mức độ ưu tiên. Những kích thước này giúp người dùng phản ứng nhanh hơn và chính xác hơn.

Các trạng thái của button

Một button hoàn chỉnh không chỉ có một hình dạng duy nhất. Nó cần thay đổi giao diện theo từng trạng thái để người dùng biết hệ thống đã ghi nhận thao tác của họ. Khi thiết kế, bạn nên chuẩn bị đủ các trạng thái sau.

1. Default

Default là trạng thái mặc định khi button chưa có tương tác nào. Đây là trạng thái gốc để các trạng thái khác biến đổi từ đó.

2. Hover

Hover là trạng thái khi người dùng di chuột lên button, thường thể hiện bằng màu nền đậm hơn hoặc nhạt hơn một chút. Trạng thái này chỉ có trên máy tính, không có trên màn hình cảm ứng.

3. Focus

Focus là trạng thái khi button được chọn bằng bàn phím (phím Tab), thường có thêm một đường viền nổi bật. Trạng thái này rất quan trọng với người dùng không sử dụng chuột.

4. Pressed

Pressed (hay active) là trạng thái khi người dùng đang nhấn vào button. Button thường tối màu hơn hoặc hơi thu nhỏ lại để tạo cảm giác "được bấm".

5. Disabled

Disabled là trạng thái button chưa thể sử dụng, ví dụ khi người dùng chưa điền đủ thông tin trong form. Button thường được làm mờ đi và không phản hồi khi bấm.

6. Loading

Loading là trạng thái sau khi người dùng bấm và hệ thống đang xử lý. Button hiển thị biểu tượng tải và tạm khóa lại để tránh việc bấm nhiều lần.

Tuy nhiên

Nắm được các nguyên tắc thiết kế button UI mới chỉ là bước đầu. Để thiết kế được hệ thống button đầy đủ trạng thái và áp dụng vào giao diện hoàn chỉnh, bạn cần thực hành trên các dự án thực tế.

👉 Xem chi tiết khóa UI Design và đăng ký ngay!

Chưa biết phải bắt đầu từ đâu? Xem bài viết Bắt đầu học UI/UX từ đâu: lộ trình cho người mới học hoặc So sánh các khóa học của Capi Demy.

Kết luận

Button tuy nhỏ nhưng ảnh hưởng trực tiếp đến việc người dùng có hoàn thành được thao tác hay không. Nắm vững 8 nguyên tắc thiết kế button UI, các trạng thái button và kích thước touch target sẽ giúp giao diện của bạn dễ dùng và chuyên nghiệp hơn.

Muốn hiểu cách button kết hợp với các thành phần khác trong một màn hình, bạn có thể đọc tiếp bài UI Design là gì? UI Designer làm những gì? và Học thiết kế giao diện cho người mới bắt đầu. Hãy thử áp dụng từng nguyên tắc vào thiết kế của bạn nhé!

Thông tin liên hệ tư vấn:

Fanpage: Capi Demy

Email: capidemy@gmail.com

Website: Capidemy.com

Địa chỉ: Tầng 6, số 35 Tô Vĩnh Diện, Khương Đình, Hà Nội