มัดรวมเครื่องมือสำหรับออกแบบ UI บน Android

เนื่องจากการออกแบบ UI และทำ UI Prototype ใน Android ใช้พลังงานมหาศาลในการออกแบบ ซึ่งต้องใช้เวลามากกว่า 70% ในการทำซึ่งเป็นช่วงเวลาโหดร้ายมาก เพราะ Android Application ที่ดีจะต้องแสดงผลได้ในทุกขนาดของหน้าจอ ซึ่งอุปกรณ์ที่ใช้ระบบปฏิบัติการ Android มีหน้าจอต่างกันเกือบร้อยแบบซึ่งมีทั้งมือถือ, แท็บเล็ต และหน้าจอโทรทัศน์ T_T ทำให้การออกแบบหน้าจอกินเวลามาก ถ้าต้องการแก้ไข UI นี่แทบจะกระอักเลือดกันเลยทีเดียว ครั้งนี้จะมาแนะนำเครื่องมือที่ใช้สำหรับออกแบบและทำ UI Protype ให้เราเห็นภาพและตัดสินใจได้ว่าจะเอา UI แบบไหนแสดงผลในอุปกรณ์ใด และยังสามารถสร้างภาพ Mockup สำหรับแสดงผลบนหน้าจออุปกรณ์ตระกูล Nexus ได้ด้วย เครื่องมือต่างๆ มีดังนี้

  • Android Asset Studio เป็นเครื่องมือสำหรับสร้าง icon, Action bar
  • Android Action Bar Style Generator เป็นเครื่องมือสร้าง theme สำหรับ Action Bar
  • Android Holo Colors Generator สำหรับสร้าง theme
  • Device frame generator เป็นเครื่องมือสร้างภาพอุปกรณ์+ภาพหน้าจอที่เราต้องการเอาไปใส่ สำหรับตระกูล Nexus
  • Pencil GUI Prototyping Tools เป็นเครื่องมือสร้างภาพหน้าจอ (ตัวนี้เป็นโปรแกรมจากเพื่อนบ้านของเรานี่เอง-เวียดนาม)
  • Fluid UI เป็นเครื่องมือสร้างภาพหน้าจอมีหลายระบบปฏิบัติการให้เลือกทั้ง Windows, Windows Mobile, iPhone, iPad และ Android Phone, Android Tablet แถมมีเครื่องมือที่เรียกว่า Fluid Player สำหรับเล่นตัวอย่าง UI บนอุปกรณ์ต่างๆ ได้ เอาไว้ทดสอบ Flow และนำเสนองานได้

ปิดท้ายด้วยเว็บรวม UI สวยๆ เอาไว้เป็นตัวอย่างสำหรับผู้ที่พัฒนา Mobile App อย่าง Android Patterns สำหรับท่านที่สงสัยว่าหน้าจอสวยๆ แปลกๆ ที่ไม่มีเครื่องมือใน ADT นั้นทำยังไงให้องไปค้นหากันได้ที่ Android View รวบรวมเอาเครื่องมือและไลบรารีต่างๆ ไว้มากมายสามารถไปศึกษากันได้ สุดท้ายเป็นเอกสารแนะนำการออกแบบ UI Guideline บน Android จาก nuuneoi แห่งบริษัท หัวลำโพง จำกัด ผู้พัฒนา App MOLOME

เด็กโข่งทำป้าย Digital Signage ตอนที่ 1

หลังจากจบช่วงเด็กโข่ง(อยาก)เขียนเกมส์เมื่อปีที่แล้วก็ไม่ได้เขียน App อะไรอีกเลยบน Android สืบเนื่องจากมีของเล่นจากพี่อดุลย์แห่ง NanoSoft Tech เอา Android Stick มาโชว์ก็เลยอยากลองเล่นบ้าง แต่ไม่มี TV จะเสียบ T_T แถมทิ้งท้ายเรื่อง Digital Signage ไว้นิดหน่อย ก็รู้สึกว่าน่าสนใจดี เพราะ Android Box หรือ Android Stick ราคาถูกมากๆ แถมติดไว้กับ TV จอใหญ่ๆ ได้สบายๆ ติดตั้ง Application จาก Market ก็ได้ เหมือนกับเครื่องคอมพิวเตอร์ดีๆ นี่เอง ซึ่งเราสามารถเล่นได้หลายอย่างตั้งแต่ App ปกติ เกมส์ ดูหนังฟังเพลง หรือประยุกต์เอาไปใช้งานเฉพาะด้าน เช่น Digital Signage เป็นต้น หากคุณเป็นแฟน Android และเป็นสิงห์ Play Store แล้วละก็ คุณจะพบว่า App ที่ทำ Digital Signage บน Android มีหลายตัวมาก มีทั้งแบบฟรีและเสียเงิน ซึ่งครั้งนี้จะมาทำ Digital Signage Solution ในแบบที่ผมอยากได้ก็แล้วกัน ใครนึกภาพไม่ออกว่า Digital Signage เป็นยังไง ผมมีภาพให้ดูครับ

ป้าย Digital Signage ขนาดตึก 2 ชั้น

ป้ายแบบแขวนเป็นจอก่อนเข้าลิฟ

แบบ2 จอ บางมุมมี 3 จอ

เบื้องหลังมี PC เกาะอยุ่หลังจอพร้อมสาย LAN

ผมยกตัวอย่างป้ายของ Aqua Corporation ที่ติดอยู่ที่ศูนย์ราชการ เพราะอยู่ใกล้ตัวมากที่สุด ใครที่เดินไปตามห้างสรรพสินค้าหรือขึ้นรถไฟฟ้าก็จะเจอป้าย Digital Signage แบบนี้เยอะมาก เนื่องจากจัดการกับเนื้อหา ทำได้สะดวก รวดเร็ว และกำหนดจอที่จะแสดงผลได้ (กรณีที่มีหลายจอ) ดังนั้นจึงต้องอาศัยเครื่องคอมพิวเตอร์ขนาดเล็กมาเกาะอยู่ที่หลังของจอเพื่อรับข้อมูลจากเซิร์ฟเวอร์นั่นเอง ครั้งนี้เราจะมาลองทำ Android App เลียนแบบ Digital Signage กัน โดยดึงข้อมูลที่ต้องการแสดงผลจาก Cloud เจ๋งป่ะ 🙂 สำหรับโปรเจคนี้คงไม่รีบร้อนอะไรมากนักเนื่องจากแก่แล้วนอนดึกไม่ได้เพราะตับอักเสบผมก็เลยจะทะยอยเขียน App ตามใจที่อยากจะทำละกัน สำหรับโครงการนี้เป็นโอเพนซอร์สเช่นเคยทั้งตัว Android App, Web App และ Service API ซอร์สโค้ดจะอยู่ที่ GitHub เช่นเคย
 

แนะนำ LibreOffice Tricks & Tips

เมื่อเดือนที่แล้วมีคนมาถามเรื่อง LibreOffice เข้ามาเยอะเนื่องจากโดนจดหมายเข้าตรวจ (Audit) หน่วยงานภาครัฐทำให้หลายแห่งหันมาใช้ LibreOffice แทนการใช้งาน Microsoft Office ด้วยความไม่คุ้นเคยก็เลยติดปัญหาอยู่หลายอย่าง ก็เลยทำวิดิโอ LibreOffice Tricks & Tips มาให้ดูกัน สำหรับท่านที่ต้องการเรียนอย่างจริงๆ จังๆ สามารถติดต่อเข้าเรียนกันได้ที่ OpenSource2Day ครับ 🙂 ยังมีหนังสือคู่มือ LibreOffice ของคุณวสันต์ สามารถซื้อหากันได้ที่ facebook.com/wasankds ถ้าติดปัญหาก็สอบถามจากชุมชนผู้ใช้งาน OpenOffice.org / LibreOffice ได้ และถ้าอยากเรียนการใช้งานซอฟต์แวร์โอเพนซอร์สด้วยตัวเองที่บ้านสามารถลงทะเบียนเรียนด้วยตัวเองที่เว็บไซต์ Open Source Learning on Demand หรือเรียนผ่าน Mobile App ก็ได้ครับ

วิเคราะห์ข้อมูลจาก Xyologic Mobile Analysis

เมื่อวันก่อน SIPA บอกว่าจะมี Edumarket (แอบโฆษณา) สำหรับให้คนไทยได้ขาย Mobile App ซึ่งก็น่าสนใจดีครับ แต่เหนือสิ่งอื่นใดสิ่งที่ผู้ประกอบการอยากได้จาก Market คือตัววิเคราะห์ข้อมูลดีๆ เพื่อใช้ในการพัฒนา App ให้ดีขึ้น ตรงกลุ่มเป้าหมายตามความเป็นจริงมากขึ้น ครั้งที่แล้วผมพาไปดูสถิติจาก Android Developer Console โดยใช้ข้อมูลตัวเองเป็นหลัก (ไปดูข้อมูลของคนอื่นไม่ได้) ครั้งนี้ผมมีข้อมูลการวิเคราะห์จาก Xyologic Mobile Analysis GmbH ทำให้เราสามารถดูข้อมูลสถิติดาวน์โหลดและการวิเคราะห์ในเบื้องต้นได้ทั้งตัว Mobile App และ Publisher ได้ นอกจากนี้ยังสามารถดูข้อมูลการใช้ Mobile App รายประเทศได้อีกด้วย อ้อดูข้อมูลได้เกือบทุก platform น่าสนใจมาก
ลองดูตัวอย่าง ผมชอบ Molome โปรแกรมถ่ายรูปและแต่งภาพพร้อมแชร์ภาพขึ้น Social Network เป็นผลงาน Mobile App ของคนไทยจากบริษัทหัวลำโพง (Hlp International) ก็เลยได้ดูข้อมูลเบื้องต้นดังนี้


อีกบริษัทนึงที่ผมติดตามงานมาตลอดคือ Touchsi พัฒนา App หลายอย่าง App ที่ผมชอบมากคือพุทธวจนะ ข้อมูลเป็นดังนี้

มาดูของผมกันบ้างครับ สไลต์ solo เดี่ยว

ข้อมูลน่าสนใจดีครับ โดยเฉพาะ Rank สูงๆ ที่อยู่ในต่างประเทศ บางทีเราคิดว่า App จะขายได้ในประเทศโน้นประเทศนี้แต่พอเอาเข้าจริงๆ กลับไปดังในประเทศที่เราไม่คาดคิด 🙂

Open Source Learning on Demand

เนื่องจากอัพเกรดเว็บใหม่ก็เลยทำ Mobile App ตัวใหม่ด้วยเลย อยากทำ App รวมวิดีโอแบบนี้มานานแล้วแต่ว่าการทำมันน่าเบื่อมาก แต่ก็ปล่อย App ออกมาเล่นๆ ก่อน 🙂 แล้วค่อยตามแก้ไปเรื่อยๆ ถ้ายังไม่ได้ลงมือเขียนก็จะไม่ได้เขียนซักที 🙂 ตัว App เชื่อมโยงบริการอยู่ 3 บริการ คือ GitHub สำหรับเก็บซอร์สโค้ดของโครงการและรายการวิดีโอ Tutorial ที่อยู่บน Youtube ที่ผมเลือกแล้วว่าดูแล้วมีประโยชน์และเข้าใจง่ายซึ่งผมจะทะยอยใส่เข้าไปเรื่อยๆ หากมี Tutorial ใหม่ๆ ที่น่าสนใจ ตัว Mobile App จะอ่านรายการวิดีโอแล้วส่งไปให้ YQL เพื่อกรองข้อมูลจาก Youtube เพราะ JSON ที่ได้จาก Youtube เยอะเกินกว่าที่ผมจะอ่านและขี้เกียจเขียนตัว Parser ก็เลยให้ YQL จัดการให้ หลังจากได้ข้อมูลแล้ว Mobile App จะสร้าง View ตามที่เราต้องการ Mobile App จะตัวเล็กมากเพราะมีแค่ 2 หน้าเท่านั้น T_T
 

 
ดาวน์โหลด App ได้ที่ Google Play เช่นเคยครับ 🙂

Get it on Google Play