Tìm hiểu Floating Labels là gì, cách dùng trong thiết kế form, và tại sao chúng đang trở thành tài sản UI/UX ngày càng phổ biến.
Floating Label là gì?
Đây là Floating Label:
Chỉ bằng cách nhìn minh họa trên, một số bạn có thể ngay lập tức hiểu tại sao Floating Labels là tài sản UI vinh quang, nhưng nếu bạn mới với khái niệm "Floating Labels", đây là lý do chúng mạnh mẽ:
- Chúng truyền tải nhiều thông tin thực tế mà không chiếm nhiều không gian.
- Hiệu ứng chuyển đổi mượt mà ("animation") làm form hấp dẫn hơn.
- Chúng làm thương hiệu bạn hiện đại hơn, so với form truyền thống, tĩnh, hiệu ứng chính là viền input xanh xấu xí.
Nhìn lại minh họa trên lần nữa. Nó không chỉ là trường input với placeholder text biến thành label khi nhập. Đây là những gì đang xảy ra:
- Trước tiên, người dùng thấy placeholder text mô tả mục đích trường.
- Ngay khi người dùng nhấp vào bên trong trường input, placeholder text di chuyển lên trên và đóng vai trò nhãn input điển hình — và vẫn hiển thị.
- Cùng lúc, một placeholder text mới lấy vị trí placeholder cũ, nhưng bây giờ nó là gợi ý (hint) (vai trò quan trọng nhất của placeholder) để hướng dẫn người dùng thêm trước khi họ bắt đầu gõ.
- Khi họ bắt đầu gõ, placeholder hint text biến mất, như nó nên, nhưng khác với nhiều trường input khác, placeholder text ban đầu, bây giờ là nhãn input, vẫn hiển thị cho người dùng, phòng khi họ bị phân tâm và quên mục đích trường (xảy ra thường xuyên hơn bạn nghĩ).
Nếu bạn là fan của thiết kế tối giản, Floating Labels là sự lựa chọn hoàn hảo.
Như câu nói nổi tiếng:
Hoàn hảo không phải khi không còn gì để thêm, mà khi không còn gì để bớt.
Và đó tóm gọn Floating Labels.
Nguồn
- Ví dụ code Floating Labels trên CodePen.
- Nếu bạn dùng framework Material UI, triển khai Floating Labels trên trang web là một trò chơi.
Cảnh báo rằng tùy thuộc vào cách bạn triển khai Floating Labels về mặt kỹ thuật (HTML, CSS, JavaScript), bạn có thể gặp vấn đề tương thích trình duyệt. Hãy kiểm tra caniuse.