Tìm hiểu Nhãn nổi là gì, cách chúng được sử dụng trong thiết kế biểu mẫu và lý do tại sao chúng ngày càng trở thành một nội dung ngày càng phổ biến trong Thiết kế UI / UX.
Nhãn nổi là gì?
Đây là một Nhãn nổi:
Chỉ cần nhìn vào hình minh họa ở trên, một số bạn có thể hiểu ngay lý do tại sao Nhãn nổi là một nội dung tuyệt vời về giao diện người dùng, nhưng trong trường hợp bạn chưa quen với khái niệm "Nhãn nổi", đây là lý do tại sao chúng lại có sức mạnh như vậy:
- Chúng truyền tải nhiều thông tin thiết thực mà không chiếm nhiều dung lượng.
- Hiệu ứng chuyển tiếp mượt mà (“hoạt ảnh”) làm cho biểu mẫu trở nên hấp dẫn hơn
- Chúng làm cho thương hiệu của bạn trông hiện đại hơn so với các hình thức tĩnh, truyền thống, mà hiệu ứng chính là đường viền trường nhập liệu màu xanh lam gớm ghiếc.
Hãy nhìn lần thứ hai vào hình minh họa ở trên. Nó không chỉ là một trường nhập với văn bản giữ chỗ mà trở thành một nhãn khi nhập. Đây là những gì đang diễn ra:
- Đầu tiên, người dùng nhìn thấy văn bản giữ chỗ mô tả mục đích của trường.
- Ngay khi người dùng nhấp vào bên trong trường nhập liệu, văn bản giữ chỗ sẽ di chuyển lên trên cùng và đóng vai trò của nhãn đầu vào điển hình - và vẫn hiển thị.
- Đồng thời, văn bản trình giữ chỗ mới thay thế vị trí của trình giữ chỗ cũ, nhưng giờ đây nó là gợi ý (là vai trò quan trọng nhất của văn bản giữ chỗ) để hướng dẫn thêm cho người dùng trước khi họ bắt đầu nhập.
- Khi họ bắt đầu nhập, văn bản gợi ý trình giữ chỗ sẽ biến mất, nhưng không giống như nhiều trường nhập khác, văn bản giữ chỗ ban đầu, hiện là nhãn đầu vào, vẫn hiển thị cho người dùng, trong trường hợp họ bị phân tâm và quên mục đích của lĩnh vực (điều này xảy ra thường xuyên hơn bạn nghĩ).
Nếu bạn là người yêu thích thiết kế tối giản, thì Nhãn nổi là một 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 là khi không còn gì để thêm mà là khi không còn gì để lấy đi.
Và tóm lại đó là khá nhiều Nhãn nổi.
Tài nguyên
- Các ví dụ về mã nhãn nổi trên CodePen.
- Nếu bạn đang sử dụng khung giao diện người dùng Material, việc triển khai Nhãn nổi trên trang web của bạn thật dễ dàng.
Hãy lưu ý rằng tùy thuộc vào cách thức bạn triển khai Nhãn nổi về mặt kỹ thuật (HTML, CSS, JavaScript), bạn có thể gặp phải một số vấn đề về tính không tương thích của trình duyệt. Hãy chắc chắn để kiểm tra trên caniuse.