Chiec-button-hinh-hop-chu-nhat

Hướng dẫn thiết kế button

Botton là một thành phần tương tác người dùng phổ biến trong website. Trong khi nó dường như rất đơn giản, nhưng là một trong nhưng điểm quan trọng.

Trong bài viết này, Chúng ta bàn sung quanh button  bạn nên  biết  để tạo ra những tương tác nâng cao trải nghiệm người dùng.

Bài này được tạm dịch bởi Khoweb. Nội dung gốc tại www.smashingmagazine.com. Nếu bạn thích xem bản gốc có thể xem tại https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/.

Những bài viết nước ngoài thước rất dài dòng, Bạn có thể kiên nhận xem đầy đủ hoặc chỉ cần hiểu là cái button là một phần phổ biến trong thiết website. Với những website nhỏ người ta không đặt nặng vấn đề này lắm, bạn chỉ cần thiết kế tổng thể hài hòa là được. Nhưng với những website với hàng chục ngàn lượt truy cập một ngày. Chỉ cần thay đổi chút ít về cái button không phù hợp bạn sẽ nhận ra ngay ở kết quả bán hàng, hay recruite member. Nếu thiết kế cách điệu cái button làm nó bị nhầm lẫn với thành phần khác hoặc dùng icon không rỏ ràng.

Để khắc phục điều này bạn cần chú ý các điểm:

  • Phải đồng nhất trong thiết kế
  • Button phải giống một button
  • Dùng shadow và hilight
  • Label trên button phải dễ hiểu
  • Đặt button tại nới người dùng dễ chú ý nhất
  • Button phải dể tương tác
  • Phân biệt rỏ ràng button chính và button phụ

Chi tiết từng điểm trên vui lòng xem nội dung sau.

Thiết kế button giống button

Làm sao để người dùng hiểu đó là một cái button ? Việc này khá đơn giản, Sức mạnh của giao diện có thể giúp người dùng xác định là có thể click.Việc đó rất quan trọng vì bạn phải làm sao để người dùng nhìn vào xác định ngay thành phần mà bạn thiết kế có thể click.

Hình ảnh chiếc button

Giải pháp an toàn nhất là thiết kế button vuông hoặc hình vuông với các góc bo tròn, nó phụ thuộc vào phong cách thiết kế website hoặc ứng dụng của bạn. Button dạng này đã được sử dụng từ những ngày đầu tiên trong giới digital và người dùng đã vô cùng quen thuộc với nó.

chiec-button-hinh-hop-chu-nhat

Chiếc button hình hộp chữ nhật vô cùng quen thuộc trên window

Tuy nhiên, bạn có thể sáng tạo hơn với những hình dạng khác cho chiếc button (hình tròn, ovan, tam giác …). Điều này đã trở nên bình thường, những sản phẩm digital đã trở nên phổ biến, đa dạng và thú vị, bởi thể những chiếc button hình hộp chữ nhật đã trở thành đơn điệu. Tuy nhiên, những sáng tạo độc nhất của các bạn gặp một chút rủi ro là người dùng không biết nó là một button.

mot-button-hinh-tron

mot-button-hinh-tron

Không vấn đề gì với hình dạng button mà bạn chọn, chỉ cần đảm bảo duy trì tính nhất quán thông qua giao diện. Nhờ đó, người dùng sẽ nhận ra và hiểu tất cả những thành phần UI (Giao diện người dùng).

Tại sao sự nhất quán trong thiết kế lại quan trọng?

Bởi vì người dùng ghi nhớ những chi tiết trên sản phẩm của bạn.  Họ ghi nhớ hình dạng của chiếc button. Vì vậy, sự nhất quán không chỉ giúp bản thiết kế trở nên tốt hơn, chỉnh chu hơn mà con giúp người dùng các sản phẩm của bạn một cách thân thuộc, dể hiểu.

Nhìn vào hình ảnh thiết kế chiếc button sau bạn sẽ dể dàng nhận ra tầm quan trọng của tính nhất quán trong thiết kế.

Tính nhất quán trong thiết kế

Hình ảnh mô tả tính nhất quán trong thiết kế

SHADOWS AND HIGHLIGHTS LINK

(Tạm dịch: Đổ bóng và làm nổi bật )

Shadows có giá trị then chốt , gây chú ý với người dùng, nó làm cho button tách biệt khỏi nền giúp người dùng dễ dàng xác định nó có thể click.

Leave a Reply

Your email address will not be published. Required fields are marked *