Microsoft Visio สามารถใช้สร้างการออกแบบ GUI ได้หลายประเภท
Microsoft Visio 2010 เป็นเครื่องมือออกแบบกราฟิกที่สามารถใช้เพื่อสร้างไดอะแกรม องค์ประกอบอินเทอร์เฟซ เมนูการนำทาง และวัตถุภาพอื่นๆ มีเครื่องมือมากมายสำหรับสร้างการออกแบบส่วนต่อประสานกราฟิกกับผู้ใช้ (GUI) ไดอะแกรมจะแสดงให้เห็นว่าแอพพลิเคชั่นหรือเว็บอินเตอร์เฟสจะปรากฏในรูปแบบสุดท้ายอย่างไร การพัฒนา GUI ใน Visio นั้นไม่ยากเกินไป และสามารถส่งออกการออกแบบเป็นไฟล์ PDF ได้ ทำตามคำแนะนำสองสามข้อเพื่อเรียนรู้วิธีสร้าง GUI wire-frame mockup พื้นฐานสำหรับเว็บไซต์
ขั้นตอนที่ 1
เปิด Microsoft Visio สร้างภาพวาดใหม่โดยคลิกที่ไอคอนรูปวาดเปล่า คลิกปุ่ม "สร้าง"
วีดีโอประจำวันนี้
ขั้นตอนที่ 2
คลิกหน้าต่าง Shapes ทางด้านซ้ายของหน้าจอ เลือก "รูปร่างเพิ่มเติม" เลือก "Basic Shapes หน่วยของสหรัฐฯ" คลิก "รูปร่างด่วน"
ขั้นตอนที่ 3
สร้างกล่องหัวเรื่องโดยคลิกขวาที่รูปร่างกล่องสี่เหลี่ยมแล้วลากรูปร่างไปยังพื้นที่วาดรูป ปรับขนาดกล่องให้ครอบคลุมประมาณ 15 เปอร์เซ็นต์ของพื้นที่ด้านบนของภาพวาด
ขั้นตอนที่ 4
สร้างกล่องเมนูการนำทางโดยคลิกขวาที่รูปร่างกล่องสี่เหลี่ยมแล้วลากรูปร่างด้านล่างกล่องส่วนหัว ปรับขนาดกล่องให้มีความสูงประมาณครึ่งนิ้วและมีความกว้างเท่ากับกล่องส่วนหัว
ขั้นตอนที่ 5
สร้างกล่องเนื้อหาหลักขนาดใหญ่โดยคลิกขวาที่รูปร่างกล่องสี่เหลี่ยมแล้วลากไปด้านล่างกล่องเมนูการนำทาง ปรับขนาดกล่องให้มีความกว้างเท่ากับส่วนหัวและกล่องเมนูการนำทาง และให้ครอบคลุมด้านล่างของพื้นที่วาดภาพ
ขั้นตอนที่ 6
สร้างกล่องสี่เหลี่ยมสองกล่องโดยคลิกขวาที่รูปร่างกล่องสี่เหลี่ยมแล้วลากรูปร่างไปยังพื้นที่วาดสองครั้ง ปรับขนาดแต่ละกล่องให้พอดีกับครึ่งหนึ่งของกล่องตัวหลัก ย้ายแต่ละกล่องให้พอดีกันภายในกล่องตัวหลัก
ขั้นตอนที่ 7
สร้างช่องข้อความที่แสดงลิงก์การนำทางโดยคลิกที่ปุ่ม "ข้อความ" ที่ด้านบนของแถบนำทาง เลือกพื้นที่ภายในกล่องการนำทางเพื่อสร้างช่องข้อความขนาดเล็กโดยคลิกที่ปุ่มซ้ายของเมาส์ เลื่อนเมาส์เพื่อปรับขนาดฟิลด์ให้มีความยาวที่ต้องการ พิมพ์ข้อความว่า "บ้าน"
ขั้นตอนที่ 8
สร้างช่องข้อความอีกสี่ช่องโดยใช้ปุ่มซ้ายของเมาส์ พิมพ์ "รายการเมนู" ในแต่ละช่อง ปรับขนาดแต่ละช่องให้ตรงกับขนาดของช่อง "Home"
ขั้นตอนที่ 9
เลือกพื้นที่ภายในกล่องส่วนหัวหลัก และสร้างช่องข้อความพร้อมคำอธิบาย "ส่วนหัวหลัก"
ขั้นตอนที่ 10
สร้างกล่องข้อความภายในแต่ละกล่องที่อยู่ภายในพื้นที่กล่องเนื้อหาหลักของภาพวาด ให้คำอธิบายกล่องข้อความแต่ละกล่อง เช่น "พื้นที่เนื้อหา" ปรับขนาดกล่องข้อความแต่ละกล่องให้มีขนาดเท่ากัน เลือกปุ่ม "ตัวชี้" ที่เมนูการนำทางด้านบน
ขั้นตอนที่ 11
บันทึกภาพวาดโดยคลิกที่ "ไฟล์" จากเมนูการนำทางด้านบนและเลือก "บันทึกเป็น"
เคล็ดลับ
แม้ว่า Visio จะไม่ได้มาพร้อมกับแม่แบบหรือวัตถุต้นแบบ GUI แต่บริษัทบุคคลที่สามก็เสนอเครื่องมือดังกล่าวสำหรับการดาวน์โหลด หากคุณต้องการใช้ Visio เพื่อสร้างการออกแบบร่วมกัน โปรดทราบว่ารูปแบบไฟล์รูปวาด Visio ไม่เข้ากันกับแพ็คเกจซอฟต์แวร์การวาดส่วนใหญ่
คำเตือน
ภาพวาดที่ซับซ้อนเกินไปอาจทำให้ Visio ชะลอการรีเฟรชภาพวาดหลังจากทำการเปลี่ยนแปลง
