สำหรับกลุ่มนักพัฒนาแอพพลิเคชันบนสมาร์ทโฟนนั้น หลังจากได้รับ Requirement หรือความต้องการของลูกค้ามาแล้ว ก็จะเริ่มลงมือพัฒนาโปรแกรมด้วยภาษาโปรแกรมสำหรับพัฒนาไม่ว่าจะเป็น XCode สำหรับระบบปฏิบัติการ iOS หรือ Java Android SDK สำหรับระบบปฏิบัติการ Android เอง แต่ก่อนที่เราจะเริ่มลงมือพัฒนานั้น เราจะขาดขั้นตอนหนึ่งไปไม่ได้

ซึ่งเป็นคาบเกี่ยวของการเก็บความต้องการ และการออกแบบหน้าจอ User Interface หรือที่เรารู้จักในนามว่า Wireframe หรือ Mockup สำหรับดีไซน์หน้าจอการทำงานคร่าวๆ ให้ลูกค้า และทีมนักพัฒนาของเรามองเห็นว่าแอพพลิเคชันนี้ เมื่อพัฒนาเสร็จแล้วหน้าตา และการทำงานมันจะออกมาเป็นแนวทางที่ไปในทางเดียวกัน แต่บางครั้งการออกแบบหน้าจอจะให้ดีไซน์ผ่าน Photoshop ให้เห็นเป็น Pre-Design ก็คงเสียเวลาเกินไป จะให้ใช้เครื่องมือพวก PowerPoint นักพัฒนา และผู้ใช้งาน หรือลูกค้าบางคนก็ดูจะมีจิตนาการเอาเสียเลย ดังนั้นผมจึงเสนอทางออกที่ Win-Win สำหรับทุกฝ่ายเลยแล้วกัน โดยครั้งนี้ผมจะพานักวิเคราะห์ระบบ นักออกแบบหน้าจอส่วนต่อประสาน User Interface นักพัฒนา และผู้ใช้งานเบื้องต้นไปรู้จักกับเครื่องมือที่จะช่วยจัดการออกแบบ Wireframe หรือหน้าตา Mockup ของแอพพลิเคชันที่เราจะจัดทำโครงการพัฒนานั้น ออกมาเป็นอะไรที่ดูง่ายเข้าใจ และใช้งานได้ไม่ยากอีกด้วยครับ

เครื่องมือ หรือ Tools สำหรับออกแบบหน้าจอ การทำงานของแอพพลิเคชันที่จะแนะนำต่อไปนี้เป็นเครื่องมือที่ถือว่า ใช้งานง่าย และมีหน้าจอการตกแต่ง การจัดการที่ไม่ซับซ้อน อีกทั้งองค์ประกอบต่างๆ ที่ตัวเครื่องมือเหล่านี้ยกขึ้นมาแสดงผลนั้นก็ล้วนแล้วแต่เป็น ภาพเชิงความหมาย และอาศัยวิธีการทำงานแบบ ลาก และวาง (Drag and Drop) เหมาะกับกลุ่มนักออกแบบหน้าจอแอพพลิเคชันบน Mobile หรือ Mobile Apps ให้สามารถออกแบบหน้าจอแอพพลิเคชันของตนเพื่อเริ่ม และนำเสนอโครงการให้เป็นเรื่องง่ายทีเดียว

Balsamiq

เครื่องมือสร้าง Wireframe ตัวนี้มีจุดเด่นที่แตกต่างกว่า เครื่องมือตัวอื่นๆ ตรงที่แคมเปญการตลาดแบบฮาร์ดเซลล์ของมันครับ คือเจ้า Balsamiq นี้จริงๆเป็นซอฟท์แวร์ที่พัฒนามาบนแพลตฟอร์ม Adobe AIR ให้ติดตั้ง และซื้อลิขสิทธิ์ไว้บนเครื่องคอมพิวเตอร์เดสก์ท็อป แต่ถ้าหากว่าอยากลองเล่นก็สามารถเล่นแบบ Demo ผ่านหน้าเว็บไซต์ ออนไลน์ได้ เครื่องมือของมันมี Featured มากมาย และดูจะสมบูรณ์ที่สุดในบรรดาเครื่องมือสร้าง Wireframe ทุกตัว เพียงแค่ตัว Demo นั้นมีเวลาทดลองใช้ แค่ 7 วันเท่านั้นเองครับ สนใจรายละเอียดก็ลองไปที่ http://balsamiq.com/download

iPhone Mockup

แค่ชื่อของมันก็บอกอยู่แล้วว่าเครื่องมือในการออกแบบ Wireframe ตัวนี้เหมาะสำหรับออกแบบหน้าจอ Mockup ของ iPhone สำหรับหน้าจอของเจ้าเครื่องมือตัวนี้มีรูปแบบให้ รีวิว อยู่ 2 เวอร์ชันคือแบบ หน้าจอแบบ Widget และแบบลายเส้นดินสอวาด ใช้งานได้ดีบนเว็บบราวเซอร์ Firefox และ Safari ส่วนบราวเซอร์ Chrome นั้นก็ถือว่าพอใช้งานได้มีอืดๆ อยู่บางฟังก์ชันครับใครอยากลองใช้ iPhone Mockup สามารถทดสอบกันได้เลยครับที่ http://iphonemockup.lkmc.ch/

iPlotz

iPlotz เป็นโปรแกรมบนเครื่องเดสก์ท็อป ที่พัฒนาขึ้นมาบนแพลตฟอร์มของ Adobe AIR รองรับระบบปฏิบัติการ Windows, Mac และ Linux แต่หน้าจอของเจ้า iPlotz นั้นเหมาะกับการออกแบบหน้าจอของแอพพลิเคชัน และ เว็บสำหรับมือถือ เช่น WAP ทำให้มีความหลากหลาย และเป็นกลาง เป็นอะไรที่เหมาะกับการสร้างแอพพลิเคชันบน iPhone, iPad และ Android มากครับ เวอร์ชันมีทั้งฟรี และไม่ฟรี แต่เวอร์ชันฟรีจะจำกัดจำนวนโครงการ หรือ Project ในการสร้าง Wireframe แต่ถ้าเสียเงินก็จะสร้างได้ไม่จำกัดครับ ทดลองสร้าง Wireframe ด้วย iPlotz ได้ที่ http://iplotz.com/

Droid Draw

เครื่องมือสร้าง Wireframe และ Mockup หน้าจอแอพพลิเคชันบน Mobile ที่เจาะจงกับหน้าจอของแอพพลิเคชันบน Android โดยตรง จุดเด่นคือ เครื่องมือตัวนี้เป็นระบบการทำงานแบบ Web-Based Technology บนแพลตฟอร์มของ JAVA ซึ่งทำให้เจ้า Droid Draw นี้สามารถสร้างชุด Source Code พื้นฐานของหน้าจอในแพลตฟอร์มระบบปฏิบัติการ Android ขึ้นได้ด้วยหลังจากออกแบบมันเสร็จแล้วลองไป http://www.droiddraw.org/

WireframeSketcher

คงจะง่ายดีถ้ามีเครื่องมือสร้าง Wireframe ทีทำงานแบบ Stand-Alone ที่ทำงานบนระบบปฏิบัติการ Windows, Mac และ Linux บนเครื่องเดสก์ท็อป อีกทั้งมีส่วนเสริมให้ปลั๊กอินกับ IDE ตระกูล Eclipse ได้อีกด้วยแต่เสียใจด้วยถ้าคิดว่ามันฟรีครับ ไปทดลองใช้ได้ที่ http://wireframesketcher.com/

Pencil with Android Utils

ดินสอ หรือ “Pencil” คือเครื่องมือพื้นฐานที่เรามักจะหยิบมันมาวาดรูป Wireframe บนแผ่นกระดาษคร่าวๆ เหมือนเมื่อก่อนที่สถาปนิกเค้าทำกัน ตอนนี้มันเป็นซอฟท์แวร์สำหรับออกแบบ Wireframe เรียบร้อยแล้วมาเป็น Extension บนเว็บบราวเซอร์ Chrome และ Firefox เวอร์ชันของเจ้า Pencil นี้มีอยู่ 2 เวอร์ชันคือ Pencil สำหรับออกแบบ Wireframe ทั่วไป http://pencil.evolus.vn/en-US/Home.aspx และ Pencil Android Utils ที่ http://code.google.com/p/android-ui-utils/

Yeblon Android Mockup

ออกแบบ Wireframe ง่ายๆ บนเครื่องมือสร้าง Wireframe ในรูปแบบกราฟิกภาพวาดน่ารักๆ เฉพาะออกแบบแอพพลิเคชันบน Android ลองดูกันหน่อยก็ได้ http://yeblon.com/androidmockup/

Flare Builder

ซอฟท์แวร์ที่พัฒนาขึ้นมาจาก Adobe AIR สำหรับทดลองใช้ฟรี 15 วัน ไว้สร้างหน้าจอ Wireframe หรือออกแบบ Widget บนสมาร์ทโฟน สนใจก็ลองดูทีนี่ครับ http://www.flairbuilder.com/

Designer Vista

ออกแบบหน้าจอ Wireframe ให้ชัดเจนแบบเห็นภาพ กันง่ายๆบนหน้าจอเครื่อง Android คงจะช่วยให้จิตนาการของลูกค้า และเหล่าทีมนักพัฒนาสว่าง และกระจ่างขึ้น แต่ซอฟท์แวร์ตัวนี้ใช้งานได้เฉพาะระบบปฏิบัติการ Windows และโดดเด่นหน้าจอ Android แต่ถ้าใช้บน iPhone ก็โอเคทดลองใช้ 20 วัน http://designervista.com/

MobiOne Studio

ออกแบบ Wireframe เสร็จแล้ว ก็มีหน้าจอเครื่องสมาร์ทโฟนเป็น Simulator แม้ว่ามันจะดีตรงที่มันฟรี แต่ว่ามันก็ออกแบบได้แค่แอพพลิเคชันบน iOS ของ iPhone และ WebOS ของ Palm แค่นั้นเอง แต่ถ้าแค่อยากลองใช้ก็ไปที่นี่ครับ http://www.genuitec.com/mobile/

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