UI Pattern เลเบลลอยล่ะล่อง By uiblogaziner July 4, 20142060 views ShareTweet 0 กรุณาคลิกที่ภาพเพื่อดูภาพเคลื่อนไหว UI นี้จะช่วยเราแก้ปัญหาการลืมป้ายกำกับในช่องกรอกข้อความ (Label in Textbox) เพราะพอเราเริ่มคลิกที่ช่องกรอกข้อความ บางทีข้อความที่กำกับในช่องจะหายไป เพื่อเตรียมพร้อมให้เรากรอกข้อมูล แต่จะเหมาะกับช่องกรอกข้อความที่ค่อนข้างใหญ่หน่อยนะครับ ขอท้าวความนิดหน่อยนะครับ ป้ายกำกับช่องกรอกข้อความ (label) นั้นปกติจะอยู่ด้านนอก ถ้าเป็นอุปกรณ์ที่หน้าจอกว้าง ป้ายก็จะถูกออกแบบให้อยู่ทางด้านซ้าย (รูปซ้าย) แต่ถ้าหน้าจอแสดงผลแคบก็จะอยู่ด้านบนของช่องกรอกข้อความ (รูปกลาง) และยิ่งในปัจจุบัน เราหลีกเลี่ยงไม่ได้ที่จะต้องแสดงผลฟอร์มบนอุปกรณ์มือถือ ดังนั้นเพื่อลดพื้นที่ในแนวตั้ง จึงมีการออกแบบให้ข้อความกำกับช่องกรอกข้อความไปอยู่ด้านในและใช้สีอ่อนเพื่อบอกให้ทราบว่า user ต้องกรอกข้อมูลประเภทใดในช่องนั้นๆ (รูปขวา) อันที่จริง ถ้าจะแก้ปัญหาการหลงลืมข้อความกำกับช่องกรอกข้อความ เราเพียงแค่คงข้อความไว้ก่อน ขณะที่ user เริ่มคลิกซ้ายที่ช่องกรอกข้อความ และลบข้อความกำกับเมื่อ user เริ่มพิมพ์ข้อความ เพียงแต่ UI ที่นำเสนอ มันเท่ดีครับ แหะๆ (°∀°) ข้อมูลจาก https://dribbble.com/shots/1254439–GIF-Float-Label-Form-Interaction