เรียนรู้ว่า Floating Label คืออะไร ใช้ในการออกแบบแบบฟอร์มอย่างไร และเหตุใดจึงกลายเป็นทรัพย์สินที่ได้รับความนิยมมากขึ้นเรื่อยๆ ในการออกแบบ UI/UX
ป้ายกำกับลอยตัวคืออะไร
นี่คือป้ายชื่อลอย:
เมื่อดูภาพประกอบด้านบนแล้ว บางท่านอาจเข้าใจทันทีว่าทำไม Floating Labels จึงเป็นเนื้อหา UI ที่ยอดเยี่ยม แต่ในกรณีที่คุณยังใหม่ต่อแนวคิด "Floating Labels" เหตุผลเหล่านี้จึงมีประสิทธิภาพมาก:
- นำเสนอข้อมูลที่เป็นประโยชน์มากมายโดยไม่ต้องใช้พื้นที่มากนัก
- เอฟเฟกต์ทรานซิชัน ("แอนิเมชั่น") ที่ลื่นไหลทำให้ฟอร์มน่าดึงดูดยิ่งขึ้น
- สิ่งเหล่านี้ทำให้แบรนด์ของคุณดูทันสมัยมากขึ้นกว่ารูปแบบคงที่แบบดั้งเดิม ซึ่งเอฟเฟกต์หลักคือโครงร่างฟิลด์ป้อนข้อมูลสีน้ำเงินที่น่าเกลียด
ลองดูภาพประกอบด้านบนอีกครั้ง ไม่ใช่แค่ช่องป้อนข้อมูลที่มีข้อความตัวแทนที่จะกลายเป็นป้ายกำกับเมื่อป้อน นี่คือสิ่งที่เกิดขึ้น:
- ขั้นแรก ผู้ใช้เห็นข้อความตัวแทนที่อธิบายวัตถุประสงค์ของฟิลด์
- ทันทีที่ผู้ใช้คลิกในช่องป้อนข้อมูล ข้อความตัวยึดตำแหน่งจะเลื่อนไปที่ด้านบนสุดและใช้บทบาทของป้ายกำกับอินพุตทั่วไป และยังคงมองเห็นได้
- ในขณะเดียวกัน ข้อความตัวยึดตำแหน่งใหม่ก็เข้ามาแทนที่ตัวยึดตำแหน่งแบบเก่า แต่ตอนนี้กลายเป็น คำใบ้ (ซึ่งเป็นบทบาทที่สำคัญที่สุดของตัวแทนข้อความ) เพื่อแนะนำผู้ใช้เพิ่มเติมก่อนที่จะเริ่มพิมพ์
- เมื่อพวกเขาเริ่มพิมพ์ข้อความแนะนำตัวยึดตำแหน่งจะหายไป อย่างที่ควรจะเป็น แต่แตกต่างจากฟิลด์ป้อนข้อมูลอื่นๆ ข้อความที่พักเดิมซึ่งขณะนี้เป็นป้ายกำกับอินพุต ผู้ใช้จะยังมองเห็นได้ในกรณีที่พวกเขาฟุ้งซ่านและ ลืมจุดประสงค์ของสนามไปซะ (สิ่งนี้เกิดขึ้นบ่อยกว่าที่คุณคิด)
หากคุณเป็นแฟนตัวยงของการออกแบบที่เรียบง่าย Floating Labels นั้นเหมาะสมอย่างยิ่ง
ดังคำกล่าวที่มีชื่อเสียงว่า:
ความสมบูรณ์แบบไม่ใช่เมื่อไม่มีอะไรเหลือให้เติม แต่เมื่อไม่มีอะไรเหลือให้เอาไป
และนั่นคือฉลากแบบลอยตัวโดยสรุป
ทรัพยากร
- ตัวอย่างโค้ดป้ายกำกับแบบลอยใน CodePen
- หากคุณกำลังใช้เฟรมเวิร์ก Material UI การติดตั้ง Floating Labels บนเว็บไซต์ของคุณนั้นง่ายมาก
ระวังว่ามันขึ้นอยู่กับ วิธี คุณใช้ Floating Labels ในทางเทคนิค (HTML, CSS, JavaScript) คุณอาจประสบปัญหาความไม่เข้ากันของเบราว์เซอร์ อย่าลืมตรวจสอบ caniuse
