Tags:
Node Thumbnail

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

Get latest news from Blognone

Comments

By: lingjaidee
ContributoriPhoneAndroid
on 18 September 2014 - 19:14 #744027
lingjaidee's picture

มีความท้าทาน > ท้าทาย

;)


my blog

By: plawanja
Android
on 18 September 2014 - 19:44 #744029
plawanja's picture

flat design มีผลดีขนาดนี้ต้องขอบคุณ Microsoft ที่ริเริ่มแล้ว Apple เอาไปทำต่อกลายเป็นกระแสมาถึง Android ด้วยสินะ

By: tukzazaza
ContributorAndroidWindows
on 18 September 2014 - 20:39 #744053 Reply to:744029
tukzazaza's picture

คุ้นๆ ว่า Android จะทำ Flat มาก่อน IOS พักนึงเลยนะครับ

By: ttong on 19 September 2014 - 09:46 #744228 Reply to:744053

ผมก็คุ้นๆ ว่าแบบนี้นะ

By: suotirips
iPhoneWindows PhoneAndroidUbuntu
on 18 September 2014 - 20:52 #744057 Reply to:744029
suotirips's picture

ขอแย้งนิดนะครับ ผมว่า Android น่าจะทำก่อนใครเลยนะ ตั้งแต่ Android 4.0 ICS แล้วมั้ง

By: Thaitop_BN
Windows PhoneUbuntuWindows
on 18 September 2014 - 22:19 #744090 Reply to:744057
Thaitop_BN's picture

ก่อนยังไงครับ นอกจะ ICS จะไม่แบนแล้วยังออกหลัง WP 7 ตั้งปีนึง

By: tukzazaza
ContributorAndroidWindows
on 18 September 2014 - 22:59 #744101 Reply to:744090
tukzazaza's picture

คงหลัง WP7 ครับ แต่ Holo ของ ICS นี่ผมว่า เริ่มมาแนว Flat แล้วนะ เทียบกับ IOS สมัยนั้น

By: pongjun
Ubuntu
on 19 September 2014 - 03:19 #744180 Reply to:744029
pongjun's picture

linux ทำมา 4 ปีแล้วครับ

http://gnome-look.org/content/show.php/Faenza?content=128143

By: pittaya
WriterAndroidUbuntuIn Love
on 18 September 2014 - 19:52 #744030
pittaya's picture

เทคนิคหนึ่งคือการเริ่มต้น service ที่ทำงานหนักๆ เช่นการแคชภาพและวิดีโอ เพื่อให้แอพสามารถเปิดได้เร็ว

ต้นฉบับบอกว่าใช้วิธี lazy-load service พวกนี้ทีหลังนะ ไม่ได้เริ่มต้นตั้งแต่เปิด app


pittaya.com

By: lew
FounderJusci's WriterMEconomicsAndroid
on 18 September 2014 - 20:07 #744032 Reply to:744030
lew's picture

เบลอ ครับ เขียนข้ามไป


lewcpe.com, @wasonliw

By: pexza
AndroidUbuntuWindows
on 18 September 2014 - 21:43 #744078
pexza's picture

มาทำดีตอนที่เลิกใช้ไปแล้ว เฮ้อ ..

ตอนนี้ IG ก็เหมือนตลาดที่ไม่น่าเดิน โพสต์รูปใน Facebook ใน G+ ดีกว่า สบายใจ ~

By: chairedevil
iPhoneAndroidWindows
on 19 September 2014 - 02:52 #744175 Reply to:744078

ผมเคยฟินกับ instagram มากสมัยดารายังไม่บุกครับ

By: Pinery
ContributoriPhoneAndroidIn Love
on 19 September 2014 - 11:36 #744285 Reply to:744175

+1 เลย 555
เมื่อก่อนติดมาก