วันพฤหัสบดีที่ 18 ตุลาคม พ.ศ. 2555

การจัดการกับภาพที่ถูกจำกัดรูปทรง

ในงานออกแบบเว็บ และ App เรามักเจอข้อจำกัดด้านพื้นที่ เช่น Banner ที่ต้องเป็นแบนๆ หรือส่วนหัวของเว็บที่ไม่ควรสูงมากนัก ทำให้ไม่สามารถแสดงรูปทั้งรูปได้ จนหลายครั้งเราต้องยอมปรับงานออกแบบของเรา

ตัวอย่างงานออกแบบส่วนหัวของเว็บ

อย่างในตัวอย่างเค้าต้องการแสดงภาพอุปกรณ์เย็บผ้า แต่ภาพเป็นรูปสี่เหลี่ยมเลยต้องจับมาเบียดไว้ทางซ้าย แล้วเอาชื่อเว็บไว้ตรงกลาง

แต่จริงๆ ภาพที่เราเห็นยังพอจะตัดให้เต็มชองได้ โดยเราดูบริบทที่สำคัญของภาพ แล้วเลือกตัดส่วนนั้นออกมา

ตัวอย่างงานออกแบบหัวเว็บที่ปรับแล้ว

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

อีกตัวอย่างหนึ่งคือ Banner ของ Coca-Cola

ตัวอย่าง banner ของ Coca-cola และ ข้อความที่ส่งออกไป

ในตัวอย่างจะเห็นว่าข้อความสำคัญคือทรงของขวด หยดน้ำ และคำว่า Coca-Cola ยังคงเอาไว้ครบใน Banner โดยไม่จำเป็นต้องตัดภาพทั้งขวดมาลง

เทคนิคการตัดภาพ โดยเลือกเอาส่วนที่ช่วยส่งข้อความของเราเอาไว้ ทำให้เรามีอิสระในการจัดการกับภาพมากขึ้น และหลายครั้งช่วยให้เราผ่านข้อจำกัดเรื่องขนาดของหน้าจอ และจำนวน pixel ไปได้

สำหรับใครที่ต้องการรายละเอียด สามารถดูได้จาก video นี้ครับ

Video ของ Before & After เรื่อง Extreme photo cropping

เรื่องของ Graphic Design ก็ถือว่าเป็นเรื่องสำคัญมากๆ ในการทำ UX เพราะใครๆ ก็ชอบของสวยงาม ดังนั้นถ้าอยากให้ผู้ใช้รู้สึกดีก็ควรส่งมอบแต่สิ่งสวยงามให้ผู้ใช้ครับ

ไม่มีความคิดเห็น:

แสดงความคิดเห็น