“Responsive Icon” เทคนิคใหม่ของการแสดงผลเว็บ

เดี๋ยวนี้เว็บไซต์ไหนๆ ก็ออกแบบให้รองรับการแสดงผลในหน้าจอหลายๆ ขนาด หรือที่เราเรียกกันว่า “Responsive Design” ซึ่งเทรนด์นี้เกิดมาพร้อมๆ กับความนิยมในการใช้งานอินเทอร์เน็ตบนอุปกรณ์พกพาที่มีขนาดและคุณสมบัติของการแสดงผลหลากหลายขึ้น

จนหลังๆ มานี้เราจะเห็นได้ว่าเว็บไซต์ทันสมัยๆ ทุกแห่งก็จะมีการปรับการแสดงผลให้เหมาะกับหน้าจอทั้งขนาดเล็กหรือใหญ่ พอเปิดในหน้าจอใหญ่ปั๊บ ภาพก็ใหญ่ตาม หรือเปิดในมือถือ เลย์เอาต์ต่างๆ ที่เห็นก็จะถูกปรับเปลี่ยนให้เหมาะสมกับหน้าจอนั้นๆ ทั้งตำแหน่งของวัตถุในเว็บ ระบบเมนู ขนาดตัวอักษร รวมถึงภาพ ก็ยืดหดได้ตามหน้าจอ

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

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

responsive-icons-animation
ดูจากภาพนะครับ ถ้ามีอะไรแบบนี้ขึ้นมา เว็บคงจะเจ๋งขึ้นเยอะ

และแล้ว ก็มีนักพัฒนาหัวดีจากทีม “Waybury” ที่เล็งเห็นปัญหานี้ และพัฒนาไอ้เจ้า “Iconic” ขึ้นมา แล้วไปขอระดมทุนกับ Kickstarter เพื่อพัฒนาโปรเจกต์ดังกลาว โดยตั้งเป้าไว้ที่ $15,000 แต่ได้ตังค์มาจริงๆ $92,624 !!!!!! (อนุญาตให้กลับไปอ่านตัวเลขใหม่อีกทีครับ ทะลุเป้าไปหลายเท่า แปลงเป็นค่าเงินไทยได้เกือบสามล้านบาท!)


ดูคลิปพรีเซนเทชันของ Iconic ด้านบนเลยครับ

นอกจากเรื่อง Responsive แล้ว เจ้า Iconic นี่ยังเป็นชุดเครื่องมือสำหรับนักพัฒนาเว็บ ที่เอาไอคอนมาเล่นอะไรต่อมิอะไรได้อีกเยอะ เช่น ปรับสี ปรับองค์ประกอบในไอคอน และจัดชุดมาให้ใช้งานอีกเพียบ (ก็ได้ตังค์ไปเยอะแล้วนี่)

สนใจอ่านรายละเอียดได้ที่ designmodo.com/responsive-icons/ ครับ