เริ่มต้นใช้งาน Wireframing โดยใช้ Balsamiq

Wireframing สามารถกำหนดเป็นกิจกรรมในการแสดงภาพเลย์เอาต์ของหน้าจอได้ มีเครื่องมือสร้างโครงลวดจำนวนมากในตลาดปัจจุบัน แต่เครื่องมือที่ง่ายที่สุดและใช้กันอย่างแพร่หลายที่สุดคือ Balsamiq ซึ่งเป็นหัวข้อของเราในวันนี้ แต่ก่อนอื่นมาทำความเข้าใจก่อนว่าทำไมเราถึงต้อง wireframe?
เมื่อพูดถึงการพัฒนาซอฟต์แวร์ สิ่งสำคัญคือต้องรู้ว่าผลิตภัณฑ์ขั้นสุดท้ายจะมีหน้าตาเป็นอย่างไร แม้กระทั่งก่อนที่การพัฒนาจะเริ่มขึ้น การแสดงภาพผลิตภัณฑ์เบื้องต้นนี้เป็นแนวทางสำหรับผู้มีส่วนได้ส่วนเสียทั้งหมด และช่วยในการหลีกเลี่ยงความกำกวมที่อาจเกิดขึ้นในอนาคต
ในสมัยก่อนมีการใช้ข้อความย่อหน้าเพื่อกระตุ้นข้อกำหนดของซอฟต์แวร์

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

ในบทความนี้ เราจะช่วยให้คุณเข้าใจคำถามเช่น:

• • Balsamiq คืออะไร?

• • จะเริ่มต้นกับมันได้อย่างไร?

• วิธีการส่งออก wireframe สุดท้าย/mockup?

Balsamiq คืออะไร?

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

เริ่มต้นกับ Balsamiq

Balsamiq พร้อมใช้งานสำหรับ Windows และ Mac OS และสามารถดาวน์โหลดออนไลน์ ได้ เมื่อคุณดาวน์โหลดเครื่องมือและเปิดขึ้นมาแล้ว คุณจะเห็นหน้าจอดังนี้:

ตามที่แสดงในภาพหน้าจอด้านบน อินเทอร์เฟซผู้ใช้สำหรับ Balsamiq แบ่งออกเป็นสี่ส่วนต่อไปนี้

• • เครื่องนำทาง

• • UI Library

• • สารวัตร

• พื้นที่โครงลวด/พื้นที่

ส่วนที่ไฮไลต์ด้วยสีแดงมีไว้สำหรับสลับระหว่างผู้ตรวจสอบส่วนและข้อมูลโครงการ คุณลักษณะต่างๆ รวมอยู่ในไลบรารี UI แล้ว มาดูกันในเชิงลึก

ห้องสมุด UI

ไลบรารี UI ถูกจัดประเภทตามองค์ประกอบหน้าจอต่างๆ
ให้เราทำความคุ้นเคยกับหมวดหมู่องค์ประกอบหน้าจอต่างๆ ที่มีใน Balsamiq

• • ทั้งหมด - การคลิกที่สิ่งนี้จะแสดงองค์ประกอบ UI ทั้งหมดที่ Balsamiq นำเสนอให้คุณ การเลื่อนในแนวนอนจะทำให้คุณสามารถดูหรือใช้งานได้

• • เนื้อหา - ส่วนนี้ประกอบด้วยสิ่งที่คุณสามารถอัปโหลดและในภายหลังเพื่อใช้ในโครงร่างของคุณ

• • ใหญ่ - ซึ่งรวมถึงองค์ประกอบหน้าจอที่ใหญ่กว่าพอสมควร เช่น ตัวยึดตำแหน่ง หน้าต่างเบราว์เซอร์ iPhone และ iPad

• • ปุ่ม - ส่วนนี้ประกอบด้วยปุ่มควบคุมทั้งหมดที่คุณต้องการในโครงร่างลวด เช่น - ปุ่มการทำงาน ช่องกาเครื่องหมาย ฯลฯ

• • ทั่วไป - ส่วนนี้ประกอบด้วยรูปร่างที่ใช้เพื่อแสดงการโต้ตอบที่พบบ่อยที่สุด

• • คอนเทนเนอร์ - ประกอบด้วยตัวเลือกต่างๆ เช่น Window, FieldSet, Browser ฯลฯ ตามชื่อที่แนะนำ จะรวม Window, FieldSet, Browsers เป็นต้น

• • แบบฟอร์ม - หมวดหมู่นี้มีการควบคุมทั้งหมดที่เกี่ยวข้องกับแบบฟอร์ม เช่น องค์ประกอบอินพุต ปุ่มตัวเลือก ปุ่มส่ง และอื่นๆ

• • ไอคอน - ประกอบด้วยชุดไอคอนที่คุณสามารถใช้เพื่อแสดงถึงการดำเนินการเฉพาะ ตัวอย่างเช่น ไอคอนฟลอปปี้แทนที่จะเป็นปุ่มบันทึก เป็นต้น Balsamiq มีชุดไอคอนฟรีมากมายที่สามารถใช้สำหรับการดำเนินการต่างๆ

• • iOS - มีการควบคุม UI เฉพาะสำหรับ iOS

• • เล ย์เอาต์ - เลย์เอาต์มีความสำคัญอย่างยิ่งเมื่อคุณต้องการเป็นตัวแทนของเพจ/คุณสมบัติพื้นฐาน หมวดหมู่นี้ประกอบด้วยเค้าโครงส่วนใหญ่ เช่น แท็บแนวตั้ง / แนวนอน หีบเพลง ฯลฯ..

• • Markup - ใช้สำหรับเพิ่มความคิดเห็นเกี่ยวกับการควบคุมเฉพาะในโครงร่าง นอกจากนี้ยังมีข้อความเสริมที่ใช้เพื่อแสดงการเชื่อมต่อในหลายสถานการณ์

• • สื่อ - การควบคุม UI ที่เกี่ยวข้องกับสื่อทั้งหมดมีอยู่ในส่วนนี้ซึ่งช่วยในการแสดงภาพ/วิดีโอ/เสียงในโครงร่าง

• • สัญลักษณ์ - นี่คือชุดของส่วนประกอบที่ใช้ซ้ำได้ ซึ่งสามารถลดเวลาในการสร้างส่วนประกอบทั่วไป

• ข้อความ - ตามชื่อ จะมีส่วนควบคุม UI ทั้งหมดที่เกี่ยวข้องกับข้อความ คุณสมบัติต่างๆ เช่น บล็อกข้อความ กล่องคำสั่งผสม แถบลิงก์ ฯลฯ มีอยู่ในหมวดหมู่นี้

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

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

การเชื่อมโยงเพจ

ขั้นตอนนี้จะช่วยให้ Wireframes ของคุณปรากฏขึ้นมาตามลำดับ เช่นเดียวกับที่ปรากฏในเว็บไซต์ใดๆ เพื่อให้บรรลุการนำทางนี้ ให้คลิก แถบลิงก์ที่มุมบน ขวา
ขั้นแรก ให้เราเริ่มต้นด้วยการเชื่อมต่อหน้าแรกกับหน้าผลิตภัณฑ์และบริการ:

• • ไปที่ หน้าแรก

• คลิกที่ แถบลิงค์ ที่มุมขวาบน

อ้างถึง บานหน้าต่างคุณสมบัติ

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

จากรายการดรอปดาวน์ที่แสดง เลือกผลิตภัณฑ์และบริการเพื่อสร้างลิงก์จากหน้าแรกไปยังผลิตภัณฑ์และบริการ ทำซ้ำขั้นตอนเดียวกันสำหรับหน้าอื่นๆ
ศิลปะแห่งการตัดสินใจ: สำหรับผู้จัดการ ผู้นำ และผลิตภัณฑ์

การส่งออก Wireframe

โครงลวดที่คุณเพิ่งสร้างขึ้นจะไม่มีประโยชน์หากคุณไม่สามารถนำเสนอต่อลูกค้า/ผู้ใช้ปลายทางในรูปแบบทั่วไป เช่น PDF หรือ PNG เพื่อจุดประสงค์นี้ Balsamiq ช่วยให้คุณสามารถส่งออกแบบจำลองได้อย่างง่ายดายในรูปแบบใดรูปแบบหนึ่งเหล่านี้
ในตัวอย่างนี้ เรากำลังส่งออกม็อคอัพของเราในรูปแบบ PDF สำหรับสิ่งนี้ ให้คลิกที่ เมนูโครงการ จากนั้นคลิกที่ ส่งออกเป็น PDF
คุณจะได้หน้าจอดังที่แสดงด้านล่าง:

เลือกช่องทำเครื่องหมาย – “แสดงคำแนะนำการเชื่อมโยง”
จากนั้นคลิก ส่งออก เป็น PDF มันจะแสดงป๊อปอัปที่คุณสามารถระบุตำแหน่งที่คุณต้องการส่งออก PDF ความคืบหน้าจะแสดงในแถบความคืบหน้าดังด้านล่าง

เมื่อการส่งออกเสร็จสมบูรณ์จะมีกล่องยืนยัน เมื่อคลิกที่ช่อง คุณจะสามารถดู PDF พร้อมกับการนำทางทั้งหมดที่คุณตั้งค่าไว้
การสร้างผลิตภัณฑ์ที่ใช้งานได้ขั้นต่ำ - เท่าไหร่ที่มากเกินไป?

ห่อ…
ไม่มีการปฏิเสธความสำคัญของ wireframing ในโลกของการพัฒนาแอพพลิเคชั่นในปัจจุบัน พวกเขามีคุณสมบัติมากมายที่ช่วยลดภาระงานโดยรวมของคุณ – ไม่มีเครื่องมือ wireframing ที่ขาดแคลน แต่ Balsamiq เป็นหนึ่งในเครื่องมือไม่กี่ตัวที่ตอบสนองทุกความต้องการของคุณ!

เรียนรู้หลักสูตร MBA ออนไลน์จากมหาวิทยาลัยชั้นนำของโลก รับ Masters, Executive PGP หรือ Advanced Certificate Programs เพื่อติดตามอาชีพของคุณอย่างรวดเร็ว