Instgram ระบุ หน้าจอ flat ช่วยให้ใช้ภาพน้อยลง, โหลดแอพเร็วขึ้น

by lew
18 September 2014 - 11:09

Tyler Kieft ทีมงาน Instagram ออกมาเขียนบล็อกเล่าถึงการออกแบบแอพพลิเคชั่นบนแอนดรอยด์ที่มีความท้าทาย เพราะ Instagram ต้องรองรับอุปกรณ์จำนวนมากทั่วโลก หน้าจอทั้งหมดรวม 27 แบบ ตั้งแต่ 240x320 ไปจนถึง 1080p ในงาน Scale Conference ทางทีมงานจึงไปนำเสนอเรื่องนี้

จุดสำคัญของการออกแบบหน้าจอใหม่ของ Instagram คือ flat design หน้าจอแบบสีเรียบง่าย ที่นอกจากประเด็นความดูดีแล้ว หน้าจอแบบ flat ยังลดปริมาณภาพ (asset) ที่ต้องใช้สร้างหน้าจอ ตัวอย่างเช่น title bar ของ instagram แต่เดิมต้องใช้ภาพ 29 ภาพ แต่หน้าจอแบบใหม่จะใช้ภาพเพียง 8 ภาพ ช่วยลดเวลาโหลดแอพพลิเคชั่นเฉลี่ย 120ms หรือ 10-20% โดยรวมของแอพพลิเคชั่นรุ่นใหม่ใช้ภาพประกอบหน้าจอน้อยลงครึ่งหนึ่ง ลดขนาด apk ไปได้มาก

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

อีกประเด็นที่ Instagram ปรับปรุงอย่างหนักคือระยะเวลาการเปิดแอพ ตอนนี้ Instagram เริ่มต้นทำงานใน 1.5 วินาทีบน Galaxy Y ที่ได้รับความนิยมสูงในตลาดเกิดใหม่ เทคนิคหนึ่งคือการเริ่มต้น service ที่ทำงานหนักๆ เช่นการแคชภาพและวิดีโอ โดยให้โหลด service เหล่านี้ขึ้นมาภายหลัง (lazy loading) เพื่อให้แอพสามารถเปิดได้เร็ว

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

ที่มา - Instagram Tumblr

Blognone Jobs Premium