UI Pattern

เลเบลลอยล่ะล่อง

0

form-animation-_gif_

กรุณาคลิกที่ภาพเพื่อดูภาพเคลื่อนไหว

UI นี้จะช่วยเราแก้ปัญหาการลืมป้ายกำกับในช่องกรอกข้อความ (Label in Textbox) เพราะพอเราเริ่มคลิกที่ช่องกรอกข้อความ บางทีข้อความที่กำกับในช่องจะหายไป เพื่อเตรียมพร้อมให้เรากรอกข้อมูล แต่จะเหมาะกับช่องกรอกข้อความที่ค่อนข้างใหญ่หน่อยนะครับ

label-types

ขอท้าวความนิดหน่อยนะครับ ป้ายกำกับช่องกรอกข้อความ (label) นั้นปกติจะอยู่ด้านนอก ถ้าเป็นอุปกรณ์ที่หน้าจอกว้าง ป้ายก็จะถูกออกแบบให้อยู่ทางด้านซ้าย (รูปซ้าย) แต่ถ้าหน้าจอแสดงผลแคบก็จะอยู่ด้านบนของช่องกรอกข้อความ (รูปกลาง)

และยิ่งในปัจจุบัน เราหลีกเลี่ยงไม่ได้ที่จะต้องแสดงผลฟอร์มบนอุปกรณ์มือถือ ดังนั้นเพื่อลดพื้นที่ในแนวตั้ง จึงมีการออกแบบให้ข้อความกำกับช่องกรอกข้อความไปอยู่ด้านในและใช้สีอ่อนเพื่อบอกให้ทราบว่า user ต้องกรอกข้อมูลประเภทใดในช่องนั้นๆ (รูปขวา)

อันที่จริง ถ้าจะแก้ปัญหาการหลงลืมข้อความกำกับช่องกรอกข้อความ เราเพียงแค่คงข้อความไว้ก่อน ขณะที่ user เริ่มคลิกซ้ายที่ช่องกรอกข้อความ และลบข้อความกำกับเมื่อ user เริ่มพิมพ์ข้อความ เพียงแต่ UI ที่นำเสนอ มันเท่ดีครับ แหะๆ (°∀°)

ข้อมูลจาก https://dribbble.com/shots/1254439–GIF-Float-Label-Form-Interaction

uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ

เว็บนานาชาติ

Previous article

ออกแบบแรงเสียดทาน (Friction Design)

Next article

You may also like

Comments

Leave a reply

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

More in UI Pattern